root / cloudcms / static / cloudcms / less / scaffolding.less @ 1c8df218
History | View | Annotate | Download (3 kB)
1 | c1468bcc | Kostas Papadimitriou | /* |
---|---|---|---|
2 | c1468bcc | Kostas Papadimitriou | * Scaffolding |
3 | c1468bcc | Kostas Papadimitriou | * Basic and global styles for generating a grid system, structural layout, and page templates |
4 | c1468bcc | Kostas Papadimitriou | * ------------------------------------------------------------------------------------------- */ |
5 | c1468bcc | Kostas Papadimitriou | |
6 | c1468bcc | Kostas Papadimitriou | |
7 | c1468bcc | Kostas Papadimitriou | // STRUCTURAL LAYOUT |
8 | c1468bcc | Kostas Papadimitriou | // ----------------- |
9 | c1468bcc | Kostas Papadimitriou | |
10 | c1468bcc | Kostas Papadimitriou | body { |
11 | c1468bcc | Kostas Papadimitriou | background-color: @white; |
12 | c1468bcc | Kostas Papadimitriou | margin: 0; |
13 | c1468bcc | Kostas Papadimitriou | #font > .sans-serif(normal,@basefont,@baseline); |
14 | c1468bcc | Kostas Papadimitriou | color: @grayDark; |
15 | c1468bcc | Kostas Papadimitriou | } |
16 | c1468bcc | Kostas Papadimitriou | |
17 | c1468bcc | Kostas Papadimitriou | // Container (centered, fixed-width layouts) |
18 | c1468bcc | Kostas Papadimitriou | .container { |
19 | c1468bcc | Kostas Papadimitriou | .fixed-container(); |
20 | c1468bcc | Kostas Papadimitriou | } |
21 | c1468bcc | Kostas Papadimitriou | |
22 | c1468bcc | Kostas Papadimitriou | // Fluid layouts (left aligned, with sidebar, min- & max-width content) |
23 | c1468bcc | Kostas Papadimitriou | .container-fluid { |
24 | c1468bcc | Kostas Papadimitriou | position: relative; |
25 | c1468bcc | Kostas Papadimitriou | min-width: 940px; |
26 | c1468bcc | Kostas Papadimitriou | padding-left: 20px; |
27 | c1468bcc | Kostas Papadimitriou | padding-right: 20px; |
28 | c1468bcc | Kostas Papadimitriou | .clearfix(); |
29 | c1468bcc | Kostas Papadimitriou | > .sidebar { |
30 | c1468bcc | Kostas Papadimitriou | position: absolute; |
31 | c1468bcc | Kostas Papadimitriou | top: 0; |
32 | c1468bcc | Kostas Papadimitriou | left: 20px; |
33 | c1468bcc | Kostas Papadimitriou | width: 220px; |
34 | c1468bcc | Kostas Papadimitriou | } |
35 | c1468bcc | Kostas Papadimitriou | // TODO in v2: rename this and .popover .content to be more specific |
36 | c1468bcc | Kostas Papadimitriou | > .content { |
37 | c1468bcc | Kostas Papadimitriou | margin-left: 240px; |
38 | c1468bcc | Kostas Papadimitriou | } |
39 | c1468bcc | Kostas Papadimitriou | } |
40 | c1468bcc | Kostas Papadimitriou | |
41 | c1468bcc | Kostas Papadimitriou | |
42 | c1468bcc | Kostas Papadimitriou | // BASE STYLES |
43 | c1468bcc | Kostas Papadimitriou | // ----------- |
44 | c1468bcc | Kostas Papadimitriou | |
45 | c1468bcc | Kostas Papadimitriou | // Links |
46 | c1468bcc | Kostas Papadimitriou | a { |
47 | c1468bcc | Kostas Papadimitriou | color: @linkColor; |
48 | c1468bcc | Kostas Papadimitriou | text-decoration: none; |
49 | c1468bcc | Kostas Papadimitriou | line-height: inherit; |
50 | c1468bcc | Kostas Papadimitriou | font-weight: inherit; |
51 | c1468bcc | Kostas Papadimitriou | &:hover { |
52 | c1468bcc | Kostas Papadimitriou | color: @linkColorHover; |
53 | c1468bcc | Kostas Papadimitriou | text-decoration: underline; |
54 | c1468bcc | Kostas Papadimitriou | } |
55 | c1468bcc | Kostas Papadimitriou | } |
56 | c1468bcc | Kostas Papadimitriou | |
57 | c1468bcc | Kostas Papadimitriou | // Quick floats |
58 | c1468bcc | Kostas Papadimitriou | .pull-right { |
59 | c1468bcc | Kostas Papadimitriou | float: right; |
60 | c1468bcc | Kostas Papadimitriou | } |
61 | c1468bcc | Kostas Papadimitriou | .pull-left { |
62 | c1468bcc | Kostas Papadimitriou | float: left; |
63 | c1468bcc | Kostas Papadimitriou | } |
64 | c1468bcc | Kostas Papadimitriou | |
65 | c1468bcc | Kostas Papadimitriou | // Toggling content |
66 | c1468bcc | Kostas Papadimitriou | .hide { |
67 | c1468bcc | Kostas Papadimitriou | display: none; |
68 | c1468bcc | Kostas Papadimitriou | } |
69 | c1468bcc | Kostas Papadimitriou | .show { |
70 | c1468bcc | Kostas Papadimitriou | display: block; |
71 | c1468bcc | Kostas Papadimitriou | } |
72 | c1468bcc | Kostas Papadimitriou | |
73 | c1468bcc | Kostas Papadimitriou | |
74 | c1468bcc | Kostas Papadimitriou | // GRID SYSTEM |
75 | c1468bcc | Kostas Papadimitriou | // ----------- |
76 | c1468bcc | Kostas Papadimitriou | // To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there |
77 | c1468bcc | Kostas Papadimitriou | |
78 | c1468bcc | Kostas Papadimitriou | .row { |
79 | c1468bcc | Kostas Papadimitriou | .clearfix(); |
80 | c1468bcc | Kostas Papadimitriou | margin-left: -@gridGutterWidth; |
81 | c1468bcc | Kostas Papadimitriou | } |
82 | c1468bcc | Kostas Papadimitriou | |
83 | c1468bcc | Kostas Papadimitriou | // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7) |
84 | c1468bcc | Kostas Papadimitriou | // Credit to @dhg for the idea |
85 | c1468bcc | Kostas Papadimitriou | .row > [class*="span"] { |
86 | c1468bcc | Kostas Papadimitriou | .gridColumn(); |
87 | c1468bcc | Kostas Papadimitriou | } |
88 | c1468bcc | Kostas Papadimitriou | |
89 | c1468bcc | Kostas Papadimitriou | // Default columns |
90 | c1468bcc | Kostas Papadimitriou | .span1 { .columns(1); } |
91 | c1468bcc | Kostas Papadimitriou | .span2 { .columns(2); } |
92 | c1468bcc | Kostas Papadimitriou | .span3 { .columns(3); } |
93 | c1468bcc | Kostas Papadimitriou | .span4 { .columns(4); } |
94 | c1468bcc | Kostas Papadimitriou | .span5 { .columns(5); } |
95 | c1468bcc | Kostas Papadimitriou | .span6 { .columns(6); } |
96 | c1468bcc | Kostas Papadimitriou | .span7 { .columns(7); } |
97 | c1468bcc | Kostas Papadimitriou | .span8 { .columns(8); } |
98 | c1468bcc | Kostas Papadimitriou | .span9 { .columns(9); } |
99 | c1468bcc | Kostas Papadimitriou | .span10 { .columns(10); } |
100 | c1468bcc | Kostas Papadimitriou | .span11 { .columns(11); } |
101 | c1468bcc | Kostas Papadimitriou | .span12 { .columns(12); } |
102 | c1468bcc | Kostas Papadimitriou | .span13 { .columns(13); } |
103 | c1468bcc | Kostas Papadimitriou | .span14 { .columns(14); } |
104 | c1468bcc | Kostas Papadimitriou | .span15 { .columns(15); } |
105 | c1468bcc | Kostas Papadimitriou | .span16 { .columns(16); } |
106 | c1468bcc | Kostas Papadimitriou | |
107 | c1468bcc | Kostas Papadimitriou | // For optional 24-column grid |
108 | c1468bcc | Kostas Papadimitriou | .span17 { .columns(17); } |
109 | c1468bcc | Kostas Papadimitriou | .span18 { .columns(18); } |
110 | c1468bcc | Kostas Papadimitriou | .span19 { .columns(19); } |
111 | c1468bcc | Kostas Papadimitriou | .span20 { .columns(20); } |
112 | c1468bcc | Kostas Papadimitriou | .span21 { .columns(21); } |
113 | c1468bcc | Kostas Papadimitriou | .span22 { .columns(22); } |
114 | c1468bcc | Kostas Papadimitriou | .span23 { .columns(23); } |
115 | c1468bcc | Kostas Papadimitriou | .span24 { .columns(24); } |
116 | c1468bcc | Kostas Papadimitriou | |
117 | c1468bcc | Kostas Papadimitriou | // Offset column options |
118 | c1468bcc | Kostas Papadimitriou | .row { |
119 | c1468bcc | Kostas Papadimitriou | > .offset1 { .offset(1); } |
120 | c1468bcc | Kostas Papadimitriou | > .offset2 { .offset(2); } |
121 | c1468bcc | Kostas Papadimitriou | > .offset3 { .offset(3); } |
122 | c1468bcc | Kostas Papadimitriou | > .offset4 { .offset(4); } |
123 | c1468bcc | Kostas Papadimitriou | > .offset5 { .offset(5); } |
124 | c1468bcc | Kostas Papadimitriou | > .offset6 { .offset(6); } |
125 | c1468bcc | Kostas Papadimitriou | > .offset7 { .offset(7); } |
126 | c1468bcc | Kostas Papadimitriou | > .offset8 { .offset(8); } |
127 | c1468bcc | Kostas Papadimitriou | > .offset9 { .offset(9); } |
128 | c1468bcc | Kostas Papadimitriou | > .offset10 { .offset(10); } |
129 | c1468bcc | Kostas Papadimitriou | > .offset11 { .offset(11); } |
130 | c1468bcc | Kostas Papadimitriou | > .offset12 { .offset(12); } |
131 | c1468bcc | Kostas Papadimitriou | } |
132 | c1468bcc | Kostas Papadimitriou | |
133 | c1468bcc | Kostas Papadimitriou | // Unique column sizes for 16-column grid |
134 | c1468bcc | Kostas Papadimitriou | .span-one-third { width: 300px; } |
135 | c1468bcc | Kostas Papadimitriou | .span-two-thirds { width: 620px; } |
136 | c1468bcc | Kostas Papadimitriou | .row { |
137 | c1468bcc | Kostas Papadimitriou | > .offset-one-third { margin-left: 340px; } |
138 | c1468bcc | Kostas Papadimitriou | > .offset-two-thirds { margin-left: 660px; } |
139 | c1468bcc | Kostas Papadimitriou | } |