Added hasgrid.js & appropriate CSS (for grid testing), plus initial colorization and grid layout (still needs minor tweaking).

morgant · morgant · commit 8f82f95c60db · 2013-07-24T08:14:49.000-04:00
diff --git a/css/advanced.css b/css/advanced.css
@@ -0,0 +1,5 @@
+body {
+	width: 54em; /* 864px @ 16px */
+	margin-left: auto;
+	margin-right: auto;
+}
diff --git a/css/basic.css b/css/basic.css
@@ -1,18 +1,48 @@
+@import url('../css/advanced.css');
+@import url('../css/hashgrid.css');
+
 body {
     font-family: Verdana, Arial, sans-serif;
     padding: 1em;
-    line-height: 1.5em;
+    line-height: 1.5em; /* 24px @ 16px */
+}
+a:link {
+	color: #1B1BB3;
+}
+a:visited {
+	color: #7373D9;
+}
+a:link:hover, a:visited:hover, a:active:hover {
+	color: #FFBF00;
+}
+p, dt, dd {
+	margin-top: 1.5em; /* 24px @ 16px */
+	margin-bottom: 1.5em;
+	padding: 0 1.5em; 
 }
 h1, h2, h3, h4, h5, h6 {
     font-family: "Gill Sans", sans-serif;
     font-weight: normal;
+    color: #1B1BB3;
 }
 h1 {
-    background-color: #CCC;
+	font-size: 2em; /* 32px @ 16px */
+    line-height: 1.5em; /* 48px @ 32px */
     margin-top: 0;
-    line-height: 1.5em;
+    margin-bottom: 0.75em; /* 24px @ 32px */
+    padding-left: 0.75em;
+    padding-right: 0.75em;
+    background-color: #FFBF00;
 }
 h2, h3, h4, h5 {
-    background-color: #EEE;
+    background-color: #CCC;
     text-transform: uppercase;
 }
+h2 {
+	font-size: 1.5em; /* 24px @ 16px */
+	line-height: 2em; /* 48px @ 16px */
+	margin-top: 1em; /* 24px @ 24px */
+	margin-bottom: 1em;
+	padding-left: 1em;
+	padding-right: 1em;
+}
diff --git a/css/hashgrid.css b/css/hashgrid.css
@@ -0,0 +1,59 @@
+/**
+ * Grid
+ */
+#grid{
+
+    /* Dimensions - same width as your grid with gutters */
+    width: 864px;
+
+    /* Grid (left-aligned)
+    position: absolute;
+    top: 0;
+    left: 0;
+    */
+
+    /* Grid (centered) */
+    position: absolute;
+    top: 0;
+    left: 50%;
+    margin-left: -432px;
+
+}
+
+/**
+ * Vertical grid lines
+ *
+ * Set the column width taking the borders into consideration,
+ * and use margins to set column gutters.
+ */
+#grid div.vert{
+
+    width: 143px;
+    border: solid darkturquoise;
+    border-width: 0 1px;
+    margin-right: 23px;
+
+}
+
+#grid div.vert.first-line{
+
+    margin-left: 23px;
+
+}
+
+
+/**
+ * Horizontal grid lines, defined by your base line height
+ *
+ * Remember, the CSS properties that define the box model:
+ * visible height = height + borders + margins + padding
+ */
+#grid div.horiz{
+
+    /* 24px line height */
+    height: 23px;
+    border-bottom: 1px dotted darkgray;
+    margin: 0;
+    padding: 0;
+
+}
diff --git a/index.html b/index.html
@@ -3,6 +3,8 @@
 	<head>
 		<title>NewtonScript</title>
 		<link rel="stylesheet" type="text/css" href="css/basic.css">
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
+		<script type="text/javascript" src="https://rawgithub.com/dotjay/hashgrid/v8/hashgrid.js"></script>
 	</head>
 	<body>
 		<h1>NewtonScript</h1>
