#css (1,123 links)
- OpenType features — Typofonderie typofonderie.com
Nice visual run-down of OpenType features.
- TYPEKIT | Using OpenType features in CSS help.typekit.com
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.
- ai/browserslist github.com
Autoprefixer is moving browser list handling to a separate plugin.
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.
Lea Verou makes a good point.
- LivingStyleGuide Gem—easily create front-end style guides livingstyleguide.org
The easiest way to create front-end style guides with Sass and Compass.
- MoOx/postcss-cssnext github.com
`postcss-cssnext` has been deprecated in favor of `postcss-preset-env`.
- 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
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.
- 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
- Style Guide Resources styleguides.maban.co.uk
- csstyle Clean, Simple Styling for the Web csstyle.io
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.
- CSS animations and transitions performance: looking inside the browser | Web Platform Team Blog blogs.adobe.com
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.
- Axiomatic CSS and Lobotomized Owls alistapart.com
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.
- Replacing Radio Buttons Without Replacing Radio Buttons sitepoint.com
- Fluid Width Equal Height Columns | CSS-Tricks css-tricks.com
- Solved By Flexbox — Cleaner, hack-free CSS philipwalton.github.io
Nuts. Interesting.
- Pleeease · Postprocess CSS with ease pleeease.io
Pleeease is a CSS post-processor. It simplifies the use of preprocessors and helps keep stylesheets as small as possible for a better maintenability. This means no more Compass for prefixes, no more rem mixins, and so on. Everything is getting simpler now and almost magic. Pleeease is also a great tool if you want to write plain CSS as it helps support older browsers
- Centering in CSS: A Complete Guide css-tricks.com
- Tools: CSS Testing : tools csste.st
refactoring CSS meant also refactoring our templates — adding more encapsulation and stricter semantics across the board. Now today, rather than having hundreds of one off <IMG> tags with random avatar classes for example, we have a single centralized avatar template, which accepts boolean options to trigger different modifiers like size, style, etc. This makes updating styles easier and implementation detail bugs much less frequent.
- Pattern Lab patternlab.io
Build Atomic Design Systems
Via monospaced.
What we need [instead] is to deliver the minimum CSS required to make the page layout viable. It's impossible to provide one size fits all guidelines as different sites will have different needs. However, this baseline CSS is likely to include the core typography, colours and layout.
I appreciate this isn't easy - it's not something you are likely to be able to do with a Grunt plugin, you are going to have to have an in-depth understanding of your visual design and your CSS and how the two are interrelated. You will need to know what is the absolute minimal core of your visual design and how that is described by CSS. From this you can deliver the CSS that describes this core and the enhanced CSS that completes the visual design.
- Vertically Center Multi-Lined Text | CSS-Tricks css-tricks.com
- t32k/stylestats github.com
- CSS Triggers... csstriggers.com
A definitive reference for what work is triggered by changing various CSS properties.
A CSS-only way to style native selects everywhere.
- SUIT CSS: style tools for UI components suitcss.github.io
Introduction SUIT CSS is a reliable and testable styling methodology for component-based UI development . A collection of CSS packages and build tools are…
- Bounce.js bouncejs.com
bounce.js lets you create tasty CSS3 powered animations in no time. Give it a spin .
- The New CSS3 Relative Font Sizing Units sitepoint.com
- Responsive Web Design Patterns bradfrost.github.io