$ bower install JustMy.scss
$ npm install JustMy.scss
<script src="https://unpkg.com/JustMy.scss/dist/justmy.min.css"></script>
The primary font is Open Sans and the secondary font is Roboto Slab. They are both served from Google fonts.
This is a paragraph tag.
This is a strong/bold tag.
This is an emphasis/italic tag.
This is an underline tag.
This is a small tag.
The default grid is 12 columns. There are additional classes that allow for a 5-column grid as well. You can easily apply different sizes at different breakpoints (bp) for easier responsive layouts.
.row > .col-<bp>-<cols>.row > .col-<bp>-<cols>-5.col-offset-<bp>-<cols>You can add this class to your grid items to give them an offset. This is great for adding some space between items.
.col-<push|pull>-<bp>-<cols>You can add this class to your grid items to reorganize them. This is great for when you need to have grid items in a different order at different breakpoints. If you resize your browser, you will see the grid items reorganize (1) - (6).
.row-fixed-<bp>-<cols> & .row-fixed-right-<bp>-<cols> & .row-fill-<bp>-<cols>In addition to the basic grid, you can also use the block grid. This creates equal width columns within the grid container.
.row-<bp>-<cols>In addition to the basic grid, you can also use the block grid. This creates equal width columns within the grid container.
.row-center - center the grid items.row-flex - make the grid items equal height.row-np - remove the padding from all the grid items.row-reverse - reverse the order of all the grid items.col-np - remove the padding from a specific grid items.col-first-<bp> - add to the first grid item in a row (used for clearing the floats).col-last-<bp> - add to the last grid item in a row (used for clearing the floats).list--inline.list--plain.list--split .list--split-<bp>-<cols>.table--full| Food truck | Street art | Meditation |
|---|---|---|
| Thundercats | Intelligentsia listicle pug | Keytar tofu retro |
| Narwhal | Skateboard helvetica distillery | Tote bag |
| Aesthetic | Chia celiac irony | Bitters cold-pressed pickled listicle |
| Bicycle | Readymade sriracha man bun | Drinking vinegar venmo normcore |
.table--alt| Food truck | Street art | Meditation |
|---|---|---|
| Thundercats | Intelligentsia listicle pug | Keytar tofu retro |
| Narwhal | Skateboard helvetica distillery | Tote bag |
| Aesthetic | Chia celiac irony | Bitters cold-pressed pickled listicle |
| Bicycle | Readymade sriracha man bun | Drinking vinegar venmo normcore |
.table--hover| Food truck | Street art | Meditation |
|---|---|---|
| Thundercats | Intelligentsia listicle pug | Keytar tofu retro |
| Narwhal | Skateboard helvetica distillery | Tote bag |
| Aesthetic | Chia celiac irony | Bitters cold-pressed pickled listicle |
| Bicycle | Readymade sriracha man bun | Drinking vinegar venmo normcore |
This is an awesome blockquote with a left border. It's just so freakin pretty! Truffaut pour-over forage everyday carry, meditation shabby chic ethical tofu flannel. Wolf moon flannel dreamcatcher, four dollar toast biodiesel seitan plaid iPhone chartreuse wayfarers.
.quotesThis is an awesome blockquote with quotes. Doesn't this look nice as well? Selfies irony gastropub, church-key echo park craft beer tousled. Shoreditch franzen disrupt semiotics. Ugh street art vice messenger bag cliche banh mi. Gluten-free post-ironic ennui yr cliche kogi. Synth polaroid stumptown squid, messenger bag cronut bicycle rights jean shorts.
.primary { color: #A07B83; }
// This is a code block
.secondary {
color: #FF8B86;
}
.cf
.hide-vis
.<show|hide>-<bp><-up|-down>
.<right|left>
.text-<alignment>
.text-<color>
.responsive-video