Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/oslego/css-layout-workshop-march2014

Training material for a workshop on CSS layout, March 2014
https://github.com/oslego/css-layout-workshop-march2014

Last synced: about 1 month ago
JSON representation

Training material for a workshop on CSS layout, March 2014

Awesome Lists containing this project

README 

        
# Modern Layout with CSS Flexbox, CSS Regions and more



Exercises for learning how to use new CSS layout features and techniques.



## Prerequisites



The results of these exercises ought to work just fine in the latest version of [Google Chrome](https://www.google.com/intl/en/chrome/browser/). 

Special cases are individually marked.



You should already know how CSS works, what floats do, and what classes mean. If you need a refresh, try [A Beginner's Guide to HTML and CSS](http://learn.shayhowe.com/html-css/) by Shay Howe.



## Self-directed learning



You will find the folders with exercises under the `projects/` folder. They are named like `01_flexbox`, `02_regions`, and so forth. Open them in your code editor of choice.



Each folder contains some HTML files with exercises to learn about a specific feature or use case. In every HTML file there is a `` tag with CSS and instructions. They're easy to follow. Look for this format:

  

    /* STEP 1 */ 

    /* Set property: value; to learn something new. */



The CSS in the `<style>` contains the essential bits for learning at each stage. Some demos also have linked stylesheets and scripts. Those files contain supporting code that make the demo look nice. They're out of sight to keep you focused.

  

A version of the each completed exercise lives one level lower, in the `complete/` folder. Peek in there to see the result, if you need to.



## Learning Resources



### Flexbox

- [A Complete Guide to Flexbox](http://css-tricks.com/snippets/css/a-guide-to-flexbox/) on css-tricks.com

- [Putting Flexbox into Practice](http://www.slideshare.net/zomigi/putting-flexbox-into-practice) by [Zoe Gillenwater](https://twitter.com/zomigi)

- [Smores Day](http://www.smoresday.us/index.html) demo by [Zoe Gillenwater](https://twitter.com/zomigi)

- [Solved by Flexbox](http://philipwalton.github.io/solved-by-flexbox/) use cases by [Philip Walton](https://twitter.com/philwalton)

- [“Old” Flexbox and “New” Flexbox](http://css-tricks.com/old-flexbox-and-new-flexbox/) on css-tricks.com



### CSS Regions

- [CSS Regions samples](http://codepen.io/collection/jabto/) on codepen.io

- [Learn how to enable CSS Regions in browsers](http://html.adobe.com/webplatform/enable/)

- [Killer Responsive Layouts With CSS Regions](http://coding.smashingmagazine.com/2013/11/05/killer-responsive-layouts-with-css-regions/)

- [Orphan Elephants](http://adobe-webplatform.github.io/Demo-for-National-Geographic-Orphan-Elephants/) example. [Source](https://github.com/adobe-webplatform/Demo-for-National-Geographic-Orphan-Elephants)

- [Adaptive UI with CSS Regions](http://blogs.adobe.com/webplatform/2013/04/08/adaptive-web-app-ui-with-css-regions/)

- [Responsive menu with CSS Regions](http://codepen.io/oslego/details/tdHEg)



### CSS Shapes

- [Creating Non-Rectangular Layouts with CSS Shapes](http://sarasoueidan.com/blog/css-shapes/) by Sara Soueidan

- [CSS Shapes samples](http://codepen.io/collection/qFesk/) on codepen.io

- [Learn how to enable CSS Shapes in browsers](http://html.adobe.com/webplatform/enable/)

- [Alice in Wonderland](http://adobe-webplatform.github.io/Demo-for-Alice-s-Adventures-in-Wonderland/) demo. [Source](https://github.com/adobe-webplatform/Demo-for-Alice-s-Adventures-in-Wonderland). [Blog post](http://blogs.adobe.com/webplatform/2013/10/23/css-shapes-visual-storytelling/)



### Misc

- [Custom builds of Modernizr](http://modernizr.com/download/) see "Non-core detects".