CSSandbox is a mobile first framework,
made to be simple yet powerful for
fast and advanced development.
CSSandbox is completely free, and
ready for download.
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
1 <div class="row">
2 <div class="col small-3 medium-4 large-2 big-3">..</div>
3 <div class="col small-6 medium-4 large-4 big-6">..</div>
4 <div class="col small-3 medium-4 large-6 big-3">..</div>
5 </div>
6 <div class="row">
7 <div class="col small-6">6</div>
8 <div class="col small-6">6</div>
9 </div>
10 <div class="row">
11 <div class="col small-10 big-6">..</div>
12 <div class="col small-2 big-6">..</div>
13 </div>
14 ....
1 <div class="row">
2 <div class="col small-3 large-6 small-offset-1 large-offset-0">..</div>
3 <div class="col small-4 large-3 small-offset-2 large-offset-2">..</div>
4 <div class="col small-2 large-1">..</div>
5 </div>
6 <div class="row">
7 <div class="col small-6 big-4 big-offset-2">..</div>
8 <div class="col small-6">..</div>
9 </div>
This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti.
1 @media only screen and (min-width: em(500px)) {
2 @include break-point($name: "inbetween", $max-width: em(720px));
3 }
Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti.
1 // Max lenght per breakpoint row
2 $small-max-width: none;
3 $medium-max-width: none;
4 $large-max-width: none;
5 $big-max-width: 1280px;
6 $huge-max-width: 1280px;
7
8 // Number of columns, space between and position
9 $grid-collumns: 12;
10 $grid-gutter: em(20px);
11 $grid-float: center;
12
13 // Grid breakpoints
14 $medium-min-width: em(480px);
15 $large-min-width: em(768px);
16 $big-min-width: em(960px);
17
18 // Default float
19 $grid-col-float: left;
20
21 // Offset from left/right
22 $offset-direction: left;
Navigation a site is a key feature for almost every site. Therefor we add various of ways to navigate your site, knowing we don’t hit all needs, we aim to help almost any. The navigation is build with help from powerful javascript that ensures the menu’s is showed correct across all platforms and screen sizes.
1 <div class="breadcrumb">
2 <div class="crumb home"><a href="/"><i class="iconic-home"></i></a></div>
3 <div class="crumb"><a href="#navigation-breadcrumb-docs">CSSandbox</a></div>
4 <div class="crumb"><a href="#navigation-breadcrumb-docs">Navigation</a></div>
5 <div class="crumb active">Breadcrumbs</div>
6 </div>
Playing around with the breadcrumb design have never been easier, please note that the separation icon is set within a setting string.
1 // Global
2 $breadcrumb-height: em(40px);
3 $breadcrumb-padding: em(15px);
4 $breadcrumb-font-color: $master-base-color;
5
6 // If chosing to have a icon
7 $breadcrumb-icon-color: $master-base-color;
8
9 // Seperator variables
10 $breadcrumb-seperation-width: auto;
11 $breadcrumb-seperation-background: none;
12 $breadcrumb-seperation-text: ">";
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
As of now, the current typography settings is as following. More features may follow or be modified or even deleted.
1 // List style variables
2 $list-font-weight: bold;
3 $list-text-align: left;
4 $list-font-size: inherit;
5 $list-style-type: disc;
6 $list-margin: 0.5em 0 0.95em 1.45em;
7
8 // Inline list style variabels
9 $inline-list-margin: 0 0 1em 0;
10 $inline-list-item-margin: 0 em(10px) 0 0;
11 $inline-list-color: inherit;
12 $inline-list-font-size: 1em;
13
14 // Link variabels
15 $link-color: $master-base-color;
16 $link-active-color: $master-color;
17 $link-decoration: underline;
18
19 // Headline variabels
20 $headings-color: #282828;
21 $headings-font-weight: 600;
22 $headings-margin: 0.20em 0 0.85em 0;
23
24 // Headline font-sizes
25 $h1-font-size: 2.5em;
26 $h2-font-size: 2.0em;
27 $h3-font-size: 1.75em;
28 $h4-font-size: 1.25em;
29 $h5-font-size: 1em;
30 $h6-font-size: 0.85em;
31
32 // Paragraphs
33 $paragraph-font-size: 1em;
34 $paragraph-font-weight: 400;
35 $paragraph-color: inherit;
36 $paragraph-margin: 0.10em 0 1.3em 0;
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
1 <div class="button medium unknown">.unknown</div>
2 <div class="button large"><a href="#">.large</a></div>
3 <div class="button medium info disable"><a href="#">.disable</a></div>
4 <div class="button medium fluid info"><a href="#">.medium.fluid.info</a></div>
Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti.
Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti.
1 // Border styles
2 $button-border-radius: 5px;
3 $button-border: none;
4
5 // Coloring
6 $button-background: #ff2f19;
7 $button-color: #ffffff;
8 $button-disabled: #c1c1c1;
9
10 // Typography
11 $button-font-size: em(16px);
12 $button-font-weight: 600;
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti.
1 // Global
2 $table-padding: em(10px);
3 $table-font-size: 1em;
4
5 // Table header
6 $table-head-background: transparent;
7 $table-head-weight: $headings-font-weight;
8 $table-head-align: center;
9 $table-head-font-size: 1.2em;
10
11 // Table cell
12 $table-cell-align: center;
13 $table-cell-background: transparent;
14 $table-cell-background-hover: #F4F4F4;
15 $table-cell-odd-background: transparent;
16 $table-cell-even-background: transparent;
17
18 // Table footer
19 $table-foot-background: transparent;
20 $table-foot-align: center;
21 $table-foot-border: none;
22
23 // Border
24 $table-border: none;
25 $table-cell-border-top: none;
26 $table-cell-border-right: none;
27 $table-cell-border-bottom: 1px solid #ccc;
28 $table-cell-border-left: none;
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
All icons require an <i> tag. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh.
1 <i class="iconic-list"></i>
Ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
1 <i class="iconic-list white" title="iconic-chart_alt"></i>
2 <i class="iconic-list black"></i>
Hover to see the icon class in a tooltip
This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti.
1 // Chose your icons size
2 $icon-size: em(24px);
3
4 // Default Icon color
5 $icon-color: $master-base-color;
If you didn't find what you needed, you can
always request new features.