Update site

basscss · Apr 3, 2015 · bf2c7cf · bf2c7cf
1 parent be682a8
commit bf2c7cf
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 51 deletions.
diff --git a/css/skull.css b/css/skull.css
@@ -50,7 +50,7 @@ legend {
   font-weight: bold;
 }
 input, select, textarea {
-  border: 1px solid #ddd;
+  border: 1px solid #aaa;
   border-radius: 3px;
   background-color: white;
   -webkit-transition: box-shadow .2s ease;
@@ -86,10 +86,10 @@ table {
 th {
   text-align: left;
   font-weight: bold;
-  font-size: inherit;
+  font-size: 14px;
   padding: 8px 16px;
   line-height: inherit;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid #aaa;
 }
 th:first-child {
   padding-left: 0;
@@ -103,7 +103,7 @@ td {
   padding: 8px 16px;
   line-height: inherit;
   vertical-align: top;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid #aaa;
   border-left: 0;
   border-right: 0;
 }
@@ -207,8 +207,8 @@ button,
   cursor: pointer;
   display: inline-block;
   box-sizing: border-box;
-  line-height: 18px;
-  line-height: 1.125rem;
+  line-height: 22px;
+  line-height: 1.375rem;
   padding: 8px 16px;
   padding: .5rem 1rem;
   margin: 0;
@@ -450,7 +450,7 @@ hr {
   border: 0;
   border-bottom-style: solid;
   border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.125);
+  border-bottom-color: #aaa;
 }
 
 .button {
@@ -494,31 +494,31 @@ hr {
 .border {
   border-style: solid;
   border-width: 1px;
-  border-color: rgba(0,0,0,.125);
+  border-color: #aaa;
 }
 
 .border-top {
   border-top-style: solid;
   border-top-width: 1px;
-  border-top-color: rgba(0,0,0,.125);
+  border-top-color: #aaa;
 }
 
 .border-right {
   border-right-style: solid;
   border-right-width: 1px;
-  border-right-color: rgba(0,0,0,.125);
+  border-right-color: #aaa;
 }
 
 .border-bottom {
   border-bottom-style: solid;
   border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.125);
+  border-bottom-color: #aaa;
 }
 
 .border-left {
   border-left-style: solid;
   border-left-width: 1px;
-  border-left-color: rgba(0,0,0,.125);
+  border-left-color: #aaa;
 }
 
 .rounded { border-radius: 3px }

diff --git a/css/skull.min.css b/css/skull.min.css
diff --git a/docs/build.js b/docs/build.js
@@ -22,7 +22,16 @@ data.tableExample = {
     [ 'Adam Morse', '@mrmrs_', 'http://github.com/mrmrs', 'http://mrmrs.cc' ],
     [ 'John Otander', '@4lpine', 'http://github.com/johnotander', 'http://johnotander.com' ],
   ]
-}
+};
+
+data.related = [
+  { name: 'Basscss', href: 'http://basscss.com' },
+  { name: 'Autogrid', href: 'http://github.com/jxnblk/autogrid' },
+  { name: 'Autoform', href: 'http://github.com/jxnblk/autoform' },
+  { name: 'Autotable', href: 'http://github.com/jxnblk/autotable' },
+];
+
+data.download = '';
 
 var tpl = _.template(fs.readFileSync(path.join(__dirname, './template.html'), 'utf8'));
 data.content = _.template(fs.readFileSync(path.join(__dirname, './docs.html'), 'utf8'))(data);

diff --git a/docs/docs.html b/docs/docs.html
@@ -3,7 +3,7 @@
   <svg viewBox="0 0 32 32"
     width="3em"
     height="3em"
-    class="inline-block"
+    class="inline-block mt4 mb4"
     fill="currentColor">
     <path d="
       M0 6 H32 V24 L28 25 V28 H4 V25 L0 24z
@@ -14,14 +14,15 @@
   </svg>
   <div class="mb1">
     <h1 class="h2 inline-block m0">
-      Skull
+      Skull:
     </h1>
-    <p class="h2 inline-block m0"> — Bare bones boilerplate and Basscss theme</p>
+    <p class="h2 inline-block m0">Bare bones boilerplate and Basscss theme</p>
   </div>
-  <div class="h6 caps mb3">v<%= version %></div>
-  <a href="//github.com/jxnblk/skull" class="h6 button caps">
+  <div class="h6 bold caps mb3">v<%= version %></div>
+  <a href="<%= download %>" class="h6 caps button mr2">
     Download
   </a>
+  <a href="" class="h6 caps button">Tweet</a>
 </header>
 
 <section id="features" class="container px2 py4">
@@ -38,11 +39,25 @@ <h1 class="h2 inline-block m0">
   </div>
 </section>
 
-<section id="stats" class="h6 bold caps center container p2 border rounded">
-  <div class="inline-block px3 py1"><%= filesize(stats.gzipSize) %> gzipped</div>
-  <div class="inline-block px3 py1"><%= stats.rules.length %> rules</div>
-  <div class="inline-block px3 py1"><%= stats.aggregates.selectors %> selectors</div>
-  <div class="inline-block px3 py1"><%= stats.aggregates.declarations %> declarations</div>
+<section id="stats" class="h6 bold caps center container px2">
+  <div class="p2 border rounded">
+    <div class="inline-block px2 py1">
+      <div class="h3"><%= filesize(stats.gzipSize) %></div>
+      gzipped
+    </div>
+    <div class="inline-block px2 py1">
+      <div class="h3"><%= stats.rules.length %></div>
+      rules
+    </div>
+    <div class="inline-block px2 py1">
+      <div class="h3"><%= stats.aggregates.selectors %></div>
+      selectors
+    </div>
+    <div class="inline-block px2 py1">
+      <div class="h3"><%= stats.aggregates.declarations %></div>
+      declarations
+    </div>
+  </div>
 </section>
 
 <section id="grid" class="container px2 py4">
@@ -90,10 +105,9 @@ <h1>Grid</h1>
 <section id="typography" class="container px2 py4">
   <h1>Typography</h1>
   <p>
-    Considered, readable typography featuring
-    <a href="https://www.google.com/fonts/specimen/Lato">
-      Lato from Google Fonts
-    </a>
+    Carefully considered, readable typography featuring
+    <a href="https://www.google.com/fonts/specimen/Lato">Lato</a>
+    from Google Fonts
   </p>
   <div class="row">
     <div class="column-4">
@@ -105,17 +119,25 @@ <h5>Heading 5</h5>
       <h6>Heading 6</h6>
     </div>
     <div class="column-8">
+      <p class="h3">
+        Body copy set at 1.125rem (18px) with a 1.5 line-height and a high contrast type scale,
+        Skull’s typography sets the pace for elegant information hierarchy 
+        and lends itself to effortless readability.
+      </p>
+      <p>
+        In combination with typography utilities, sites built with Skull
+        are quick to tweak and customize to fit any design,
+        whether it’s a blog, documentation, a personal portfolio, or a cat gif portal.
+      </p>
     </div>
   </div>
 </section>
 
 <section id="utilities" class="container px2 py4">
   <h1>Utilities</h1>
   <p>
-    Quickly adjust layouts and iterate on
-    designs with powerful utilities that
-    let you spend less time futzing around with CSS
-    and more time designing in the browser.
+    Quickly adjust layouts and iterate on designs with powerful utilities that
+    let you spend less time futzing around with CSS and more time designing in the browser.
   </p>
   <div class="center row">
     <div class="column-3">.clearfix</div>
@@ -181,6 +203,9 @@ <h1>Utilities</h1>
 
 <section id="forms-and-buttons" class="container px2 py4">
   <h1>Forms and Buttons</h1>
+  <p>
+    Clean, straightforward forms for <i>don’t-make-me-think</i> style simplicity.
+  </p>
   <form>
     <div class="row">
       <div class="column-6">
@@ -199,28 +224,34 @@ <h1>Forms and Buttons</h1>
       <div class="column-6">
         <fieldset>
           <legend>Toppings</legend>
-          <label>
-            <input type="checkbox" /> Onions
-          </label>
-          <label>
-            <input type="checkbox" /> Lettuce
-          </label>
-          <label>
-            <input type="checkbox" /> Tomato
-          </label>
-          <label>
-            <input type="checkbox" /> Ketchup
-          </label>
-          <label>
-            <input type="checkbox" /> Mayo
-          </label>
+          <div class="row">
+            <div class="column-6">
+              <label>
+                <input type="checkbox" /> Onions
+              </label>
+              <label>
+                <input type="checkbox" /> Lettuce
+              </label>
+              <label>
+                <input type="checkbox" /> Tomato
+              </label>
+            </div>
+            <div class="column-6">
+              <label>
+                <input type="checkbox" /> Ketchup
+              </label>
+              <label>
+                <input type="checkbox" /> Mayo
+              </label>
+            </div>
+          </div>
         </fieldset>
         <label>Notes:</label>
         <textarea></textarea>
       </div>
     </div>
     <hr />
-    <button>Medium Rare</button>
+    <button class="button">Medium Rare</button>
   </form>
 </section>
 
@@ -238,7 +269,13 @@ <h1>Tables</h1>
       <% tableExample.tbody.forEach(function(tr) { %>
         <tr>
           <% tr.forEach(function(td) { %>
-            <td><%= td %></td>
+            <td>
+              <% if (td.match(/^http/)) { %>
+                <a href="<%= td %>"><%= td %></a>
+              <% } else { %>
+                <%= td %>
+              <% } %>
+            </td>
           <% }) %>
         </tr>
       <% }) %>
@@ -260,8 +297,30 @@ <h1>Colors</h1>
   </div>
 </section>
 
+<section id="cta" class="center container px2 py4">
+  <h1>Get Started</h1>
+  <a href="<%= download %>" class="h6 caps button">Download</a>
+</section>
+
+<section id="related" class="container px2 py4">
+  <div class="center p3 border rounded">
+    <p class="bold">Skull is built with these tools:</p>
+    <div class="row">
+      <% related.map(function(item) { %>
+        <div class="column-3">
+          <a href="<%= item.href %>"
+            class="h4 bold">
+
+            <%= item.name %>
+          </a>
+        </div>
+      <% }) %>
+    </div>
+  </div>
+</section>
+
 <footer class="container px2">
-  <div class="py4 mxn2">
+  <div class="center py4 mxn2">
     <a href="//jxnblk.com/skull" class="inline-block p2">
       Skull
       v<%= version %>

diff --git a/package.json b/package.json
@@ -23,7 +23,9 @@
     "basscss-utility-white-space": "latest"
   },
   "devDependencies": {
+    "autoform": "^1.0.0",
     "autogrid": "^1.0.6",
+    "autotable": "^1.0.0",
     "clean-css": "^3.1.8",
     "colors.css": "^2.3.0",
     "cssnext": "^1.1.0",

diff --git a/src/base.css b/src/base.css
@@ -45,7 +45,7 @@
 
   --button-font-size: var(--h5);
   --button-font-weight: bold;
-  --button-line-height: 1.125rem;
+  --button-line-height: 1.375rem;
   --button-padding-y: .5rem;
   --button-padding-x: 1rem;
 
@@ -55,6 +55,7 @@
   --form-field-padding-x: .5rem;
 
   --blue: #0099dd;
+  --border-color: var(--gray);
 
   /*
   --space-1: .5rem;

diff --git a/src/css.js b/src/css.js
@@ -6,15 +6,19 @@ var cssnext = require('cssnext');
 var autoform = require('autoform');
 var autotable = require('autotable');
 var autogrid = require('autogrid');
+var colors = require('colors.css');
 
 
 var styles = [];
 
 styles.push(autoform({
+  borderColor: colors.gray,
 }));
 
 styles.push(autotable({
+  headerFontSize: '14px',
   paddingY: '8px',
+  borderColor: colors.gray,
 }));
 
 styles.push(autogrid({