Permalink
Browse files

reticulating splines...

  • Loading branch information...
1 parent af3a1a1 commit 92b9422dabff9b6de420bd5a92d485665743424f @cobyism committed Aug 6, 2012
Showing with 925 additions and 0 deletions.
  1. +2 −0 _config.yml
  2. +44 −0 css/gridism-responsive.css
  3. +105 −0 css/gridism.css
  4. +500 −0 css/normalize.css
  5. +69 −0 css/style.css
  6. +205 −0 index.html
View
@@ -0,0 +1,2 @@
+auto: true
+server: true
View
@@ -0,0 +1,44 @@
+/* Expand the grid a bit further on bigger screens */
+@media screen and (min-width: 1180px) {
+ .wrap .gridism {
+ max-width: 1180px;
+ margin: 0 auto;
+ }
+}
+
+@media screen and (max-width: 320px) {
+
+ /* Expand anything lower than .half to full-width on smaller screens */
+ .gridism .half {
+ width: 100%;
+ }
+}
+
+@media screen and (max-width: 480px) {
+
+ /* Expand anything lower than .half to full-width on smaller screens */
+ .gridism .third,
+ .gridism .two-thirds,
+ .gridism .golden-small,
+ .gridism .golden-large,
+ .gridism .quarter,
+ .gridism .three-quarters,
+ .gridism .fifth,
+ .gridism .two-fifths,
+ .gridism .three-fifths,
+ .gridism .four-fifths {
+ width: 100%;
+ }
+
+ /* … and give them some better margins */
+ .gridism .content {
+ margin-left: 20px;
+ margin-right: 20px;
+ }
+
+ /* Sometimes, you want things centered on small screens */
+ .center-on-mobiles {
+ text-align: center !important;
+ }
+
+}
View
@@ -0,0 +1,105 @@
+/*
+ * Grid(ism)
+ * A CSS grid experiment by @cobyism
+ * https://github.com/cobyism/gridism
+ */
+
+/*
+ * Gutters!
+ * This ensures the outer margins aren’t half the inner gutters
+ * Adjust these values to be whatever you like
+ */
+.gridism .content { margin: 10px; }
+.gridism > div:first-child .content { margin-left: 20px; }
+.gridism > div:last-child .content { margin-right: 20px; }
+
+/* To wrap, or not to wrap, that is the question. */
+
+.wrap .gridism {
+ max-width: 978px;
+ margin: 0 auto;
+}
+
+/* Core classes */
+
+body > header,
+body > section,
+body > footer {
+ /*float: left;*/
+ width: 100%;
+ overflow: hidden;
+}
+
+.gridism {
+ display: block;
+}
+
+.gridism .whole,
+.gridism .half,
+.gridism .third,
+.gridism .two-thirds,
+.gridism .golden-small,
+.gridism .golden-large,
+.gridism .quarter,
+.gridism .three-quarters,
+.gridism .fifth,
+.gridism .two-fifths,
+.gridism .three-fifths,
+.gridism .four-fifths
+{
+ float: left;
+}
+
+.gridism .whole {
+ width: 100%;
+}
+
+.gridism .half {
+ width: 50%;
+}
+
+.gridism .third {
+ width: 33.3333%;
+}
+
+.gridism .two-thirds {
+ width: 66.6666%;
+}
+
+.gridism .golden-small {
+ width: 38.2716%;
+}
+
+.gridism .golden-large {
+ width: 61.7283%
+}
+
+.gridism .quarter {
+ width: 25%;
+}
+
+.gridism .three-quarters {
+ width: 75%;
+}
+
+.gridism .fifth {
+ width: 20%;
+}
+
+.gridism .two-fifths {
+ width: 40%;
+}
+
+.gridism .three-fifths {
+ width: 60%;
+}
+
+.gridism .four-fifths {
+ width: 80%;
+}
+
+/* Utilities */
+
+.center { text-align: center; }
+.left { text-align: left; }
+.right { text-align: right; }
Oops, something went wrong.

0 comments on commit 92b9422

Please sign in to comment.