The RED UI Core is comprised of various CSS and Javascript libraries. All of the global styles and variables from the Design section are included by default. A common set of user-interface components is also included along with utilities for handling DOM manipulation, client-side rendering, etc.
Create powerful multi-device layouts quickly and easily with the default 12-column, nest-able grid. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.
Start by adding an element with a class of row. This will create a horizontal block to contain vertical columns. Then add divs with a column class within that row. You can use column or columns - the only difference is grammar. Specify the widths of each column with the small-#, medium-#, and large-# classes.
.row
.small-2.medium-3.large-4.columns
.small-4.medium-6.large-4.columns
.small-6.medium-3.large-4.columns
.row
.small-4.large-3.columns
.small-4.large-6.columns
.small-4.large-3.columns
.row
.small-3.medium-5.columns
.small-9.medium-7.columnsVarious styles for Anchor and Button elements.
%a.button Anchor Element
%button.button Button Element%a.button.micro
%a.button.tiny
%a.button.small
%a.button
%a.button.large
%a.button.expand%a.button
%a.button.secondary
%a.button.info
%a.button.alert
%a.button.success
%a.button.disabled%a.button.micro.round
%a.button.tiny.round
%a.button.small.round
%a.button.round
%a.button.large.round
%a.button.expand.round
%a.button.micro.radius
%a.button.tiny.radius
%a.button.small.radius
%a.button.radius
%a.button.large.radius
%a.button.expand.radius