Skip to content

Instantly share code, notes, and snippets.

@nikcub
Created November 11, 2011 00:13
Show Gist options
  • Save nikcub/1356716 to your computer and use it in GitHub Desktop.
Save nikcub/1356716 to your computer and use it in GitHub Desktop.
example bootstrap file
// to build:
// lessc <filename> > site.css
// lessc <filename> > site.min.css --compress
// the swatch
@color1: #55626b;
@color2: #6c9380;
@color3: #c1ca55;
@color4: #f07d6b;
@color5: #ad5472;
@linkColor: @color4;
@linkColorHover: darken(@linkColor, 15);
@basefont: 11px;
@baseline: 14px;
@baseColor: @color1;
// Grays
@black: #000;
@grayDark: lighten(@black, 25%);
@gray: lighten(@black, 50%);
@grayLight: lighten(@black, 75%);
@grayLighter: lighten(@black, 90%);
@white: #fff;
// Accent Colors
@blue: #049CDB;
@blueDark: #0064CD;
@green: #46a546;
@red: #9d261d;
@yellow: #ffc40d;
@orange: #f89406;
@pink: #c3325f;
@purple: #7a43b6;
// Baseline grid
@gridColumns: 14;
@gridColumnWidth: 40px;
@gridGutterWidth: 20px;
@extraSpace: (@gridGutterWidth * 2); // For our grid calculations
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// Color Scheme
@complement: spin(@baseColor, 180); // Determine a complementary color
@split1: spin(@baseColor, 158); // Split complements
@split2: spin(@baseColor, -158);
@triad1: spin(@baseColor, 135); // Triads colors
@triad2: spin(@baseColor, -135);
@tetra1: spin(@baseColor, 90); // Tetra colors
@tetra2: spin(@baseColor, -90);
@analog1: spin(@baseColor, 22); // Analogs colors
@analog2: spin(@baseColor, -22);
// CSS Reset
@import "bootstrap/reset.less";
@import "bootstrap/mixins.less";
@import "bootstrap/scaffolding.less";
@import "bootstrap/type.less";
@import "bootstrap/forms.less";
@import "bootstrap/tables.less";
@import "bootstrap/patterns.less";
html, body {
background-color: #eee;
}
body {
padding-top: 0px;
}
.container > footer p {
text-align: center;
}
.content {
background-color: #fff;
padding: 20px;
margin: 0 -20px;
.border-radius(9px);
.box-shadow();
}
#sidebar {
.makeColumn(4);
margin-left: 0;
padding-left: 19px;
border-left: 1px solid #eee;
}
.page-header {
background-color: #f5f5f5;
padding: 20px 20px 0px;
margin: -20px -20px 0px;
.border-radius(9px, 9px, 0px, 0px);
}
.topbar .btn {
border: 0;
position: relative;
}
.topbar {
position: relative;
margin-bottom: 15px;
}
.topbar-inner {
#gradient-bars > .darkblue;
}
.gradBar(@color) {
.gradientBar(@color, darken(@color, 30));
background-color: darken(@color, 30);
}
#gradient-bars {
.green {
.gradBar(@green);
}
.black {
.gradBar(lighten(@black, 30));
}
.lightblue {
.gradBar(#5bc0de);
}
.darkblue {
.gradBar(@color1);
}
.white {
.gradBar(@white)
}
}
.content .adminbody {
padding: 0px;
margin: 0px;
width: 100%;
}
.content .row {
padding: 0px;
width: 860px;
}
.content table {
width: 820px;
padding: 0px;
margin: 0px;
}
.content .page-menu {
width: 860px;
padding: 0px;
margin: 0px -20px 0px;
}
// Menu
.menu {
.tabs;
border-bottom: 1px solid #ddd;
margin: 0px 20px 0px 20px;
a {
color: #666;
border: 1px solid rgba(0, 0, 0, 0.1);
margin: 5px 3px 5px 0;
padding: 0 5px;
text-shadow: 0 1px 1px @white;
line-height: 18px;
&:hover {
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
}
.active a {
background: @linkColor;
color: @white;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
a.flat {
padding: 1px 15px 1px 15px;
}
&.flat:hover {
border: 1px solid #666;
}
}
.btn {
// Button Styles
&.small {
font-size: @basefont; // - 2px;
line-height: @baseline + 1px; // - 2px;
}
&.flat {
font-weight: bold;
.border-radius(2px);
color: #666;
border: 1px solid rgba(0,0,0,0.1);
background-image: -webkit-gradient(linear, 0% 40%, 0% 70%, from(rgb(245, 245, 245)), to(rgb(241, 241, 241)));
}
&.inline {
height: @basefont;
padding: 3px 6px 3px 6px;
}
//Button alignement
&.centered {
float: left;
margin: 0 auto;
text-align: center;
}
}
.label.published {
.label.success;
}
.label.draft {
.label.warning;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment