CSS Grids can help you

At the heart of all great web apps and websites we have a layout grid that defines the underlying design. This talk will help you learn how to use our grid system and utilize all of it's options.

Transcript

2. What’s a grid system? A collection of CSS utility classes, that let you control page layout using a system of rows & columns. .u-row .u-column .u-pull .u-center
3. What’s a grid row? A flex block-level element that wraps your entire grid. (div, section, etc...) You can add one or more block-level child elements that span any number of columns inside your row using column classes. .u-column--4 .u-column--4 .u-column--4 .u-column--7 .u-column--5 1 .u-column--11 div.u-row
4. Row options We have a long list of ways you can align things inside rows. Here are a few <div class=”u-row u-start”>...</div> .u-start .u-end .u-center .u-top .u-middle .u-bottom
5. What’s a column class? By unit of measure one column is calculated by: 100% / 12 = 8.333333333% Column classes are ~8.3% * length. Example: .u-column--4 => width: 33%; 33% 33% 33% 58.3% 41.6% 8.3 91.6%
6. Column Rules Each set of child elements should equal up to 12 columns or less. You can nest rows and columns as much as you like. 12 10 12
7. Alignment We can apply the same calculation and principals to moving these elements from left to right or right to left. .u-push--4 .u-pull--1 .u-push--1 .u-push--2 .u-push--1
8. Zeplin You can see how our designs conform to a 12- column grid. Quick reference 9 3 6 12 6
9. Pros and Cons Speed! You can rapidly prototype a layout. Ease of complex layouts Standardized system Fewer mistakes Markup Bloat with Containers/Rows Tricky to integrate in existing systems Non-semantic class names Difficult to use with media queries
10. Markup Bloat CSS has this thing called inheritance. If we don’t have specificity in our CSS, then we run into inheritance issues. Introducing complexity into markup is cheap. If you don’t understand the DOM structure, inspect it.
11. Tricky to integrate into existing systems We aren’t integrating existing systems …but, we do have a straightforward approach Systems integrations are not terribly painful In the future something like this should be handled by whoever has a good understanding of the entire framework.
12. Non-semantic class names Semantic markup is ideal, but not a badge of honor Unfortunately, in order to create reusable utilities, we must ignore semantics. Order class names in semantic priority: • Descriptors like component or object names go first. • Secondary classes like qa-*, second. • Utilities, last. <button class=”c-button qa-button u-hide@sm-down”> I’m a button, ok</button>
13. Difficult to use with Media Queries
14. Guide to grids We already have a styleguide for our new user interface with many examples of how you can use our grid system, and utilities that allow you to do many different things with it like: Auto-filling columns Pushing and pulling columns Alignment Distribution http://staticplay.github.io/ui-docs
15. Hands-on! Play with this CodePen http://goo.gl/83Wbam
16. Questions? There are no dumb questions! @stephenway