CSS Documentation

This page describes how to use the default CSS, assuming that you are using it "out of the box." If you want to roll your own class names using Unsemantic's mixins, check out the Sass documentation.

You can see the compiled, responsive CSS file here:

If you're using Unsemantic with Adapt.js, there are several CSS files. Essentially, they're comprised of code from the responsive CSS file, but are split out separately without @media queries.

If you don't need to support IE7 in your project, there are versions of the CSS without the extra code.

Responsive

Adapt.js

Viewport

In order to force the page to scale to the viewport width, HTML files that accompany Unsemantic use a <meta> tag… 

<head>
  <!--
    Formatted for readability
  -->
  <meta
    name="viewport"
    content="
      width=device-width,
      initial-scale=1,
      minimum-scale=1,
      maximum-scale=1
    "
  />
</head>

While necessary to keep the page sized correctly when changing the orientation of a phone/tablet from landscape to portrait, a drawback to this method is that the user cannot use pinch-to-zoom functionality. So you need to make sure your text is legible, and links big enough to be used via touch, etc.

An alternative method would be to use JavaScript to dynamically account for potential page sizing weirdness…

http://adactio.com/journal/4470/

While it's a perfectly valid approach, this is not built into Unsemantic, as to not introduce dependency on JS for CSS to work correctly.

Grid Classes

All grid units are contained within a top level element, with the class name grid-container. This has a built in "clearfix" so it does not require a clearing element at the end. It also handles centering the grid layout within the page. By default, it has a max width of 1200px.

Here is an example of a simple use case. 

<div class="grid-container">
  <div class="grid-50">
    I am 50% wide.
  </div>
  <div class="grid-25">
    I am 25% wide.
  </div>
  <div class="grid-25">
    I am 25% wide.
  </div>
</div>

There are grid classes named grid-x where "x" is a number that represents the percentage width of each grid unit. These cover multiples of 5, up to 100 — grid-5, grid-10 … grid-95, grid-100. There are also classes for dividing a page into thirds: grid-33 and grid-66 which are 33.3333% and 66.6667% wide, respectively.

Each grid-x unit has 10px of padding on the right and left side that, when coupled with the padding from an adjacent grid-x unit (or the grid-container itself), creates a 20px gutter. The reason for this symmetry, versus having 20px spacing on only the left/right is that it allows for push-x and pull-x classes to rearrange grid units, regardless of whether they are at the beginning/end of a row.

Nested Grids, Zero Padding

If you want to nest grid units inside others, you will need to use the class grid-parent on the element that will contain child grid units. This will zero out any side padding on the element itself, allowing the padding of the nested grid units to create a gutter. This can also be handy if you simply want to zero out padding for a particular grid unit, to allow its contents to be full width. 

<div class="grid-container">
  <div class="grid-50">
    Tall content here that
    would be alongside the
    50%, 25|25 25|25 rows.
  </div>

  <!--
    Nested grid units...
  -->

  <div class="grid-50 grid-parent">
    <div class="grid-50">
      Row 1:
        I am 25% (50% of 50%)
    </div>
    <div class="grid-50">
      Row 1:
        I am 25% (50% of 50%)
    </div>
    <div class="grid-50">
      Row 2:
        I am 25% (50% of 50%)
    </div>
    <div class="grid-50">
      Row 2:
        I am 25% (50% of 50%)
    </div>
  </div>
</div>

Note: If you find yourself wanting to zero out padding on all grid units, you should probably just do a custom Sass build. Set the $gutter-half variable to 0 (before your @import of the _unsemantic-vars.scss file). That will prevent any padding-left or padding-right from being emitted to the *.css files for .grid-x classes.

Mobile & Hidden Classes

There are also mobile-grid-x classes that can be applied, to create a separate visual grid for devices that have a screen width lower than 767px. (Note: 768px is width of an iPad in portrait orientation, so that gets a "desktop" grid.) This allows you to mix class names, for a different layout on desktop and mobile. 

<div class="grid-container">
  <div class="grid-50 mobile-grid-100">
    I am 50% wide on desktop.
    I am 100% wide on mobile.
  </div>
  <div class="grid-25 mobile-grid-50">
    I am 25% wide on desktop.
    I am 50% wide on mobile.
  </div>
  <div class="grid-25 mobile-grid-50">
    <span class="hide-on-desktop">
      I am hidden on desktop.
    </span>
    <span class="hide-on-mobile">
      I am hidden on mobile.
    </span>
  </div>
</div>

If you want to hide/show content based on mobile or desktop widths, you can use hide-on-mobile and hide-on-desktop.

Tablet Classes

Note: Throughout this documentation, anywhere that a mobile-* class is mentioned, there is also a corresponding tablet-* class when using a CSS file that has tablet in its name, such as…

These class names include:

  • tablet-grid-x
  • tablet-push-x
  • tablet-pull-x
  • tablet-prefix-x
  • tablet-suffix-x
  • hide-on-tablet

They are applicable between the widths of 768px and 1024px (typical dimensions on an iPad).

Here is the previous code example, with tablet classes added. 

<div class="grid-container">
  <div class="grid-50 mobile-grid-100 tablet-grid-50">
    I am 50% wide on desktop.
    I am 100% wide on mobile.
    I am 50% wide on tablet.
  </div>
  <div class="grid-25 mobile-grid-50 tablet-grid-50">
    I am 25% wide on desktop.
    I am 50% wide on mobile.
    I am 50% wide on tablet.
  </div>
  <div class="grid-25 mobile-grid-50 tablet-grid-100">
    <span class="hide-on-desktop">
      I am hidden on desktop.
    </span>
    <span class="hide-on-mobile">
      I am hidden on mobile.
    </span>
    <span class="hide-on-tablet">
      I am hidden on tablet.
    </span>
  </div>
</div>

Push & Pull Classes

If you want to swap the visual arrangement of columns, but not affect source order, you can use push-x and pull-x classes, and/or their mobile counterparts — mobile-push-x and mobile-pull-x. You can combine them too, of course. 

<!--
  Basic Example
-->

<div class="grid-container">
  <div class="grid-50 push-50">
    I am second on desktop.
  </div>
  <div class="grid-50 pull-50">
    I am first on desktop.
  </div>
</div>
<!--
  Complicated Example
-->

<div class="grid-container">
  <div class="grid-50 push-50 mobile-grid-50 mobile-push-50">
    I am third, on desktkop.
    I am second, on mobile.
  </div>
  <div class="grid-25 pull-50 mobile-grid-50 mobile-pull-50">
    I am first, on desktop.
    I am first, on mobile.
  </div>
  <div class="grid-25 pull-50 mobile-grid-100">
    I am second, on desktop.
    I am 100% wide on mobile.
  </div>
</div>

Prefix & Suffix Classes

If you just want to create some "dead space," the visual equivalent of an empty column, you can use the prefix-x and suffix-x classes, and/or mobile-prefix-x and mobile-suffix-x. 

<div class="grid-container">
  <div class="grid-30 suffix-20">
    I'm 30% wide, followed by...
  </div>
  <div class="grid-30 prefix-20">
    Another 30% column, with
    40% empty space between.
  </div>
</div>

Clearfix

There is a clearfix class, should you need to use it. You won't have to for elements with a grid-x class applied, because these are all floated (and therefore clear their child elements automatically). 

.clearfix:before,
.clearfix:after,
.grid-container:before,
.grid-container:after,
.grid-100:before,
.grid-100:after,
.mobile-grid-100:before,
.mobile-grid-100:after {
  content: ".";
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.clearfix:after,
.grid-container:after,
.grid-100:after,
.mobile-grid-100:after {
  clear: both;
}

.clearfix,
.grid-container,
.grid-100,
.mobile-grid-100 {
  zoom: 1;
}

Note: Though not floated itself, grid-100 has a clearfix applied already.

class="clear"

There is also a clear class that you can use, on an empty <span> or <div>, if you want to force a break between rows of grid units (or really, anything that is floated). 

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

Here's an example of how you might use class="clear" to force a new row. 

<div class="grid-container">
  <div class="grid-25">
    I am in row 1
  </div>
  <div class="clear"></div>
  <div class="grid-50">
    I am in row 2
  </div>
</div>

Note: This approach is best used for clearing floats when there is still more content to follow. If you just want to make sure a parent element keeps its children elements cleared correctly, add class="clearfix" to the parent. In other words, <div class="clear"></div> needn't be the last child within any given parent element.

IE10 "Snap" Mode

Because of how Internet Explorer 10 works in Windows 8, when the browser is "pinned" to the right/left of the screen, there is a small snippet of code that forces the page width to behave correctly. You can read more about this fix here…

http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ 

@media screen and (max-width: 400px) {
  @-ms-viewport {
    width: device-width;
  }
}

IE7 Support

In order to support Internet Explorer 7, there is an optional Sass variable $unsemantic-ie7-support that's set to true by default. This causes additional code to be generated, which fakes box-sizing and addresses some rounding errors when dealing with CSS percentages.

For instance, there's some code that zeros out padding on grid-x elements, and instead adds margins to the left/right of their immediate children. This is called a CSS expression and is basically embedded JavaScript that works only in older versions of IE. Normally, this is a pretty terrible thing to do, but hey… It's IE7. 

/* For .grid-5 to .grid-100 */

.grid-5 > * {
  *margin-left: expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === "block") && "10px");
  *margin-right: expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === "block") && "10px");
}

Don't be worried about this causing performance issues in good browsers, or other versions of IE. The presence of a "star hack" CSS filter in *margin-left and *margin-right prevents modern browsers from evaluating the CSS expression. Since it erroneously parses the CSS filter instead of ignoring it, IE7 is the only browser affected.

Note: If you don't need to support IE7, the files ending in *-no-ie7.css are smaller.