Unsemantic CSS framework tutorial and Guide

What is Unsemantic?

Unsemantic is a CSS framework that is responsive and based on fluid grid system that uses percentages instead of fixed pixels.  Like any other CSS framework, Unsemantic too has pre-prepared CSS classes that would make web page development easier. Unsemantic is popularly knows to be the successor of the famous 960Grid CSS framework.

One thing that I like about Unsemantic is that it is uses % (percentage) values instead of fixed Px(Pixel) values. Also if you are looking for “just” a responsive grid based css framework then this is the best. Unsemantic does not have classes for your buttons or forms like Bootstrap but concentrates on the grid and responsiveness alone.

Getting Started with Unsemantic CSS Framework

Firstly, you need to download the Unsemantic css file from https://unsemantic.com/css-documentation. You’ll notice that there are different versions of the Unsemantic css files available on their website. But if you notice the file names, you’ll realize that each css file is made for different devices etc. For example, unsemantic-grid-responsive-tablet.css . As the name suggests, is a responsive version which supports or has breakpoint for Mobiles, Desktop and Tablets too. Also on their website, just above the css file’s link, there is a small label that clearly says that the file has Mobile, Tablet and Desktop breakpoints. The “Breakpoints” mentioned there are the reference to media queries. Which means that a file that has Mobile and Desktop breakpoints have media queries for both mobile and desktop. So depending on your requirement download the CSS file that best suits your need.

Once you have downloaded the file that you require, include it in your page.

Secondly, they require you to add a meta tag that would keep the page sized correctly even when you change the orientation.

<meta
    name="viewport"
    content="
      width=device-width,
      initial-scale=1,
      minimum-scale=1,
      maximum-scale=1
    "
  />

Voila ! you are ready to get started Now.

Installing Unsemantic via node npm

Unsemantic CSS framework can be installed via node too. The command to install Unsemantic through node is :

npm install unsemantic

Unsemantic grid CSS Classes

There are many classes that Unsemantic provides and I believe they cover almost everything that you would require. Following are the classes provided by Unsemantic :

grid-container

All the individual grid units (elements using the grid-x classes; explained below) are contained within a parent grid with the class of grid-container. This basically has an inbuit “clearfix” and does not require any other clearing element at the end. The grid-container also takes care of centering the layout within the page. By default it has a max-width of 1200px, however you may want to change it according to your preferance, for e.g to 960px. Example:

<div class="grid-container">
...
</div>

grid-x

All the grid elements (elements using grid-x classes, e.g DIV) in Unsemantic starts with a grid-x class where x could be replaced by a number in the multiple of 5, max being 100. So basically we have grid-5 through grid-100 where grid-100 would give the element a width of 100% and grid-5 would give a width of 5% to the element. You need to remember that at any given point the sum of the grid-x should be 100. For e.g if you have just two elements, it could be grid-50 and grid-50 or grid-75 and grid-25. Example:

<div class="grid-container">
  <div class="grid-50">50% wide</div>
  <div class="grid-50">Another 50% wide</div>
</div>

grid-33 and grid-66

Unsemantic also provides grid-33 and grid-66 which are 33.3333% and 66.6667% wide respectively. While using this you can have either 3 of grid-33 or one grid-33 and one grid-66. Example:

<div class="grid-container">
  <div class="grid-33">33.3333% wide</div>
  <div class="grid-66">66.667% wide</div>
</div>

Gutter Space in Unsemantic

All the grid-x will have a 10px padding on the left and right. So when two elements are together it creates a gutter space of 20px (i.e 10px + 10px) . If you want to remove out the padding from all the grid-x elements, then you may choose to do a custom Sass build. To do that go to _unsemantic-vars.scss and set the $gutter-half variable to 0 and build/compile the file.

grid-parent

If you want to nest grids inside another grid, you’ll need to use grid-parent to the parent grid. This will basically remove any left and right padding of the parent element. This can also be used when you want to remove any left and right padding of any grid element. Example:

<div class="grid-container">
  <div class="grid-50">50% wide</div>
  <div class="grid-50 grid-parent">
    <div class="grid-25">25% wide child</div>
    <div class="grid-75">75% wide child</div>
  </div>
</div>

prefix-x and suffix-x classes

If you would like to add a left margin of say x % (where x is in multiple of 5), you can use prefix-x to a grid element. Which means if you use prefix-5, the grid element(for eg div) would get a margin-left of 5%. Similarly if you would like to add a right margin of say x% you can use suffix-x to the grid element. Which means if you use suffix-5, the grid element(for eg div) would get a margin-right of 5%. Please note than even now, the sum of the percentages used through various classes should be 100. Which means that if I use a prefix-5 on an element, that grid element should have a max of grid-95 as the class. Example:

<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>

Push-x and pull-x classes

In some scenarios you might want to swap elements visually but retain their order in the page say for SEO reasons. In such scenarios you can use a push-x or pull-x classes. The push-x adds a positive value of x as the left value. On the other hand pull-x gives a negative x % as left value to the grid element. For e.g push-5 will add “left: 5%;” CSS property to the grid element and pull-5 will add “left: -5%;” to the grid element. 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>

Mobile Classes provided by Unsemantic

Similar to the grid-x classes, there are mobile variants too of these classes. All you need to do is prefix “mobile-” to all the “grid-x” classes to get its mobile equivalent. For e.g :

mobile-grid-100
mobile-grid-5
mobile-grid-33
mobile-push-5
mobile-pull-10
mobile-prefix-5
mobile-suffix-5

Please note that the “mobile-” grid classes would be visible on devices that have a screen width lower than 768px.

Tablet Classes provided by Unsemantic

Similar to the mobile classes, tablet equivalent classes are also available. For the tablet version you need to add “tablet-” as the prefix to all the “grid-” classes. The tablet classes are applicable between the widths of 768px and 1024px (typical dimensions on an iPad). E.g
tablet-grid-100
tablet-grid-66
tablet-push-10
tablet-pull-20
tablet-prefix-5
tablet-suffix-5

Utility Classes

There are few utility classes too that the Unsemantic CSS framework provides. They are as follows:

hide-on-mobile

If you would like to hide an element on mobile alone, use hide-on-mobile class. It would hide the element on mobile devices.

hide-on-desktop

If you would like to hide an element on desktop alone, use hide-on-desktop class. It would hide the element on desktop.

hide-on-tablet

If you would like to hide an element on tablet alone, use hide-on-tablet class. It would hide the element on tablet devices.

clearfix

In case you have a need for clearing, you may use clearfix class. However you might not require it if you are using the grid classes as they are already floated and therefore clear their child elements.

clear

Also there is another class named clear which you may use on an empty div or span if you want to force a break between a row of grid units.

Demo of Unsemantic CSS

You can find the demo of Unsemantic CSS at their official site. Click here to view the demo.

I have been using Unsermantic for some of my projects and have found it to be really helpful. I was looking just for a grid system that was responsive and found Unsemantic to be just what I needed.

CSS Font Icons (optional, from FontAwesome)

If you would like to use CSS Font Icons like the one bootstrap provides (Glyphicons) , along with the CSS grid system you can try using Font Awesome Icons. It is really easy to use Font Awesome along with Unsemantic CSS .

So go ahead and try out Unsemantic. Do let us know what do you think about it.