PIXELFLOW :: an intergalactic discourse

Pixelflow

An Intergalactic Discourse

Web Design Bemusement

Diving In Head First

Getting into modern CSS can be daunting, but MDN has a really nice CSS Layout Introduction. This is just one page on layouts, but layout/placement is the core fight with CSS. The site has many topics if you go up a navigation level.

A View From The Sky

Lets break web styling concepts down into:

  • Design problems.
  • Techniques for CSS version and browser era to implement a design problem.
  • All of the unavoidable monkey patching to support the edge case bugs.

Thats how you decide how dirty your code is going to be, and why supporting versions below say IE 11 adds lots of compromises and complexity to using the best tools for an era of browsers/CSS.

Its good to know where things were, and where they are now in terms of technique, since the styling of even a few years ago is very different. A good rule is to keep searches to ‘within a year’ for this very reason. Always coupled with checking CanIUse.

A Glimpse Into The Dark Portal

In the pre flexbox world, we still wanted to provide complex design. The most commonly attempted being the Holy Grail. Which allowed for a header and 3 columns of equal length. Looking at how this layout is achieved over time gives a good sense of how CSS has changed.

But before even that can be discussed, knowing how to control the flow is important. The CSS Floatorial is a good segue before understanding how to achieve the Holy Grail.

Another popular common design to measure different css techniques against is the CSS Zen Garden. Without changing any markup, people explore all kinds of css tricks.

Back to The Future

Flexbox is a great solution to many problems solved by earlier techniques, and in the not-so-distant future a proper css Grid system will hopefully put the final nail in the ‘tables as design elements’ coffin. Here flexbox is used for a much simpler Flexbox holy grail layout

Beyond the Grail

Starting with the 960 grid system design language started to evolve and allow complex layout designs that mirrored their print medium (Newspaper, Magazine) counterparts. This is how modern css frameworks like Bootstrap and Zurb Foundation build layouts.

Some great people have written on the subject:

With a grasp of where we came from and where we are now, we can move on to more advanced topics like: Progressive enhancement, mobile first/responsive design, accessibility, local storage and many others

Get Smart

The final leap forward comes from preprocessing. A look at bootstrap’s build system will give a decent understanding of whats involved. With so many browsers, and subtle differences in implementing the css standards having a tool to sort it all out is infinitely useful. In steps PostCSS and its powerful AutoPrefixer, which aids in adding prefixes and transformations to browser specific styles. And Sass which allow one to avoid repeating selectors, and units of measurement by adding: Nesting, Variables, Functions and more!

Get Crazy

Now get inspired by CSS Animation and its Tricks then go make some Weird and Wacky stuff!