JustMy.scss

Another stupid SCSS framework, but it's just mine.

Install
Bower:
$ bower install JustMy.scss

npm:
$ npm install JustMy.scss

CDN:
<script src="https://unpkg.com/JustMy.scss/dist/justmy.min.css"></script>

View on Github Download Repo
Typography

The primary font is Open Sans and the secondary font is Roboto Slab. They are both served from Google fonts.


Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph Styling

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.

This is an anchor tag.

Grids

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.


12-column Grid - .row > .col-<bp>-<cols>
1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1
12

5-column Grid - .row > .col-<bp>-<cols>-5
1
4
2
3
3
2
4
1
5

Grid Offset - .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.

5
5 offset 2
1-5 offset 1
1-5 offset 1
4 offset 2
4 offset 2
9 offset 3
3 offset 1
3 offset 1
3 offset 1
3-5 offset 1

Grid Push/Pull - .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).

(1) push 4
(2) push 6
(3) push 2
(4) pull 6
(5) push 2
(6) pull 8

Grid Fixed - .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.

fixed 4
fill 8
fixed right 5
fill 7

Block Grid - .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.

.col
.col
.col
.col
.col
.col

Additional Grid Classes
  • .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)
Lists
Unordered List
  • Literally marfa pabst
  • This is a nested list
    • Axe chia selvage sartorial
    • Thundercats hella franzen
    • Biodiesel slow-carb pitchfork
  • Wolf moon meh beard fashion
Ordered List
  1. 8-bit master cleanse brunch
  2. This is a nested list
    • Pickled pour-over twee
    • Kinfolk flexitarian selfies brunch
    • Kickstarter ethical
  3. Bespoke tousled pour-over retro
Description List
Occupy vegan
Probably haven't heard of man braid
Sriracha
Brooklyn letterpress actually semiotics
Flexitarian
Next level hella kale
Inline List - .list--inline
  • Dreamcatcher.
  • Knausgaard.
  • Distillery.
  • Chillwave.
  • Vegan.
  • Flexitarian.
  • Kickstarter.
Plain List - .list--plain
  • Venmo vice actually tilde.
  • Godard mlkshk 8-bit.
  • Master cleanse schlitz.
  • Stumptown letterpress health.
  • Semiotics truffaut yuccie.
Split List - .list--split .list--split-<bp>-<cols>
  • Brunch thundercats butcher.
  • Semiotics shabby.
  • Tilde kale chips letterpress.
  • Pork belly migas master.
  • Cornhole marfa williamsburg.
  • Celiac farm-to-table fanny pack.
  • Before they sold out.
  • Wayfarers gentrify chambray seitan.
  • Cleanse kickstarter sustainable.
  • 8-bit hammock.
Tables
Full Width Table - .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
Alternating Rows Table - .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
Hover Table - .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
Blockquotes
Normal Blockquote
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.
Quotes Blockquote - .quotes
This 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.
Code/Pre
Inline Code
.primary { color: #A07B83; }


Code Block
// This is a code block
.secondary {
    color: #FF8B86;
}
Buttons
Normal Button - .btn

.btn--large .btn .btn--outline .btn--small

.btn--full

Secondary Button - .btn--secondary

.btn--large .btn .btn--outline .btn--small

.btn--full

Forms
Colors
Primary
Light
Normal
Dark
Secondary
Light
Normal
Dark
Grays
Ultralight
Light
Normal
Dark
Ultradark
Other
White
Black
Success
Warn
Alert
Utility Classes
Clearfix
.cf
Hide Elements Visually
.hide-vis
Show/Hide Elements
.<show|hide>-<bp><-up|-down>
Float
.<right|left>
Text align
.text-<alignment>
Text Color
.text-<color>
Responsive Video
.responsive-video
Spread the