Modulifier cheat sheet

Responsive setup

  • CSS viewport & text size

    • Will includes all the @viewport code.

    • Will set text-size-adjust to prevent browsers from zooming text.

  • Border box

    • Will add all the border-box code to change the layout math.

  • Body margin

    • Will remove the default margin from <body> because it is almost never used.

  • New HTML elements

    • Will set default styles for new HTML elements for better browser support.

Images

  • Remove border

    • Will remove the border from all images by default for better browser support.

  • .img-flex

    • Creates the responsive .img-flex class that will make images 100% the width of their container.

  • SVG helpers

    • Will fix a browser bug related to embedded SVG.

    • Add the ability for embedded SVG to inherit fill from the CSS color property.

  • .image-replacement, .ir

    • A class, and a shorter version, that will hide all the text inside an element and allow only the background-image to show.

List group

These classes are brute force and not responsive, if you use list-group-inline, the list will always be inline.

  • .list-group

    • The .list-group class that will remove bullets and padding from lists, so semantically they can be lists but no visually.

    • When added to a <dl> tag, there is a little responsiveness to how the <dt> and <dd> tags flow.

  • .list-group-inline

    • The .list-group-inline class that will force the <li> tags onto the same line.

    • When added to the <dl> tag, the <dt> and <dd> tags will sit on the same line if there is enough space.

  • List group example

    • <ul class="list-group-inline">
  <li><a href="#">Dinosaurs</a></li>
  <li><a href="#">Plant eaters</a></li>
  <li><a href="#">Meat eaters</a></li>
</ul>

      <dl class="list-group-inline">
  <dt>Length</dt>
  <dd>12 metres</dd>
  <dt>Mass</dt>
  <dd>5.4 metric tons</dd>
</dl>

Embed containers

  • .embed

    • The wrapper class for making responsive embedded resources like images and videos.

  • .embed-item

    • The class to be added directly to the embedded image or video.

  • Embed container example

    • <figure>
  <div class="embed embed-4by3">
    <img class="embed-item" src="dinos.jpg" alt="">
  </div>
  <figcaption>Dinosaurs frolicking in the barren landscape</figcaption>
</figure>

      <div class="embed embed-16by9">
  <video class="embed-item" src="dinos-frolicking.mp4" controls></video>
</div>

  • .embed-1by1

    • Square.

  • .embed-4by3

    • Traditional TV/computer screens.

  • .embed-iso216

    • A-standard paper sizes.

  • .embed-3by2

    • Classic 35 mm film & most digital photos, landscape.

  • .embed-2by3

    • Classic 35 mm film & most digital photos, portrait.

  • .embed-golden

    • The Golden Ratio.

  • .embed-16by9

    • HDTV.

  • .embed-185by100

    • Common widescreen cinema.

  • .embed-24by10

    • Widescreen cinema: 2.4:1.

  • .embed-3by1

    • Panorama photos.

  • .embed-4by1

    • Polyvision.

  • .embed-5by1

    • Really, really wide…

  • Making a new ratio

    • Take the height, divide by the width, and multiply by 100 — h ÷ w × 100

    • An image with the dimensions: 950 × 1427: 1427 ÷ 950 × 100 = 105%

Media objects

  • .media

    • A wrapper class to surround image & text groups, especially if the images is to be beside the text.

  • .media-img

    • A class for adding to the image, or surrounding <div>, within the media object.

  • .media-body

    • A class to add to the text, or surrounding <div>, within the media object.

  • .media-img-reversed

    • Instead of floating the image left it will float: right

  • .media-img-stacked

    • Will disable floating and have the image above the text instead.

  • Media object example

    • <div class="media">
  <div class="media-img media-img-reversed">
    <img src="images/parsnips.jpg" alt="">
  </div>
  <div class="media-body">
    <h2 class="media-title">Parsnips</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
</div>

Icons

  • .icon

    • To be added to a tag, usually <i> to mark it as being an icon.

    • Usually you add another class to define the background-image

    • Will also add some CSS to support embedded SVG icons with the <svg> and <use> tags.

  • .icon-label

    • Can be added to the neighbouring text to allow the icon and the text to align.

  • .icon-link

    • Can be added to the surrounding <a> tag to remove the text-decoration

  • .i-16

    • A 16 × 16 pixel sized icon.

  • .i-18

    • A 18 × 18 pixel sized icon.

  • .i-20

    • A 20 × 20 pixel sized icon.

  • .i-24

    • A 24 × 24 pixel sized icon.

  • .i-32

    • A 32 × 32 pixel sized icon.

  • .i-48

    • A 48 × 48 pixel sized icon.

  • .i-64

    • A 64 × 64 pixel sized icon.

  • .i-96

    • A 96 × 96 pixel sized icon.

  • .i-128

    • A 128 × 128 pixel sized icon.

  • .i-192

    • A 192 × 192 pixel sized icon.

  • .i-256

    • A 256 × 256 pixel sized icon.

  • Icons with <img> tags

    • <ul>
  <li>
    <i class="icon i-18">
      <img src="images/icon.svg" alt="">
    </i>
    <span class="icon-label">GitHub</span>
  </li>
</ul>

  • Icons with background images

    • <a class="icon-link" href="#">
  <i class="icon i-32 i-github"></i>
  <span class="icon-label">GitHub</span>
</a>

      .i-github {
  background-image: url("../img/github.svg");
}

  • Icons with SVG symbols

    • <svg hidden>
  <symbol id="the-icon" viewBox="0 0 256 256">
    <circle x="128" y="128" r="128" />
  </symbol>
</svg>

⋮

<a class="icon-link" href="#">
  <i class="icon i-24">
    <svg><use xlink:href="#the-icon"></use></svg>
  </i>
  <span class="icon-label">GitHub</span>
</a>

  • Icons with SVG symbols in a separate file

    • <a class="icon-link" href="#">
  <i class="icon i-24">
    <svg><use xlink:href="images/icons.svg#the-icon"></use></svg>
  </i>
  <span class="icon-label">GitHub</span>
</a>

Hidden

  • [hidden], .hidden

    • Makes sure the hidden attribute works in all browsers and provides a .hidden class.

  • .visually-hidden

    • A class that will hide something from the visual screen but still allow it to be accessible via tools.

  • .focusable

    • To be added to the .visually-hidden class to allow the keyboard to access the element.

  • .invisible

    • A class that will hide an element on the screen, but its space will still be there.

  • .chop, .crop

    • These classes that will chop/crop overflowing elements off—essentially just overflow: hidden

  • .truncate

    • A class that will chop single lines of text off and add an ellipsis at the end.

  • .scrollable

    • A class that make an element horizontally scrollable, good for simple responsive tables.

Positioning

These classes are brute force and not responsive, if you use left, the element will always be floated left.

  • .flex-row

    • Convert the element into a Flexbox container.

  • .flex-justify

    • Turn on Flexbox’s justify-content: space-between property.

  • .flex-align-center

    • Turn on Flexbox’s align-items: center property.

  • .clearfix

    • A class that can be used on floating wrappers to trigger a clear fix.

  • .left, .right

    • Will float the element to the left or the right

  • .inline, .inline-block (.ib), .block

    • Classes to control the display property between inline, inline-block, and block

  • .valign-top, .valign-middle, .valign-bottom

    • These classes allow you to control the vertical-align property on inline and inline-block elements or within tables.

  • .fixed, .relative, .absolute, .static

    • Classes to control the position property of an element.

  • .zindex-1, .zindex-2, .zindex-3, .zindex-1000

    • Classes to control three basic z-index states on an element.

  • .pin-left-top, .pin-right-top, .pin-left-bottom, .pin-right-bottom, .pin-center-top, .pin-center-bottom, .pin-left-center, .pin-right-center, .pin-center

    • A series of classes for moving a position: absolute element to different common locations.

    • The .pin-* classes will automatically add position: absolute so adding the class .absolute also isn’t necessary.

    • Simplified versions are available: .pin-lt, .pin-rt, .pin-lb, .pin-rb, .pin-ct, .pin-cb, .pin-lc, .pin-rc, .pin-c

  • .width-quarter, .width-half, .width-full

    • A series of classes for setting common widths.

    • Simplified versions are available: .w-1-4, .w-1-2, .w-1

  • .height-quarter, .height-half, .height-full

    • A series of classes for setting common heights—usually only useful the context of position: absolute

    • Simplified versions are available: .h-1-4, .h-1-2, .h-1

  • .height-win-quarter, .height-win-half, .height-win-full

    • A series of classes for setting elements to have a minimum height compared to the window size.

    • .height-win-full will be the same height as the window itself.

    • Simplified versions are available: .h-w-1-4, .h-w-1-2, .h-w-1

  • .center-flow, .center-text

    • Centres inline, inline-block & text elements—essentially just adds text-align: center

  • .center-block

    • Centres block-level elements, but they need widths—essentially adds: margin-left: auto; margin-right: auto

  • .center-content, .center-content-vertical

    • Centres all the contents of a box within, both vertically & horizontally centered.

    • If there are multiple elements they are put on new lines, creating a single column.

  • .center-content-horizontal

    • Centres all the contents of a box within, both vertically & horizontally centered.

    • If there are multiple elements they are put on a single line, creating a row column.

  • .not-centered, .no-auto-margins

    • Removes the auto margins from the left & right side by setting them to 0

Nice lists

  • Typographic bullets & numbers

    • The “Nice lists” option will change the default bullets and numbers on <ul> and <ol> tags to make them look better.

  • Remove custom bullets & numbers

    • The simplest way to remove the custom bullets & numbers is to add the class .list-group

Basic buttons

  • .btn

    • A very basic button style for prototyping websites.

  • .btn-light

    • An alternative button style for prototyping websites.

  • .btn-ghost

    • A third button style for prototyping websites.

  • .link-box

    • For adding to <a> tags to remove their underlines and make them block.

  • Button examples

    • <a class="btn" href="#">Buy Now</a>
<a class="btn btn-ghost" href="#">See all the features</a>

Forms

  • Form normalization

    • Will normalize a bunch of browser inconsistencies when styling forms and inputs.

    • Will set all labels to the most accessible visual design format: above inputs—except checkboxes and radio buttons, they will stay beside.

  • .label-block

    • A class to force a <label> onto its own line.

  • .label-inline

    • A class to force a <label> onto the same line as other inputs.

  • Customized input controls

    • Radio buttons & checkboxes are customized with larger, consistent looking controls.

    • Select boxes are customized with a consistent look.

  • .hide-custom-input

    • This class can be added to a checkbox or radio button <input> or <label> to hide the custom control.

Accessibility

  • Focus styles

    • Will add strong visual focus styles to links, buttons, inputs and focusable items.

  • Skip links

    • Adds all the CSS necessary for creating basic skip links.

  • Skip links example

    • <ul class="skip-links">
  <li><a href="#main">Jump to main content</a></li>
  <li><a href="#nav">Jump to main navigation</a></li>
  <li><a href="#pause">Pause all animations</a></li>
</ul>

  • Print style normalization

    • Will do a bunch of default things to print styles including: removing shadows, setting text colour to black, removing backgrounds, adding underlines, displaying URLs beside links, and attempting to avoid orphans where possible.

  • .no-print

    • Will hide the element when a user prints out the website.

  • .no-print-href

    • Will stop the href printing out beside a link when printed.

  • .print-only

    • Will hide an element by default but then display it when the website is printed.

  • .force-print

    • Will attempt to force something to be printed even if there’s JavaScript or some other CSS that tries to hide it.

  • .page-break-before

    • Will force a page-break before this content when printed.

  • .page-break-after

    • Will force a page-break after this content when printed.

  • .no-page-break-inside

    • Will attempt to prevent the content from being broken over multiple pages when printed.