Embed Size (px)
Citation preview
The New CSS LayoutRachel Andrew
Dutch PHP Conference, 2015
Rachel Andrew
http://rachelandrew.co.uk
@rachelandrew
http://grabaperch.com
The trouble with CSS layout
• Floats and clearfix hacks
• Absolute positioning means elements are taken out of document flow and risk overlaps
• Redundant markup and positioning oddities with display: table
• White space issues with inline-block
The cost of taming layout methods
• Developer hours spent learning non-obvious concepts.
• Compromises in terms of document semantics in order to achieve responsive layouts.
• Needing to lean on frameworks to help with complex math.
• Adding markup to create grids
• Using preprocessors to abstract layout hacks
Multi-column Layout
http://www.w3.org/TR/css3-multicol/
http://dev.w3.org/csswg/css-multicol-1/
http://www.flickr.com/photos/62693815@N03/6277209256/
In my HTML I have an article with a class of ‘main’.
<article class="main"> <h1>Blanchard Crosses the Sea in a Balloon</h1> <p> ... </p> </article>
Use the property column-width to declare a width for our columns.
The browser will create as many columns as possible using that as the ideal width. .main {
column-width: 220px; }
CSS Multiple column layout
[The column-width value] describes the optimal column width. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). Specified values must be greater than 0.
Set the property column-count to 3 and the browser will always create three columns.
.main { column-count: 3; }
The gap between columns is controlled by the column-gap property.
Give this a value of 0 and you have no gap.
.main { column-count: 3; column-gap: 0; }
The browser takes the column-gap into account when calculating the size of the columns.
.main { column-count: 3; column-gap: 20px; }
Styling columns
• very limited in the current specification
• cannot set size of an individual column
• cannot change background colour of a column
• cannot set padding or margins on a column
Multiple column layout
future specifications may add additional functionality. For example, columns of different widths and different backgrounds may be supported.
Add a rule between columns using the column-rule property.
This is a shorthand for:
column-rule-width column-rule-style column-rule-color
These properties behave just like the border properties.
.main { column-count: 3; column-gap: 20px; column-rule: 2px dotted #ccc; }
The property column-span can have a value of all or none. If set to all the element will span all columns.
.main h1,
.image { column-span: all; }
Use multiple column layout to tidy up the display of small UI elements.
Resources
Dev.Opera: https://dev.opera.com/articles/css3-multi-column-layout/
MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts
CSS Tricks: https://css-tricks.com/guide-responsive-friendly-css-columns/
Multi-column generator: http://aaronlumsden.com/multicol/
Flexible Box Layout
http://www.w3.org/TR/css-flexbox-1/
http://dev.w3.org/csswg/css-flexbox/
https://www.flickr.com/photos/zervas/2810241612
Navigation marked up as an unordered list in my HTML.
<nav> <ul class="nav"> <li><a href="">Introduction</a></li> <li><a href="">Ancient Times</a></li> <li><a href="">Balloon Theory</a></li> <li><a href="">First Public Trial</a></li> <li><a href="">Experiments</a></li> </ul> </nav>
flex is a new value of the display property. This causes the element to use flexbox.
justify-content lets us set how the content is justified. nav ul{
display: flex; justify-content: space-between; }
To have equal space all around the item give justify-content a value of space-around.
nav ul{ display: flex; justify-content: space-around; }
Default flexbox behaviour
• Items displayed as a row
• Items displayed in natural (DOM) order
• align-items set to stretch
• flex-wrap set to nowrap
The flex-direction property.
- row - row-reverse - column - column-reverse nav ul{
display: flex; justify-content: space-around; flex-direction: row; }
The flex-direction property.
- row - row-reverse - column - column-reverse nav ul{
display: flex; justify-content: space-around; flex-direction: row-reverse; }
The flex-direction property.
- row - row-reverse - column - column-reverse nav ul{
display: flex; justify-content: space-around; flex-direction: column; }
The align-items property:
- flex-start - flex-end - center - baseline - stretch nav ul{
display: flex; justify-content: space-between; align-items: flex-end; }
Our boxes are displayed using flexbox. If there is not space for all 3 they will wrap as the flex-wrap property is set to wrap.
.boxes { display: flex; flex-wrap: wrap; justify-content: space-around; } .box { border: 1px solid #444; padding: 10px; margin: 10px; flex-grow: 1; flex-shrink: 1; flex-basis: 200px; min-width: 1px; }
The flex property is a shorthand for the three properties. Initial values as follows:
flex-grow: 0; flex-shrink: 1; flex-basis: auto;
.boxes { display: flex; flex-wrap: wrap; justify-content: space-around; } .box { border: 1px solid #444; padding: 10px; margin: 10px; flex: 1 1 200px;
min-width: 1px; }
Giving the box with a class of .box2 a flex-grow value of 2. The other boxes have flex-grow set to 1.
.box2 { flex-grow: 2; }
Use the order property to change the order of flex items.
.box1 { order: 3; }
.box2 { flex-grow: 2; order: 1; }
.box3 { order: 2; }
ResourcesSolved by Flexbox: http://philipwalton.github.io/solved-by-flexbox/
CSS Tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbox Cheat Sheet: http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
Flexbox in 5: http://flexboxin5.com/
Useful information on supporting older browsers:
http://www.planningforaliens.com/blog/2014/03/11/real-world-flexbox/
http://zomigi.com/downloads/Leveling-Up-With-Flexbox_SmashingConf_140319.pdf
CSS Shapes
http://www.w3.org/TR/css-shapes/http://dev.w3.org/csswg/css-shapes/
http://dev.w3.org/csswg/css-shapes-2/
https://www.flickr.com/photos/randar/8063840431
We have floated our image left.
.shape { float: left; width: 150px; height: 150px; margin: 20px;
}
Add the property shape-outside with a value of circle(50%).
.shape { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: circle(50%); }
Basic Shapes
• inset()
• circle()
• ellipse()
• polygon()
Using the polygon value for shape-inside.
The polygon requires at least 3 sets of x, y coordinates.
.shape { float: left; width: 200px; height: 200px; margin-top: 10px; }
.shape-polygon { shape-outside: polygon(0 20px, 160px 40px, 180px 70px, 180px 120px, 120px 200px, 60px 210px, 0 220px); }
Shapes from the Alpha Channel
My HTML contains an image along with some text.
<div class="s-box"> <img src="noun_109069.png" alt="" width="200" class="shape shape-image”> <p> ... </p> </div>
To use an alpha channel pass in a URL for your image and a threshold for the transparency.
.shape-image { shape-outside: url('noun_109069.png'); shape-image-threshold: 0.5; }
Use an image in generated content to shape your text.
.content:before { content: ""; float: left; width: 200px; height: 200px; shape-outside: url('alpha.png'); shape-image-threshold: 0.5; }
What’s next for Shapes?
• shape-inside - text flowing inside a shape
• shapes defined on elements that are not floated
• shape-padding property
• Level 2 specification http://dev.w3.org/csswg/css-shapes-2
Resources
How to Get Started with CSS Shapes: http://www.webdesignerdepot.com/2015/03/how-to-get-started-with-css-shapes/
A List Apart: http://alistapart.com/article/css-shapes-101
HTML5 Rocks: http://www.html5rocks.com/en/tutorials/shapes/getting-started/
How to prepare images using Photoshop: http://blogs.adobe.com/webplatform/2014/03/11/add-shape-and-depth-to-your-layout-with-photoshop-and-css-shapes/
Adobe: http://webplatform.adobe.com/shapes/
CSS Grid Layout
http://www.w3.org/TR/css-grid-1/
http://dev.w3.org/csswg/css-grid/
http://www.flickr.com/photos/adactio/1799953270
Browser SupportAll my examples work in Chrome unprefixed - you need to enable the Experimental Web Platform Features flag.
You can also use Webkit nightlies, with the -webkit prefix.
The work in Blink and Webkit is being done by Igalia, sponsored by Bloomberg.
IE10 and up has support for the old syntax, with an -ms prefix.
Mozilla are currently implementing Grid in Firefox.
There is a Polyfill under active development: https://github.com/FremyCompany/css-grid-polyfill/
Our HTML consists of a div with a class of wrapper and six child elements.
<div class="wrapper"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div> <div class="d">D</div> <div class="e">E</div> <div class="f">F</div> </div>
To create a grid we use a new value of the display property.
display: grid
.wrapper { display: grid;
}
We describe the grid using the new properties:
grid-template-columns
grid-template-rows
.wrapper { display: grid; grid-template-columns: 100px 10px 100px 10px 100px; grid-template-rows: auto 10px auto; }
We position items using the new properties:
grid-column-startgrid-column-endgrid-row-startgrid-row-end
.a { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; }
To position an item bottom centre, I start at column line 3, this is the line after the gutter track.
.b { grid-column-start: 3; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; }
To span more tracks we just change the end row or column line.
.b { grid-column-start: 3; grid-column-end: 6; grid-row-start: 3; grid-row-end: 4; }
The longhand for line-based placement means up to 4 properties to position each element. .a {
grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; }
.b { grid-column-start: 3; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; }
Declare start and end values with grid-column and grid-row.
Values are separated by a / symbol.
.a { grid-column: 1 / 2; grid-row: 1 / 2; }
.b { grid-column: 3 / 6; grid-row: 3 / 4; }
Declare all 4 values using the grid-area property.
.a { grid-area: 1 / 1 / 2 / 2; }
.b { grid-area: 3 / 3 / 4 / 6; }
Grid Terminology
Grid Lines
Lines can be horizontal or vertical. They are referred to by number and can be
named.
Highlighted is Column Line 2.
Grid Track
A Grid Track is the space between two Grid Lines. Tracks can be horizontal or
vertical (rows or columns).
The highlighted Grid Track is between Row Lines 2 and 3.
Grid Cell
The smallest unit on our grid, a Grid Cell is the space between four Grid Lines. It’s
just like a table cell.
The highlighted Grid Cell is between row lines 2 and 3 and column lines 2 and 3.
Grid Area
Any area of the Grid bound by 4 Grid Lines. It can contain many Grid Cells.
The highlighted Grid Area is between row lines 1 and 3, column lines 2 and 4.
All examples can be found at http://gridbyexample.com. Use Chrome. Enable “Experimental Web Platform Features” flag.
Line-based placement
The HTML around my page content.
The various areas of my page are child elements of a div with a class of wrapper.
<div class="wrapper">
<header class="mainheader"></header>
<div class="panel"></div>
<div class="content"></div>
</div>
Declaring a grid on wrapper.
The grid has three columns, and four rows.
.wrapper { width: 100%; max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 30% 5% 65%; grid-template-rows: 40px auto 20px auto; }
Positioning our elements using the grid-column and grid-row shorthand.
This is all we need to do to create our layout.
.mainheader { grid-column: 1 / 4; grid-row: 2 / 3; }
.panel { grid-column: 1 / 2; grid-row: 4 / 5; }
.content { grid-column: 3 / 4; grid-row: 4 / 5; }
I can add a footer to this layout.
<div class="wrapper">
<header class="mainheader"></header>
<div class="panel"></div>
<div class="content"></div>
<footer class="mainfooter"></footer>
</div>
Positioning the footer between row lines five and six.
.mainfooter { grid-column: 1 / 4; grid-row: 5 / 6; }
Our grid only has 5 row lines specified - yet we placed an item between row lines 5 and 6.
Grid creates an implicit grid line for us.
.wrapper { display: grid; grid-template-columns: 30% 5% 65%; grid-template-rows: 40px auto 20px auto; }
.mainfooter { grid-column: 1 / 4; grid-row: 5 / 6; }
Grid lines can be explicit or implicit
• Explicit grid lines are those specified using grid-template-rows or grid-template-columns.
• Implicit lines are created when you place something into a row or column track outside of the explicit grid.
• Default behaviour is those tracks are auto sized. You can specify a size with the grid-auto-columns and grid-auto-rows properties.
Grid is “table like” however …
• Unlike a table for layout Grid does not rely on your content being a particular order in the source.
• Being entirely described in CSS we can move things around the Grid at different breakpoints, introduce or redefine a Grid for any breakpoint.
Using Grid to order the page elements in a single column for narrow screen widths.
.wrapper { display: grid; grid-template-rows: 10px auto 10px auto 10px auto 10px auto; } .mainheader { grid-row: 2 / 3; }
.content { grid-row: 4 / 5; }
.panel { grid-row: 6 / 7; }
.mainfooter { grid-row: 8 / 9; }
Redefine the Grid at min-width 550 pixels.
Position items as in the earlier example.
@media (min-width: 550px) { .wrapper { grid-template-columns: 30% 5% 65%; grid-template-rows: 40px auto 20px auto 20px auto; } .mainheader { grid-column: 1 / 4; grid-row: 2 / 3; } .panel { grid-column: 1 / 2; grid-row: 4 / 5; } .content { grid-column: 3 / 4; grid-row: 4 / 5; } .mainfooter { grid-column: 1 / 4; grid-row: 6 / 7; } }
Named Areas
We assign a name to the elements on our page.
I am doing this outside of any Media Queries.
.mainheader { grid-area: header; }
.content { grid-area: content; }
.panel { grid-area: sidebar; }
.mainfooter { grid-area: footer; }
Describe the layout on the parent element using the grid-template-areas property.
A period “.” indicates that this grid cell is empty.
.wrapper { display: grid; grid-template-rows: 10px auto 10px auto 10px auto 10px auto; grid-template-areas: "." "header" "." "content" "." "sidebar" "." "footer"; }
Redefining the template areas for the wider layout. @media (min-width: 550px) {
.wrapper { grid-template-columns: 30% 5% 65%; grid-template-rows: 2em auto 1em auto 1em auto; grid-template-areas: ". . ." "header header header" ". . ." "sidebar . content" ". . ." "footer footer footer" } }
Resources
Grid by Example: http://gridbyexample.com
Examples from Igalia: http://igalia.github.io/css-grid-layout/
An article covering the original IE10 implementation: http://24ways.org/2012/css3-grid-layout/
CSS Exclusions
http://www.w3.org/TR/css3-exclusions/
http://dev.w3.org/csswg/css-exclusions/
https://www.flickr.com/photos/markusspiske/15115777092
Floated items always rise to the top. We can wrap text around the right or
left and bottom of an item.
Exclusions enable wrapping text around all sides of an item.
I have an article with an image as the last child in the source.
The image has a class of exclusion. <article>
<p> ... </p>
<img src="balloons3.jpg" alt="Hot air balloons" class="exclusion" />
</article>
The article has been given position relative to create a positioning context.
I have then positioned the image using absolute positioning.
.main { position:relative; }
.exclusion { position: absolute; top: 14em; left: 14em; width: 320px;
}
The wrap-flow property means that the text will respect the positioned element and wrap round both sides.
I’m using the -ms prefix given this is only implemented in IE browsers.
.main { position:relative; }
.exclusion { position: absolute; top: 14em; left: 14em; width: 320px; -ms-wrap-flow: both; }
CSS Regions
http://www.w3.org/TR/css-regions-1/
http://dev.w3.org/csswg/css-regions/
https://www.flickr.com/photos/striatic/3529866/
Regions were in the Blink engine but removed in January 2014. They are still part of Safari desktop and iOS.
https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/kTktlHPJn4Q/YrnfLxeMO7IJ
I have an article contained inside an article element.
Below that is a set of empty elements, each with a class of article-regions.
<article class="main content”> <p> ... </p> </article>
<div class="region1 article-regions"></div> <div class="regionwrapper"> <div class="region2 article-regions"></div> <div class="region3 article-regions"></div> <div class="region4 article-regions"></div> </div> <div class="region5 article-regions"></div>
We flow the content of our article into ‘article-thread’. This is a name we have given the content.
We then flow the content into .article-regions - this is the class we gave our empty elements.
.main { flow-into: article-thread; }
.article-regions { flow-from: article-thread; }
Positioning the empty elements. .region1 {
height: 10em; } .regionwrapper { display: flex; flex-direction: row; } .region2 { flex: 1; padding: 10px; height: 10em; } .region3 { flex: 1; padding: 10px; height: 10em; } .region4 { flex: 1; padding: 10px; height: 10em; } .region5 { padding: 10px; }
Resources
An Introduction to CSS Regions: https://dev.opera.com/articles/introduction-to-css-regions/
Use CSS Regions to flow content through a layout: https://docs.webplatform.org/wiki/tutorials/css-regions
Say Hello to CSS Regions Polyfill: http://corlan.org/2013/02/08/say-hello-to-css-regions-polyfill/
Introducing CSS Regions: http://www.webdesignerdepot.com/2013/09/introducing-css-regions/
Why explore emerging specifications?
Thank you!
Rachel Andrew
@rachelandrew
http://rachelandrew.co.uk/presentations/new-css-layout
