gutting the docs and starting to rebuild.

11 years ago · abf4c34e4d
4 changed files with 400 additions and 888 deletions
--- a/Gruntfile.js
+++ b/Gruntfile.js
@ -7,7 +7,8 @@ module.exports = function(grunt) {
    // Metadata.
    meta: {
      srcPath: 'lib/',
-      distPath: 'dist/'
+      distPath: 'dist/',
+      docsPath: 'docs-assets/'
    },
    
    banner: '/*\n' +
@ -45,7 +46,8 @@ module.exports = function(grunt) {
      dist: {
        files: {
          '<%= meta.distPath %><%= pkg.name %>.css': '<%= meta.srcPath %>sass/ratchet.scss',
-          '<%= meta.distPath %>theme-classic.css': '<%= meta.srcPath %>sass/theme-classic.scss'
+          '<%= meta.distPath %>theme-classic.css': '<%= meta.srcPath %>sass/theme-classic.scss',
+          '<%= meta.docsPath %>/css/docs.css': '<%= meta.srcPath %>sass/docs.scss'
        }
      }
    },
--- a/docs-assets/css/docs.css
+++ b/docs-assets/css/docs.css
--- a/index.html
+++ b/index.html
@ -4,16 +4,17 @@ title: Ratchet
 base_url: "./"
 ---

-<header class="docs-outer-wrapper docs-header">
-  <div class="docs-inner-wrapper">
-    <hgroup class="docs-header-text">
-      <h1>Ratchet</h1>
-      <p class="docs-header-subtitle">Prototype beautiful iPhone apps with simple HTML, CSS, and JS components.</p>
-      <a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="docs-btn" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
-    </hgroup>
+<header class="docs-header-wrapper">
+  <div class="container">
+    <div class="column-group">
+      <div class="docs-header column units-2">
+        <h1 class="docs-title">Ratchet</h1>
+        <p class="docs-subtitle">Prototype beautiful iPhone apps with simple HTML, CSS, and JS components.</p>
+        <a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="button button-primary button-filled button-block" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
+      </div>
+    </div>
  </div>
 </header>
-</div>

 <!--<section class="social">
    <ul>
--- a/lib/sass/docs.scss
+++ b/lib/sass/docs.scss
@ -0,0 +1,221 @@
+@import "variables.scss";
+@import "mixins.scss";
+
+//
+// Documentation
+// --------------------------------------------------
+
+body {
+  position: static !important; // Overrides the fixed positioning of body in Ratchet
+  font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #333;
+  background-color: #fff;
+  -webkit-font-smoothing: antialiased; // Fix for webkit rendering
+  -webkit-text-size-adjust: 100%;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-rendering: optimizeLegibility;
+}
+
+// The grid
+// --------------------------------------------------
+
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 2%;
+  padding-right: 2%;
+}
+.column-group {
+  width: auto;
+}
+.column {
+  padding-left: 15px;
+  padding-right: 15px;
+  float: left;
+}
+// Lines nested grids up correctly.
+.column .column-group {
+  margin-left: -15px;
+  margin-right: -15px;
+}
+.units-1 { width: 50%; }
+.units-2 { width: 100%; }
+
+// Offsets
+.offset-1 { margin-left: 50%; }
+
+
+// Tablet to desktop 
+// --------------------------------------------------
+
+ @media screen and (min-width: 768px) {
+  .container {
+    padding: 0;
+    max-width: 940px;
+  }
+  .column {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  // Lines nested grids up correctly.
+  .column .column-group {
+    margin-left: -20px;
+    margin-right: -20px;
+  }
+
+  // Override the mobile grid
+  .units-1 { width: 50%; }
+  .units-2 { width: 100%; }
+
+  // Twelve column fluid grid
+  .lg-units-1  { width: 8.333%; }
+  .lg-units-2  { width: 16.666%; }
+  .lg-units-3  { width: 25%; }
+  .lg-units-4  { width: 33.333%; }
+  .lg-units-5  { width: 41.666%; }
+  .lg-units-6  { width: 50%; }
+  .lg-units-7  { width: 58.333%; }
+  .lg-units-8  { width: 66.666%; }
+  .lg-units-9  { width: 75%; }
+  .lg-units-10 { width: 83.333%; }
+  .lg-units-11 { width: 91.666%; }
+  .lg-units-12 { width: 100%; }
+
+  // Offsets
+  .lg-offset-1     { margin-left: 8.333%; }
+  .lg-offset-2     { margin-left: 16.666%; }
+  .lg-offset-3     { margin-left: 25%; }
+  .lg-offset-4     { margin-left: 33.333%; }
+  .lg-offset-5     { margin-left: 41.666%; }
+  .lg-offset-6     { margin-left: 50%; }
+  .lg-offset-7     { margin-left: 58.333%; }
+  .lg-offset-8     { margin-left: 66.666%; }
+  .lg-offset-9     { margin-left: 75%; }
+  .lg-offset-10    { margin-left: 83.333%; }
+  .lg-offset-11    { margin-left: 91.666%; }
+}
+
+
+// Standard sized screens to large screens
+// --------------------------------------------------
+
+@media screen and (min-width: 1200px) {
+  .container {
+    max-width: 1170px;
+  }
+  .column {
+    padding-left: 30px;
+    padding-right: 30px;
+  }
+  // Lines nested grids up correctly.
+  .column .column-group {
+    margin-left: -30px;
+    margin-right: -30px;
+  }
+}
+
+
+// Jumbotron
+// --------------------------------------------------
+
+.docs-header-wrapper {
+  background-color: #fafafa;
+  @include hairline(single, #c8c7cc, 320px, 0);
+}
+.docs-header {
+  padding-top: 50px;
+  padding-bottom: 50px;
+  text-align: center;
+  @include animation-name(fadeintext);
+  @include animation-duration(2s);
+
+  .docs-title {
+    margin: 0;
+    font-size: 40px;
+    font-weight: 400;
+  }
+
+  .docs-subtitle {
+    margin-top: 0;
+    margin-bottom: 35px;
+    color: #777;
+    font-size: 22px;
+    font-weight: 300;
+    line-height: 30px;
+  }
+}
+
+
+// Misc
+// --------------------------------------------------
+
+hr {
+  height: 0;
+  margin: 10px 0 30px;
+  border: solid #ddd;
+  border-width: 1px 0 0;
+  clear: both;
+}
+
+.column-group {
+  *zoom: 1;
+}
+.column-group:before,
+.column-group:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+.column-group:after {
+  clear: both;
+}
+// You can also use a <br class="clear">
+.clear {
+  display: block;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+  clear: both;
+}
+
+
+// Animations
+// --------------------------------------------------
+
+@-webkit-keyframes fadeintext {
+  0% {
+   opacity: 0;
+   -webkit-transform: scale(.9);
+  }
+  50% {
+   opacity: 0;
+   -webkit-transform: scale(.9);
+  }
+  100% {
+   opacity: 1;
+   -webkit-transform: scale(1);
+  }
+}
+
+@-webkit-keyframes fadeinsocial {
+  0% {
+   opacity: 0;
+   -webkit-transform: scale(.9);
+  }
+  50% {
+   opacity: 0;
+   -webkit-transform: scale(.9);
+  }
+  100% {
+   opacity: 1;
+   -webkit-transform: scale(1);
+  }
+}