Reusable CSS Code Snippets
Examples of how to use these snippets are available on the Konstruktors home page. Read about the philosophy of these CSS snippets.
If you prefer other classname prefix instead of bb, simply use find&replace function of your HTML/CSS editor.
Grid Layout
Basic Grid
/* Grid column floating */
.bb-fa { float:left; }
.bb-fb { margin:auto; }
.bb-fc { float:right; }
/* Grid structure */
.bb-tbase {
width:100%;
float:left; clear:both;
}
.bb-t1 { width: 3.28%; }
.bb-t2 { width: 6.61%; }
.bb-t3 { width: 9.96%; }
.bb-t4 { width: 13.28%; }
.bb-t5 { width: 16.61%; }
.bb-t6 { width: 20.00%; }
.bb-t7 { width: 23.28%; }
.bb-t8 { width: 26.61%; }
.bb-t9 { width: 29.96%; }
.bb-t10 { width: 33.28%; }
.bb-t11 { width: 36.61%; }
.bb-t12 { width: 39.96%; }
.bb-t13 { width: 43.28%; }
.bb-t14 { width: 46.61%; }
.bb-t15 { width: 49.96%; }
.bb-t16 { width: 53.28%; }
.bb-t17 { width: 56.61%; }
.bb-t18 { width: 59.96%; }
.bb-t19 { width: 63.28%; }
.bb-t20 { width: 66.61%; }
.bb-t21 { width: 69.96%; }
.bb-t22 { width: 73.28%; }
.bb-t23 { width: 76.61%; }
.bb-t24 { width: 79.96%; }
.bb-t25 { width: 83.28%; }
.bb-t26 { width: 86.61%; }
.bb-t27 { width: 89.96%; }
.bb-t28 { width: 93.28%; }
.bb-t29 { width: 96.61%; }
.bb-t7a { width: 24.96%; }
.bb-t22a { width: 74.96%; }
.bb-fa { float:left; }
.bb-fb { margin:auto; }
.bb-fc { float:right; }
/* Grid structure */
.bb-tbase {
width:100%;
float:left; clear:both;
}
.bb-t1 { width: 3.28%; }
.bb-t2 { width: 6.61%; }
.bb-t3 { width: 9.96%; }
.bb-t4 { width: 13.28%; }
.bb-t5 { width: 16.61%; }
.bb-t6 { width: 20.00%; }
.bb-t7 { width: 23.28%; }
.bb-t8 { width: 26.61%; }
.bb-t9 { width: 29.96%; }
.bb-t10 { width: 33.28%; }
.bb-t11 { width: 36.61%; }
.bb-t12 { width: 39.96%; }
.bb-t13 { width: 43.28%; }
.bb-t14 { width: 46.61%; }
.bb-t15 { width: 49.96%; }
.bb-t16 { width: 53.28%; }
.bb-t17 { width: 56.61%; }
.bb-t18 { width: 59.96%; }
.bb-t19 { width: 63.28%; }
.bb-t20 { width: 66.61%; }
.bb-t21 { width: 69.96%; }
.bb-t22 { width: 73.28%; }
.bb-t23 { width: 76.61%; }
.bb-t24 { width: 79.96%; }
.bb-t25 { width: 83.28%; }
.bb-t26 { width: 86.61%; }
.bb-t27 { width: 89.96%; }
.bb-t28 { width: 93.28%; }
.bb-t29 { width: 96.61%; }
.bb-t7a { width: 24.96%; }
.bb-t22a { width: 74.96%; }
Grid Content Padding
/* 1 */
.bbin-a1 { padding-left: 1em; }
.bbin-b1 { padding: 0 1em; }
.bbin-c1 { padding-right: 1em; }
/* 2 */
.bbin-a2 { padding-left: 3%; }
.bbin-b2 { padding: 0 3%; }
.bbin-c2 { padding-right: 3%; }
/* 3 */
.bbin-a3 { padding-left: 0.5em; }
.bbin-b3 { padding: 0 0.5em; }
.bbin-c3 { padding-right: 0.5em; }
.bbin-a1 { padding-left: 1em; }
.bbin-b1 { padding: 0 1em; }
.bbin-c1 { padding-right: 1em; }
/* 2 */
.bbin-a2 { padding-left: 3%; }
.bbin-b2 { padding: 0 3%; }
.bbin-c2 { padding-right: 3%; }
/* 3 */
.bbin-a3 { padding-left: 0.5em; }
.bbin-b3 { padding: 0 0.5em; }
.bbin-c3 { padding-right: 0.5em; }
Grid Content Borders
.bb-b0001 {
border-left:1px solid #ccc;
}
.bb-b0101 {
border-left:1px solid #ccc;
border-right:1px solid #ccc;
}
.bb-b0100 {
border-right:1px solid #ccc;
}
.bb-b1000 {
border-top:1px solid #ccc;
}
.bb-b0010 {
border-bottom:1px solid #ccc;
}
border-left:1px solid #ccc;
}
.bb-b0101 {
border-left:1px solid #ccc;
border-right:1px solid #ccc;
}
.bb-b0100 {
border-right:1px solid #ccc;
}
.bb-b1000 {
border-top:1px solid #ccc;
}
.bb-b0010 {
border-bottom:1px solid #ccc;
}
Inline Blocks
/* 1 */
.bb-marg-a1 {
margin-left: 1em;
}
.bb-marg-b1 {
margin-left: 1em;
margin-right: 1em;
}
.bb-marg-c1 {
margin-right: 1em;
}
/* 2 */
.bb-marg-a2 {
margin-left: 4.16%;
}
.bb-marg-b2 {
margin-left: 2.08%;
margin-right: 2.08%;
}
.bb-marg-c2 {
margin-right: 4.16%;
}
.bb-marg-a1 {
margin-left: 1em;
}
.bb-marg-b1 {
margin-left: 1em;
margin-right: 1em;
}
.bb-marg-c1 {
margin-right: 1em;
}
/* 2 */
.bb-marg-a2 {
margin-left: 4.16%;
}
.bb-marg-b2 {
margin-left: 2.08%;
margin-right: 2.08%;
}
.bb-marg-c2 {
margin-right: 4.16%;
}
Basic HTML
Typography
body {
font: 82%/130% sans-serif;
color:#000;
background:#fff;
}
h1, h2, h3, h4, h5, h6 {
margin: 2em 0 1em 0;
padding:0;
line-height:1.3em;
}
h1 a, h2 a, h3 a, h4 a,
h5 a, h6 a { color:#000; }
h1 { font-size: 4em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1.1em; }
h4 { font-size: 1.0em; }
h5 {
font-size: 1.0em;
font-style: italic;
}
h6 {
font-size: 1.0em;
font-weight: normal;
font-style: italic;
}
ul li { list-style-type: square; }
p { margin: 1em 0 0 0; }
font: 82%/130% sans-serif;
color:#000;
background:#fff;
}
h1, h2, h3, h4, h5, h6 {
margin: 2em 0 1em 0;
padding:0;
line-height:1.3em;
}
h1 a, h2 a, h3 a, h4 a,
h5 a, h6 a { color:#000; }
h1 { font-size: 4em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1.1em; }
h4 { font-size: 1.0em; }
h5 {
font-size: 1.0em;
font-style: italic;
}
h6 {
font-size: 1.0em;
font-weight: normal;
font-style: italic;
}
ul li { list-style-type: square; }
p { margin: 1em 0 0 0; }
Images
img {
float: right;
margin: 0 0 1em 1em;
}
a img { border: none; }
.img-a {
float: left;
clear: both;
margin: 0 1em 1em 0;
}
.img-a2 {
float: none;
margin: 0;
}
.img-c {
float: right;
margin: 0 0 1em 1em;
}
.img-c2 {
float: none;
clear: both;
margin: 0 0 1em 1em;
}
float: right;
margin: 0 0 1em 1em;
}
a img { border: none; }
.img-a {
float: left;
clear: both;
margin: 0 1em 1em 0;
}
.img-a2 {
float: none;
margin: 0;
}
.img-c {
float: right;
margin: 0 0 1em 1em;
}
.img-c2 {
float: none;
clear: both;
margin: 0 0 1em 1em;
}
Tables
table {
float:right; font-size: 1em;
margin: 0 0 1em 1em;
border-collapse:collapse;
border-top:1px solid #333;
}
caption {
font-style:italic;
padding-bottom:1em;
}
th, thead {
font-weight:bold;
text-align:left;
}
th, td {
padding: 0.2em 1em 0.2em 0;
border-bottom: 1px solid #ccc;
}
float:right; font-size: 1em;
margin: 0 0 1em 1em;
border-collapse:collapse;
border-top:1px solid #333;
}
caption {
font-style:italic;
padding-bottom:1em;
}
th, thead {
font-weight:bold;
text-align:left;
}
th, td {
padding: 0.2em 1em 0.2em 0;
border-bottom: 1px solid #ccc;
}
Flat Lists
/* Flat lists for a lot
of content per item */
ul.flat, ol.flat {
margin: 0; padding: 0;
}
ul.flat, ul.flat li,
ol.flat, ol.flat li {
padding-left: 0;
padding-left: 0;
}
.flat ol, .flat ul {
margin-left: 1.2em;
padding-bottom: 1em;
padding-top: 0.4em;
}
of content per item */
ul.flat, ol.flat {
margin: 0; padding: 0;
}
ul.flat, ul.flat li,
ol.flat, ol.flat li {
padding-left: 0;
padding-left: 0;
}
.flat ol, .flat ul {
margin-left: 1.2em;
padding-bottom: 1em;
padding-top: 0.4em;
}
Simple Menus
Vertical Navigation
.nav-v ul { padding: 1em 0; }
.nav-v li {
margin: 0; padding: 0;
list-style-type:none;
}
.nav-v li {
float:left;
clear:both;
}
.nav-v li ul { margin-bottom: 0.4em; }
.nav-v li a {
display:block;
padding: 0.4em 0;
}
.nav-v li a:hover { text-decoration:none; }
.nav-v li li {
font-size: 0.82em;
color: #ccc;
list-style-type: square;
margin-left:2em;
}
.nav-v li {
margin: 0; padding: 0;
list-style-type:none;
}
.nav-v li {
float:left;
clear:both;
}
.nav-v li ul { margin-bottom: 0.4em; }
.nav-v li a {
display:block;
padding: 0.4em 0;
}
.nav-v li a:hover { text-decoration:none; }
.nav-v li li {
font-size: 0.82em;
color: #ccc;
list-style-type: square;
margin-left:2em;
}
Horizontal Navigation
.nav-h ul { padding:1em 0; }
.nav-h li {
margin: 0; padding: 0;
list-style-type:none;
}
.nav-h li {
display:inline;
margin-right:1em;
}
.nav-h li {
margin: 0; padding: 0;
list-style-type:none;
}
.nav-h li {
display:inline;
margin-right:1em;
}