Snippets

Daniel Sokolowski Light column gird system

Updated by Daniel Sokolowski
View revision

File simple-wrapperless-grid-system.css Modified

  • Ignore whitespace
  • Hide word diff 
 .column {
 	float: left;
 	padding-right: 1em;
+	box-sizing: border-box;
 }
 
 .column:last-of-type {
Updated by Daniel Sokolowski
View revision

File simple-wrapperless-grid-system.css Modified

  • Ignore whitespace
  • Hide word diff 
 
 IMPRV: should we change naming to something like `4-twelfths`, or `4-12ths`?
 */
-body {
-  box-sizing: border-box;
-}
-* {
-	overflow: auto; /* makes parent 'wrap' if it contains floated elements */
-}
-*, *:before, *:after {
-  box-sizing: inherit;
+
+.floatWrapFix {
+	overflow: auto; /* use this class to fix the parent to 'wrap' foated elements it contains */
 }
 
 .column {
Updated by Daniel Sokolowski
View revision

File simple-wrapperless-grid-system.css Modified

  • Ignore whitespace
  • Hide word diff 
 
 IMPRV: should we change naming to something like `4-twelfths`, or `4-12ths`?
 */
+body {
+  box-sizing: border-box;
+}
+* {
+	overflow: auto; /* makes parent 'wrap' if it contains floated elements */
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
 
 .column {
-	box-sizing: border-box;
 	float: left;
 	padding-right: 1em;
 }
Updated by Daniel Sokolowski
View revision

File simple-wrapperless-grid-system.css Modified

  • Ignore whitespace
  • Hide word diff 
 <section class="column 4/12">
 	...
 </section>
-<section class="column 12/12">
+<section class="column 8/12">
 	<div class="6/12" ... >
 		<img class="4/12" ... >
 	</div>
 </section>
 ```
+
+IMPRV: should we change naming to something like `4-twelfths`, or `4-12ths`?
 */
 
 .column {
Updated by Daniel Sokolowski
View revision

File simple-wrapperless-grid-system.css Modified

  • Ignore whitespace
  • Hide word diff 
 }
 
 
-/* below selectors leverage character - see: https://mathiasbynens.be/notes/css-escapes */
+/* below selectors leverage escaping characters - see: https://mathiasbynens.be/notes/css-escapes */
 .\31\/12 { /* `.1/12` */
 	width: calc(100% / 12)
 }
  2. 1
  3. 2
  4. 3
  5. 4
  6. 5
  7. 6
  8. 7
HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.