motus.css

Fully responsive CSS framework for the modern web. Resize your browser to experience responsive magic!
with in Denmark.

Back to resources.ludvig.xyz

Load motus

Put the following code in the <head> tag of your document to load motus. And put motus in your css folder.

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/motus.min.css">

Grid structure

<div class="container">
  <div class="row">
    <div class="grid-12">
      <h2>Heading</h2>
      <p>This is a text field</p>
    </div>
  </div>
</div>

Grid showcase

grid-6

grid-3

grid-2

grid-1

grid-12

grid-6 offset-3

Grid showcase, responsive images

Use class="img-responsive" or class="img-responsive-max".
-max means that the image will NOT be stretched out.

Style showcase

Heading 1

Heading 2

Heading 3

Heading 4

Link
Link underline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus sit amet eros a sollicitudin. Sed quis molestie lectus, sed faucibus mauris. Duis est ex, aliquam vitae convallis at, malesuada at nibh. Praesent sollicitudin lacus justo, nec vulputate tortor consectetur eu. Aliquam tristique, diam id dictum tristique, ex augue convallis ante, nec bibendum ante erat ac urna. Morbi ut sodales neque. In feugiat eget augue nec ullamcorper. Integer turpis elit, sodales in euismod eget, pulvinar sed nisl. Morbi malesuada lorem id massa convallis, rutrum finibus lorem blandit. Nunc posuere sem vel ex malesuada, a tempus dui mollis. Etiam ultricies, elit a semper pretium, metus turpis convallis risus, non commodo ante turpis a turpis. Quisque vel diam diam. Proin viverra condimentum sem at feugiat. Praesent a enim est. Morbi aliquet luctus turpis id venenatis. Duis a elementum augue, non fringilla magna.
Lead
Nunc non velit finibus nisl dapibus hendrerit in nec turpis. Vestibulum tincidunt blandit facilisis. Nulla facilisi. Quisque suscipit porttitor leo, quis volutpat sapien tempor non. Quisque ut urna auctor, volutpat odio sed, mollis eros. Nulla euismod gravida condimentum. Praesent consectetur lacinia nisl, id sagittis ex dapibus ut. Morbi vel neque venenatis, pulvinar justo non, suscipit massa. Donec facilisis turpis quis porttitor pharetra. Nunc at euismod tellus. Nunc venenatis velit eget dolor congue, a dapibus dui euismod.

Read more...

Blockquote:

“If, For Any Reason You’re Not Satisfied, I Hate You.”
– Sales Clerk

Blockquote thin

Button
Button Primary
Button Info
Button Error
Button Rounded
Button Primary Rounded

Popups (requires motus.js):

Default Popup
Plain Popup

Pagination, button-group:

Rounded

Labels:

Motus labels:
default, blue, green, red, black

Modifiers:
text-l, border

red + text-l + border:
Important!

Form style

First name:

Last name:


Form style wide

First name:

Last name:


Form style select

First name:

List style

using <ul/dl/ol> and <li>

  • Numero uno
  • Nummer to
    • Numero duo uno
    • Nummer to to
  • Number three
  • Numeron kvar
  • Broj pet


Inline list style

using <ul/dl/ol> and <li> with class .inline

  • Numero uno
  • Nummer to
  • Number three
  • Numeron kvar
  • Broj pet


Muted list style

using <ul/dl/ol> and <li> with class .muted

  • Numero uno
  • Nummer to
    • Numero duo uno
    • Nummer to to
  • Number three
  • Numeron kvar
  • Broj pet


Table Style

Jill Smith 50
Eve Jackson 94
Julie Klaphat 40
John Tron 24

Striped Table Style

<table class="striped">

Jill Smith 50
Eve Jackson 94
Julie Klaphat 40
John Tron 24

BG Structure

Use an extra div around your container with class="bg $color" where $color is the class of your background-color

Motus comes standard with .black and .grey

Customization example:

.bg.red {
  background-color: #ff0000;
}

BG Style

BG Black Muted text

BG Style

BG Grey Muted text

Fullscreen video

Demo

.video-container

place your video tag with a fullscreen class inside a .video-container div, then place a container with the contents you want on top of the video after the video tag.