Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
scaffolding.less 2.53 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 
  margin: 0;
12 
  font-family: @baseFontFamily;
13 
  font-size: @baseFontSize;
14 
  line-height: @baseLineHeight;
15 
  color: @gray;
16 
  background-color: @white;
17 
}
18
19 
// Container (centered, fixed-width layouts)
20 
.container {
21 
  .container-fixed();
22 
}
23
24 
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
25 
.fluid-container {
26 
  position: relative;
27 
  min-width: @siteWidth;
28 
  padding-left: @gridGutterWidth;
29 
  padding-right: @gridGutterWidth;
30 
  .clearfix();
31 
}
32
33 
// Sidebars (left and right options)
34 
.fluid-sidebar {
35 
  width: @fluidSidebarWidth;
36 
  margin: 0 20px 18px;
37 
}
38 
.sidebar-left   { padding-left: @fluidSidebarWidth + @gridGutterWidth * 2; }
39 
.sidebar-right  { padding-right: @fluidSidebarWidth + @gridGutterWidth * 2; }
40
41 
// Float the sidebars accordingly
42 
.sidebar-left .fluid-sidebar {
43 
  float: left;
44 
  margin-left: (@fluidSidebarWidth + @gridGutterWidth) * -1;
45 
}
46 
.sidebar-right .fluid-sidebar {
47 
  float: right;
48 
  margin-right: (@fluidSidebarWidth + @gridGutterWidth) * -1;
49 
}
50
51 
// The main content area
52 
.fluid-content {
53 
  float: left;
54 
  width: 100%;
55 
}
56
57
58 
// BASE STYLES
59 
// -----------
60
61 
// Links
62 
a {
63 
  color: @linkColor;
64 
  text-decoration: none;
65 
  &:hover {
66 
    color: @linkColorHover;
67 
    text-decoration: underline;
68 
  }
69 
}
70
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
// 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 * -1; .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); }