2013-10-14 21:52:40 +02:00
|
|
|
---
|
|
|
|
|
title: Layouts & Grid
|
2018-10-24 00:06:39 +02:00
|
|
|
introduction: >
|
2018-12-28 01:31:28 +01:00
|
|
|
We use a flex-box grid.
|
2018-10-27 08:06:47 +02:00
|
|
|
breakpoints:
|
|
|
|
|
- name: small
|
|
|
|
|
size: 30em (480px)
|
|
|
|
|
- name: medium
|
|
|
|
|
size: 40em (640px)
|
|
|
|
|
- name: large
|
|
|
|
|
size: 60em (960px)
|
|
|
|
|
- name: x-large
|
|
|
|
|
size: 80em (1280px)
|
2013-10-14 21:52:40 +02:00
|
|
|
---
|
|
|
|
|
|
|
|
|
|
%h2 Other Tools & Resources
|
2018-10-24 00:06:39 +02:00
|
|
|
|
2013-10-14 21:52:40 +02:00
|
|
|
%ul.list-feature
|
2018-10-24 00:06:39 +02:00
|
|
|
%li= link_to 'The EMs have it: Proportional Media Queries FTW!', 'http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/'
|
2013-10-14 21:52:40 +02:00
|
|
|
|
2018-10-27 08:06:47 +02:00
|
|
|
%h2 Breakpoints
|
2018-10-24 00:06:39 +02:00
|
|
|
|
2018-10-27 08:06:47 +02:00
|
|
|
- current_page.data.breakpoints.each do |breakpoint|
|
2013-10-14 21:52:40 +02:00
|
|
|
%dl.guide-description-list
|
|
|
|
|
%dt
|
2018-10-27 08:06:47 +02:00
|
|
|
%code= '@include sl-breakpoint--' + breakpoint.name
|
2018-10-24 00:06:39 +02:00
|
|
|
|
2018-10-27 08:06:47 +02:00
|
|
|
%dd= breakpoint.size
|
