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 http://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 :
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>
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-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
<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-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
<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.
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
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 :
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
There are few utility classes too that the Unsemantic CSS framework provides. They are as follows:
If you would like to hide an element on mobile alone, use
hide-on-mobile class. It would hide the element on mobile devices.
If you would like to hide an element on desktop alone, use
hide-on-desktop class. It would hide the element on desktop.
If you would like to hide an element on tablet alone, use
hide-on-tablet class. It would hide the element on tablet devices.
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.
Also there is another class named
clear which you may use on an empty
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.