Semantic Grid System vs UiKit

With Semantic.gs, you can manipulate the grid using media queries.

article { .column(9); }
section { .column(3); }

@media screen and (max-width: 720px) {
    article { .column(12); }
    section { .column(12); }
}

By default Semantic Grid System has a fixed layout. But switching to fluid, percentage-based layouts is easy. To switch from pixels to percentages, simply add one variable:

@total-width: 100%;

Semantic.gs supports all modern CSS pre-processors sucha as Sass, LESS and Stylus.

The code is pretty clean and follows well-defined conventions.

There are plenty of ready to use themes available from the official website. You can choose the theme that you want to use from the dropdown menu and then download the CSS, LESS or SASS file for that theme to use for the website.

When using UIKit classes, it is used with the ui- prefix which is very good. Components are explained straight-forward.

UiKit has some built-in animation features which can be used to animate various components.

UiKit has a pretty good and clean style even out of the box without any customization needed.

UiKit's rather minimal style can be easily customizable to create an entirely new look to fit the needs of the designer.

Every aspect of the framework is designed to be modular, this way designers can easily choose which components to add to their stylesheet without risking to damage the overall style.