spaceninja + css   1564

CSS Scroll Snap — How It Really Works
Without this CSS property, if we’ll scroll the list, we need to be gentle with the scrolling and bring the item as close as we can to the boundaries of the container. But with this property, we just need to scroll it a just over the 50% and the browser will complete the scrolling till the position we wanted.
fridayfrontend  css  cssbasics  scroll-snap 
yesterday by spaceninja
To Grid or to Flex?
In this article I want to unpack when and where you might want to use Grid or flexbox, and some reasons for choosing one or the other. What surprised me about reading the responses in the thread was the number of people stating that they would only use Grid for page-level layout, and flexbox for everything else. If you take this as a rule, then you’re severely limiting yourself when it comes to Grid’s power. The main piece of advice I would give is to take every design individually, analyse the options available and don’t make assumptions about which technology you need. Here are some of the questions you could ask yourself when it comes to choosing a layout method.
fridayfrontend  css  cssbasics  grids  layout  cssgrid  flexbox 
yesterday by spaceninja
Quick! What's the Difference Between Flexbox and Grid?
There are a lot of similarities between flexbox and grid, starting with the fact that they are used for layout and much more powerful than any layout technique that came before them. They can stretch and shrink, they can center things, they can re-order things, they can align things... There are plenty of layout situations in which you could use either one to do what we need to do, and plenty of situations where one is more well-suited than the other. Let's focus on the differences rather than the similarities:
fridayfrontend  css  cssbasics  layout  grids  cssgrid  flexbox 
yesterday by spaceninja
Do I have to add a dark mode now?
I thought it’d be a nice, albeit silly experiment to learn what is involved in designing a dark theme for my website. Turned out, it’s not as silly as I thought.
fridayfrontend  css  cssbasics  darkmode  prefers-color-scheme 
yesterday by spaceninja
Position: stuck; — and a Way to Fix It
The shortcomings of position: sticky; when working with overflow — In this article, I want to explore the shortcomings of position: sticky; — specifically how we might be able to think up a creative technique when working with overflows, which causes frustration when working with the native solution.
fridayfrontend  css  cssbasics  sticky  overflow 
yesterday by spaceninja
Where Do You Nest Your Sass Breakpoints?
I love nesting my @media query breakpoints. It's perhaps the most important feature of Sass to me. But what if my element has several sub-elements and the breakpoint affects them as well? There are different approaches, and I'm never quite sure which one I should be doing.
fridayfrontend  css  cssbasics  sass  mediaqueries  nesting 
yesterday by spaceninja
The only reason your CSS fails
We are learning CSS the wrong way… There are four core concepts that I believe, if taught correctly, would save us from 99% of CSS issues: block formatting context, box model, stacking context, and the cascade (particularly specificity).
fridayfrontend  css  cssbasics  blocks  boxmodel  z-index  cascade 
yesterday by spaceninja
The State of CSS Survey
CSS is evolving faster than ever. Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors to help identify the latests trends… and try to bridge the ever-growing “great front-end divide”!
fridayfrontend  css  surveys  culture 
yesterday by spaceninja
SVG Filter Effects: Duotone Images with <feComponentTransfer>
In the previous article in this series I introduced you to the <feComponentTransfer>, and we used it to limit the number of colors in an image to create a poster effect. In this article, we will take a look at how it can be used to create a Photoshop-like duotone effect. We’ll also learn how to use it to control the intensity and contrast of an image’s colors.
fridayfrontend  css  svg  filters  duotones  color  images 
yesterday by spaceninja
Animate a Blob of Text with SVG and Text Clipping
I came across this neat little animation in a designer newsletter. In it, a block of text appears to bleed into view with a swirl of colors, then goes out the same way it came in. It’s a slick effect and one I wanted to recreate in code. The approach I took was to use SVG text as a clip path for an SVG background.
fridayfrontend  css  svg  animation  text  clip-path 
yesterday by spaceninja
Building a modern carousel with CSS scroll snap, smooth scrolling, and pinch-zoom | Read the Tea Leaves
Come on, it’s 2019. Isn’t there a decent way to build a carousel with native browser APIs? As it turns out, there is. My carousel implementation uses a few simple building blocks: 1) CSS scroll snap. 2) scrollTo() with smooth behavior. 3) The <pinch-zoom> custom element.
fridayfrontend  css  javascript  carousel  scroll-snap  scroll  scroll-behavior  scrollTo  pinch-zoom 
yesterday by spaceninja
Slide an Image to Reveal Text with CSS Animations
Pretty neat little animation, right? It’s relatively subtle and acts as a nice enhancement to UI elements. For example, I could see it used to reveal explanatory text or even photo captions. Or, a little JavaScript could be used to fire the animation on click or scroll position to make things a little more interactive.
fridayfrontend  css  cssbasics  animation 
8 days ago by spaceninja
A Guide To CSS Support In Browsers
It can be frustrating when you want to use a feature and discover that it is not supported or behaves differently across browsers. In this article, Rachel Andrew details the different types of browser support issues, and shows how CSS is evolving to make it easier to deal with them.
fridayfrontend  css  cssbasics  support  supports  browsers 
8 days ago by spaceninja
Quick Tip: CSS Triangles
Making a triangle in CSS is quite a common UI task. If you want to build a tooltip or any dropdown menu, it is possible you need one.
fridayfrontend  css  cssbasics  shapes 
8 days ago by spaceninja
Where Do You Learn HTML & CSS in 2019?
The question of how and where to learn CSS is a highly reasonable thing to ask. The answer depends on all sorts of things: how serious you are, your current foundation, what other resources are available to you, what you hope to do with what you learn, and how much time you have, among probably a zillion other things.
fridayfrontend  css  html  cssbasics  learning 
8 days ago by spaceninja
CSS :placeholder-shown
The :placeholder-shown pseudo-clas targets an <input> element's placeholder only when it's shown, and thus I could select just the placeholder but not the input's text:
fridayfrontend  css  cssbasics  placeholders  placeholder-shown 
8 days ago by spaceninja
Applying Styles Based on the User Scroll Position with Smart CSS
By mapping the current scroll offset to an attribute on the html element we can style elements on the page based on the current scroll position. We can use this to build, for example, a floating navigation component.
fridayfrontend  css  javascript  scroll 
8 days ago by spaceninja
Mastering Maps: Build a Flexible Variable System in Sass
Sass maps give you clearer, more flexible variables — learn how to make a map-powered stylesheet with some basic examples.
fridayfrontend  sass  maps  variables  css 
8 days ago by spaceninja
The “C” Is For Accessibility, by Evangelina Ferreira
Screen readers, semantics, label tags, aria and alt attributes… All these things are essential instruments of accessibility; but so are contrast, visibility, pseudo-elements and many others. CSS’s impact on users with disabilities is many times underestimated, which leads to deficiently written code that affects the lives of many of our users. In this talk we will learn how our CSS code affects accessibility and how we can write more responsible stylesheets.
fridayfrontend  video  css  accessibility  contrast 
8 days ago by spaceninja
Learn Web Development in 2019
A guide to launching your career in web development in 2019. I list the required skills and top courses to learn frontend and backend software engineering.
html  css  javascript  training  learning 
8 days ago by spaceninja
Solving a Tricky Layout Problem with CSS Grid
This article is a case study on a particular component with a unique layout and a set of constraints. Building a layout that worked for the large number of requirements, as well as unknown content, required applying lateral thinking and a great deal of problem solving to find the right solution.
fridayfrontend  css  cssbasics  layout  grids  cssgrid  flexbox 
14 days ago by spaceninja
How to use web fonts in CSS
Web fonts have revolutionized site typography during the past decade. Designers have fewer constraints and can implement typefaces which work on all mainstream devices and browsers. In this tutorial, we discuss various techniques and best practices for adding custom fonts to web pages.
fridayfrontend  css  cssbasics  webfonts  typography  fout  foit  font-display 
14 days ago by spaceninja
A Detailed Guide to CSS Animations and Transitions
Read along as this is an extensive excerpt covering the basics of CSS animations and transitions that could immensely help you in achieving the same for your business website.
fridayfrontend  css  cssbasics  animation  transitions  transforms  keyframes 
14 days ago by spaceninja
A look at CSS hyphenation in 2019
Let’s have a look at the browser support of CSS Hyphenation, how to use it today and which feature I would like to see in browsers.
fridayfrontend  css  cssbasics  typography  hyphens  word-wrap  overflow-wrap  hyphenate-limit-chars 
14 days ago by spaceninja
My Grid Layout
My site’s design came through a lot of iterations, including the latest complete rewrite and a partial redesign, but its layout is something I used for a while. In this article, I’ll describe what I tried to achieve with it and how it was re-implemented using CSS Grids.
fridayfrontend  css  cssbasics  layout  grids  cssgrid 
14 days ago by spaceninja
Table Design Patterns On The Web
Tables are a design pattern for displaying large amounts of data in rows and columns, and have not yet seemed to fall out of favor, so let’s take a look at how we can create tables on the web in 2019.
fridayfrontend  css  cssbasics  tables  html  responsive  javascript  accessibility 
14 days ago by spaceninja
CSS Position Sticky - How It Really Works!
CSS position sticky has really good browser support, yet most developers aren’t using it. The reason for that is twofold: First, the long wait for good browser support: It took quite a long time for browser support to happen, and by the time it did the feature was forgotten. The second reason is that most developers don’t fully understand the logic behind how it works, and that’s where I come in.
fridayfrontend  css  cssbasics  position  sticky 
14 days ago by spaceninja
Flexbox.ninja – Solved by Flexbox High Kick
Flexbox is nowaday one of the problem solvers you should master to help you in your working daily habits. Follow those little demonstrations and case studies to learn more about CSS Flexbox Layout, step by step, and become a Flexbox Ninja!
fridayfrontend  css  cssbasics  flexbox  layout  grids 
14 days ago by spaceninja
Firefox DevTools for CSS authors
If you’re a developer, chances are there’s a set of tools you hold near and dear to your heart, and of course, any browser DevTool is numero uno on that list. With Firefox releasing amazing improvements to their DevTools at a rapid rate, it’s a good time to investigate the powerful aspects specifically geared towards CSS authors.
fridayfrontend  css  cssbasics  firefox  devtools 
14 days ago by spaceninja
CSS: From Zero to Hero
CSS defines the way things look on your websites. HTML is your content, JavaScript adds interaction, but the appearance comes down to CSS. CSS is super powerful, and has a ton of awesome stuff built in. This post will take you from introductory syntax through creating layouts and making sites responsive!
fridayfrontend  css  cssbasics 
14 days ago by spaceninja
What is actually CSS-in-JS?
CSS-in-JS refers to a collection of ideas to solve complex problems with CSS. Since it is NOT a particular library, different libs might solve a different subset of problems and use different approaches, depending on their implementation details. However, all implementations have in common that they tackle the problems using APIs instead of convention and they leverage JavaScript as a language.
fridayfrontend  css  cssbasics  javascript  css-in-js 
14 days ago by spaceninja
prefers-color-scheme: CSS Media Query
Wouldn't it be amazing if websites would also go dark or light based on user's system preference? The CSS working group agrees, which is why they've created a prefers-color-scheme media query; a media query that signals what the user's theme preference is and allows you to code your site to match that preference!
fridayfrontend  css  cssbasics  prefers-color-scheme  darkmode 
14 days ago by spaceninja
A Year of Utility Classes
Last year at Mud we adopted a utility-first approach to CSS (also known as atomic CSS). In this article I’ll summarise what I’ve learnt from adopting atomic CSS in an agency context over the past year, and where it might or might not be appropriate to apply it.
fridayfrontend  css  utility  atomic  tailwind  tachyons 
15 days ago by spaceninja
HTML, CSS and our vanishing industry entry points
Everyone is angry about CSS again. I’m not even going to try to summarize the arguments. However it always seems to boil down to the fact that CSS is simultaneously too easy to bother with, yet so hard it needs to be wrapped up in a ball of JavaScript in case it scares the horses.
fridayfrontend  css  html  javascript  drama 
15 days ago by spaceninja
The Many Ways to Change an SVG Fill on Hover (and When to Use Them)
SVG gives us a powerful feature: the ability to manipulate their properties with CSS. Those interactions include changing color on hover states. It sounds like such a straightforward thing here in 2019, but there are actually a few totally valid ways to go about it — which only demonstrates the awesome powers of SVG more.
fridayfrontend  svg  animation  color  hover  fill  css 
15 days ago by spaceninja
Formatting code and pre text
In a recent project, I came across a situation where there were varying lines of text that had to be displayed in the UI. This falls under something that I don’t work with a lot. Also, a couple of the properties have similar names, so I had to double check them to make sure I was styling things correctly (word-break, break-word, etc.). I’ll be talking through the various ways to display text and go a few ways to correct the “bad wrapping” issue. I’ve setup an experimental Codepen.
fridayfrontend  css  cssbasics  pre  word-break  break-word  word-wrap  overflow-wrap  hyphens  white-space 
22 days ago by spaceninja
CSS is a Declarative, Domain-Specific Programming Language
15 years ago, CSS would still be a programming language according the liberal definition laid out here, and now, in 2018, it’s a programming language according to other definitions, too. In it’s current implementation, CSS/HTML is Turing complete, CSS has functions and variables, CSS has math. And it’s only getting more powerful!
fridayfrontend  css  cssbasics  programming 
22 days ago by spaceninja
Building Better Forms™ by not taking away affordances
Don’t fiddle too much with your forms‘ look and feel. A small innocent-looking piece of CSS, even when combined with semantically correct HTML, could leave you with a degraded User Experience and make your forms less Accessible.
fridayfrontend  css  cssbasics  html  forms  accessibility 
22 days ago by spaceninja
3 Useful CSS & HTML Features You Might Have Forgotten About
The inspiration for this article came from running across a tweet from Potch and realizing I had made the exact mistake that was described just a day earlier. It led me to thinking of a couple more CSS & HTML features we often forget about that can be very useful throughout our day-to-day work.
fridayfrontend  css  cssbasics  html  selectors  summary  details  progress 
22 days ago by spaceninja
CSS Specificity
CSS Specificity is the set of the rules applied to CSS selectors in order to determine which style is applied to an element. The more specific a CSS style is, the higher point value it accrues, and the likelier it is to be present on the element's style. There are many benefits of understanding CSS Specificity and leveraging it to your benefit.
fridayfrontend  css  cssbasics  specificity 
22 days ago by spaceninja
SVG Filters 101
Best of all, as you’re going to see in this series, SVG filters are capable of creating Photoshop-grade effects in the browser, using a few lines of code. I hope this series will help demystify and unlock part of SVG Filters’ potential and inspire you to start using them in your own projects.
fridayfrontend  design  css  svg  filters 
22 days ago by spaceninja
2019 CSS Wishlist
In observing several sources of conversation around things people desire in CSS, these seem like the most common asks: Parent queries. Container queries. Standardized styling of form elements. Has/Contains Selectors. Transitions to auto dimensions. Fixed up handling of viewport units.
fridayfrontend  css  containerqueries  parent  forms 
22 days ago by spaceninja
Your CSS Layout Toolkit for 2019, by Rachel Andrew
As we head into the final quarter of 2018, let’s take a look at where we are with CSS Grid Layout, and CSS layout in general. In this talk you will learn the key elements of layout. The things you need to know as you plan your projects now and into the next year. Rachel will take you on a tour of what we have now and what is coming next, with plenty of practical advice and takeaway code examples, so that you can start to use these features in your own work.
fridayfrontend  video  layout  css  grids  cssgrid  flexbox  multicol 
22 days ago by spaceninja
The Great Divide
Let’s say there is a divide happening in front-end development. The divide is between people who self-identify as a (or have the job title of) front-end developer, yet have divergent skill sets.

On one side, an army of developers whose interests, responsibilities, and skill sets are heavily revolved around JavaScript.

On the other, an army of developers whose interests, responsibilities, and skill sets are focused on other areas of the front end, like HTML, CSS, design, interaction, patterns, accessibility, etc.
fridayfrontend  culture  titles  frontend  javascript  css  html 
29 days ago by spaceninja
How Well Do You Know CSS Layout?
The difference between a CSS good experience and a long frustrating one is oftentimes a matter of a few small details. CSS is indeed nuanced. One of the most common areas where I see struggles is layout. Personally, I like to study patterns. I notice that I tend to use a small group of patterns to solve the majority of my layout problems. This article is about those CSS patterns I use to get myself through layout challenges. It is also about approaching situations agnostically, regardless of the CSS methodologies used, whether that’s SMACSS, BEM, or even the hot topic of CSS-in-JS because they all focus on the properties themselves rather than architecture, organization, or strategy.
fridayfrontend  css  layout  cssbasics 
29 days ago by spaceninja
Web Standards: The What, The Why, And The How
Web Standards, and the documentation to support them, provide huge insight into ‘the why’ and ‘the what’ of the world wide web. They are a fantastic resource for any web developer and help people build stuff for the web that is functional, accessible and cross-compatible. In this article, we take a look at the history of Web Standards, how to use them in your work and ways you can get involved in making them.
fridayfrontend  css  cssbasics  standards 
29 days ago by spaceninja
The Complete Guide To SCSS/SASS
You can’t really appreciate the power of Sassy CSS until you create your first for-loop for generating property values and see its advantages. But we’ll start from basic SCSS principles and build upon them toward the end.
fridayfrontend  css  cssbasics  sass 
29 days ago by spaceninja
Understanding the Albatross
This morning, I read Heydon Pickering’s post on switching from a multiple column flexbox layout to a single column layout without an intermediate step. I spent a bunch of time figuring out *why* it works.
fridayfrontend  css  layout  responsive  flexbox  containerqueries 
29 days ago by spaceninja
Keeping a React Design System Consistent Using Visual Regression Testing
Ensuring visual consistency is one of the biggest challenges of working on a UI component library. Since visual regressions in one component can lead to unwanted changes across an entire application, it becomes vital that we test not only our components functionality, but also their visuals. What follows is the story of how we introduced visual regression testing into our React component library that implements our design system.
fridayfrontend  css  react  designsystem  qa  testing 
29 days ago by spaceninja
Disable animations for users who prefer reduced motion
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
fridayfrontend  css  accessibility  animation 
29 days ago by spaceninja
An introduction to CSS Containment
Despite how simple is each of the items in this example, we’re getting a big improvement by using CSS Containment in layout time going down from ~4ms to ~0.04ms which is a huge difference. Imagine what would happen if the DOM tree has very complex structures and contents but only a small part of the page gets modified, if you can isolate that from the rest of the page you could get similar benefits.
fridayfrontend  css  contain  performance  layout 
29 days ago by spaceninja
What CSS Taught Me, by Dan Cederholm
Reflecting on 20 years building websites, Dan shares what CSS taught him. Often, it had little to do with CSS itself, but everything to do with making mistakes, teaching while you're still learning, and that everything we create on the web will eventually disappear. And that's ok.
fridayfrontend  css  video 
29 days ago by spaceninja
CSS Wisdom from Goofus and Gallant
Goofus sneezes his overly specific selectors and !important rules all over the codebase. Gallant carefully follows the low specificity naming conventions of the project and cleans up after his messes.
css  goofus  gallant  comics  satire 
4 weeks ago by spaceninja
Pure CSS Content Filter
By using CSS’ :target pseudo-selector, we can work out what a user has clicked on, and by using the adjacent sibling selector, we can use that user’s action to style subsequent parts of the DOM.
css  target  filters  selectors 
4 weeks ago by spaceninja
It’s 2019 and I Still Make Websites with my Bare Hands
Except for the minimum requirements (a text editor and a local web server), my “process” doesn’t need any special tooling: no compiling, no installation steps, no package management. It’s just me, my text editor, my web server, and understanding the basics of how websites work.
fridayfrontend  css  cssbasics  process  javascript  frameworks 
5 weeks ago by spaceninja
New horizons in CSS: Houdini and the Paint API
The way we write CSS is about to change. No, I don’t mean you have to change how you write your styles, but we as developers are about to get a lot more control. What am I talking about? That would be the CSS Houdini spec and the new browser APIs that are coming out as a part of it.
fridayfrontend  css  houdini  api 
5 weeks ago by spaceninja
Why we need CSS subgrid
There has been a lot of discussion over the last 2 years about the use cases for subgrid, how it should be implemented, and even some debate over whether you even need it. A lot of that discussion was centered around two other approaches that can handle many of the same problems as subgrid: nested grids and display: contents. This article will explore both of those approaches, and I hope to demonstrate that there are still some very valid cases where a subgrid is truly needed, and others where it is not strictly needed, but would make for a much cleaner solution.
fridayfrontend  css  cssbasics  cssgrid  layout  grids  subgrid 
5 weeks ago by spaceninja
New ES2018 Features Every JavaScript Developer Should Know
The ninth edition of the ECMAScript standard, officially known as ECMAScript 2018 (or ES2018 for short), was released in June 2018. Starting with ES2016, new versions of ECMAScript specifications are released yearly rather than every several years and add fewer features than major editions used to. The newest edition of the standard continues the yearly release cycle by adding four new RegExp features, rest/spread properties, asynchronous iteration, and Promise.prototype.finally. Additionally, ES2018 drops the syntax restriction of escape sequences from tagged templates.
fridayfrontend  css  cssbasics  javascript  es6  es2018  regex  rest  spread  async  finally  promises 
5 weeks ago by spaceninja
CSS-only multiple choice quizzing
I followed a link to one of those Guardian end-of-year quizzes on my phone (probably this one), and had answered a few questions before realising that it was working entirely without JavaScript (I have JavaScript disabled on my phone because a) it cuts out most of the ads, b) it cuts out lots of bandwidth and I have a limited data plan, and c) my battery lasts longer because it’s not processing tons of code to show me some text (cough, Medium)).
fridayfrontend  css  cssbasics  quiz  multiplechoice  forms 
5 weeks ago by spaceninja
Sass Techniques from the Trenches
Having been in the web development industry for more than 14 years, I’ve seen and written my fair share of good and bad CSS. When I began at Ramsey Solutions five years ago, I was introduced to Sass. It blew my mind how useful it was! I dove right in and wanted to learn everything I could about it. Over the past five years, I’ve utilized a number of different Sass techniques and patterns and fell in love with some that, to steal Apple’s phrase, just work.
fridayfrontend  css  cssbasics  sass 
5 weeks ago by spaceninja
On the importance of testing with content blockers
I recommend everyone to browse with content blockers turned on. The goal: protection against tracking. Safari and Firefox have good tracking protection features. With more people using these features, we should test our sites with content blockers turned on.
fridayfrontend  css  cssbasics  testing  contentblockers  adblockers  security  layout 
5 weeks ago by spaceninja
Complicated Checkerboard Layouts with CSS Grid & SVGs
I’m so excited when my clients push the boundaries of “normal” web design and allow me to use some of the latest cool CSS available. I was given this square based, checkerboard Gridded design and told to run off and see what I could do. This design presented a lot of issues and it took a lot of upfront thinking, as well as 4 or 5 different routes, before I found the perfect balance between usability, responsiveness, and keeping the design integrity. There are already a lot of tutorials on CSS Grid, but none of them address the issues I was having, especially when it came to keeping everything square, matching with the background checkerboard, and being responsive at the same time (have I broken your brain yet!?).
fridayfrontend  css  cssbasics  layout  cssgrid  grids  svg 
5 weeks ago by spaceninja
Checking if an input is empty with CSS
Yes, it is possible to validate a form with pure CSS, but there are potential problems with validation when whitespace characters are involved.
fridayfrontend  css  cssbasics  empty  forms  validation 
5 weeks ago by spaceninja
Reader Mode: The Button to Beat
What we’re going to discuss is how to keep people like me from hitting that button by relying on this nifty programming language the W3C so wisely gave us. Because if you don’t, all that other stuff—your newsletter signup boxes, your comments, your related articles, your engagement—will be cut away.
fridayfrontend  css  cssbasics  accessibility  readability  readermode 
5 weeks ago by spaceninja
Baseline Rules for Scrollbar Usability
Now that one of the most popular CSS resource sites on the innertubes has implemented styled scrollbars in the browser I think the time is right (or too late?) for me to try to capture a starting point for ensuring they are usable.
fridayfrontend  css  cssbasics  scrollbars  accessibility 
5 weeks ago by spaceninja
Piecing Together Approaches for a CSS Masonry Layout
Masonry layout, on the web, is when items of an uneven size are laid out such that there aren't uneven gaps. I would guess the term was coined (or at least popularized) for the web by David DeSandro because of his popular Masonry JavaScript library, which has been around since 2010. JavaScript library. Nothing against JavaScript, but it's understandable we might not want to lean on it for doing layout. Is there anything we can do in CSS directly these days? Sorta.
fridayfrontend  css  cssbasics  layout  masonry  javascript  flexbox  cssgrid  multicol 
5 weeks ago by spaceninja
When And How To Use CSS Multi-Column Layout
The Multi-column Layout spec is often overlooked as we use Grid and Flexbox. In this article Rachel Andrew explains why it is different to other layout methods, and shows some useful patterns and sites which showcase it well.
fridayfrontend  css  cssbasics  multicol  columns  layout 
5 weeks ago by spaceninja
Toggling Animations On and Off
In this article, we are going to try to make everyone happy independent of what their views on animations might be. We are going to give our users full control over whether they want to see animations or not, and we are going to do that by employing a few cool technical tricks.
fridayfrontend  css  cssbasics  animation  accessibility 
5 weeks ago by spaceninja
The Flexbox Holy Albatross
"Media query breakpoints are anathema to design systems," so Heydon found a way to make Flexbox switch directly between multiple and single column layouts. No media queries; no JS!
fridayfrontend  css  layout  flexbox  mediaqueries  containerqueries 
5 weeks ago by spaceninja
Angular, Autoprefixer, IE11, and CSS Grid Walk into a Bar…
As toolchains grow and become more complex, unless you are expertly familiar with them, it’s very unclear what transformations are happening in our code. Tracking the differences between the input and output and the processes that code underwent can be overwhelming. When there’s a problem, it’s increasingly difficult to hop into the assembly line and diagnose the issue and often there’s not an precise fix.
fridayfrontend  css  angular  autoprefixer  grids  layout  cssgrid  ie11 
5 weeks ago by spaceninja
Stepping away from Sass
I also unintentionally, (at least at first) removed all traces of Sass from my codebase. This was not something I set out to do but the more I looked at my old Sass files the more I questioned whether it was adding value to my site, or just an extra level of complexity and dependency. CSS has evolved over recent years and the problems that lead me to Sass in the first place seem to be less of an issue today.
fridayfrontend  css  sass  variables  customproperties  layout  grids  cssgrid  typography 
5 weeks ago by spaceninja
In Defense of Utility-First CSS
We, as developers, must be the first to embrace change. Looking back at my first reaction towards utility-first CSS, I realize how important it is we keep an open mind instead of rushing to pick a side. It doesn’t matter how experienced we think we are. Experience is great, but it can also make us believe we already have all we need to make judgment calls and don’t need to dive deeper to understand new concepts.
utility  atomic  css  bem  modular 
5 weeks ago by spaceninja
Teaching a Correct CSS Mental Model
We need common core tricks like this for CSS. Not “tricks” in the old sense (like how to fake a gradient border), but mental patterns: ways to frame the problem in our heads, so we can break problems into their constituent parts and notice recurring patterns. Those of us who deeply understand the language do this internally. We need to start working on distilling out these mental patterns we use for understanding layout and positioning and working with relative units, so that we can articulate them to others.
css  css-in-js  learning  teaching 
5 weeks ago by spaceninja
Styling a Web Component
This confused me for a bit here so I'm writing it out while it's fresh in mind. Just because you're using a web component doesn't mean the styles of it are entirely isolated. You might have content within a web component that is styled normally along with the rest of your website. Like this:
webcomponents  css 
5 weeks ago by spaceninja
Simple CSS Animation Tutorial
You can animate any CSS property whose physical position, dimensions, angle or color can be changed. Basic animation is surprisingly simple to implement using keyframes.
fridayfrontend  css  cssbasics  animation 
6 weeks ago by spaceninja
Multi-Line Inline Gradient
The trick there is to set up the padded multi-line background just how you want it with pure white text and a black background. Then, a pseudo-element is set over the whole area with the gradient in the black area. Throw in mix-blend-mode: lighten; to make the gradient only appear on the black area. Nice one.
fridayfrontend  css  cssbasics  gradients  backgrounds  highlight 
6 weeks ago by spaceninja
How To Learn CSS
You don’t need to commit in memorizing every CSS Property and Value, as there are good places to look them up. There are some fundamental things, however, which will make CSS much easier for you to use. This article aims to guide you along your path of learning CSS.
fridayfrontend  css  cssbasics  training 
6 weeks ago by spaceninja
A Quick CSS Audit and General Notes About Design Systems
I’ve been auditing a ton of CSS lately and thought it would be neat to jot down how I’m going about doing that. I’m sure there are a million different ways to do this depending on the size and scale of your app and how your CSS works under the hood, so please take all this with a grain of salt.
fridayfrontend  css  design  audit  maintainability 
6 weeks ago by spaceninja
CSS Grid for Designers
Fast forward six years to the release of CSS Grid in early 2017. This technology removes a lot of the limitations that existed in CSS to date. But CSS Grid is not just a tool for front-end developers; designers can now think about web layout in new ways. This technology advancement is so important for designers to understand, because it means we can think about the right grid for the demands of our content.
fridayfrontend  css  layout  grids  cssgrid 
6 weeks ago by spaceninja
« earlier      
per page:    204080120160

related tags

3d  60fps  abbr  abem  absolute  abstraction  accessibility  accordions  acronyms  acrylic  active  adaptive  adblockers  admin  advice  after  airbnb  ajax  alexa  algorithms  aliasing  align-items  alignment  all  alpha  alt  amcss  analytics  android  angled  angles  angular  animation  animations  answers  antialiasing  antipatterns  any-link  api  apple  applewatch  apply  apps  architecture  aria  arial  arrows  art  artdirection  ascii  aspectratio  astronomy  async  atom  atomic  attr  attributes  audio  audit  audits  auto  auto-fill  auto-fit  auto-placement  autocomplete  autofill  autoprefixer  avengers  awesome  backdrop-filter  background  background-blend-mode  background-clip  background-position  background-size  backgrounds  bars  base  baseline  batman  beautifiers  beep  before  bem  bestpractices  beyonce  bezel  bio  blending  blendmodes  block  block-end  block-start  blocking  blocks  blueprint  blur  boilerplate  bookmarklets  books  boolean  bootstrap  border-box  border-image  border-radius  borders  box-decoration-break  box-shadow  box-sizing  boxmodel  breadcrumbs  break-word  breakout  breakpoints  breathe  broken  browser  browsers  bugs  bulletproof  buttons  caching  calc  calculator  camelcase  cameras  campaignmonitor  canvas  carbon  cards  carousel  cartoons  cascade  casper  cats  centered  ch  chaining  challenge  characterentities  charts  cheatsheet  checkboxes  checked  checklist  children  chrome  ci  circle  clamp  class  cleaning  clearfix  clienthints  clip  clip-path  clone  code  codeofconduct  codepen  codereviews  codesmells  codezen  collapse  color  colorblind  columns  comics  commas  comments  communication  compass  compatibility  complexity  components  compositing  compression  condensed  conferences  conic-gradient  connect4  consistency  console  contain  containerqueries  content  contentblockers  contenteditable  contents  context  contrast  controls  conventions  cookies  corners  cortana  counters  creditcards  critical  cropped  css  css-in-js  css3  css4  cssbasics  cssgrid  cssmodules  cssom  csspaint  csswg  culture  currentcolor  cursors  customelements  customizable  customproperties  dancederholm  dark  darkmode  dashboard  data  date  datepicker  dead  debug  debugging  decisions  declarations  declarative  default  defaults  defer  del  delay  demos  depthoffield  design  designsystem  designtokens  details  detection  developers  development  devtools  diagrams  dialog  diamonds  diffs  dinosaurs  direction  disabled  disney  display  displaycontents  diversity  dl  documentation  dom  draft  drama  drop-shadow  dropcaps  dropdown  drupal  dumb  duotone  duotones  durability  ease-in  ease-out  easing  edge  editorconfig  editors  edwardtufte  effects  efficiency  elements  ellipse  ellipsis  em  email  emmet  emoji  emoticons  empathy  empty  ems  emulator  engineering  enhancement  entities  env  environmental  environmentvariables  eot  ericmeyer  error  errors  es6  es2015  es2018  ethanmarcotte  ethics  events  evergreen  ex  example  excerpts  exclusions  experiments  explicit  extends  extensible  extension  fallback  falsehoods  fantasai  faq  faqs  favicons  featurequeries  features  feedback  feminism  file  fill  filter  filters  finally  firebug  firefox  first-child  first-letter  first-line  fitty  fix  fixed  fixtext  flat  flex-basis  flex-grow  flexbox  flexible  flip  floats  flow-root  flowtype  fluid  focus  focus-ring  focus-visible  focus-within  foft  foit  font-display  font-face  font-feature-settings  font-size  font-variant  font-variant-numeric  font-weight  fontdeck  fonts  footer  footnotes  format  formatting  forms  fouc  foundation  fout  fr  frame  frameworks  free  fridayfrontend  frontend  full  fullbleed  fullscreen  fullstack  fun  functional  functions  funny  gadgets  gallant  galleries  games  gender  generated  generator  generic  geocities  ghost  gifs  github  glamerous  glitch  glyphs  gmail  goofus  google  gpu  gracefuldegredation  gradients  graphql  graphs  grid-gap  grids  groupon  grunt  guidelines  guides  gulp  gutenberg  gutters  gzip  hack  hacks  hamburger  haml  handbook  hanging-punctuation  hardwareacceleration  harrypotter  harryroberts  has  hdtv  headers  headings  headlines  height  helvetica  hex  hidden  highcontrast  highlight  hints  hiring  history  holygrail  horizontal  houdini  hover  hoverintent  howto  hr  hsl  hsla  html  http2  httponly  husky  hyphenate-limit-chars  hyphens  icons  idiomatic  ie  ie6  ie10  ie11  iframes  images  imperative  implicit  import  important  in-range  inception  inclusive  indeterminate  infographics  inherit  inheritance  initial  initial-letter  initial-scale  inline  inline-end  inline-flex  inline-start  input  inputmode  inputs  ins  inset  inspiration  internationalization  interpolation  intersectionobserver  interviews  intrinsic  intuit  invalid  inverted  ios  ipad  iphone  is  isolation  italics  itcss  java  javascript  jenkins  jokes  jquery  justify  kbd  kerning  keyboard  keyframes  khoivinh  knockout  kss  labels  lang  language  last-child  layers  layout  lazyload  leadership  leading  learning  legacy  length  less  letter-spacing  lettering  level4  library  ligatures  lightbox  lighthouse  limits  line-break  line-clamp  line-height  linelength  link  linkedin  links  lint  lint-staged  linters  lists  liveregions  loader  loaders  loading  local  localization  locks  log  logic  logical  lolcats  lonelyplanet  luminosity  mac  mailchimp  maintainability  maintenance  management  maps  margins  mario  mariobros  mariokart  marquee  mask  mask-image  masks  masonry  matches  matchmedia  material  math  max  max-length  max-lines  max-width  mcss  media  mediaqueries  medium  meltdown  memes  memory  menu  menus  meta  metrics  microsoft  min  min-width  minmax  mistakes  mittromney  mix-blend-mode  mix-width  mixin  mixins  mixmax  mma  mnemonics  mobile  mod  modal  modals  modernizr  modifiers  modular  modules  modulo  motion-path  mouse  mozilla  multicol  multicolumns  multiple  multiplechoice  mythbusters  myths  names  namespacing  native  navigation  nested  nesting  netflix  newsletters  newton  night  nike  node  normalize  not  notch  notifications  nowrap  npm  nth-child  nth-last-child  nth-of-type  numbers  numeric  object-fit  object-position  offcanvas  offscreen  offset  offset-path  ol  only  oocss  opacity  opensource  opentype  opinionated  optimization  optimizelegibility  optional  options  order  organization  orphans  otf  out-of-range  outline  outline-offset  overflow  overflow-wrap  overlay  overscroll-behavior  padding  pagespeed  painting  panic  parallax  parent  path  patternlibrary  patterns  percentages  percy  performance  phantom  photos  php  picture  pinch-zoom  pixels  placeholder  placeholder-shown  placeholders  planets  plugins  png  podcasts  pointer  polyfills  polygon  port  position  postcss  powerpoint  pragmatism  pranks  pre  prefers-color-scheme  prefixes  preload  preprocessors  presentation  prettier  pride  primer  print  priority  privacy  process  professional  programming  progress  progressive  project  projectmanagement  promises  properties  proportional  pseudo-classes  pseudo-elements  punctuation  push  pwa  px  qa  quality  quantity  query  questions  quickreference  quiz  quotes  radial  radio  random  ratings  ratios  react  read-only  readability  readermode  reboot  recap  reduced-motion  redux  refactoring  reference  reflow  refresh  regex  regression  relative  reload  rem  repaint  required  research  reset  resilient  resized  resizeobserver  resolutions  responsive  rest  retina  retro  revert  reviews  rgb  rgba  rhythm  ribbons  ripple  roadmaps  roadtrips  rolemodels  root  rotate  rotating  rotation  round  ruby  rules  rulesets  rwd  safari  safe  safe-area-inset  samesite  sass  satire  scalable  scale  scaled  scaling  school  scifi  scope  screenreaders  screenshots  script  scroll  scroll-behavior  scroll-snap  scroll-snap-points  scrollbars  scrollTo  security  select  selection  selectors  self  sem  semantics  sequential  setproperty  settimeout  sexism  shadowdom  shadows  shape-image-threshold  shape-inside  shape-margin  shape-outside  shapes  shit  shortcuts  shorthand  sidebar  sidebars  simplebits  siri  sizes  skew  skills  slack  slanted  slides  slopy  smacss  small-caps  smileys  smooth  snap  snippets  snook  software  solarsystem  sourcemaps  space  spacing  speaking  specification  specificity  specs  spectre  speed  spinners  splitting  spread  sprites  srcset  stacking  standards  stars  starterkit  starwars  states  status  sticky  stripe  stripes  study  style  styled-components  styleguide  stylelint  subgrid  sublime  subpixel  suffixes  suit  summary  support  supports  surveys  sustainability  susy  svg  symbols  syntax  system  tabindex  table-layout  tables  tabs  tachyons  tailwind  target  taskforce  teaching  teams  teamwork  tech  television  templates  terminal  testing  tests  tetris  text  text-overflow  text-rendering  text-shadow  text-wrap  textarea  textfill  textfit  themes  theming  this  tictactoe  tiling  timetravel  timezones  tinting  tips  titles  tmbg  toggle  toggles  tokens  tools  tooltip  tooltips  toto  touch  tracking  training  transforms  transitions  transparent  trapezoids  travis  tricks  triggers  trim  troubleshooting  truncate  ttf  tumblr  tuning  tutorials  twitter  typekit  typescript  typesetter  typography  ufocss  ui  ul  underlines  underscores  units  universal  unix  unset  unused  urbanairship  usability  use  user-error  utf8  utilities  utility  utilties  ux  vader  valid  validation  values  vanilla  variablefonts  variables  vector  vendors  venn  vertical  vertical-align  vh  video  viewport  viewport-fit  virtualassistants  visibility  visualization  visualtesting  vm  vmax  vmin  vscode  vue  vw  w3c  warn  watchOS  wcag  webapps  webassembly  webcomponents  webfonts  webink  webkit  webpack  westworld  white-space  whitespace  width  will-change  windows  woff  word-break  word-wrap  wordpress  workflow  wraith  wrap-flow  wrap-through  wrapping  writing-mode  writingmodes  wrong  x11  yarn  yepnope  youdontneed  youmightnotneed  z-index  zeldman  zen  zipcodes  zoom 

Copy this bookmark:



description:


tags: