Last active
October 4, 2016 16:21
-
-
Save marcelosomers/2ac3dbd594d0116964c894bb871d5b8f to your computer and use it in GitHub Desktop.
Code Snippets for Functional CSS post on slalom.com
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="flex m0 p0 md-m2 md-p2"> | |
The breakpoints are grouped | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="flex m0 md-m2 p0 md-p2"> | |
The properties are grouped | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<nav class="fixed top-0 right-0 bottom-0 left-0 z4 bg-red flex-start md-relative md-flex-auto md-min-width-0"> | |
</nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="box-component flex p2 bg-blue white h4 bold"> | |
The .box-component class wouldn't actually style anything, it would merely be a search key for finding instances where the box component gets used. | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="flex p1 red"> | |
Hi, I'm a flexbox div with 1 unit of padding and red text! | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.p1 { padding: 0.5rem; } | |
.flex { display: flex } | |
.red { color: red; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<nav class="hide block"> | |
.block gets toggled by JavaScript to show this element. It's also not terribly readable. | |
</nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.nav { display: none; } | |
.nav.is-open { display: block; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment