Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
scaffolding.less 2.47 KiB
1 
/*
2 
 * Scaffolding
3 
 * Basic and global styles for generating a grid system, structural layout, and page templates
4 
 * ------------------------------------------------------------------------------------------- */
5
6
7 
// STRUCTURAL LAYOUT
8 
// -----------------
9
10 
body {
11 
  background-color: @white;
12 
  margin: 0;
13 
  font-family: @baseFontFamily;
14 
  font-size: @baseFontSize;
15 
  line-height: @baseLineHeight;
16 
  color: @grayDark;
17 
}
18
19 
// Container (centered, fixed-width layouts)
20 
.container {
21 
  .fixed-container();
22 
}
23
24 
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
25 
.fluid-container {
26 
  position: relative;
27 
  min-width: 940px;
28 
  padding-left: 20px;
29 
  padding-right: 20px;
30 
  .clearfix();
31 
}
32 
// Sidebars (left and right options)
33 
.fluid-sidebar-left,
34 
.fluid-sidebar-right {
35 
  width: 220px;
36 
}
37 
.fluid-sidebar-left   { float: left; }
38 
.fluid-sidebar-right  { float: right; }
39 
// The main content area
40 
.fluid-content {
41 
  margin-left: 240px;
42 
}
43 
// Reverse layout for sidebar on right
44 
.fluid-container.reverse .fluid-content {
45 
  margin-left: 0;
46 
  margin-right: 240px;
47 
}
48
49
50 
// BASE STYLES
51 
// -----------
52
53 
// Links
54 
a {
55 
  color: @linkColor;
56 
  text-decoration: none;
57 
  line-height: inherit;
58 
  font-weight: inherit;
59 
  &:hover {
60 
    color: @linkColorHover;
61 
    text-decoration: underline;
62 
  }
63 
}
64
65 
// Quick floats
66 
.pull-right {
67 
  float: right;
68 
}
69 
.pull-left {
70 
  float: left;
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
} // Toggling content .hide { display: none; } .show { display: block; } // GRID SYSTEM // ----------- // To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there .row { margin-left: -@gridGutterWidth; .clearfix(); } // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7) // Credit to @dhg for the idea [class*="span"] { .gridColumn(); } // Default columns .span1 { .columns(1); } .span2 { .columns(2); } .span3 { .columns(3); } .span4 { .columns(4); } .span5 { .columns(5); } .span6 { .columns(6); } .span7 { .columns(7); } .span8 { .columns(8); } .span9 { .columns(9); } .span10 { .columns(10); } .span11 { .columns(11); } .span12 { .columns(12); } // Offset column options .offset1 { .offset(1); } .offset2 { .offset(2); } .offset3 { .offset(3); } .offset4 { .offset(4); } .offset5 { .offset(5); } .offset6 { .offset(6); } .offset7 { .offset(7); } .offset8 { .offset(8); } .offset9 { .offset(9); } .offset10 { .offset(10); } .offset11 { .offset(11); }