-
Notifications
You must be signed in to change notification settings - Fork 1
/
readme.html
executable file
·99 lines (74 loc) · 5.83 KB
/
readme.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1 id="pinkmagicpinkgridpinkrow">PINK MAGIC/PINK GRID/PINK ROW</h1>
<h3 id="sassgridmixinsolutions">Sass Grid Mixin Solutions</h3>
<p><em>Version 0.1</em></p>
<p>Inclue this file to easily generate widths/padding for items and build items which conform to a grid for your site.
Or, use Magic Grid to create a fully responsive equal-sized grid instantly!
No more dealing with annoying floats, rows, and clears! Using the magic of display: inline-block</p>
<p>Use <code>@include pinkgrid()</code> to generate widths and padding for your own class-based grid system ( 1col, 2col, full, etc. ) or simply add directly to items.
Use<code>@include pinkrow()</code> to adjust the width and outer padding of the outer elements.
Use <code>@include pinkgridrow()</code> to create rows where all items should be the same width.
Use with media queries for even more responsive goodness!</p>
<p>Don’t want to write media queries? If you need evenly-sized items per row (like a photo gallery or content blocks) just use <code>@include pinkmagic</code> and don’t even worry about it, because I did all the math for you! Works for any number items per row :)</p>
<p>Use of <code>@pinkgrid()</code> plus <code>@pinkrow()</code> is best with items that will not span equal columns (5+7, 3+6+3, etc) because the container widths stay the same even when the outer padding on each row is removed. For equally sized items (like in a photo grid), use <code>@pinkgridrow()</code> which adjusts the width of the outer containers to keep the content areas all the same width.</p>
<p><code>@include pinkgrid( $align, $totalcols, $colspan, $padtop, $padside )</code></p>
<ul>
<li>$defaultcols: 12 - Change this value to set the global number of columns in your grid system</li>
<li>$defaultpad: 1% Change this value to set the global padding percentage in your grid system</li>
<li>$align: Vertical-align property - Defaults to Top</li>
<li>$totalcols: Number of columns in your grid ( ex: 12 ) - Defaults to $defaultcols</li>
<li>$colspan: Number of columns your item spans ( ex: 3 / 12 ) - Defaults to $defaultcols (100% width)</li>
<li>$padside: Padding left/right of each item. - Defaults to $defaultpad</li>
<li>$padtop: Padding above/below around each item. - Defaults to 0</li>
</ul>
<p><code>@include pinkrow( $rowitems, $before, $after )</code></p>
<ul>
<li>$rowitems: Number of items per row ( ex. 4 ) - Defaults to 1</li>
<li>$before: Alternating row layouts: elements before this row - Defaults to 0</li>
<li>$after: Alternating row layouts: elements after this row - Defaults to 0</li>
</ul>
<p><code>pinkgridrow( $align, $padtop, $padside, $rowitems, $before, $after )</code></p>
<ul>
<li>$align: Vertical-align property - Defaults to Top</li>
<li>$rowitems: Number of items per row ( ex. 4 ) - Defaults to 1</li>
<li>$before: Alternating row layouts: elements before this row - Defaults to 0</li>
<li>$after: Alternating row layouts: elements after this row - Defaults to 0</li>
<li>$padside: Percentage padding left/right of each item. - Defaults to $defaultpad</li>
<li>$padtop: Percentage padding above/below around each item. - Defaults to 0</li>
</ul>
<p><code>@include pinkmagic( $rowitems, $padtop, $padside, $align, $before, $after )</code></p>
<ul>
<li><p>$magicrow: 4; - Change this value to set the global default number of items per row</p></li>
<li><p>$magictop: 10px; - Change this value to set the global default of top padding</p></li>
<li><p>$magicside: 2%; - Change this value to set the global default of side padding</p></li>
<li><p>$magicalign: top; - Change this value to set the global default of vertical-align</p></li>
<li><p>$tiny-bp: 300px; - Change this value to set your tiny breakpoint</p></li>
<li><p>$sm-bp: 480px; - Change this value to set your small breakpoint</p></li>
<li><p>$med-bp: 720px; - Change this value to set your medium breakpoint</p></li>
<li><p>$lg-bp: 980px; - Change this value to set your large breakpoint</p></li>
<li><p>$xl-bp: 1200px; - Change this value to set your x-large breakpoint</p></li>
<li><p>$rowitems: Number of items per row ( ex. 4 ) - Defaults to 1</p></li>
<li><p>$padside: If $autopad is false, it will use this value to manually add side padding. - Defaults to $defaultpad</p></li>
<li><p>$padtop: Percentage padding above/below around each item. - Defaults to $magictop</p></li>
<li><p>$align Vertical-align property - Defaults to Top</p></li>
<li><p>$before: Alternating row layouts: elements before this row - Defaults to 0</p></li>
<li><p>$after: Alternating row layouts: elements after this row - Defaults to 0</p></li>
</ul>
<p>For example: </p>
<p><code>@include pinkgrid( $colspan: 3 )</code> will generate an object that spans 3 out of 12 columns ( 25% ) with 1% padding</p>
<p><code>@include pinkgrid( $totalcols: 6, $colspan: 3 )</code> will generate an object that spans 3 out of 6 ( 50% ) columns with 1% padding</p>
<p><code>@include pinkgrid( $colspan: 3 ) @include pinkrow( $rowitems: 4 )</code> will generate an object that spans 3 out of 12 columns ( 25% ) but will remove the outside padding of the first and last item in each row of 4 items</p>
<p><code>@include pinkgridrow( $rowitems: 4 )</code> will generate a grid with 4 items per row for all items with that class, with the content area inside the containers spanning an equal width for each item.</p>
<p><code>@include pinkmagic( $rowitems: 8 )</code> will generate a fully responsive grid for all items with that class, with 8 items across, complete with breakpoints</p>
<p><em>Check out the example html/scss files for more ideas!</em></p>
<p>Here’s a <a href="http://michelleschulp.pink/pink-grid">live version of the site</a> to see examples.</p>
<h3 id="examplescreenshots:">Example screenshots:</h3>
<p><img src="screenshot.png" alt="Screenshot" />
<img src="screenshot2.png" alt="Screenshot2" /></p>
</body>
</html>