#css (940 links)
- Grid by Example gridbyexample.com
- Flexbox in the Real World planningforaliens.com
- Subtle Click Feedback Effects | Codrops tympanus.net
- Atomic Design by Brad Frost atomicdesign.bradfrost.com
- CSS Vocabulary apps.workflower.fi
Because you kind of forget after a few years.
- Making with Dough | Making Money Advice making.moneyadviceservice.org.uk
<blockquote>Over the last year, we’ve been putting together a reusable component library for use on our site. It’s called Dough and it’s now powering nearly all of our common UI elements across a suite of around twenty five tools, calculators and websites. It’s completely open source and available for you to use too.</blockquote>
- Color Picker - Explore Colors for HTML and CSS hexcolortool.com
- davidtheclark/postcss-simple-mixin github.com
<blockquote>A PostCSS plugin to enable simple mixins in CSS (no arguments, no nesting).</blockquote>
- CSS animations performance: the untold story greensock.com
<blockquote>There are some interesting (and surprising) performance implications of using CSS animations that aren't widely known.</blockquote>
Read the comments.
- Using CSS transforms developer.mozilla.org
<blockquote>By modifying the coordinate space, CSS transforms change the position and shape of the affected content without disrupting the normal document flow. This guide provides an introduction to using transforms.</blockquote>
- CSS Content Filter | CodyHouse codyhouse.co
<blockquote>Research indicates that SVG images served as an image sprite display faster than SVG images as data URIs. But how much faster? And is it worth your time? If it is, how do we actually produce the SVG sprites? This post looks at different data on the sprite versus data URI question and how to configure a couple of automated Grunt tasks to produce SVG image sprites and fall back PNG sprites (rather than data URIs) to provide resolution independent interface icons if you so chose.</blockquote>
- Quick Left | Reports on Internet Performance reports.quickleft.com
<blockquote>This survey downloaded CSS files from over 8,000 domains and aggregated some data about how CSS is being used and written. I think this can be useful to drive conversations forward about how to organize, think about, and manage larger CSS projects, as well as to look at how the web is evolving.</blockquote>
- Flexbox Tutorial sketchingwithcss.com
- Normalizing Cross-browser Flexbox Bugs — Philip Walton philipwalton.com
- Thinking beyond “Scalable CSS” - The dot Post thedotpost.com
<blockquote>Nicolas explains how good components empower designers and engineers by letting them think only about their inputs and outputs, not their internal complexity.</blockquote>
- Experiment: Flexbox Adventures chriswrightdesign.com
- SC5 Styleguide styleguide.sc5.io
<blockquote>Informative and easily navigable live styleguide which can be edited directly in the browser.</blockquote>
- Pattern Library | MailChimp ux.mailchimp.com
- Poor Man's Styleguide | A frontend styleguide for the pragmatic poormansstyleguide.com
<blockquote>A quick-and-dirty frontend styleguide, designed to be copied and pasted into your CMS. Why? You're not Twitter Bootstrap. You don't have the time or money to make a custom fancy-pants dynamic CSS pattern-library. And that's OK. You have other fish to fry.</blockquote>
- OpenType features — Typofonderie typofonderie.com
Nice visual run-down of OpenType features.
- TYPEKIT | Using OpenType features in CSS help.typekit.com
<blockquote>OpenType features are like secret compartments in fonts. Unlock them and you’ll find ways to make fonts look and behave differently in subtle and dramatic ways. Not all OpenType features are appropriate to use all of the time, but some features are critical for great typography.</blockquote>
- ai/browserslist github.com
Autoprefixer is moving browser list handling to a separate plugin.
- The 62.5% Solution? | Tracy Rotton taupecat.com
<blockquote>the whole idea of converting pixels to ems is pointless. Use ems where you need something to scale with the font size of the component, rems for something that scales with the base font-size and pixels where you need an absolute value that doesn’t depend on the font-size whatsoever etc. Different units have different purposes. </blockquote>
Lea Verou makes a good point.
- LivingStyleGuide Gem—easily create front-end style guides livingstyleguide.org
<blockquote>The easiest way to create front-end style guides with Sass and Compass.</blockquote>
- PostCSS: the Future after Sass and LESS ai.github.io
Why postprocessors are better than preprocessors. So there.
- Refining The Way We Structure Our CSS At Trello blog.trello.com
- A Maintainable Style Guide - Ian Feather ianfeather.co.uk
<blockquote>Crucially, if you’re rendering templates to a Style Guide and you want it to be maintainable then they can’t just be identical to your application templates, they need to be the exact same templates. This is easier said than done.</blockquote>
- Building our first pattern library - FutureLearn about.futurelearn.com
- Formalize CSS - Teach your forms some manners! formalize.me
- Dropdown Default Styling | CSS-Tricks css-tricks.com
Icon fonts have a few nasty problems that icon font makers rarely make you aware of. Here’s a few of these problems...
- Style Guide Resources styleguides.maban.co.uk
- csstyle Clean, Simple Styling for the Web csstyle.io
<blockquote>A modern approach for crafting beautifully maintainable stylesheets. The csstyle method is implemented using a set of SASS mixins that make your CSS readable and semantic, generate your selectors for you, and automatically handle things like specificity and nesting. </blockquote>
- CSS animations and transitions performance: looking inside the browser | Web Platform Team Blog blogs.adobe.com
<blockquote>We’ll explore how browsers handle CSS Animations and CSS Transitions, so you can develop intuition around whether an animation is likely to perform well.</blockquote>
- Axiomatic CSS and Lobotomized Owls alistapart.com
<blockquote>Despite its irreverent name and precarious form, the lobotomized owl selector is no mere thought experiment for me. It is the result of ongoing experimentation into automating the layout of flow content. The owl selector is an “axiomatic” selector with a voracious purview.</blockquote>
- Replacing Radio Buttons Without Replacing Radio Buttons sitepoint.com
- CSS display:table-cell child width bug in Firefox and IE carsonshold.com
Nnng.
- Fluid Width Equal Height Columns | CSS-Tricks css-tricks.com
- Solved By Flexbox — Cleaner, hack-free CSS philipwalton.github.io
Nuts. Interesting.