So far, we’ve seen how we can target elements based on their attributes and states. CSS3 also enables us to target elements based simply on their location in the markup. These selectors are grouped under the heading structural pseudo-classes.
Finally, true responsive images are becoming a reality on the web — in pure HTML, without convoluted hacks. Theelement and a couple of new attributes for the element are behind a flag in Chromium 37 and shipping in Chromium 38 (so coming soon in Opera), in Firefox Nightly and are being implemented in WebKit (although it remains to be seen if Apple will ship it in the next version of Safari).
It started with seeing a recent Pen of Mandy Michael's text effects demos. I'm a very visual creature, so the first thing I noticed was the effect, not the title (which clearly states how the effect was achieved). Instantly, my mind went "blend modes!", which turned out to be wrong.
Before the browser can render content it must process all the style and layout information for the current page. As a result, the browser will block rendering until external stylesheets are downloaded and processed, which may require multiple roundtrips and delay the time to first render. See render-tree construction, layout, and paint to learn more about the critical rendering path, and render blocking CSS for tips on how to unblock rendering and improve CSS delivery.
A collection of built patterns to use as starting points, complete with fallbacks. Remember that you do not need to use these for full page layout, they could as easily be a small component in a design.
This article demonstrates a technique to get content in front of visitors as quickly as possible by asynchronously downloading stylesheets to prevent them from blocking page render.
Anyhoo, I decided it was about time that I behaved like a grown up developer and learned flexbox properly. But rather than read another 10 blog posts, I decided to go straight to the source and read The CSS Flexible Box Layout Module Level 1 Spec.
You should use Skeleton if you're embarking on a smaller project or just don't feel like you need all the utility of larger frameworks. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started. In fact, this site is built on Skeleton and has ~200 lines of custom CSS (half of which is the docking navigation).
Grandstand is a scalable front end architecture and a lightweight Sass framework. Consisting of a collection of common CSS abstractions and utility helper classes, Grandstand allows you to quickly development components in a reusable, performant manner. This library is built and maintained by the BBC Sport team and used by various components on BBC Sport website and within the BBC Live product.
At the beginning of this year I have quit consulting and set out to build GO2CINEMA — Fast, simple and secure way to book cinema tickets in the UK. I have done a splendid job making it fast, simple and secure. Somewhere along the way, I’ve gotten obsessed with the critical rendering path optimization ⚡️.
Code coverage has finally made it out of experiments and into Chrome Canary, meaning that it will soon reach general availability. This is an exciting feature that is useful both when working with JavaScript and CSS, so I thought I’d do a quick demo and explore how it can be helpful.
With all the new features in CSS3, we are now able to build image-less websites. In the past, the use of image was inevitable when it comes to showing gradient colors. Today, it becomes much leaner with the use of CSS3 Gradient Background. In previous posts, we have shown you how to bring CSS3 Gradient into play as a background color in various forms and directions; Linear, Elliptical, and Repeating gradients.
I’ve been using CSS grid (which henceforth will be referred to as Grid) for quite a bit now, and although I often talk about how we can use grid to make all kinds of creative layouts, I’m fully aware that a basic grid is still a design pattern that is very much in demand on the web.
The problem If you want to transition between pages, your current option is to fetch the new page with JavaScript, update the URL with pushState, and animate between the two. Having to reimplement navigation for a simple transition is a bit much, often leading developers to use large frameworks where they could otherwise be avoided. This proposal provides a low-level way to create transitions while maintaining regular browser navigation.
Today we will attempt to describe the different mental models for CSS and JavaScript. Everybody agrees there is a difference, but nobody’s able to define exactly what that difference is. So let’s try.
When I first started learning web development I thought hiding content was simple: slap display: none; onto your hidden element and call it a day. Since then I’ve learned about screen readers, ARIA attributes, the HTML5 hidden attribute, and more!It’s important to ensure our websites are accessible to everyone, regardless of whether or not they use a screen reader, but with this myriad of options, how do we know when to use what?There are four main scenarios where you may wish to hide content:1. Hiding content for everyone, regardless of whether they use a screen reader2. Hiding content for screen readers while showing it to other users3. Showing additional content for screen readers while hiding it from other users4. Hiding content at specific screen sizesLet’s dive deeper into each of those scenarios to learn how to handle them.
Boilerform is a little HTML and CSS boilerplate to take the pain away from working with forms.By providing baseline BEM structured CSS and appropriate attributes on elements: Boilerform gives you a head start building forms in the best possible way with a view to being dropped into most projects.
CSS Module is a CSS file in which all class names and animation names are scoped locally by default. All URLs (url(...)) and @imports are in module request format (./xxx and ../xxx means relative, xxx and xxx/yyy means in modules folder, i. e. in node_modules).
As someone who makes stuff on the web, there are two things that I’ve been seeing quite a bit lately: Web Component discussion and CSS debates. I think that Web Components, or more specifically the Shadow DOM, is poised to solve some long-standing CSS problems. I’m a big fan of Web Components. In fact, I’m just wrapping up a book with Manning Publications now, called Web Components in Action.
If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.Employing algorithmic layout design means doing away with @media breakpoints, “magic numbers”, and other hacks, to create context-independent layout components. Your future design systems will be more consistent, terser in code, and more malleable in the hands of your users and their devices.
Ah yes, CSS. Hardly a week passes without it being the topic of a heated online discussion. It’s too hard. It’s too simple. It’s unpredictable. It’s outdated. Peter Griffin struggles with blinds dot gif.
The objective of the CSS-TAG Houdini Task Force (CSS Houdini) is to jointly develop features that explain the “magic” of Styling and Layout on the web.
One of the most impactful things we can do to improve page performance and resilience is to load CSS in a way that does not delay page rendering. That’s because by default, browsers will load external CSS synchronously—halting all page rendering while the CSS is downloaded and parsed—both of which incur potential delays. Of course, at least a portion of a site’s CSS should be loaded before the page should be allowed to start rendering, and to get that initial CSS to the browser immediately, we recommend inlining (or HTTP2 server-pushing) the CSS. For sites with a small amount of overall, that alone might be enough, but if the CSS is large (say, bigger than 15 to 20kb), it can help performance to split it up by priority. Once split, less-critical CSS should be loaded in the background—AKA asynchronously. In this post, I aim to describe up our preferred way to do that these days, which has actually been around for years.
We’ve had a number of people ask about templates, boilerplates, and styling for HTML 5. Last week, Remy introduced some basic boilerplates for HTML 5, so to keep the momentum going, I’ve modified Eric Meyer’s CSS reset for you to use in your HTML 5 projects.
This article explores the ongoing debate on whether or not web designers and web developers should reset their CSS, sharing the thoughts and opinions of several web professionals.
I remember the first time I was learning CSS, and how I was excited to learn about float and inline display to place elements in the desired layout. I wonder how I would have reacted if a two-dimensional layout system was available at that time. Actually, even now I'm excited about this because it changes everything: the way we write our CSS but also the way we write our markup. With CSS grid it is easier than ever to build responsive, dynamic, and source order independent layouts.
CSS has a weird place on the web today. There’s a lot of polarisation, with the opinion being seemingly split on “CSS sucks” and “CSS rules, learn it better, fools”.
Animations in your web app should run at 60fps. Not always easy to achieve that, and it really depends on what you're trying to do, but I'm here to help. With FLIP.
The new Facebook design started rolling out for users lately, and I got it almost two weeks ago. At first, every UI element was a bit bigger for me but it was a matter of days until I got used to it. In this article, I will talk about all the interesting things I saw.
We've created several minimal iPhone, Android, Lumia and iPad devices in pure CSS to showcase the prototypes our users make on Marvel. Made with love by Oleg.
I've been chasing the idea of using (abusing?) CSS grid to build a interconnected hexagonal grid, where each hexagon fits together seamlessly. An example of this would be a lot of tabletop war games, some board games (Settlers of Catan, for instance), and some computer games (I used to play The Battle for Wesnoth, it uses a system like this).
Let’s have a look CSS @keyframes animations, and specifically about how you can pause and otherwise control them. There is a CSS property specifically for it, that can be controlled with JavaScript, but there is plenty of nuance to get into in the details. We’ll also look at my preferred way of setting this up which gives lots of control. Hint: it involves CSS custom properties.
SpinKit | Simple CSS Spinners
Structural Pseudo-Classes — SitePoint
Dev.Opera — Responsive Images: Use Cases and Documented Code Snippets to Get You Started
Methods for Contrasting Text Against Backgrounds | CSS-Tricks
Optimize CSS Delivery | PageSpeed Insights | Google Developers
filamentgroup/criticalCSS: Finds the Above the Fold CSS for your page, and outputs it into a file
Jen Simmons | Labs
Animista
Beautiful animations using Android ConstraintLayout
Common UI Patterns
Loading CSS without blocking render by Keith Clark
11 things I learned reading the flexbox spec – Hacker Noon
CSS3 Loading Animation
Skeleton: Responsive CSS Boilerplate
bbc/grandstand: BBC Grandstand is a collection of common CSS abstractions and utility helper classes
Reducing CSS bundle size 70% by cutting the class names and using scope isolation
Using the Chrome devtools new code coverage feature
How To Create CSS Gradient Border Colors - Hongkiat
Basic grid layout with fallbacks using feature queries
Pure CSS3 Animated Gradient Background
jakearchibald/navigation-transitions
Specificity Visualizer
position | CSS-Tricks
The CSS transitioncancel event is coming to Chrome and Safari | Web Platform News
kss-node/kss-node: The Node.js implementation of KSS: a methodology for documenting CSS and generating style guides
Pattern Lab | Build Atomic Design Systems
CSS Houdini: JS-in-CSS - @iamvdo
The CSS mental model - QuirksBlog
Did you know that CSS Custom Properties can handle images too? | CSS-Tricks
See No Evil: Hidden Content and Accessibility - Cloud Four
CSS Grid: Floor Plan
leeoniya/dropcss: A simple, thorough and fast unused-CSS cleaner
Parallax Depth Cards
Boilerform
ITCSS: Scalable and Maintainable CSS Architecture - Xfive
css-modules/css-modules: Documentation about css-modules
bradfrost/frontend-guidelines-questionnaire: A one-page questionnaire to help your team establish effective frontend guidelines, so that you can write consistent & cohesive code together.
CSS Grid Generator
Adopt a Design System inside your Web Components with Constructable Stylesheets
Relearn CSS layout: Every Layout
The CSS Mindset | Max Böck - Frontend Web Developer
Houdini Spellbook
Old Typewriter Text Effect
The Simplest Way to Load CSS Asynchronously | Filament Group, Inc.
Component built with --target lib does not persist styles when imported · Issue #1504 · vuejs/vue-cli
HTML5 Reset Stylesheet | HTML5 Doctor
Should You Reset Your CSS?
CSS Grid: illustrated introduction - DEV Community 👩💻👨💻
Keeping it simple with CSS that scales - Andy Bell
Aerotwist - FLIP Your Animations
CSS Findings From The New Facebook Design
98.css - A design system for building faithful recreations of old UIs
13 Pure CSS Mobile Devices from @marvelapp
Building a hexagonal grid using CSS grid - ninjarockstar.dev
How To Create Pure CSS Hexagonal Grids || Codesmite
Responsive grid of hexagons demo
Simple CSS Hexagon
Handy CSS properties for easing functions
AnimXYZ
GitHub - microsoft/Web-Dev-For-Beginners: 24 Lessons, 12 Weeks, Get Started as a Web Developer
Background patterns
Animista
How to Play and Pause CSS Animations with CSS Custom Properties | CSS-Tricks
How to select elements that are not children of other elements in CSS | Stefan Judis Web Development
Smart Tube Map
critical/README.md at master · addyosmani/critical · GitHub
Fun Parallax Scrolling CSS for Matterday
Pure CSS Parallax Websites
CSS Marquee Examples
Keyframes.app
CSS Shorthand Syntax Considered an Anti-Pattern – Harry Roberts – Web Performance Consultant
Beautiful CSS 3D Transform Perspective Examples in 2022 | Polypane
How to do stunning 3D with pure HTML/CSS - DEV Community
CSS :has() Interactive Guide