morr was inspired by frameworks like getskeleton, milligram, tachyons, and wing
Have you ever started using a framework to make things easier - only to notice you're consistently overwriting styles? Or maybe you went with a super-micro framework, and now you're writing a bunch of utility classes you should aready have. Welcome to morr, a minimalist starting point for frontend development. Beautiful basic styling makes it easy to extend and use for nearly everything.
Scroll down to see a quick demo of this framework.
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 .accent to any element to add a bg accent. This can be seen in the But Wait section at the bottom of the page.
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.
Raleway is a great body font.
a Simple Linkstrong Bold Textem Italicized Textu Underlined Text.title Removes Margins.txtt-c Capitalized Text .txtt-u Uppercase Text .txt-c Center Aligned Text .txt-r 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 .w-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.
ul Item 1ul Item 2ul Item 3ol Item Aol Item Bol 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 |