spaceninja + fridayfrontend   943

The Friction of Web Standards, by Eric Meyer
In March 2017, four major browsers shipped stable, consistent CSS Grid implementations in the span of just three weeks. That's amazing-- but wait, why aren't ALL new feature debuts like that? And why does it take so darned long to ship new features after implementation is begun, like the literal years it took to ship Grid? In this talk, Eric will focus on one of the biggest and least appreciated reasons: the growing friction of specification interaction. He'll not only explore some of the challenges specification authors and implementors face, but also how we all can help overcome that friction and keep the web interoperable.
fridayfrontend  video  css  standards  border-radius 
5 days ago by spaceninja
Pattern Library First: An Approach For Managing CSS
CSS can be hard to manage across a project, especially when you need to include media queries for various breakpoints and fallbacks for older browsers. In this article, we will take a look at using Fractal to manage components which use CSS Grid.
fridayfrontend  css  styleguide  patterns  patternlibrary 
5 days ago by spaceninja
Delivering WordPress in 7KB
I decided to challenge myself to see how efficiently I could package a WordPress website. And so, is born. With its accompanying theme, Susty. I'm rather chuffed to say I managed to get the load of the homepage down to 7KB of data transfer.
fridayfrontend  css  wordpress  sustainability  performance  environmental  themes 
5 days ago by spaceninja
CSS: A New Kind Of JavaScript
A good sign that a technology is not fit for purpose is how much we have to rely on workarounds and best practices to get by. Another sign is just how much code we have to write in order to get simple things done. When it comes to styling, JavaScript is that technology. CSS solves JavaScript’s styling problems, and elegantly. The question is: are you willing to embrace the change, or are you married to an inferior methodology?
fridayfrontend  css  javascript  css-in-js 
5 days ago by spaceninja
What kind of ethics do front-end developers need?
Now that the technology sector of the world is rapidly transforming all of the world’s things into digital things, many have called for more ethics in our field. That is in many instances quite a vague goal, so let’s apply it to one part of digital: front-end development. How can we be more ethical as front-end developers, what kinds of things can we do? I thought I’d try and make a list.
fridayfrontend  css  accessibility  ethics  privacy  codeofconduct  diversity  security 
5 days ago by spaceninja
Mobile Planet (slides)
Slide for Luke's "Mobile Planet" talk, because the video doesn't do a good job of showing them.
fridayfrontend  mobile  design  onboarding  performance  touch  gestures  notifications  slides  stats 
10 days ago by spaceninja
Mobile Planet, by Luke Wroblewski
For the past six years, I've presented a walkthrough of the latest mobile data and design insights and solutions I've been exploring at Google's Conversions event in Dublin. This year's presentation is a data-informed big picture view of our mobile planet, how to design products for it, and why covering on-boarding, performance, touch gestures, and more.
fridayfrontend  video  mobile  design  onboarding  performance  touch  gestures  notifications  stats 
10 days ago by spaceninja
Resilient, Declarative, Contextual
I want to look at three key characteristics of CSS that set it apart from conventional programming languages: it’s resilient; it’s declarative; and it’s contextual. Understanding these aspects of the language, I think, is key to becoming proficient in CSS.
fridayfrontend  css  resilient  declarative  context 
10 days ago by spaceninja
CSS Grid Level 2: Here Comes Subgrid
CSS Grid Level 2 is already in the process of being specified, and the main feature of this level of the spec is to bring us subgrid. In this article, Rachel Andrew explains the new features.
fridayfrontend  css  grids  cssgrid  subgrid 
10 days ago by spaceninja
The Quirks of CSS Grid and Absolute Positioning
It’s quite possible to use CSS positioning on grid items, just as you would with most other elements. There are one or two quirks, however, so let’s take a quick look to make sure you avoid the pitfalls.
fridayfrontend  css  grids  cssgrid  layout  absolute  position 
10 days ago by spaceninja
CSS Grid in IE, Part 2: CSS Grid and the New Autoprefixer
Today I’m going to be tackling the biggest misconception of all: that utilizing the IE implementation of CSS grid is extremely difficult. You can easily use CSS grid in IE right now without having to give it any sort of crappy fallback layout. It really isn't that hard.
fridayfrontend  css  grids  cssgrid  ie  layout  autoprefixer 
10 days ago by spaceninja
CSS Grid in IE, Part 3: Faking an Auto-Placement Grid with Gaps
Today, I’m going step away from CSS grid for a moment to show you a flexbox technique that replicates basic CSS grid auto-placement functionality. This CSS grid replica will even look like a grid-gap has been applied to it. I need to be super clear though: this is not about how to make actual CSS grid auto-placement work in IE.
fridayfrontend  css  grids  cssgrid  ie  layout  grid-gap  auto-placement 
10 days ago by spaceninja
Drawing Images with CSS Gradients
What I mean by "CSS images" is images that are created using only HTML elements and CSS. They look as if they were SVGs drawn in Adobe Illustrator but they were made right in the browser. Let’s take a look at how you can create CSS images that way yourself.
fridayfrontend  css  svg  gradients  backgrounds  images 
10 days ago by spaceninja
The current state of modal dialog accessibility
Until native dialogs are ubiquitous across all major browsers, we’re going to continue to need ARIA to help us make sure modal dialogs are accessible. But, bear in mind, some ARIA features are also relatively new and also require some time to get full support with both browsers and screen readers. Until either native dialogs or ARIA properties reach full support, it is our responsibility to continue to test not only our modal dialogs, but any component we are building, to ensure it provides (and continues to provide) an accessible user experience.
fridayfrontend  css  dialog  modals  accessibility  aria 
10 days ago by spaceninja
Using Sass to Control Scope With BEM Naming
We've taken inspiration from JavaScript to control scope in our BEM components with Sass by using this little snippet at the root: $self: &. With the scope control, we gain flexibility to write clean, organized, BEM driven CSS when we are deep in a modifier or child element.
fridayfrontend  css  sass  bem  self  javascript  this 
10 days ago by spaceninja
The Cost Of JavaScript, by Addy Osmani
As the world build sites that are more heavily reliant on JavaScript, we sometimes pay for what we send down in ways that we can’t always easily see. Addy Osmani explains how and why JavaScript is the most expensive resource your site uses today—especially on mobile. Addy also shares tips for fixing JavaScript performance issues so everything loads quicker. A little discipline can help if you want your site to load and be interactive as soon as possible on mobile.
fridayfrontend  video  javascript  performance 
17 days ago by spaceninja
What is the CSS ‘ch’ Unit?
So however wide the “0” character is in a given typeface, that’s the measure of one ch.  In monospace (fixed-width) fonts, where all characters are the same width, 1ch equals one character.  In proportional (variable-width) fonts, any given character could be wider or narrower than the “0” character.
fridayfrontend  css  ch  typography  units 
17 days ago by spaceninja
CSS Grid in IE, Part 1: Debunking Common IE Grid Misconceptions
This is the first in a three-part series all about how to use CSS grid in a way that will work not only in modern browsers but also in Internet Explorer (IE). Imagine writing CSS grid code without having to write a fallback layout! Many of us think that this is some far off future that is many years away. If the only thing holding you back from that reality is IE11, then you’re in luck! That day is today!
fridayfrontend  css  cssgrid  grids  layout  ie  myths 
17 days ago by spaceninja
How to Use Emojis as Single-Color Icons
Adding to that, icon image resources will need to be fetched by your webpage whereas emojis are simple characters that’re similar to text and are already present in your HTML, making them a better alternative to traditional icon images.
fridayfrontend  css  emoji  icons  text-shadow 
17 days ago by spaceninja
How and Why We Unit Test Our Sass
When design systems are the source of truth and subscribers have easy access to code, it's important that code is well-tested. Lindsey shares how we unit test our Sass and how you can too.
fridayfrontend  css  sass  testing  tests 
17 days ago by spaceninja
FaCSSt—CSS and Performance, by Harry Roberts
Ahh… CSS and performance. Two of my favourite things! But how well do they play together? It depends… In this very matter-of-fact talk, we’ll be looking at all of the different ways CSS can make our websites faster or slower. From the common and perhaps more obvious, to the unusual and obscure ways in which CSS can impact performance for better or worse.
fridayfrontend  css  video  performance 
24 days ago by spaceninja
What Newsletters Should Designers And Developers Be Subscribing To?
If you’ve been looking for a list of email newsletters dedicated to web designers and developers, we’ve got one that is bound to help you keep up with the industry — the most useful news and resources sent directly to your email inbox.
css  cssbasics  newsletters  email  frontend  fridayfrontend 
24 days ago by spaceninja
Don't just copy the @font-face out of Google Fonts URLs
The issue is that Google does fancy Google things here and the contents of that original stylesheet changes based on the browser requesting it.
fridayfrontend  css  fonts  google  webfonts  font-face 
24 days ago by spaceninja
Container Query flow chart
Container Queries don't actually exist yet, so this flowchart of alternative techniques is very helpful.
fridayfrontend  css  containerqueries  mediaqueries  layout  cssgrid  flexbox  resizeobserver  intersectionobserver 
24 days ago by spaceninja
input :not(:placeholder-shown)
If you're getting rid of your `placeholder` attributes, why not consider this clever CSS-only "moving label" pattern?
fridayfrontend  css  forms  labels  placeholder  accessibility  animation 
24 days ago by spaceninja
Don’t Use The Placeholder Attribute
The placeholder attribute contains a surprising amount of issues that prevent it from delivering on what it promises. Let’s clarify why you need to stop using it.
fridayfrontend  css  forms  html  accessibility  labels  placeholder  localization  internationalization 
24 days ago by spaceninja
Here's the thing about "unused CSS" tools
It seems unlikely that this analysis tool can handle all those possibilities. Even with loads of configuration, mock state, and integration testing, it couldn't cover the near-infinite possible permutations of all this.
fridayfrontend  css  tools  unused  critical  lighthouse  performance 
25 days ago by spaceninja
Death to the Boring Design System
Everyday a new design system, style guide, or component library is being made. It is wonderful how easy it is make one now! But we have gotten into era where we do not push the potential of a design system.​ Let’s explore how efforts, like CSS​ Grid, are allowing us to push what a design system does! We will preview what we are doing for a design system that supports 350,000 IBMers.
fridayfrontend  video  css  design  designsystem  patternlibrary  styleguide  css-in-js 
4 weeks ago by spaceninja
Practical Tips for Working with CSS Variables
I’ve been playing around with CSS variables (or custom properties) quite a lot recently and thought I’d share a few tips as I develop a practical strategy for integrating them into my workflow. Including types of variables, scoping, defaults, and preprocessor variables.
fridayfrontend  css  variables  customproperties  defaults  scope  sass 
4 weeks ago by spaceninja
Image Inconsistencies: How and When Browsers Download Images
If you’re making heavy use of background images and, for whatever reason, are not showing all of them for first render, beware that some browsers will go ahead and download them anyway: you might want to look into better strategies for hidden content (e.g. removal from the DOM rather than display: none;).
fridayfrontend  images  performance  lazyload  backgrounds  css  browser 
4 weeks ago by spaceninja
Your Brain on Front-End Development
I know when I look at a design (heck, even if I know I'm not going to be building it), my front-end brain starts triggering all sorts of things I know will be related to the task… Accessibility! Performance! Semantics! Design systems!
fridayfrontend  css  layout  accessibility  patterns  performance  semantics  designsystem  development  design 
4 weeks ago by spaceninja
The Layouts of Tomorrow
I went over to dribbble in search of fresh webdesign ideas - how hard is it to build a non-standard layout, given the modern CSS tools we have today?
fridayfrontend  css  layout  grids  cssgrid 
4 weeks ago by spaceninja
Reflections on building an MVP design system in 3 months
This case study aims to chronicle the creation of our working design system at Linqia. I’ll share insight into the questions we asked, our process for getting started, the tools we used to create and implement the system, and also how we document, maintain, and share the system with our team.
fridayfrontend  css  designsystem  patternlibrary  patterns  design  atomic 
4 weeks ago by spaceninja
Programming with Sass, by Alyssa Ross
Sass is more than a CSS preprocessor — it’s a very powerful programming language. But why would you want to use Sass as a programming language? How can programming with Sass make your life easier? What kind of programming can you do with Sass? How do you go about testing complex Sass code?
fridayfrontend  video  css  sass  programming 
5 weeks ago by spaceninja
Designing Web Content for watchOS
On Monday Apple announced that it was bringing Webkit to the Apple Watch with WatchOS 5. This will allow users to open links from the Mail and Messages apps directly on their watches. Naturally, as web developers, we wonder how this will work with our already responsive websites. Well here’s the basics.
fridayfrontend  css  mobile  watchOS  applewatch  responsive  guidelines 
5 weeks ago by spaceninja
Specificity in :not(), :has(), and :matches()
But how do we calculate the specificity of that whole selector?  Just add up all the pieces?  No.  The Working Group recently decided that the specificity contributed from inside a :not() will be equal to the single selector with the highest specificity.  So given div:not(.one, .two, #navbar) p, the #navbar will contribute 0,1,0,0 to the overall specificity of the selector, yielding a total of 0,1,0,2.  The specificities of .one and .two are ignored.
fridayfrontend  css  specificity  not  has  matches  selectors 
5 weeks ago by spaceninja
Inclusive Components: Cards
Some cards are just illustrated introductions to permalinks like blog posts; others are more autonomous and offer a lot of functionality. In this article, I'll be looking into a few permutations of a simple card component, emphasizing a balance between sound HTML structure and ergonomic interaction.
fridayfrontend  css  inclusive  components  cards  accessibility 
5 weeks ago by spaceninja
How to start with variable fonts on the web
Variable fonts are the font technology made for the digital era. They have the power to bring more typographic richness to the web at a lower file size. But with new possibilities and advantages new challenges and complexity arise. So what’s so hot about the next big thing since the introduction of web fonts (at least to all type nerds) and how can you use it?
fridayfrontend  css  fonts  typography  variablefonts  webfonts 
5 weeks ago by spaceninja
Combining the Powers of SEM and BIO for Improving CSS
Generally, SEM is concerned with high level CSS philosophy whereas BIO is an actual technique to help you write better CSS to achieve SEM. The main purpose of both SEM and BIO is to better handle the CSS specificity which is one of the most important concepts you should understand for CSS.
fridayfrontend  css  sem  bio  scalable  extensible  maintainability  bem  itcss  oocss  frameworks  specificity 
5 weeks ago by spaceninja
Designing for Inclusion with Media Queries
Did you know that media queries aren’t just limited to screen size? This talk will dive into some lesser-known media queries that can help developers and designers create experiences for people browsing the web using assistive technologies.
fridayfrontend  video  css  mediaqueries  featurequeries  inclusive  responsive 
6 weeks ago by spaceninja
Managing focus for accessibility
Single page web apps are awesome but may present interesting accessibility challenges. In particular, when the site loads new content, it needs to be able to inform an assistive technology user that the new content is available, and ideally move focus into the new area.
fridayfrontend  css  accessibility  focus  tabindex 
6 weeks ago by spaceninja
Solving Life’s Problems with CSS
Or: When all you have is a CSS hammer, the world looks like a CSS nail.
fridayfrontend  css  tech  culture  programming  design 
6 weeks ago by spaceninja
Build Multiple Stacking Sticky Sidebars with Pure CSS and Bootstrap 4
This will be a quick and pretty cool tutorial on a neat trick on how to have multiple sticky sidebars that stack without using any JavaScript!
fridayfrontend  css  sticky  sidebars  layout  bootstrap 
6 weeks ago by spaceninja
Colors at scale
We started to question about some aspects of our color palette. And these were the main problems: We had a lot of colors; No instructions about when to use each color; A low understanding of colors in a digital product context; There wasn’t enough contrast.
fridayfrontend  css  design  color  designsystem  contrast 
6 weeks ago by spaceninja
Building a responsive image
I got the idea to build a logo file for our company, that not only reacts to the browser width but instead adapts while respecting its aspect ratio. So you can use it anywhere, and the file itself chooses which version to show depending on the size it’s given.
fridayfrontend  svg  logos  responsive  aspectratio 
6 weeks ago by spaceninja
The [svg] of .svg, by Sara Soueudan
Scalable Vector Graphics, or Documents? Both. SVG may be known more as an image format, perfect for displaying icons and illustrations, including animated ones. But there are other aspects of SVG that make it as powerful as it is, and those aspects stem from its nature as a document format, as well as its graphical nature. In this talk, Sara is going to highlight some SVG's document side and show you how it can be leveraged to improve and optimize the way we deliver content such as text and images for the Web, including SVG itself.
fridayfrontend  video  svg 
7 weeks ago by spaceninja
Dark Theme in a Day
This is a story of how a few new-ish CSS options came together like a bunch of superheroes in a summer blockbuster movie, and allowed for this project to indeed take up one afternoon, and not much more.
fridayfrontend  css  variables  customproperties  themes  dark  night  color  accessibility  contrast 
7 weeks ago by spaceninja
The Slow Death of Internet Explorer and the Future of Progressive Enhancement
Users have more browsers than ever to choose from, yet IE manages to single-handedly tie us to the pre-evergreen past of the web. If developing Chrome-only websites represents one extreme of bad development practice, shackling yourself to a vestigial, obsolete, zombie browser surely represents the other.
fridayfrontend  css  ie  progressive  enhancement 
7 weeks ago by spaceninja
Learning Gutenberg: a 7-Part Series
We have a special long-form series we’re kicking off here totally dedicated to Gutenberg, a major change to the WordPress editor. I’ve invited a dynamic duo of authors to bring you this series, which will bring you up to speed on what Gutenberg is, what it can do for your site, and how you can actually develop for it.
fridayfrontend  wordpress  gutenberg  editors  blocks  javascript 
7 weeks ago by spaceninja
Variable Fonts
A simple resource for finding and trying variable fonts. The goal is to help you become more familiar with variable fonts in a way that isn’t overwhelming, while also providing straightforward info about the font projects, who made them, and where to find more info or get the fonts to use.
fridayfrontend  css  variablefonts  fonts  typography  webfonts  design 
7 weeks ago by spaceninja
Creating The Feature Queries Manager DevTools Extension
In this article Ire explains how she developed the Feature Queries Manager. Find out how this tool can help you support older browsers, and also how to create your own DevTools extensions.
fridayfrontend  css  featurequeries  supports  browsers  plugins  extension 
7 weeks ago by spaceninja
At Least 6 Ways to Win with CSS Modules, by Josh Johnston
Many newcomers to CSS Modules have run into frustration because the strategies they previously relied on now seem unnecessarily complicated. This is no accident; CSS Modules comes with some opinions about CSS and we can learn a lot of useful patterns by following the cowpath it paves. We'll explore these patterns and think out their implications.
fridayfrontend  video  css  modules  opinionated 
8 weeks ago by spaceninja
A resource for learning, creating and evangelizing design systems.
fridayfrontend  css  design  designsystem 
8 weeks ago by spaceninja
A Strategy Guide To CSS Custom Properties
Dynamic properties provide opportunities for new creative ideas, but also the potential to add complexity to CSS. To get the most out of them, we might need a strategy for how we write and structure CSS with custom properties.
fridayfrontend  css  customproperties  variables 
8 weeks ago by spaceninja
Should You Chain or Extend CSS Classes?
CSS modularity relies on composition, which inevitably fattens the HTML. This collateral effect can be a significant rebuttal for many people because of the “bloat” it creates. In this article, we’ll compare two techniques: chaining and extending. We’ll see what they provide and what their shortcomings are so that you can make more thoughtful choices.
fridayfrontend  css  modular  chaining  extends  oocss  bem  smacss  frameworks  maintainability 
8 weeks ago by spaceninja
The Front-End Tooling Survey 2018 - Results
It's very easy to take for granted what tools are being used based on your own knowledge and habits. These results help to give an insight into the current trends in front-end tooling, as well as showing how usage is changing over time by looking at the figures from previous surveys.
fridayfrontend  surveys  tools  css  sass  less  postcss  bootstrap  frameworks  lint  autoprefixer  modernizr  stylelint  smacss  oocss  bem  itcss  suit  atomic  css-in-js 
8 weeks ago by spaceninja
Responsive tables, revisited
The usual idea is turning the table into key-value pairs so that cells become rows and there are only 2 columns total, which fit in any screen. So I wondered, is there any way to create it without duplicating content either in the markup or in the CSS? After a bit of thinking, I came up with two ways, each with their own pros and cons.
fridayfrontend  css  html  accessibility  responsive  tables 
8 weeks ago by spaceninja
What's new in web accessibility (Google I/O '18)
This session will cover new additions to Chrome's DevTools which make finding and debugging accessibility issues much faster. The Accessibility Object Model, a powerful low-level API designed to give developers total control over the accessibility of their sites, will also be discussed.
fridayfrontend  video  accessibility  api 
9 weeks ago by spaceninja
Make Frontend Shit Again
We used to make websites because it was fun and at a point we lost the way.
We need to make dumb shit! Make useless stuff; make the web fun again!
fridayfrontend  html  css  javascript  geocities  shit  fun  dumb 
9 weeks ago by spaceninja
Grid Level 2 and Subgrid
A post about subgrid and the level 2 spec, what is happening and how can you keep track of progress.
fridayfrontend  css  cssgrid  grids  specs  subgrid 
9 weeks ago by spaceninja
Where Lines Break is Complicated. Here's all the Related CSS and HTML.
Say you have a really long word within some text inside an element that isn't wide enough to hold it. A common cause of that is a long URL finding it's way into copy. What happens? It depends on the CSS. How that CSS is controlling the layout and what the CSS is telling the text to do.
fridayfrontend  css  word-break  line-break  text-wrap  hyphens  overflow-wrap  break-word 
9 weeks ago by spaceninja
Things Designers Should Know About SEO In 2018
Here is an overview of what we will be covering in this article: Design mobile first for Google; Structure content for organic visibility; Focus on user intent (not keywords); Send the right signals with internal linking; A crash course on image SEO; Penalties for pop-ups; Say it like you mean it: voice search and assistants.
fridayfrontend  seo  mobile  responsive 
9 weeks ago by spaceninja
What’s Wrong with CSS-in-JS?
As I dive into more articles, tutorials, courses, and projects about CSS-in-JS, I encounter a ton of garbage markup and styles. It’s almost like saying “we’re doing everything in JS” gives developers permission to flush a few decades’ worth of HTML/CSS best practices down the toilet. I see really basic, cringeworthy stuff like inputs without labels, and really hacky styles that look like Dreamweaver generated them. Seeing enough of this stuff makes me question whether CSS-in-JS advocates truly understand CSS as a language or care to preserve hard-earned CSS best practices.
fridayfrontend  css  javascript  css-in-js 
9 weeks ago by spaceninja
What's Right with CSS-in-JS
JavaScript has always been a proving ground. We write code that simulates how we want the web to work. We had dozens of different JavaScript based responsive image solutions before a spec was settled on and adopted by browsers. css-in-js is the development community trying to imagine how CSS should work in the future to solve a specific set of problems.
fridayfrontend  css  javascript  css-in-js 
9 weeks ago by spaceninja
How to use CSS grid today in the real world, by Brenda Storer
In this talk, I’ll not only present live examples of CSS Grid used in production with examples of the different syntax, but I’ll also go over a bit of its backstory, its similarities and differences from Flexbox, and why unlike it's sibling Flexbox, its ready to use right away. I’ll show step by step how you can progressively enhance your site with CSS Grid and either write a bulletproof fallback for older browsers, or still use your existing grid framework as a fallback (yes, even Bootstrap), all with pure CSS, no JavaScript required!
fridayfrontend  css  cssgrid  grids  layout  video  flexbox 
10 weeks ago by spaceninja
Transcript: Intrinsic Web Design with Jen Simmons (The Big Web Show) | Zeldman on Web & Interaction Design
"Intrinsic Web Design is a name that I gave to this new era, because I think we’re really in a new era of layout design… I feel like we need a new word for a new era where we can say, 'Oh, it’s not that float-based thing where everything’s set in widths with using percents. It’s this new set of technologies.'"
fridayfrontend  css  intrinsic  layout  cssgrid  grids  flexbox 
10 weeks ago by spaceninja
Display: Contents Is Not a CSS Reset
Recently I have seen cases of developers using display: contents on lists and headings to remove the margins and padding, and generally to visually do what a CSS reset might do. Essentially, they are using display: contents as a quick and dirty CSS reset. This is dangerous for accessibility.
fridayfrontend  css  displaycontents  accessibility  reset 
10 weeks ago by spaceninja
Obnoxiously Readable Responsive Text with Viewport Units
There have been other incarnations of this style of JavaScript text resizing. But as far as I can tell, we had the option to retire all of these approaches when Viewport Units were well supported in 2012! If CSS can do the job, do the job in CSS. Delete your redundant JavaScripts, everyone!
fridayfrontend  css  typography  viewport  units  responsive 
10 weeks ago by spaceninja
CSS Grid: More flexibility with minmax()
By using minmax() smartly, I can actually do away with the media query altogether. I’ve tried to use minmax() to do a similar thing in the past, but without fully understanding that when I need my central columns (“tracks” in grid terminology) to be flexible, my outer columns need to be fixed, and vice versa. The key with a layout like this is to be explicit with when you want columns to be flexible and others to be fixed.
fridayfrontend  css  cssgrid  grids  layout  mixmax 
10 weeks ago by spaceninja
CSS Blocks
CSS Blocks is a new BEM-style open-source project focused on CSS performance at scale
css-in-js  css  blocks  modular  bem  fridayfrontend  performance  linkedin  components 
11 weeks ago by spaceninja
Behind the Illusions: Impossibly high-performance layout animation by David Khourshid
Have you ever wanted to dynamically animate layouts without sacrificing performance? In this talk, innovative illusions will be revealed that will transform your static user interfaces into lively, intuitive experiences for your users at 60 frames per second. We'll investigate even the most complex animated layouts and discover how certain techniques, such as FLIP, containment, clever transforms, pseudoelements, CSS variables, and more can make layout animations easier and smoother.
fridayfrontend  video  css  layout  animation  performance 
11 weeks ago by spaceninja
Grid to Flex: Flexbox fallbacks for popular UI solutions that use CSS Grid.
CSS grid is AMAZING! However, if you need to support users of IE11 and below, or Edge 15 and below, grid won't really work as you expect. This site is a solution for you so you can start to progressively enhance without fear!
fridayfrontend  css  grids  cssgrid  layout  flexbox  fallback 
11 weeks ago by spaceninja
Creating smooth sequential animations with Sass
In this article I’m going to demonstrate a technique for creating CSS animations using the power of Sass’ for loop. Whether you’re using React, Vue or Angular, these animations can be used in your app.
fridayfrontend  css  sass  animation  performance  sequential 
11 weeks ago by spaceninja
More accessible markup with display: contents
CSS Grid Layout lets you turn an element into a grid, and place the element’s direct children onto it. Given that, it might be tempting to use flatter markup, but less meaning is usually less accessibility. With display: contents, we can place grand children on a grid, which lets us have accessible markup and beautiful layout. Let’s dive into the details!
fridayfrontend  css  grids  cssgrid  layout  displaycontents  accessibility 
11 weeks ago by spaceninja
Using pseudo-elements with CSS Grid
This week I’ve had a couple of scenarios where I’ve needed to build a hero section with a full-width image, a large heading and a translucent sidebar overlaying the image – where the sidebar bleeds to the edge of the viewport but (crucially) the content of the sidebar aligns to what I like to call the “wrapper” grid columns – i.e. the columns of the grid where we actually want to place our content. This seems to be a fairly common occurrence with the designs that are coming my way these days, and it seems like a prime case for using pseudo-elements (::before or ::after) as child items of the grid.
fridayfrontend  css  grids  cssgrid  layout  before  after  pseudo-elements 
11 weeks ago by spaceninja
CSS at Scale: LinkedIn’s New Open Source Projects Take on Stylesheet Performance | LinkedIn Engineering
The current homepage clocks in at 1.9MB of CSS (156KB compressed). After re-building a fully-functional version of the homepage with CSS Blocks, we were able to serve the same page with just 38KB of CSS. To be clear: that's the uncompressed size. After compression, that CSS file weighed in at less than 9KB! And, because CSS Blocks enables code-splitting, we were able to achieve a 94% reduction of our compressed CSS delivered for initial render.
css-in-js  css  blocks  modular  bem  fridayfrontend  performance  linkedin  components 
11 weeks ago by spaceninja
CSS Blocks: High performance, maintainable stylesheets
With css-blocks added to your project, you receive:

💎 One CSS File Per Component
📦 Scoped Styles
🔎 Nearly Non-Existent Runtime (~500b)
🔥 Blazing Fast Stylesheets
🚀 Project-Wide Optimization
🚨 Build Time CSS Errors
🧟 Dead Code Elimination
✨ Object Oriented Inheritance

But, most importantly, CSS Blocks is ⚡️Statically Analyzable.
css-in-js  css  blocks  modular  bem  fridayfrontend  performance  linkedin  components 
11 weeks ago by spaceninja
Hey hey `font-display` | CSS-Tricks
Y'all know about font-display? It's pretty great. It's a CSS property that you can use within @font-face blocks to control how, visually, that font loads. What do you get from it? The ability to control FOUT and FOIT as is right for your project, two things that both kinda suck in regards to font loading.
fridayfrontend  css  typography  webfonts  performance  font-display  fout  foit 
12 weeks ago by spaceninja
« earlier      
per page:    204080120160

related tags

3d  aa  abem  absolute  abstraction  accessibility  accordions  active  adaptive  advice  after  ajax  aliasing  alignment  all  alpha  alt  amazon  amcss  amend  amp  analytics  android  angled  angular  animation  animations  antipatterns  any-link  api  applewatch  apply  architecture  aria  aria-controls  aria-hidden  art  artdirection  ascii  asl  aspectratio  async  atomic  attr  audits  autism  auto  auto-fill  auto-fit  auto-placement  autocomplete  autofill  automation  autoprefixer  await  aws  axe  babel  background  background-clip  background-position  backgrounds  base  beautifiers  before  bem  bestpractices  bezel  billing  bio  blending  blendmodes  blind  bloat  block  blocking  blocks  blur  boilerplate  bookmarklets  books  bootstrap  border-image  border-radius  borders  bower  box-decoration-break  box-shadow  box-sizing  boxmodel  bradfrost  break-word  breakout  breakpoints  breathe  broadband  broccoli  broken  browser  browserify  browsers  buffet  bugs  build  bundler  buttons  calc  calculator  callback  canvas  captions  cards  carousel  cartoons  cascade  cats  centered  ch  chaining  challenge  change  channels  characterentities  charts  cheatsheet  checkboxes  checked  checklist  chriscoyier  chrome  circle  class  classList  clearfix  clienthints  clip  clip-path  code  codeofconduct  codereviews  codesmells  collaboration  color  columns  comics  commas  comments  commonjs  communication  compassion  complexity  components  compositing  compression  connect4  console  contain  containerqueries  content  contenteditable  contents  context  contrast  cookies  counters  creative  creditcards  crisis  critical  cropping  css  css-in-js  css3  css4  cssbasics  cssgrid  cssom  csspaint  csswg  culture  currentcolor  cursors  customizable  customproperties  dark  data  data-url  date  datepicker  dead  debug  debugging  declarative  defaults  defer  delay  design  designsystem  designtokens  desktop  detection  developers  development  devops  devtools  dialog  diamonds  diffs  dinosaurs  direction  director  disabled  discrimination  display  displaycontents  disruption  diversity  documentation  dom  dpi  draft  draplin  drop-shadow  dropcaps  dropdown  drupal  dumb  duotone  durability  dyslexia  ease-in  ease-out  easing  edge  editors  effects  efficiency  elements  ellipse  ellipsis  em  email  emmet  emoji  empty  ems  emulator  engineering  enhancement  entities  env  environmental  eot  ericmeyer  errors  es6  es2015  es2017  eslint  ethics  eventListener  evergreen  example  explicit  export  extends  extensible  extension  fallback  fantasai  fatigue  favicons  featurequeries  features  fecolormatrix  feedback  feminism  fieldset  file  filter  filters  firefox  first-child  first-letter  first-line  fixed  flat  flex-basis  flex-grow  flex-wrap  flexbox  flexible  floats  flow-root  fluid  focus  focus-ring  focus-visible  foft  foit  font-display  font-face  font-size  font-variant  font-weight  fontawesome  fonts  footer  footnotes  formatting  forms  fouc  fout  fr  frameworks  fridayfrontend  frontend  fullbleed  fun  functions  funny  games  generated  generator  geocities  gestures  gifs  git  github  glitch  glyphs  gmail  google  gpu  gradients  graphql  graphs  grid-gap  grids  grunt  guide  guidelines  guides  gulp  gutenberg  gutters  gzip  hacks  hamburger  hanging-punctuation  hardwareacceleration  harryroberts  has  headers  headlines  height  hex  hidden  highcontrast  highlight  hints  history  holygrail  horizontal  houdini  hover  howto  hr  html  html5  http2  httponly  https  hyphens  icons  idiomatic  ie  ie10  ie11  iframes  illustrator  images  implicit  important  imposter  in-range  inclusive  indeterminate  inherit  initial  initial-letter  initial-scale  inline  inline-flex  input  inputs  inset  inspiration  internationalization  intersectionobserver  interviews  intrinsic  intuit  invalid  inverted  ios  iphone  is  itcss  jasmine  java  javascript  jekyll  jenkins  jinabolton  jobs  jokes  jpl  jquery  jspm  karma  kerning  keyboard  knockout  kss  labels  landmarks  lang  language  last-child  layers  layout  lazyload  leadership  leading  learning  legal  legend  less  letter-spacing  level4  library  ligatures  lighthouse  line-break  line-height  lines  linkedin  links  lint  linters  lists  literals  liveregions  loading  local  localization  localoverrides  locks  log  logical  logos  lukewroblewski  mac  macos  main  maintainability  make  management  manifest  maps  margins  mario  mask  masks  masonry  matches  material  math  max  max-width  mcss  media  mediaqueries  medium  meltdown  memes  memory  menu  menus  meta  metrics  mikemonteiro  min  min-width  minmax  misconceptions  mistakes  mix-blend-mode  mix-width  mixins  mixmax  mma  mobile  mocha  mod  modal  modals  modernizr  modular  modules  modulo  moment  motion-path  mouse  mythbusters  myths  names  namespacing  nasa  native  navigation  nesting  netflix  netscape  newsletters  newton  night  node  normalize  not  notch  notifications  npm  nth-child  nth-of-type  numbers  object-fit  object-position  offline  offscreen  offset-path  onboarding  oocss  opacity  opensource  opinionated  optimization  optimizelegibility  optional  order  organization  orphans  osx  otters  out-of-range  outline  outline-offset  overflow  overflow-wrap  overlay  packages  padding  painting  pantsuit  parallax  path  patternlibrary  patterns  payments  performance  photos  php  pinned  pixels  placeholder  placeholder-shown  placeholders  plan  plugins  pointer  polygon  portfolios  position  postcss  pragmatism  pranks  pre  prefixes  preload  preprocessors  prettier  pride  print  priorities  priority  privacy  process  productivity  professional  profile  programming  progress  progressive  project  promises  proportional  pseudo-classes  pseudo-elements  pullrequest  puppeteer  push  pwa  px  qa  quantity  query  querySelector  questions  quotes  radio  ratings  ratios  react  read-only  readability  rebase  reboot  recap  redlining  reduced-motion  redux  refactoring  reference  reflog  reflow  regression  relative  reliability  rem  remote  repaint  required  reset  resilient  resizeobserver  resources  responsive  retina  revert  reviews  ribbons  roadtrips  rolemodels  roles  ruby  rules  rwd  safari  safe  samesite  samsung  sass  scalable  scale  scaling  scope  screenmagnifiers  screenreaders  screenshots  scroll  scroll-snap  scroll-snap-points  scrollbars  security  select  selection  selectors  self  sem  semantics  sensors  seo  sequential  serviceworkers  shadowdom  shadows  shape-outside  shapes  shit  shortcuts  shorthand  shrink-to-fit  sidebar  sidebars  sizes  skiplinks  slack  slides  smacss  small-caps  snap  snook  software  space  speaking  specification  specificity  specs  spectre  speed  speedindex  spinners  sprites  square  squash  srcset  stacking  standards  stars  states  static  statistics  stats  sticky  study  styleguide  stylelint  subgrid  sublime  suffixes  suit  support  supports  surveys  sustainability  susy  svg  svgo  symbols  syntax  system  tabindex  table-layout  tables  tabs  talkback  target  taskforce  tasks  teams  teamwork  tech  templates  terminal  testing  tests  text-rendering  text-shadow  text-wrap  themes  theming  this  tictactoe  tidy  time  timelines  timetravel  tips  titles  tmbg  toggle  toggles  tokens  tools  tooltip  tooltips  toto  touch  towerdefense  tracking  tradeoffs  transforms  transitions  translation  transparent  transpiler  tricks  troubleshooting  truncate  ttf  tutorials  tylersticka  typescript  typography  ucbrowser  uglify  ui  underline  undo  units  unset  unused  usability  use  user-error  ux  valid  validation  variablefonts  variables  vertical  vertical-align  vh  video  viewport  viewport-fit  visibility  visual  visualization  vm  vmax  vmin  vms  voice  voiceover  vue  vw  w3c  wat  watchOS  wcag  webapps  webassembly  webfonts  webkit  webpack  whitespace  width  will-change  windows  woff  word-break  word-wrap  wordpress  work  workflow  wrapping  writing-mode  writingmodes  x11  yandex  yarn  youtube  z-index  zoom 

Copy this bookmark: