morr.css

Quick Docs & Demo

Welcome to the CSS Demo. Scroll down to see this framework in action.

Github JS Demo

morr uses the standard html5 structure to organize content.

Start the page off with a header element. Break your page up with a few section elements, and wrap it up with the handy footer.

Also featured are styling for the nav element, and off-screen sidebar support with aside. Don't go overboard with section elements as they use vh and vw for padding. Too many means increased scrolling. Use article to break up sections further.

If you add .panel to any header or section element, it will expand be full width. You can see this in action at the top of this page. Also, you can add .bg to any element to add a bg accent. This can be seen in the Quick Docs title section above.

The default nav element has some basic styles as well.

It expands to full width. Throw it in the root of your body, and it will go fill the viewport. Throw it in an element, and it will be contained inside the element.

Off-Screen Sidebar

Add class .active to make visible.

Vollkorn is for headers.
Muli is a great body font.
Old Standard TT for accent.

  • H1

    ,

    H2

    ,

    H3

    ,

    H4

    ,
    H5
    ,
    H6
  • a Simple Link
  • strong Bold Text
  • em Italicized Text
  • u Underlined Text
  • .title Removes Margins
  • .ta Text Accent Font
  • .ttc Capitalized Text
  • .ttu Uppercase Text
  • .tc Center Aligned Text
  • .tr Right Aligned Text
A blockquote

All p elements have a max-width of 40em. So this default paragraph will wrap before it reaches the end of the element if the element is wide. This is to make reading chunks of text easier.

If you use p.wide, you get an increased max-width of 50em. 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.

Alternatively, p.narr is even smaller at 30em. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Add the generic .mw helper to make it full width. 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.

Grid

Based on Flexbox
1
2
1
2
3
4
1
2
3
4
5
6
1
2
3
4
5
6
7
8
9
10

Buttons

.btn
.btn.otln
  • ul Item 1
  • ul Item 2
    1. Nested Lists
    2. Are Supported
  • ul Item 3
  1. ol Item A
  2. ol Item B
    • Sub Item 1
    • Sub Item 2
  3. ol Item C

A lot of pople need to display code. I'm doing it every two pixels on this page. You can do inline clode with just the code block. That was it, just there. Nifty.

Wrap the code element in a pre element, and you get that preformatted goodness.

Variable Value
Fruit Apples
Vegetables Cucumbers
Lorem Ipsum
lol what
example more example
I just want to make this table
align with the code sample

Utilities

Helper Classes

But wait...

Absolutely. I'm using Vue.js to build this page. It only styles basic elements, drop the CSS wherever you want. Go nuts! The javascript here is literally just a tool to add and remove classes. If you're using jQuery or something similar, you probably don't need it at all.