Links tagged: css
Reducing CSS bundle size 70% by cutting the class names and using scope isolation
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 ⚡️.
July 17th 2017
bbc/grandstand: BBC Grandstand is a collection of common CSS abstractions and utility helper classes
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.
July 7th 2017
Skeleton: Responsive CSS Boilerplate
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).
July 6th 2017
CSS3 Loading Animation
Nice loading animations
July 1st 2017
11 things I learned reading the flexbox spec – Hacker Noon
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.
June 1st 2017
Loading CSS without blocking render by Keith Clark
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.
May 31st 2017
Common UI Patterns
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.
May 30th 2017
Beautiful animations using Android ConstraintLayout
May 24th 2017
CSS animations on demand
May 22nd 2017
Jen Simmons | Labs
5 Basic Examples of how CSS Grid Works
May 16th 2017
filamentgroup/criticalCSS: Finds the Above the Fold CSS for your page, and outputs it into a file
Finds the Above the Fold CSS for your page, and outputs it into a file
May 16th 2017
Optimize CSS Delivery | PageSpeed Insights | Google Developers
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.
May 10th 2017
Methods for Contrasting Text Against Backgrounds | CSS-Tricks
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.
May 10th 2017
Dev.Opera — Responsive Images: Use Cases and Documented Code Snippets to Get You Started
Finally, true responsive images are becoming a reality on the web — in pure HTML, without convoluted hacks. The <picture> element and a couple of new attributes for the <img> 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).
April 21st 2017
Structural Pseudo-Classes — SitePoint
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.
April 21st 2017
SpinKit | Simple CSS Spinners
Nice square loading spinner
April 6th 2017