bass/index.html at master · betherly/bass · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
<!DOCTYPE html>
<html>
	<head>
		<title>Bass grid</title>
		<meta description="Bass padding based grid" /><!-- Site description goes here -->

		<meta http-equiv="X-UA-Compatible" content="IE=edge" /><!-- Tells ie to display content in highest mode available -->
		<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Ensures mobiles show responsive design correctly and do not try to scale -->

		<link href="stylesheets/git-template.css" rel="stylesheet">
		<!--[if gt IE 8]><!-->
			<link href="assets/css/style.css" rel="stylesheet">
		<!--<![endif]-->
		<!--[if lte IE 8]>
		    <link href="assets/css/style-ie.css" rel="stylesheet">
		<![endif]-->

	</head>

	<body>
		<section class="page-header">
	      <h1 class="project-name">Bass Grid</h1>
	      <h2 class="project-tagline">Flexible and semantic SASS based grid system to create beautiful responsive sites that will work on any device. http://belwell.github.io/bass/</h2>
	      <a href="https://github.com/belwell/bass" class="btn">View on GitHub</a>
	      <a href="https://github.com/belwell/bass/zipball/master" class="btn">Download .zip</a>
	      <a href="https://github.com/belwell/bass/tarball/master" class="btn">Download .tar.gz</a>
	    </section>
		<section class="main-content">
				<h2>Main features</h2>
				<ul>
					<li>SASS based grid</li>
					<li>Fully responsive</li>
					<li>Fixed breakpoints for continuity (customisable and overridable)</li>
					<li>Custom grid size (total cols)</li>
					<li>Custom col widths as a ratio of grid size</li>
					<li>Choose mobile OR desktop first way of working</li>
					<li>Multiple custom gutters</li>
					<li>Works to IE7</li>
					<li>Allows IE specific styles in main SASS files for ease of readability</li>
					<li>JavaScript free</li>
					<li>All breakpoints and padding sizes calculated in ems</li>
					<li>Use both inline-block and float col methods - you don't have to choose</li>
					<li>Push and pull columns</li>
				</ul>
				<h2>File structure</h2>
				<strong>grid.html</strong> - documentation and grid example<br/>
				<strong>_functions.scss</strong> - sass that is required but are common elements that may already be in your project (repetition not needed - just ensure they are there!)<br/>
				<strong>_grid-settings.scss</strong> - REQUIRED - customisable settings for the grid<br/>
				<strong>_colspans-responsive.scss</strong> - REQUIRED - grid structure - does not need to be touched<br/>
				<strong>_grid-example.scss</strong> - styling for grid example (NOT NEEDED)
				<p>
				<strong>stylesheets</strong> - folder for styling of index.html and demos (NOT NEEDED)</p>
				<h2>Running SASS</h2>
				<div class="code"><pre><code>cd **to assets folder**
sass --watch sass:css --style compressed</code></pre></div>
				<h2>Basic grid</h2>
				<p>The basic grid is made up of wrapping containers called 'rows' that each contain a variable number of columns.</p>
				<p>The Bass Grid does not require specific classes but rather uses a mix of mixins and placeholders that can be applied to custom classes as needed.</p>
				<h2>How does the grid work?</h2>
				<p>The grid is based on paddings and margins. Each column has padding parameters that determine the gutter width (fully customisable). These should be set to 50% of the required gutter width/height between columns as the paddings do not collapse against each other. So if 2 columns each had a padding of 1em the total gutter width would be 2em.</p>
				<p>The row is then given a negative margin of the same value as the gutter to ensure that the row starts at the expected '0' position and does not have extra spacing on any side of it as a result of the gutter. The position of the row is in no way affected by the gutter of the contained columns.</p>
				<h2>Rows</h2>
				<p>To add a new row, the following code needs to be added to a wrapping element that will contain the grid columns and then customised to suit the purpose:</p>
<div class="code"><pre><code>@include row($vertical-spacing, $horizontal-spacing);</code></pre></div>
				<p>Relace <span class="code--inline">$vertical-spacing</span> and <span class="code--inline">$horizontal-spacing</span> with custom values or variables that can be defined within the SASS partial _grid-settings.scss. The values for these should be in ems.</p>
				<p><strong>NOTE:</strong> Ensure the spacing for the row is IDENTICAL to that used in the contained columns. This will ensure that the correct negative margin is applied to the wrapper and that the columns all align to the edge of the container correctly.</p>

				<h2>Colummn widths</h2>
				<p>Column widths are assigned as as ratio of the <span class="code--inline">$grid-columns</span> variable that can be set in _grid-settings.scss (default value: 12).</p>
				<p>Breakpoints are predefined (see <a href="#breakpoints">Breakpoints and override</a> for more details) with 'Hippo' being the column sizing to use at desktop, 'Panda' at the next lowest breakpoint and 'Mouse' for the smallest, typically for smaller mobile devices.</p>
				<p>The ratios for each breakpoint are defined using parameters within the column mixin as explained in the next section.</p>

				<h2>Creating columns</h2>
				<p>Once the container row has been created, add divs with the following sass mixin applied in the styles to act as columns:</p>
<div class="code"><pre><code>@include col($layout, $vertical-spacing, $horizontal-spacing, $hippo-cols, $panda-cols, $mouse-cols);</code></pre></div>
				<p>Customise the above code as follows:</p>
				<ul>
				<li><span class="code--inline">$layout</span> - <strong>Replace this value with one of following:</strong></li>
					<ul>
					<li><p><span class="code--inline">float</span> - columns to float left.</p></li>
					<li><p><span class="code--inline">inline</span> - columns to display inline-block.</p></li>
					<li><p>For more info see <a href="#inline-or-float">'choosing inline-block or float'</a></p></li>
					</ul>
				<li><span class="code--inline">$vertical-spacing, $horizontal-spacing</span> - <strong>Replace these values with custom values or variables that can be defined within the SASS partial _grid-settings.scss.</strong></li>
					<ul><li><p><strong>NOTE:</strong> Ensure the spacing for the row is IDENTICAL to that used on the row. This will ensure that the correct negative margin is applied to the wrapper and that the columns all align to the edge of the container correctly.</p></li></ul>
				<li><span class="code--inline">$hippo-cols</span> - <strong>Replace this with the column width for hippo screen sizes</strong></li>
					<ul>
					<li><p>Ensure this is declared as a number smaller than or equal to grid cols (as set in settings.scss)</p></li>
					<li><p>The format of this parameter should be a simple number not in a string format or the word null (not in string)</p></li>
					<li><p>If this is defined as null the col will be 100% at hippo size</p></li>
					</ul>
				<li><span class="code--inline">$panda-cols</span> - <strong>Replace this with the column width for panda screen sizes</strong></li>
					<ul>
					<li><p>Ensure this is declared as a number smaller than or equal to grid cols (as set in settings.scss)</p></li>
					<li><p>The format of this parameter should be a simple number not in a string format or the word null (not in string)</p></li>
					<li><p>If this is defined as null the col will default to hippo size if exists</p></li>
					</ul>
				<li><span class="code--inline">$mouse-cols</span> - <strong>Replace this with the column width for mouse screen sizes</strong></li>
					<ul>
					<li><p>Ensure this is declared as a number smaller than or equal to grid cols (as set in settings.scss)</p></li>
					<li><p>The format of this parameter should be a simple number not in a string format or the word null (not in string)</p></li>
					<li><p>If this is defined as null the col will be 100% at mouse size</p></li>
					</ul>
				<p>Example usage:</p>
<div class="code"><pre><code>@include col(float, $small-gutter, $small-gutter, 6, 6, null);</code></pre></div>

				<h2>Custom col widths:</h2>
				<p>This should be avoided if possible to maintain constistancy but if necessary the above breakpoints and column sizes at those breakpoints can be overriden as follows:</p>
<div class="code"><pre><code>@include respond(1100) {
	width: 100% / $grid-columns * 1;
}</code></pre></div>
				<p>The '1' or chosen number should be used in the same way as the number following hippo/panda/mouse.</p>
				<p>For example a column with this breakpoint will be able to fit 12 columns on 1 row using the default grid size.</p>

				<h2>Clear floated columns</h2>
				<p>If float is the chosen method of positioning the grid columns, you may need to clear floats at different screen sizes to ensure that the grid clears correctly.</p>
				<p>Each row will clear correctly before new content is started, but within that if columns need to be cleared at specific breakpoints (e.g. hippo, panda or mouse ONLY), add clearing divs after the necessary columns with the corresponding mixin applied:</p>
<div class="code"><pre><code>@include clearfix(mouse);
@include clearfix(panda);
@include clearfix(hippo);</code></pre></div>
				<h2>Mobile or desktop first</h2>
				<p>By default this grid is designed to be developed using a mobile first methodology. This means that with NO media queries or breakpoints declared the default styles are for the smallest device size. Following this the next largest breakpoint (panda) is applied on top and then hippo for the largest devices.</p>
				<p><strong>Mobile first in IE and non-responsive browsers:</strong> Browsers such as IE8 do not support media queries and so traditionally mobile first development has relied on javascript to ensure that the site does not break and show only mobile styles on these devices at desktop. This grid uses a SASS function to determine if the browser is media query compatible and if it is not it will strip out the media queries and ensure that the latest defines styles (the desktop/hippo styles) override the mobile ones. This does mean it is very important that if mobile first methodology is being used that it is used consistantly throughout the site and good practise is used with regard defining the smallest device styles first and the desktop styles last.</p>
				<p><strong>Choosing desktop first:</strong> If desktiop first methodology is preferred this can be used instead by chaning the value of the <span class="code--inline">$mobile-first</span> variable in _grid-settings.scss to false. This will then mean that media queries will go back to being ignored in IE and therefore only the default styles outside of media queries will be used as per normal.</p>
				<p><strong>NOTE:</strong> Please choose EITHER mobile or desktop first and do not interchange between the 2 styles of writing code.</p>
				<h2><a name="breakpoints">Breakpoints and override</a></h2>
				<p><strong>Default breakpoints: </strong> Default breakpoints are declared in _grid-settings.scss for the hippo and panda sizes. Mouse is defaulted as anything below the panda breakpoint:</p>
<div class="code"><pre><code>$panda: 480;
$hippo: 1024;</code></pre></div>
				<p>Ensure that when declaring the breakpoints above no 'px' or 'em' terms are added.The number should represent the px size for the breakpoint and this will be converted to ems by sass.</p>
				<p><strong>Using the breakpoints:</strong> To make use of the above breakpoints, do not use @media as standard as this will be implemented by the SASS function as necessary depending on if mobile/desktop first methodology is being used and the user's browser. Instead use the breakpoints using <span class="code--inline">@include respond($panda) {}</span> customised to the required breakpoint.</p>
				<h4>Mobile first:</h4>
<div class="code"><pre><code>//default (no media query) = mobile/mouse styles
@include respond($panda) { } //tablet/panda styles
@include respond($hippo) { } //largest/desktop/hippo styles</code></pre></div>
				<h4>Desktop first:</h4>
<div class="code"><pre><code>//default (no media query) = largest/desktop/hippo styles
@include respond($hippo) { } //lower than hippo styles (i.e. tablet/panda styles)
@include respond($panda) { } //lower than panda styles (i.e. mobile/mouse styles)</code></pre></div>
				<h4>Custom breakpoints:</h4>
				<p>This should be avoided if possible to maintain constistancy but if necessary the above breakpoints can be overrided as follows:</p>
<div class="code"><pre><code>@include respond(1100) { }</code></pre></div>
				<p>The number following respond should represent the px size for the breakpoint. This will be converted to ems by sass.</p>

				<h2>Breakpoint specific changes</h2>
				<p>If a change for a specific breakpoint is required which then has no effect on any of the other screensizes, the following code can be used to implement this. This will still work cross browser as the media queries will be stripped for desktop on older IE browsers.</p>
<div class="code"><pre><code>//MOUSE/MOBILE ONLY
//@include respond-specific(mouse) {}
//PANDA/TABLET ONLY
//@include respond-specific(panda) {}
//HIPPO/DESKTOP ONLY
//@include respond-specific(hippo) {}</code></pre></div>

				<h2><a name="breakpoints">Older IE specific changes</a></h2>
				<p>Rather than having to have a seperate stylsheet with repeated classes for IE, a mixin has been created to allow styles to be made within the initial class declaration that will impact only older IE browsers. This will make the code a lot clearer and easier to navigate.</p>
<div class="code"><pre><code>@include old-ie { }</code></pre></div>

				<h2><a name="inline-or-float">Choosing inline block or float</a></h2>
				<p>The choice of using inline-block or float is left entirely to the discretion of the user and can be easily implemented by changing the display property on the cols to either <span class="code--inline">inline</span> or <span class="code--inline">float</span>.</p>
				<p>The benefit of inline-block is that these columns don't need to be cleared, so no clearfix solutions or overflow: hidden are required. Of course other elements can't flow around them and you can't force an element below an inline-block by clearing it. Inline-block elements are also far more flexible than floats, allowing ease of changing horizontal positon and vertical alignment. They do however pick up HTML whitespace and so use caution when using the columns using this method to ensure that there is no whitespace between the columns as this will cause the grid to break to a new line earlier than expected. This can be done by setting parent font-size to 0 or removing the whitespace with comments or lack of spacing. If the site is required to work in IE6 or IE7 use float instead as inline-block is not supported in these earlier browsers.</p>
				<p>Floated elements will sit adjacent to each other, regardless of the html whitespace between them. They are also IE6 and IE7 compatible. They do however require clearfix solutions to be added where the columns are flowing underneath each other to ensure they clear correctly.</p>
				<h2>Grid</h2>
				<div class="custom-row">
					<div class="custom-12">
						<div style="background-color:#80CAF7;">custom-12</div>
					</div>
				</div>
				<div class="custom-row">
					<div class="custom-6">
						<div style="background-color:#80CAF7;">custom-6</div>
					</div>
					<div class="custom-6">
						<div style="background-color:#80CAF7;">custom-6</div>
					</div>
				</div>
				<div class="custom-row">
					<div class="custom-4">
						<div style="background-color:#80CAF7;">custom-4</div>
					</div>
					<div class="custom-4">
						<div style="background-color:#80CAF7;">custom-4</div>
					</div>
					<div class="custom-4">
						<div style="background-color:#80CAF7;">custom-4</div>
					</div>
				</div>
				<div class="custom-row">
					<div class="custom-3">
						<div style="background-color:#80CAF7;">custom-3</div>
					</div>
					<div class="custom-3">
						<div style="background-color:#80CAF7;">custom-3</div>
					</div>
					<div class="custom-3">
						<div style="background-color:#80CAF7;">custom-3</div>
					</div>
					<div class="custom-3">
						<div style="background-color:#80CAF7;">custom-3</div>
					</div>
				</div>
				<div class="custom-row">
					<div class="custom-2">
						<div style="background-color:#80CAF7;">custom-2</div>
					</div>
					<div class="custom-2">
						<div style="background-color:#80CAF7;">custom-2</div>
					</div>
					<div class="custom-2">
						<div style="background-color:#80CAF7;">custom-2</div>
					</div>
					<div class="custom-2">
						<div style="background-color:#80CAF7;">custom-2</div>
					</div>
					<div class="custom-2">
						<div style="background-color:#80CAF7;">custom-2</div>
					</div>
					<div class="custom-2">
						<div style="background-color:#80CAF7;">custom-2</div>
					</div>
				</div>
				<div class="custom-row">
					<div class="custom-1">
						<div style="background-color:#80CAF7;">custom-1</div>
					</div>
					<div class="custom-1">
						<div style="background-color:#80CAF7;">custom-1</div>
					</div>
					<div class="custom-1">
						<div style="background-color:#80CAF7;">custom-1</div>
					</div>
					<div class="custom-1">
						<div style="background-color:#80CAF7;">custom-1</div>
					</div>
					<div class="custom-1">
						<div style="background-color:#80CAF7;">custom-1</div>
					</div>
					<div class="custom-1">
						<div style="background-color:#80CAF7;">custom-1</div>
					</div>
					<div class="custom-1">
						<div style="background-color:#80CAF7;">custom-1</div>
					</div>
					<div class="custom-1">
						<div style="background-color:#80CAF7;">custom-1</div>
					</div>
					<div class="custom-1">
						<div style="background-color:#80CAF7;">custom-1</div>
					</div>
					<div class="custom-1">
						<div style="background-color:#80CAF7;">custom-1</div>
					</div>
					<div class="custom-1">
						<div style="background-color:#80CAF7;">custom-1</div>
					</div>
					<div class="custom-1">
						<div style="background-color:#80CAF7;">custom-1</div>
					</div>
				</div>
				<h2>Code for above grid</h3>
				<div class="code"><pre><code>.custom-row {
	@include row($small-gutter, $small-gutter);
}
.custom-12 {
	@include col(float, $small-gutter, $small-gutter, 12, null, null);
}
.custom-6 {
	@include col(float, $small-gutter, $small-gutter, 6, null, 6);
}
.custom-4 {
	@include col(float, $small-gutter, $small-gutter, 4, 6, null);
	&:first-child {
		@include col(float, $small-gutter, $small-gutter, 4, 12, null);
	}
}
.custom-3 {
	@include col(float, $small-gutter, $small-gutter, 3, 6, 6);
}
.custom-2 {
	@include col(float, $small-gutter, $small-gutter, 2, 4, 6);
}
.custom-1 {
	@include col(float, $small-gutter, $small-gutter, 1, 3, 4);
}
</code></pre></div>
				<h2>Push and pull columns</h2>
				<div class="push-row">
					<div class="push-4">
						<div style="background-color:#80CAF7;">width 4, pushed 1</div>
					</div>
					<div class="breakpoint"></div>
					<div class="push-6">
						<div style="background-color:#80CAF7;">width 6, pushed 2</div>
					</div>
				</div>
				<div class="push-row">
					<div class="pushed-6">
						<div style="background-color:#80CAF7;">width 6, pushed 6</div>
					</div>
					<div class="pulled-6">
						<div style="background-color:#80CAF7;">width 6, pulled 6</div>
					</div>
				</div>
				<div class="push-row">
					<div class="pushed-5">
						<div style="background-color:#80CAF7;">width 5, pushed 7</div>
					</div>
					<div class="pulled-7">
						<div style="background-color:#80CAF7;">width 7, pulled 5</div>
					</div>
				</div>
				<div class="push-row">
					<div class="push-2">
						<div style="background-color:#80CAF7;">width 2, pushed 5</div>
					</div>
					<div class="push-5">
						<div style="background-color:#80CAF7;">width 5, pulled 2</div>
					</div>
					<div class="push-4">
						<div style="background-color:#80CAF7;">width 4, pushed 1</div>
					</div>
				</div>
				<p>When pushing columns, the methodology is the same as that of the column widths. All column widths and pushes must still add up to the grid width defined (in this case default of 12).</p>
				<h2>Pushing grid code</h3>
<div class="code"><pre><code>.push-row {
	@include row($small-gutter, $small-gutter);
}
.push-4 {
	@include col(float, $small-gutter, $small-gutter, 4, null, null);
}
.push-6 {
	@include col(float, $small-gutter, $small-gutter, 6, null, null);
	@include offset(push, 2, 2, null);
}
.pulled-6 {
	@include col(float, $small-gutter, $small-gutter, 6, null, null);
	@include offset(pull, 6, null, null);
}
.pushed-6 {
	@include col(float, $small-gutter, $small-gutter, 6, null, null);
	@include offset(push, 6, null, null);
}
.pushed-5 {
	@include col(float, $small-gutter, $small-gutter, 5, null, null);
	@include offset(push, 7, null, null);
}
.pulled-7 {
	@include col(float, $small-gutter, $small-gutter, 7, null, null);
	@include offset(pull, 5, null, null);
}
.push-2 {
	@include col(float, $small-gutter, $small-gutter, 2, null, null);
	@include offset(push, 5, 5, null);
}
.push-5 {
	@include col(float, $small-gutter, $small-gutter, 5, null, null);
	@include offset(pull, 2, 2, null);
}
.push-4 {
	@include col(float, $small-gutter, $small-gutter, 4, null, null);
	@include offset(push, 1, null, null);
}
</code></pre></div>
		</section><!-- end middle -->

	</body>
</html>
<!--END FOOTER FILE-->