.grid
Grid layout
Options
0px 480px 1024x 1500px ∞
| | | | |
| |<-- lap -------------------------------------->|
| | |<-- desk --------------------->|
| | | |<-- wall ---->|
| | | | |
|<-- eq-palm -->| | | |
| |<-- eq-lap --->| | |
| | |<-- eq-desk --->| |
| | | | |
|<------------------ lte-lap -->| | |
|<---------------------------------- lte-desk -->| |
| | | | |
0px 480x 1024px 1500px ∞
$breakpoint-widths: ('palm': 0px, 'lap': 480px, 'desk': 1024px, 'wall': 1500px)
$grid-gutter: 24px
$grid-push: true
$grid-pull: true
$grid-cols: (12)
$grid-breakpoints: (lap desk wall)
.width-width-tot
Simple columns
.breakpoint-width-tot
Responsive columns
.push-width-tot, .pull-width-tot
Shiftable columns
.breakpoint-push-width-tot, .breakpoint-pull-width-tot
Responsive shiftable columns
.grid--rev
Reverse ordering
.grid--narrow
Half gutter
.grid--wide
Double gutter
.grid--bottom
Aligned to bottom
1
1
2
1
2
3
1
2
3
4
.grid--middle
Vertically centered
1
1
2
1
2
3
1
2
3
4
.grid--center
Horizontally centered
1
2
3
.grid--right
Right alignment
1
2
3
.space
Vertical spacing
Options
$space-unit: 12px $space-amounts: ( 1, 2, 3, 5, 8 )
.space--top-amount
Top spacing
.space--bottom-amount
Bottom spacing
.space--both-amount
Both ways
.visible
Selective visibility
.visible--on-breakpoint
Example
.hidden--on-breakpoint
Selective invisibility
.wrap
Maximum layout width
Example
.wrap--on-$breakpoint
Responsive version
.wrap--on-eq-palm.wrap--on-eq-lap.wrap--on-eq-desk.alpha, .beta, .gamma, .smallprint, .milli
Font size helpers
Options
$base-font-size: 15px
$heading-font-sizes: ('alpha': 30px, 'beta': 27px, 'gamma': 22px)
$smallprint-font-sizes: ('smallprint': 13px, 'milli': 12px)
Example
An important title
Secondary title
Tertiary title
Lass aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris vitae nisl neque.
Curabitur vitae odio massa. Etiam porta pretium nunc condimentum pharetra.
.input--checkbox, .input--radio
Radio and checkbox inputs
Example
Disabled state
.form
Formatted forms
Complete example
.formatted-content
User generated content formatting
Complete example
Ullam quaerat repudiandae cupiditate voluptate
Consectetur deserunt dolorum aut perspiciatis laudantium aut in dolor vitae quia praesentium dolorum rem iusto. expedita quibusdam minus omnis aut occaecati aliquid. deserunt quasi minima saepe voluptate reprehenderit atque eius accusantium nesciunt repellendus explicabo. consequatur laudantium numquam deserunt
Et minima sit debitis libero assumenda porro explicabo aut debitis
Consectetur deserunt dolorum aut perspiciatis laudantium aut in dolor vitae:
- Ut eius tenetur nulla eligendi repellat omnis deserunt blanditiis amet esse.
- Omnis enim magni voluptatem amet aut ut nam facilis voluptatem eligendi reprehenderit ipsum recusandae soluta.
Ut temporibus nihil ex ut
Consectetur deserunt dolorum aut perspiciatis laudantium aut in dolor vitae:
Consectetur deserunt dolorum aut perspiciatis laudantium aut in dolor vitae quia praesentium dolorum rem iusto. expedita quibusdam minus omnis aut occaecati aliquid. deserunt quasi minima saepe voluptate reprehenderit atque eius accusantium nesciunt repellendus explicabo. consequatur laudantium numquam deserunt
Et minima sit debitis libero assumenda porro explicabo aut debitis
Consectetur deserunt dolorum aut perspiciatis laudantium aut in dolor vitae:
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
.flash
Flash messages
.flash--notice
Notice message
.flash--alert
Alert message
.hero
Hero
Example
Sticky area
Ipsum autem consequatur eligendi est dolores nihil temporibus iste nam impedit consequatur sit incidunt est dolores fugiat ut saepe sit
.button
Buttons
Work on links, buttons and labels
.button--expand
Fill the entire width
Icons
.table
Formatted, responsive tables
Example
| # | Make | Model | Year | Owner |
|---|---|---|---|---|
| 1 | Honda | Accord | 2009 | Paul Roelm |
| 2 | Toyota | Camry | 2012 | Jack Born |
| 3 | Hyundai | Elantra | 2010 | Mark Fried |
.flag
Flag block
Quam at in repellendus voluptas. Aliquid qui consequuntur harum mollitia debitis voluptatem aut est rem sed natus. Quisquam sint voluptatum itaque libero quo et culpa et assumenda aut sunt ratione rerum. Magni maiores occaecati in voluptatem qui a non quidem enim dolore rerum quibusdam facilis fugit.
.flag--top
Aligned at top
Quam at in repellendus voluptas. Aliquid qui consequuntur harum mollitia debitis voluptatem aut est rem sed natus. Quisquam sint voluptatum itaque libero quo et culpa et assumenda aut sunt ratione rerum. Magni maiores occaecati in voluptatem qui a non quidem enim dolore rerum quibusdam facilis fugit.
.flag--bottom
Aligned at bottom
Quam at in repellendus voluptas. Aliquid qui consequuntur harum mollitia debitis voluptatem aut est rem sed natus. Quisquam sint voluptatum itaque libero quo et culpa et assumenda aut sunt ratione rerum. Magni maiores occaecati in voluptatem qui a non quidem enim dolore rerum quibusdam facilis fugit.
.flag--rev
Reversed order
Quam at in repellendus voluptas. Aliquid qui consequuntur harum mollitia debitis voluptatem aut est rem sed natus. Quisquam sint voluptatum itaque libero quo et culpa et assumenda aut sunt ratione rerum. Magni maiores occaecati in voluptatem qui a non quidem enim dolore rerum quibusdam facilis fugit.
.nav
Navigation
Simple navigation
.nav--dots
Dots separated list
.nav--breadcrumbs
Breadcrumbs
.nav--pagination
Pagination
.nav--expand
Fill the entire width
.icon
Webfont icons
BEMO default icons are taken from the Material Design icon set by Google. Thanks!
Default set
.icon--large, .icon--huge
Different sizes
.sprite
Retina-ready sprites
.sprite--center
Centered sprite
.or
Or block
.canvas
Off-canvas menu
.dialog
Modal dialog
Placeholder text
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.