Navigation
How to Install
Add Stylesheet to html head section as following.
<link rel="stylesheet" href="..path-to-directory/ultralight.css">How to Use
Basic Example
<div class="cntr"> <!--Creates a boxed container--><div class="rw"> <!--Creates a row--><div class="cl m6"> <!--Creates a column of width 6-->column 1</div><div class="cl m6"> <!--Creates a column of width 6-->column 2</div></div></div>
Example
<div class="cntr"> <!--Creates a boxed container--><div class="rw"> <!--Creates a row--><div class="cl s12 m6 l4">column 1</div><div class="cl s12 m6 l4">column 2</div><div class="cl s12 m6 l4">column 3</div></div></div>
Above code will create 1 column layout on small screen, 2 columns layout on medium screens, and 3 columns layout on large screens.
Grid System
s1, s2, s3 .................s12 classes can be used to create columns for small screens.
m1, m2, m3 .................m12 classes can be used to create columns for medium screens.
l1, l2, l3 .................m12 classes can be used to create columns for large screens.
xl1,xl2,xl3.................xl12 classes can be used to create columns for extra large screens.
xxl1,xxl2,xxl3.................xxl12 classes can be used to create columns for double extra large screens.
Collapse gutters
Add class ngt to row.
<div class="cntr"> <!--Creates a boxed container--><div class="rw ngt"> <!--Creates a row, class "ngt" collapse gutters--><div class="cl s12 m6 l4">column 1</div>-----------------------</div></div>
Push Columns
To push columns on small screens use : spus1, spus2, spus3 .......................spus12
To push columns on medium screens use : mpus1, mpus2, mpus3 .......................mpus12
To push columns on large screens use : lpus1, lpus2, lpus3 .......................lpus12
To push columns on extra large screens use : xlpus1, xlpus2, xlpus3 .......................xlpus12
To push columns on double extra large screens use : xxlpus1, xxlpus2, xxlpus3 .......................xxlpus12
<div class="cntr"> <!--Creates a boxed container--><div class="rw"> <!--Creates a row--><div class="cl s4"> <!--Creates a column of width 4-->column 1</div><div class="cl s4 spus4"> <!--Creates a column of width 4, Pushing 4 columns-->column 2</div></div></div>
Pull Columns
To pull columns on small screens use : spul1, spul2, spul3 .......................spul12
To pull columns on medium screens use : mpul1, mpul2, mpul3 .......................mpul12
To pull columns on large screens use : lpul1, lpul2, lpul3 .......................lpul12
To pull columns on extra large screens use : xlpul1, xlpul2, xlpul3 .......................xlpul12
To pull columns on double extra large screens use : xxlpul1, xxlpul2, xxlpul3 .......................xxlpul12
<div class="cntr"> <!--Creates a boxed container--><div class="rw"> <!--Creates a row--><div class="cl s4"> <!--Creates a column of width 4-->column 1</div><div class="cl s4 spus4"> <!--Creates a column of width 4, Pushing 4 columns-->column 2</div><div class="cl s4 spul4"> <!--Creates a column of width 4, Pulling 4 columns-->column 3</div></div></div>
Hide Elements
shid to hide on small and up screens.
mhid to hide on medium and up screens.
lhid to hide on large and up screens.
xlhid to hide on extra large and up screens.
xxlhid to hide on double extra large and up screens.
<div class="cntr"> <!--Creates a boxed container--><div class="rw"> <!--Creates a row--><div class="cl shid"> <!--hide on small and up-->Hide for Small & Up</div><div class="cl mhid"> <!--hide on medium and up-->Hide for Medium & Up</div><div class="cl lhid"> <!--hide on large and up-->Hide for Large & Up</div><div class="cl xlhid"> <!--hide on extra large and up-->Hide for Extra Large & Up</div><div class="cl xxlhid"> <!--hide on double extra large and up-->Hide for Double Extra Large & Up</div></div></div>
Show Elements
sshw to show on small and up screens.
mshw to show on medium and up screens.
lshw to show on large and up screens.
xlshw to show on extra large and up screens.
xxlshw to show on double extra large and up screens.
<div class="cntr"> <!--Creates a boxed container--><div class="rw"> <!--Creates a row--><div class="cl sshw"> <!--show on small and up-->show for Small & Up</div><div class="cl mshw"> <!--show on medium and up-->show for Medium & Up</div><div class="cl lshw"> <!--show on large and up-->show for Large & Up</div><div class="cl xlshw"> <!--show on extra large and up-->show for Extra Large & Up</div><div class="cl xxlshw"> <!--show on double extra large and up-->show for Double Extra Large & Up</div></div></div>
Responsive Toggle points
@media screen and (min-width:40.0em) /* Medium Screen & Up */@media screen and (min-width:64.0em) /* Large Screen & Up */@media screen and (min-width:75.0em) /* Extra Large Screen & Up */@media screen and (min-width:90.0em) /* Double Extra Large Screen & Up */