Structure.CSS uses the following Lingo
| Shorthand | Expanded |
|---|---|
| blck | Block |
| cont | Container |
| gd | Grid |
| s | Small |
| m | Medium |
| l | Large |
Block that spans the width of its container that is intended to be used directly in the <body> element.
A container to be used within .body-blck that spans $medium-max wide.
A container to be used within .body-blck that spans the full width of .body-blck.
<div class="body-blck">
<div class="body-cont">
<h1>Welcome to my site</h1>
</div>
</div>
Grid container with 12 even columns
Grid container with 12 auto-sized columns
Grid container with 10 even columns
Grid container with 10 auto-sized columns
Where x is the screen size and y is the column width. Here is a table with all of the options:
| Small | Medium | Large | |
|---|---|---|---|
| 1 | gd-s1 | gd-m1 | gd-l1 |
| 2 | gd-s2 | gd-m2 | gd-l2 |
| 3 | gd-s3 | gd-m3 | gd-l3 |
| 4 | gd-s4 | gd-m4 | gd-l4 |
| 5 | gd-s5 | gd-m5 | gd-l5 |
| 6 | gd-s6 | gd-m6 | gd-l6 |
| 7 | gd-s7 | gd-m7 | gd-l7 |
| 8 | gd-s8 | gd-m8 | gd-l8 |
| 9 | gd-s9 | gd-m9 | gd-l9 |
| 10 | gd-s10 | gd-m10 | gd-l10 |
| 11 | gd-s11 | gd-m11 | gd-l11 |
| 12 | gd-s12 | gd-m12 | gd-l12 |
<div class="gd-cont">
<div class="gd-12 gd-m4">
<p>I span the full width of a small screen but a third of a medium or larger screen</p>
</div>
<div class="gd-12 gd-m8">
<p>I span the full width of a small screen but two thirds of a medium or larger screen</p>
</div>
</div>
Apply this to a <ul> element to turn it into a horizontal navigation bar. Currently does not support nested menus.
Apply this to a <ul> element to turn it into a vertical navigation bar. Currently does not support nested menus.
Apply this to a <ul> element to turn it into a responsive navigation bar. On small screens the layout will be vertical and on larger screens it will be horizontal. Currently does not support nested menus.
<nav>
<ul class="rnav">
<li class="active">Home</li>
<li><a href="/about">About Us</a></li>
<li class="disabled">Contact</li>
</ul>
</nav>
Hide on all screens
Hide on small screens
Hide on medium screens
Hide on large screens
Show only on small screens
Show only on medium screens
Show only on large screens
Make bold only on small screens
Make bold only on medium screens
Make bold only on large screens
Give a <pre> a bit more flair with a $primary-color line down the left hand side of it.
Apply this to a <table> element to make it collapsable.
Disables padding on applied element
Disables padding on the children of the applied element
Default: 640
The breakpoint for changing from small to medium sized screens in pixels.
Default: 1024
The breakpoint for changing from medium to large sized screens in pixels.
Default: 1200
The breakpoint for changing from large to extra large sized screens in pixels. Currently unused but considering adding xl grids in the future.
Default: Helvetica, sans-serif;
Our main font stack for fonts
Default: 'Courier New', Courier, monospace;
Our font stack for <pre> elements
Default: #222;
Our primary dark color. Used by other variables below.
Default: #f2f2f2;
Our primary light color. Used by other variables below.
Default: #1a1a1a;
Our complimentary dark color for dark mode.
Default: #fafafa;
Our complimentary light color for light mode.
Default: #3598E8;
Our accent color.
Default: $light-color;
The color of text if it is within our accent color.
Default: #47DEFF;
Highlight color of text when hovered over or active.
Default: #888888;
The color of elements that are disabled.
Default: $dark-color;
The foreground color in light mode. i.e. Text color
Default: $light-color;
The background color in light mode. i.e. <body> background
Default: $light-color;
The foreground color in dark mode. i.e. Text color
Default: $dark-color;
The background color in dark mode. i.e. <body> background
Default: 0.5em;
Default padding of block elements.
The following is a list HTML elements this framework explicitly styles:
- body
- h1, h2, h3, h4, h5, h6
- p
- pre
- a
- table
- td, th
- ul, li
- form
- legend
- input, select, textarea, optgroup
- option
- button