WIP: first Origin candidate

Author: robbiemanson

Gruntfile.js

@@ -13,26 +13,11 @@ module.exports = function(grunt) {
       },
       dist: {
         files: {
-          'css/primer.css': 'scss/primer.scss'
+          'assets/css/origin.css': 'assets/scss/origin.scss'
         }
       }
     },
 
-    // Handle vendor prefixing
-    postcss: {
-      options: {
-        processors: [
-          require('autoprefixer-core')({ browsers: ['last 2 versions', 'ie 8', 'ie 9'] })
-        ]
-      },
-      dist: {
-        src: 'css/*.css'
-      },
-      docs: {
-        src: '_site/*.css'
-      }
-    },
-
     // Runs CSS reporting
     parker: {
       options: {
@@ -53,20 +38,20 @@ module.exports = function(grunt) {
           'TotalImportantKeywords',
           'TotalMediaQueries'
         ],
-        file: "css/.primer-stats.md",
+        file: "docs/assets/css/.origin-stats.md",
         usePackage: true
       },
       src: [
-        'css/*.css'
+        'assets/css/*.css'
       ]
     },
 
     // Build tooling
 
     watch: {
       sass: {
-        files: ['scss/**/*.scss', 'docs/docs.scss'],
-        tasks: ['sass', 'postcss', 'parker']
+        files: ['assets/scss/*.scss', 'assets/scss/**/*.scss', 'assets/scss/**/**/*.scss'],
+        tasks: ['sass', 'parker']
       }
     },
 
@@ -87,24 +72,23 @@ module.exports = function(grunt) {
       },
       pages: {
         options: {
-          remote: 'git@github.com:primer/primer.git',
+          remote: 'git@github.com:fac/origin.git',
           branch: 'gh-pages'
         }
       }
     }
   });
 
   // Load dependencies
-  grunt.loadNpmTasks('grunt-postcss');
   grunt.loadNpmTasks('grunt-build-control');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-jekyll');
   grunt.loadNpmTasks('grunt-parker');
   grunt.loadNpmTasks('grunt-sass');
 
   // Generate and format the CSS
-  grunt.registerTask('default', ['sass', 'jekyll', 'postcss', 'parker']);
+  grunt.registerTask('default', ['sass', 'jekyll', 'parker']);
 
   // Publish to GitHub
-  grunt.registerTask('publish', ['jekyll', 'postcss:docs', 'buildcontrol:pages']);
+  grunt.registerTask('publish', ['jekyll', 'buildcontrol:pages']);
 };

_config.yml

@@ -11,7 +11,8 @@ baseurl: ""
 version: 2.3.3
 
 sass:
-  sass_dir: ../
+  # Directory points to root to allow the `@import` of .scss files from anywhere
+  sass_dir: assets/scss
   style: compressed
 
 github:

css/.primer-stats.md

@@ -1,50 +1,62 @@
+<h4 class="menu-title">
+  Guidance
+</h4>
 <nav class="menu docs-menu">
-  <a class="menu-item {% if page.title == "Scaffolding" %}selected{% endif %}" href="{{ site.baseurl }}/scaffolding/">
-    Scaffolding
+  <a class="menu-item {% if page.title == "Principles" %}selected{% endif %}" href="{{ site.baseurl }}/principles/">
+    Principles
   </a>
-  <a class="menu-item {% if page.title == "Layout" %}selected{% endif %}" href="{{ site.baseurl }}/layout/">
-    Layout
+  <a class="menu-item {% if page.title == "Code style" %}selected{% endif %}" href="{{ site.baseurl }}/code-style/">
+    Code style
   </a>
-  <a class="menu-item {% if page.title == "Typography" %}selected{% endif %}" href="{{ site.baseurl }}/type/">
-    Type
+  <a class="menu-item {% if page.title == "About utilities" %}selected{% endif %}" href="{{ site.baseurl }}/about-utilities/">
+    About utilities
   </a>
-  <a class="menu-item {% if page.title == "Buttons" %}selected{% endif %}" href="{{ site.baseurl }}/buttons/">
-    Buttons
+  <a class="menu-item {% if page.title == "About components" %}selected{% endif %}" href="{{ site.baseurl }}/about-components/">
+    About components
   </a>
-  <a class="menu-item {% if page.title == "Forms" %}selected{% endif %}" href="{{ site.baseurl }}/forms/">
-    Forms
+</nav>
+
+<h4 class="menu-title">
+  Utilities
+</h4>
+<nav class="menu docs-menu">
+  <a class="menu-item {% if page.title == "border" %}selected{% endif %}" href="{{ site.baseurl }}/border/">
+    border
   </a>
-  <a class="menu-item {% if page.title == "Navigation" %}selected{% endif %}" href="{{ site.baseurl }}/nav/">
-    Navigation
+  <a class="menu-item {% if page.title == "border-radius" %}selected{% endif %}" href="{{ site.baseurl }}/border-radius/">
+    border-radius
   </a>
-  <a class="menu-item {% if page.title == "Alerts" %}selected{% endif %}" href="{{ site.baseurl }}/alerts/">
-    Alerts
+  <a class="menu-item {% if page.title == "color" %}selected{% endif %}" href="{{ site.baseurl }}/color/">
+    color
   </a>
-  <a class="menu-item {% if page.title == "Blankslate" %}selected{% endif %}" href="{{ site.baseurl }}/blankslate/">
-    Blankslate
+  <a class="menu-item {% if page.title == "font-family" %}selected{% endif %}" href="{{ site.baseurl }}/font-family/">
+    font-family
   </a>
-  <a class="menu-item {% if page.title == "Avatars" %}selected{% endif %}" href="{{ site.baseurl }}/avatars/">
-    Avatars
+  <a class="menu-item {% if page.title == "font-size" %}selected{% endif %}" href="{{ site.baseurl }}/font-size/">
+    font-size
   </a>
-  <a class="menu-item {% if page.title == "States" %}selected{% endif %}" href="{{ site.baseurl }}/states/">
-    States
+  <a class="menu-item {% if page.title == "font-weight" %}selected{% endif %}" href="{{ site.baseurl }}/font-weight/">
+    font-weight
   </a>
-  <a class="menu-item {% if page.title == "Tooltips" %}selected{% endif %}" href="{{ site.baseurl }}/tooltips/">
-    Tooltips
+  <a class="menu-item {% if page.title == "list-item" %}selected{% endif %}" href="{{ site.baseurl }}/list-item/">
+    list-item
   </a>
-  <a class="menu-item {% if page.title == "Utilities" %}selected{% endif %}" href="{{ site.baseurl }}/utilities/">
-    Utilities
+  <a class="menu-item {% if page.title == "spacing" %}selected{% endif %}" href="{{ site.baseurl }}/spacing/">
+    spacing
+  </a>
+  <a class="menu-item {% if page.title == "z-index" %}selected{% endif %}" href="{{ site.baseurl }}/z-index/">
+    z-index
   </a>
 </nav>
 
+<h4 class="menu-title">
+  Components
+</h4>
 <nav class="menu docs-menu">
-  <a class="menu-item {% if page.title == "Guidelines" %}selected{% endif %}" href="{{ site.baseurl }}/guidelines/">
-    Code guidelines
-  </a>
-  <a class="menu-item {% if page.title == "Colors" %}selected{% endif %}" href="{{ site.baseurl }}/colors/">
-    Colors
+  <a class="menu-item {% if page.title == "Button" %}selected{% endif %}" href="{{ site.baseurl }}/button/">
+    Button
   </a>
-  <a class="menu-item {% if page.title == "Markdown" %}selected{% endif %}" href="{{ site.baseurl }}/markdown/">
-    Markdown
+  <a class="menu-item {% if page.title == "Segmented Control" %}selected{% endif %}" href="{{ site.baseurl }}/segmented-control/">
+    Segmented Control
   </a>
 </nav>

css/primer.css

@@ -13,11 +13,14 @@
         {{ page.title }} · Origin
     </title>
 
-    <link rel="stylesheet" href="{{ site.baseurl }}/docs.css">
+    <link rel="stylesheet" href="{{ site.baseurl }}/assets/scss/origin.css">
 
     <!-- Favicons -->
-    <link rel="apple-touch-icon-precomposed" href="{{ site.baseurl }}/img/apple-touch-icon-precomposed.png">
     <link rel="icon" href="{{ site.baseurl }}/favicon.ico">
+
+    <!-- Typekit embed code for Effra and Swister -->
+    <script src="https://use.typekit.net/hnj7chl.js"></script>
+    <script>try{Typekit.load({ async: true });}catch(e){}</script>
   </head>
   <body>
 
@@ -41,9 +44,9 @@
       <div class="jumbotron">
         <div class="container">
           <h1>Origin</h1>
-          <p>The CSS toolkit and guidelines that power GitHub.</p>
+          <p>The CSS utilities, components, and guidelines that power FreeAgent.</p>
 
-          <a href="{{ site.baseurl }}/scaffolding/" class="btn btn-reverse">
+          <a href="{{ site.baseurl }}/principles/" class="btn btn-reverse">
             Read the docs
           </a>
         </div>
@@ -52,15 +55,15 @@ <h1>Origin</h1>
       <div class="container about-that">
         <div class="columns">
           <div class="one-third column">
-            <h2>Made at GitHub</h2>
+            <h2>Utilities and utility classes</h2>
             <p>Primer is the basecoat of GitHub, made by nerds just like you who share a passion for HTML and CSS.</p>
           </div>
           <div class="one-third column">
-            <h2>Open source</h2>
+            <h2>Components</h2>
             <p>Available for use under the MIT license and built with open source projects like SCSS, Jekyll, Grunt, and more.</p>
           </div>
           <div class="one-third column">
-            <h2>Build tools</h2>
+            <h2>Guidance</h2>
             <p>Includes a small Gruntfile for compiling our SCSS, Autoprefixer for vendor prefixes, and Parker for CSS stats.</p>
           </div>
         </div>
@@ -76,7 +79,7 @@ <h2>Build tools</h2>
       </footer>
     </div>
 
-    <script src="{{ site.baseurl }}/js/anchor.min.js"></script>
+    <script src="{{ site.baseurl }}/assets/js/anchor.min.js"></script>
     <script>
       var selector = '.markdown-body h2, .markdown-body h3';
       anchors.options = {

docs/_includes/sidenav.html

@@ -55,7 +55,7 @@ def render(context)
       end
 
       def example(output)
-        "<div class=\"docs-example clearfix\">#{output}</div>"
+        "<div class=\"DocsExample-render clearfix\">#{output}</div>"
       end
 
       def render_rouge(code)