Specifying the width and allowing the browser to calculate number of columns. .col-wrapper { background-color: rgb(234,237,228); color: rgb(68,68,68); padding: 20px; border-radius: 5px; column-width: 220px; } Multi-col Wednesday, 26 February 14
Specifying the number of columns means the browser calculates the width. .col-wrapper { background-color: rgb(234,237,228); color: rgb(68,68,68); padding: 20px; border-radius: 5px; column-count: 4; } Multi-col Wednesday, 26 February 14
The column-rule property sets a rule between columns. It takes no space of it’s own and overlays the column-gap. .col-wrapper { background-color: rgb(234,237,228); color: rgb(68,68,68); padding: 20px; border-radius: 5px; column-width: 220px; column-gap: 2em; column-rule: 2px dotted rgb(170,179,171); } Multi-col Wednesday, 26 February 14
A value of flex for the display elements means we are using flexbox. nav ul{ display: flex; flex-direction: row; justify-content: space-around; align-items: stretch; } Flexbox Wednesday, 26 February 14
Setting justify- content to space- between means that items justify against the left and right sides of the box. nav ul{ display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; } Flexbox Wednesday, 26 February 14
The default value of flex-direction is row. nav ul{ display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; } Flexbox Wednesday, 26 February 14
Set flex-direction to row-reverse and the order the items display in reverses. nav ul{ display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: stretch; } Flexbox Wednesday, 26 February 14
With align-items given a value of stretch the items will take the height of the tallest. .boxes { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: space-between; } Flexbox Wednesday, 26 February 14
With align-items given a value of center. .boxes { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; } Flexbox Wednesday, 26 February 14
With align-items given a value of flex- end. .boxes { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; } Flexbox Wednesday, 26 February 14
The order property means we can order our flex items independently of source order. .boxes .box:nth-child(1) { order:3; } .boxes .box:nth-child(2) { order:1; } .boxes .box:nth-child(3) { order:2; } Flexbox Wednesday, 26 February 14
you CAN use these techniques even where there is limited browser support Use new CSS sparingly, as an enhancement for small UI elements - rather than thinking in terms of full layouts. Wednesday, 26 February 14
The grid-template- columns property defines the grid columns; grid- template-rows the grid rows. .wrapper { display: grid; grid-template-columns: 200px 20px auto 20px 200px; grid-template-rows: auto 1fr; } Grid Layout Wednesday, 26 February 14
grid-column-start and grid-column-end set the column position; grid-row- start and grid-row- end the row. .content { grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; } Grid Layout Wednesday, 26 February 14
When we place an item we declare the grid lines that contain it. .content { grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; } Grid Layout Wednesday, 26 February 14
When we place an item we declare the grid lines that contain it. .content { grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; } Grid Layout Wednesday, 26 February 14
When we place an item we declare the grid lines that contain it. .content { grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; } Grid Layout Wednesday, 26 February 14
When we place an item we declare the grid lines that contain it. .content { grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; } Grid Layout Wednesday, 26 February 14
When we place an item we declare the grid lines that contain it. .content { grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; } Grid Layout Wednesday, 26 February 14
We can also declare named grid lines. .wrapper { display: grid; grid-template-columns: (nav) 200px (gutter) 20px (main) auto (gutter) 20px (sidebar) 200px; grid-template-rows: (header) auto (content) 1fr (content- end); } Grid Layout Wednesday, 26 February 14
You then use the name rather than the number to place the content. .content { grid-column-start: main; grid-column-end: span 1; grid-row-start: content; grid-row-end: span 1; } Grid Layout Wednesday, 26 February 14
It will also be possible to declare grid template areas .wrapper { display: grid; grid-template-columns: 200px 20px auto 20px 200px; grid-template-rows: auto 1fr; grid-template-areas: "header header header header header" "nav . content . sidebar" } Grid Layout Wednesday, 26 February 14
Defining a grid in the IE10 implementation. .wrapper { display: -ms-grid; -ms-grid-columns: 200px 20px auto 20px 200px; -ms-grid-rows: auto 1fr; } Grid Layout Wednesday, 26 February 14
The grid-column and grid-row properties are used differently in the new Working Draft. This is how to position grid items in IE10. .mainnav { -ms-grid-column: 1; -ms-grid-row: 2; } .title { -ms-grid-row: 1; -ms-grid-column:3; } .content { -ms-grid-column: 3; -ms-grid-row: 2; } .quote { -ms-grid-column: 5; -ms-grid-row: 2; } Grid Layout Wednesday, 26 February 14
The IE10 implementation specifies the row and column, rather than the lines around. .content { grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; } Grid Layout Wednesday, 26 February 14
The IE10 implementation specifies the row and column, rather than the lines around. Grid Layout .content { -ms-grid-column: 3; -ms-grid-row: 2; } Wednesday, 26 February 14
http://lists.w3.org/Archives/Public/www-style/2013May/0114.html Flexbox is for one-dimensional layouts Grid is for two-dimensional layouts Grid or Flexbox? Wednesday, 26 February 14
http://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/ Flexbox performs poorly when used to layout full pages. Grid or Flexbox Wednesday, 26 February 14
Giving Content Priority with CSS Grid Layout - http://24ways.org/2012/ css3-grid-layout/ My Grid examples on CodePen - http://codepen.io/rachelandrew/tag/ 24%20ways CSS Grid Layout - what has changed? - http://www.rachelandrew.co.uk/ archives/2013/04/10/css-grid-layout---what-has-changed/ Named Lines and Grid areas - http://www.rachelandrew.co.uk/archives/ 2013/04/29/css-grid-layout-named-grid-lines-and-areas/ My Grid Resources Wednesday, 26 February 14
The property flow- from sets where this content thread should flow from. .article-regions { flow-from: article-thread; } Regions Wednesday, 26 February 14
Once the content reaches a height of 6em it will have to flow into the next region. .region1 { height: 6em; margin: 0 0 1em 0; } Regions Wednesday, 26 February 14
A height of auto on a region means it will expand to take whatever content is there. A fixed height means once that height is reached the content moves onto the next region. .region5 { padding: 1em 0 0 0; margin: 1em 0 0 0; border-top: 1px dotted #ccc; height: auto; } Regions Wednesday, 26 February 14
The flow-into property on the iframe ID causes the iframe to disappear. #regions-content { -ms-flow-into: article-thread; } Regions Wednesday, 26 February 14
Regions can be positioned using any method - here I am using the IE10 Grid Layout implementation. .regionwrapper { display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr; -ms-grid-rows: 10em 10em auto; } .region1 { margin: 0 0 1em 0; -ms-grid-column: 1; -ms-grid-row: 1; -ms-grid-column-span: 3; } Regions Wednesday, 26 February 14
https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/kTktlHPJn4Q/ YrnfLxeMO7IJ CSS Regions to be removed from the Blink rendering engine January 2014 Wednesday, 26 February 14
Using CSS Regions to flow content through a layout - http:// docs.webplatform.org/wiki/css/tutorials/css-regions Say hello to CSS Regions Polyfill - http://corlan.org/2013/02/08/say- hello-to-css-regions-polyfill/ CSS Regions examples on CodePen from Adobe - http://codepen.io/ collection/jabto An Introduction to CSS Regions - http://dev.opera.com/articles/view/an- introduction-to-css-regions/ WebPlatform.org CSS Regions - http://docs.webplatform.org/wiki/ tutorials/css-regions Regions Resources Wednesday, 26 February 14
Positioning the exclusion can be done with any positioning method. .exclusion { height: 160px; width: 200px; padding: 10px; position: absolute; top: 120px; left: 120px; } Exclusions Wednesday, 26 February 14
Wrap-flow and CSS Exclusions - http://advent2012.digitpaint.nl/21/ Adobe post on separation of the Shapes and Exclusions specs - http:// blogs.adobe.com/webplatform/2013/06/04/how-to-make-a-chocolate- peanut-butter-cup/ -ms-wrap-flow information on using wrap-flow in IE10 - http:// msdn.microsoft.com/en-us/library/windows/apps/hh767314.aspx The CSS Exclusions Module - Vanseo Design - http:// www.vanseodesign.com/css/exclusions/ Exclusions Resources Wednesday, 26 February 14
Level 1 Last Call Working Draft, 3rd December 2013 Level 2 Editor’s Draft, 15th November 2013 http://www.w3.org/TR/css-shapes/ CSS Shapes Wednesday, 26 February 14
Current level 1 working draft defines shape-outside, and allows shapes only on floats. The Level 2 editor’s draft reimplements shape-inside. Wrap content around and inside things that are not rectangles. CSS Shapes Wednesday, 26 February 14
The shape-outside property allows text to be wrapped around a shape such as a circle. .float { width: 250px; height: 250px; float: left; shape-outside: circle(50%); } CSS Shapes Wednesday, 26 February 14
While specs are at an early stage your opinion can change things. Get involved with new specs! http://lists.w3.org/Archives/Public/www-style/ Wednesday, 26 February 14
rachelandrew
motok1
nenonaninu
you
k1low
yoshinagaiwnl
kentosuzuki
okunokentaro
takufujii
eliasnogueira
jacopen
koic
megabitsenmzq
scottboms
destraynor
jacobian
phodgson
malarkey
revolveconf
brianwarren
thekraken
edds
colly
chriscoyier
jponch