About normalize.css Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset. Normalize.css is currently used in some form by Twitter Bootstrap, HTML5 Boilerplate, GOV.UK, Rdio, CSS Tricks, and many other frameworks, toolkits, and sites. Overview Normalize.css is an alternative to CSS resets. The aims of normalize.css are as follows: Preserve useful browser defaults rather than erasing them.Normalize styles for a wide range of HTML elements.Correct bugs and common browser inconsistencies.Improve usability with subtle improvements.Explain the code using comments and detailed documentation. It supports a wide range of browsers (including mobile browsers) and includes CSS that normalizes HTML5 elements, typography, lists, embedded content, forms, and tables. Despite the project being based on the principle of normalization, it uses pragmatic defaults where they are preferable.
Designing CSS Layouts With Flexbox Is As Easy As Pie Advertisement This article is an updated excerpt of the chapter “Restyle, Recode, Reimagine With CSS3″ from our Smashing Book #3, written by Lea Verou and David Storey. — Ed. Flexible box layout (or flexbox) is a new box model optimized for UI layout. As one of the first CSS modules designed for actual layout (floats were really meant mostly for things such as wrapping text around images), it makes a lot of tasks much easier, or even possible at all. Flexbox’s repertoire includes the simple centering of elements (both horizontally and vertically), the expansion and contraction of elements to fill available space, and source-code independent layout, among others abilities. Flexbox has lived a storied existence. There are, however, some caveats. When you specify that an element will use the flexbox model, its children are laid out along either the horizontal or vertical axis, depending on the direction specified. Example: Horizontal And Vertical Centering (Or The Holy Grail Of Web Design) <!
CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example. In other words, this is a starting point, not a self-contained black box of no-touchiness. If you want to use my reset styles, then feel free! Previous Versions v1.0 (200802) Acknowledgments Thanks to Paul Chaplin for the blockquote / q rules.
scottjehl/picturefill Five simple steps to designing grid systems - Part 5 – September 19th, 2005 – It’s been a while, but this is the final part in my series ‘Five Simple Steps to designing Grid Systems’. Flexible vs Fixed. Lets’s start by briefly examining Fixed and Flexible, or Fluid designs. They both have their merits. Fixed width designs are, well, just easier to produce. Flexible width designs scale to the user’s resolution, and therefore the browser window. However, they both also have the down sides such as fixed layouts generally scale badly and flexible layouts tend to look very wide and short. Flexible grids As discussed the first few parts of this series, grid system design deals in fixed measurements - the media size, the type size and ultimately the grid size. I’ve been giving flexible width a lot of thought over the past few weeks in preparation for writing this article. Adaptive Grid Systems Ideally grid systems should be designed around the type size. The grid elements adapt to the user’s changes, andThe grid must retain it’s orginal proportions
Aspects & Reference (speaker website) Can I use... Support tables for HTML5, CSS3, etc Sass vs. LESS vs. Stylus: Preprocessor Shootout Wielding the true power of a CSS preprocessor is an adventure. There are countless languages, syntaxes, and features, all ready for use right now. In this article, we will be covering the various features and benefits of using three different preprocessors—Sass, LESS, and Stylus. Preprocessors produce CSS that works in all browsers. CSS3 preprocessors are languages written for the sole purpose of adding cool, inventive features to CSS without breaking browser compatibility. The most important part of writing code in a CSS preprocessor is understanding the syntax. Sass and LESS both use the standard CSS syntax. As you may have noticed, this is just regular CSS, which compiles perfectly in both Sass and LESS. It's important to note that Sass also has an older syntax, which omits semicolons and curly brackets. The syntax for Stylus is much more verbose. Using different variations in the same stylesheet is also valid, so the following will compile without errors.
Box Sizing The "box model" in CSS works like this: width + padding + border = actual visible/rendered width of box height + padding + border = actual visible/rendered height of box It's a little weird, but you get used to it. In IE 6 and earlier, when in "quirks mode," the box model was treated differently. width = actual visible/rendered width of box height = actual visible/rendered height of box The border and padding values moved inward, cutting into the width/height of the box rather than expanding it. It was weird quirk to have to deal with, although the fix was usually as easy as setting a proper DOCTYPE and getting out of quirks mode. The mind bending continues with the modern implementation. If you wanted to ensure the box kissed the edges of the parent, but still use a 100% width declaration, you'd have to set the child divs width to 476px. This <div> pseudo markup only takes us so far, because the answer of course is to not use a 100% width declaration. I would love a different box model!
CSS3 Animation Cheat Sheet - Justin Aguilar How it works The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated. The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that's IE 10). Using CSS3 @keyframes, you don't have to worry about positioning the element to accomodate the animations - it will animate into place. Also for users with older browsers, the animated element will be visible and in place, even if the animation doesn't trigger. Add the animation stylesheet to the <head> element of your webpage: Replace css with the name of the directory where the animation stylesheet is. Add an animation class to the element you want animated: Replace slideUp with the desired animation class. For entrance animations, you need to make them invisible by adding the visibility: hidden property to the animated element: Adding effects
A Dao of Web Design What Zen was to the 70’s (most famously with motorcycle maintenance), the Tao Te Ching was to the 90’s. From Piglet and Pooh to Physics and back, many have sought sense in applying the Tao Te Ching to something (the Tao of Physics), or something to the Tao Te Ching (the Tao of Pooh). It can be a cheap trick, but lately it has struck me that there is more than a little to be understood about web design by looking through the prism of the Tao. Article Continues Below Daoism is a philosophy, like Buddhism, a way of living, of being in the world, which stems from a text of great antiquity, the Tao Te Ching, whose 81 “chapters” enigmatically sweep across human experience, but with a strong common theme, that of harmony. For the last couple of years, for better or worse, my life has revolved more than a little around style sheets. What I sense is a real tension between the web as we know it, and the web as it would be. Same old new medium? Controlling web pages#section2 [The Sage] The Way#section5
Emmet — the essential toolkit for web-developers