Snippets

Daniel Sokolowski Light column gird system

Created by Daniel Sokolowski
View revision

File simple-wrapperless-grid-system.css Added

  • Ignore whitespace
  • Hide word diff 
+/*
+Simple wrapperless column gird system
+--------------------------------------
+
+Example:
+
+```
+<section class="column 4/12">
+	...
+</section>
+<section class="column 12/12">
+	<div class="6/12" ... >
+		<img class="4/12" ... >
+	</div>
+</section>
+```
+*/
+
+.column {
+	box-sizing: border-box;
+	float: left;
+	padding-right: 1em;
+}
+
+.column:last-of-type {
+	padding-right: 0;
+}
+
+
+/* below selectors leverage character - see: https://mathiasbynens.be/notes/css-escapes */
+.\31\/12 { /* `.1/12` */
+	width: calc(100% / 12)
+}
+
+.\32\/12 { /* `.2/12` */
+	width: calc(200% / 12)
+}
+
+.\33\/12 { /* `.3/12` */
+	width: calc(300% / 12)
+}
+
+.\34\/12 { /* `.4/12` */
+	 width: calc(400% / 12);}
+
+.\35\/12 { /* `.5/12` */
+	width: calc(500% / 12)
+}
+
+.\36\/12 { /* `.6/12` */
+	width: calc(600% / 12)
+}
+
+.\37\/12 { /* `.7/12` */
+	width: calc(700% / 12)
+}
+
+.\38\/12 { /* `.8/12` */
+	width: calc(800% / 12)
+}
+
+.\39\/12 { /* `.9/12` */
+	width: calc(900% / 12)
+}
+
+.\31\30\/12 { /* `.10/12` */
+	width: calc(1000% / 12)
+}
+
+.\31\31\/12 { /* `.11/12` */
+	width: calc(1100% / 12)
+}
+
+.\31\32\/12 { /* `.12/12` */
+	width: 100%
+}
  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.