CSS articles

abccss_header

Ordering CSS for Everyone

Ordering CSS for Everyone

By Scott O’Hara I often find myself getting into discussions, or arguments disguised as discussions, about the preferred ordering methods for CSS properties. Yeah. That’s how I party. Anyway, it basically boils down to three different methods that you could follow: Random Ordering (because you hate yourself and others) Ordering via Property Groupings Alphabetically – [...]

SVG_icons_header

Animating Inline SVG Icons

By Joni Trythall I recently did some experimenting with animating inline SVG icons. In this article I will quickly review my process and discuss the joys and frustrations I ran into. The demo discussed in the article is below and works on Chrome only for the moment. Scroll down to view all the icons and [...]

dyncss-header

Dynamic CSS with DynCSS

By Vittorio Zaccaria DynCSS is a small Javascript add-on for your web pages. It parses your CSS and converts all the rules with prefix -dyn-* into dynamic Javascript that is executed on browser’s events like scroll and resize. For example, the following CSS will center vertically .header, dynamically changing margin-top as the window is resized: [...]

Prepocessor_Architecture_header

Organizing Your CSS Code for Preprocessors

By Tim Severien CSS preprocessors are probably one of the most useful things we have right now in front-end tooling. Whether you pick Sass, LESS or any other preprocessor, they’re great because they add so many features CSS never had. But I’m not trying to convince you use preprocessors, I assume you already do. Instead, [...]

sass_each_header

Doing More with Sass’ @each Control Directive

By Scott O’Hara I recently wrote an article about the different Sass control directives and how even writing basic directives could be used to code leaner Sass. In this article, Iā€™d like to take a closer look at the @each directive, Sass variable lists and maps. Combining these features can make for some powerful results [...]

react_grunt_header

Creating Modular View Components with React and Grunt

By Simon Smith One of the libraries gaining a lot of interest recently is Facebook’s React JS library. It mainly concerns itself with “the V in MVC” and encourages developers to break their app into resuable, modular components. The Virtual DOM is a great feature on its own, and I encourage you to investigate React [...]

sass_control_header

Getting into Sass Control Directives

By Scott O’Hara Sass makes it very easy to use mixins and extends to write leaner CSS. But perhaps you’re not familiar with how Sass’s Control Directives can help you write leaner Sass. Using the @if, @for, @each and @while control directives, you can make your Sass take on the brunt of what would otherwise [...]

css_grid_header

Grids in CSS3

By Tim Severien In this article, we’ll take a look at some of the new features in CSS3 that make handling grids using HTML and CSS much easier. But first let’s discuss a little history of grids in HTML and CSS to get an understanding of what made them difficult. A Short History of Grids [...]

dreamweaver_header

CSS for Beginners with Dreamweaver

By Brian Rinaldi Dreamweaver has had a long history. I recall using it heavily back in the UltraDev days, for those of you that remember that. While the tool has evolved quite a lot over the years, it remains a powerful web development IDE. Sure, everyone seems to love a lightweight code editor nowadays for [...]

Picture showing a magazine layout with columns of different heights

CSS Regions Matter

By Sara Soueidan I wrote this article before the news came out that Google decided to pull Regions out of Blink, which, in my opinion, is a big loss for the web community. So, even though the content of the article may go in vain, I think it’s still worth sharing why I think CSS [...]

Top