You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,15 +1,15 @@
1
1
#The mini Mighty Grid!#
2
2
3
-
**mini Mighty Grid is 3 grids in one. And all at an overhead of only 1.6k minified without the demo styles! And as low as 323 bytes if you don't need breakpoints!**
3
+
**mini Mighty Grid is 3 grids in one. And all at an overhead of only 1.6k minified without the demo styles! And as low as 323 bytes if you don't need breakpoints and compile your own css!**
4
4
5
-
- Responsive, 12 column grid
6
-
- Responsive, percentage grid based on known percentages
7
-
- Responsive, floating point grid with any combination of fractions that total 100%
5
+
- Responsive, standard, 12 column grid
6
+
- Responsive, percentage grid based that you can use any combination of percentages that equall 100%
7
+
- Responsive, floating point grid that you set whatever number you choose as 100% and with any combination of column widths that total that 100%
Note: if you just want the grid with the default breakpoints (480, 768, 960, 1200) and don't want to compile sass, you can grab the mini-mighty-grid.min.css from the css folder and be on your way.
12
+
Note: if you just want the grid with the default breakpoints (0, 480, 768, 960, 1200) and don't want to compile sass, you can download the default branch of this repo, grab the "mini-mighty-grid.min.css" and be on your way.
13
13
14
14
####SASS Usage####
15
15
1. Use SASS to compile `/scss/layout.scss` and export to the css directory. Compiling layout.scss will compile all the mixins and settings into a single css file. You can use whatever method is comfortable for you. The command line might look like `scss --watch layout.scss:../css/layout.css --style compressed`
@@ -88,7 +88,7 @@ The sass/css
88
88
89
89
The floating point grid works almost exactly like the percentage grid with two exceptions. The widths are expressed in floating point numbers that equal 100% of the total units given and the sass function receives 2 variables. The floating point number and total units.
90
90
91
-
This example would render a row with the first column 2.4 units out of 7 width and the second column 4.6 units out of 7 width (2.4 + 4.6 = 7 or 100%). You can use any set of units you like as long as the end result is 100% of the 2nd variable.
91
+
This example would render a row with the first column 2.4 units out of 7 units wide and the second column 4.6 units out of 7 units wide (2.4 + 4.6 = 7 or 100%). You can use any set of units you like as long as the end result is 100% of the 2nd variable.
92
92
93
93
Note the name of the sass function is colu().
94
94
@@ -117,11 +117,11 @@ The sass/css
117
117
```
118
118
119
119
###100% width layouts###
120
-
For 100% width layouts simply use the `.container-fullwidth` class instead of `.container`. This works for all grids.
120
+
For 100% width layouts simply use the `.fullwidth-container` class instead of `.container`. This works for all grids.
121
121
122
122
Example:
123
123
```
124
-
<div class="container-fullwidth">
124
+
<div class="fullwidth-container">
125
125
<div class="row">
126
126
<div class="col-sm-12 col-md-6">
127
127
...content here...
@@ -132,4 +132,4 @@ Example:
132
132
</div>
133
133
</div>
134
134
```
135
-
Special thanks to [Francisco](https://github.com/dospuntocero) for the percentage and floating point grids and for making the whole thing 1.6k instead of 2.8!
135
+
Special thanks to [Francisco](https://github.com/dospuntocero) for the percentage and floating point grids and for making the whole thing 1.6k instead of 2.8!
Copy file name to clipboardExpand all lines: index.html
+46-46Lines changed: 46 additions & 46 deletions
Original file line number
Diff line number
Diff line change
@@ -7,37 +7,9 @@
7
7
</head>
8
8
<body>
9
9
10
-
<divclass="container">
11
-
<divclass="row">
12
-
<h3>Fixed width, percentage grid, with known column width percentages. </h3>
13
-
<divclass="blue-colp-fixed">
14
-
<p>This column is 25% Blue</p>
15
-
</div>
16
-
<divclass="red-colp-fixed">
17
-
<p>This column is 75% Red</p>
18
-
</div>
19
-
</div>
20
-
</div>
21
-
22
-
<br>
23
-
24
-
<divclass="container">
25
-
<divclass="row">
26
-
<h3>Fixed width, floating point grid, with any combination of column widths that total 100%. </h3>
27
-
<divclass="blue-colu-fixed">
28
-
<p>This column is 2.4 of 7 Blue</p>
29
-
</div>
30
-
<divclass="red-colu-fixed">
31
-
<p>This column is 4.6 of 7 Red</p>
32
-
</div>
33
-
</div>
34
-
</div>
35
-
36
-
<br>
37
-
38
-
<divclass="container">
39
-
<divclass="row">
40
-
<h3>Fixed width, 12 column grid. </h3>
10
+
<sectionclass="container">
11
+
<articleclass="row">
12
+
<h3>Fixed width, 12 column grid divided into three 4-column sections. </h3>
41
13
<divclass="col-sm-12 col-md-4">
42
14
<p>
43
15
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
54
26
</p>
55
27
</div>
56
-
</div>
57
-
</div>
28
+
</article>
29
+
</section>
58
30
59
31
<br>
60
32
61
-
<divclass="container-fullwidth">
62
-
<divclass="row">
63
-
<h3>100% width, percentage grid, with known column width percentages. </h3>
33
+
<sectionclass="container">
34
+
<articleclass="row">
35
+
<h3>Fixed width, percentage grid, with column widths expressed in percentages. </h3>
64
36
<divclass="blue-colp-fixed">
65
37
<p>This column is 25% Blue</p>
66
38
</div>
67
39
<divclass="red-colp-fixed">
68
40
<p>This column is 75% Red</p>
69
41
</div>
70
-
</div>
71
-
</div>
42
+
</article>
43
+
</section>
72
44
73
45
<br>
74
46
75
-
<divclass="container-fullwidth">
76
-
<divclass="row">
77
-
<h3>100% width, floating point grid, with any combination of column widths that total 100%. </h3>
47
+
<sectionclass="container">
48
+
<articleclass="row">
49
+
<h3>Fixed width, floating point grid, with any combination of column widths that total 100%. </h3>
78
50
<divclass="blue-colu-fixed">
79
51
<p>This column is 2.4 of 7 Blue</p>
80
52
</div>
81
53
<divclass="red-colu-fixed">
82
54
<p>This column is 4.6 of 7 Red</p>
83
55
</div>
84
-
</div>
85
-
</div>
56
+
</article>
57
+
</section>
86
58
87
59
<br>
88
60
89
-
<divclass="container-fullwidth">
61
+
<sectionclass="fullwidth-container">
90
62
<divclass="row">
91
-
<h3>100% width, 12 column grid. </h3>
63
+
<h3>100% width, 12 column grid divided into three 4-column sections. </h3>
92
64
<divclass="col-sm-4">
93
65
<p>
94
66
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
0 commit comments