ualibweb · Mar 5, 2015
diff --git a/‎.gitignore
+174 b/‎.gitignore
+174
diff --git a/‎Gruntfile.js
+38-22 b/‎Gruntfile.js
+38-22
diff --git a/‎bower.json
+5-1 b/‎bower.json
+5-1
diff --git a/‎index.html
+5-190 b/‎index.html
+5-190
diff --git a/‎package.json
+2-1 b/‎package.json
+2-1
diff --git a/‎src/index.html
+5-190 b/‎src/index.html
+5-190
diff --git a/‎src/less/_bootstrap.less
+11-10 b/‎src/less/_bootstrap.less
+11-10
diff --git a/‎src/less/_buttons.less
+6 b/‎src/less/_buttons.less
+6
diff --git a/‎src/less/_dropdowns.less
+121 b/‎src/less/_dropdowns.less
+121
diff --git a/‎src/less/_glyphicons.less
+20-3 b/‎src/less/_glyphicons.less
+20-3
diff --git a/‎src/less/_grid.less
+5 b/‎src/less/_grid.less
+5
diff --git a/‎src/less/_navbar.less
+270-6 b/‎src/less/_navbar.less
+270-6
diff --git a/‎src/less/_scaffolding.less
+44-48 b/‎src/less/_scaffolding.less
+44-48
diff --git a/‎src/less/_tables.less
+35-2 b/‎src/less/_tables.less
+35-2
diff --git a/‎src/less/_variables.less
+72-77 b/‎src/less/_variables.less
+72-77
diff --git a/‎src/less/components/meganav/meganav.hbs
-9 b/‎src/less/components/meganav/meganav.hbs
-9
diff --git a/‎src/less/fontawesome/_font-awesome.less
-17 b/‎src/less/fontawesome/_font-awesome.less
-17
diff --git a/‎src/less/fontawesome/_variables.less
-14 b/‎src/less/fontawesome/_variables.less
-14
diff --git a/‎src/less/layout/grid/grid-options.html
-73 b/‎src/less/layout/grid/grid-options.html
-73
diff --git a/‎src/less/layout/layout.less
-7 b/‎src/less/layout/layout.less
-7
diff --git a/‎src/less/navbar-ualib.less
-327 b/‎src/less/navbar-ualib.less
-327
diff --git a/‎src/less/style/buttons/button-tags.hbs
-4 b/‎src/less/style/buttons/button-tags.hbs
-4
diff --git a/‎src/less/style/buttons/button-types.hbs
-20 b/‎src/less/style/buttons/button-types.hbs
-20
diff --git a/‎src/less/style/color/primary.html
-11 b/‎src/less/style/color/primary.html
-11
diff --git a/‎src/less/style/links/file-external-links.html
-9 b/‎src/less/style/links/file-external-links.html
-9
diff --git a/‎src/less/style/style.less
-7 b/‎src/less/style/style.less
-7
diff --git a/‎src/less/style/tables/tables.html
-61 b/‎src/less/style/tables/tables.html
-61
diff --git a/‎src/less/style/typography/body-font.html
-8 b/‎src/less/style/typography/body-font.html
-8
diff --git a/‎src/less/style/typography/headings.html
-28 b/‎src/less/style/typography/headings.html
-28
diff --git a/‎src/less/styleguide.md
-99 b/‎src/less/styleguide.md
-99
diff --git a/‎src/template/index.html
+82-27 b/‎src/template/index.html
+82-27
diff --git a/‎src/template/public/ualib-styleguide.less
+44-39 b/‎src/template/public/ualib-styleguide.less
+44-39
diff --git a/‎index.html
+5-190 b/‎index.html
+5-190
diff --git a/‎package.json
+2-1 b/‎package.json
+2-1
diff --git a/‎src/index.html
+5-190 b/‎src/index.html
+5-190
diff --git a/‎src/less/_bootstrap.less
+11-10 b/‎src/less/_bootstrap.less
+11-10
diff --git a/‎src/less/_buttons.less
+6 b/‎src/less/_buttons.less
+6
diff --git a/‎src/less/_dropdowns.less
+121 b/‎src/less/_dropdowns.less
+121
diff --git a/‎src/less/_glyphicons.less
+20-3 b/‎src/less/_glyphicons.less
+20-3
diff --git a/‎src/less/_grid.less
+5 b/‎src/less/_grid.less
+5
diff --git a/‎src/less/_navbar.less
+270-6 b/‎src/less/_navbar.less
+270-6
diff --git a/‎src/less/_scaffolding.less
+44-48 b/‎src/less/_scaffolding.less
+44-48
diff --git a/‎src/less/_tables.less
+35-2 b/‎src/less/_tables.less
+35-2
diff --git a/‎src/less/_variables.less
+72-77 b/‎src/less/_variables.less
+72-77
diff --git a/‎src/less/components/meganav/meganav.hbs
-9 b/‎src/less/components/meganav/meganav.hbs
-9
diff --git a/‎src/less/fontawesome/_font-awesome.less
-17 b/‎src/less/fontawesome/_font-awesome.less
-17
diff --git a/‎src/less/fontawesome/_variables.less
-14 b/‎src/less/fontawesome/_variables.less
-14
diff --git a/‎src/less/layout/grid/grid-options.html
-73 b/‎src/less/layout/grid/grid-options.html
-73
diff --git a/‎src/less/layout/layout.less
-7 b/‎src/less/layout/layout.less
-7
diff --git a/‎src/less/navbar-ualib.less
-327 b/‎src/less/navbar-ualib.less
-327
diff --git a/‎src/less/style/buttons/button-tags.hbs
-4 b/‎src/less/style/buttons/button-tags.hbs
-4
diff --git a/‎src/less/style/buttons/button-types.hbs
-20 b/‎src/less/style/buttons/button-types.hbs
-20
diff --git a/‎src/less/style/color/primary.html
-11 b/‎src/less/style/color/primary.html
-11
diff --git a/‎src/less/style/links/file-external-links.html
-9 b/‎src/less/style/links/file-external-links.html
-9
diff --git a/‎src/less/style/style.less
-7 b/‎src/less/style/style.less
-7
diff --git a/‎src/less/style/tables/tables.html
-61 b/‎src/less/style/tables/tables.html
-61
diff --git a/‎src/less/style/typography/body-font.html
-8 b/‎src/less/style/typography/body-font.html
-8
diff --git a/‎src/less/style/typography/headings.html
-28 b/‎src/less/style/typography/headings.html
-28
diff --git a/‎src/less/styleguide.md
-99 b/‎src/less/styleguide.md
-99
diff --git a/‎src/template/index.html
+82-27 b/‎src/template/index.html
+82-27
diff --git a/‎src/template/public/ualib-styleguide.less
+44-39 b/‎src/template/public/ualib-styleguide.less
+44-39
diff --git a/‎styleguide/index.html
+252-108 b/‎styleguide/index.html
+252-108
diff --git a/‎styleguide/public/ualib-styleguide.css
+40-68 b/‎styleguide/public/ualib-styleguide.css
+40-68
diff --git a/‎styleguide/public/ualib-styleguide.less
+44-39 b/‎styleguide/public/ualib-styleguide.less
+44-39
diff --git a/‎styleguide/section-components.html
+602 b/‎styleguide/section-components.html
+602
diff --git a/‎styleguide/section-layout.html
+176-26 b/‎styleguide/section-layout.html
+176-26
diff --git a/‎styleguide/section-style.html
+321-54 b/‎styleguide/section-style.html
+321-54
@@ -0,0 +1,174 @@
+# Generic Git Ignore files
+.htaccess
+roots-child-settings.php
+
+# Deploy scripts
+deploy*.php
+
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm
+
+*.iml
+
+## Directory-based project format:
+.idea/
+# if you remove the above rule, at least ignore the following:
+
+# User-specific stuff:
+# .idea/workspace.xml
+# .idea/tasks.xml
+# .idea/dictionaries
+
+# Sensitive or high-churn files:
+# .idea/dataSources.ids
+# .idea/dataSources.xml
+# .idea/sqlDataSources.xml
+# .idea/dynamic.xml
+# .idea/uiDesigner.xml
+
+# Gradle:
+# .idea/gradle.xml
+# .idea/libraries
+
+# Mongo Explorer plugin:
+# .idea/mongoSettings.xml
+
+## File-based project format:
+*.ipr
+*.iws
+
+## Plugin-specific files:
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+
+# DW Dreamweaver added files
+_notes
+dwsync.xml
+
+# Eclipse IDE files
+*.pydevproject
+.metadata
+.gradle
+bin/
+tmp/
+*.tmp
+*.bak
+*.swp
+*~.nib
+local.properties
+.settings/
+.loadpath
+
+# Eclipse Core
+.project
+
+# External tool builders
+.externalToolBuilders/
+
+# Locally stored "Eclipse launch configurations"
+*.launch
+
+# CDT-specific
+.cproject
+
+# JDT-specific (Eclipse Java Development Tools)
+.classpath
+
+# PDT-specific
+.buildpath
+
+# sbteclipse plugin
+.target
+
+# TeXlipse plugin
+.texlipse
+
+## NodeJS ignored files
+
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
+node_modules
+
+## Bower Components directory
+bower_components
+
+# Project-level settings
+/.tgitconfig
+
+## OS X ignored files
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear on external disk
+.Spotlight-V100
+.Trashes
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+## Windows ignored files
+# Windows image file caches
+Thumbs.db
+ehthumbs.db
+
+# Folder config file
+Desktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
@@ -11,18 +11,20 @@ module.exports = function (grunt) {
             ' Licensed <%= props.license %> */\n',
         // Task configuration
         concat: {
-            index: {
-                src: 'src/index.html',
-                dest: 'index.html',
-                options: {
-                    process: true
-                }
-            },
             vendor_css: {
                 src: [
                     'bower_components/Yamm3/yamm/yamm.css'
                 ],
                 dest: 'assets/css/vendor.css'
+            },
+            vendor_js: {
+                src: [
+                    'bower_components/angular/angular.min.js',
+                    'bower_components/angular-animate/angular-animate.min.js',
+                    'bower_components/angular-strap/dist/angular-strap.min.js',
+                    'bower_components/angular-strap/dist/angular-strap.tpl.min.js'
+                ],
+                dest: 'assets/js/vendor.js'
             }
         },
         cssmin: {
@@ -36,12 +38,32 @@ module.exports = function (grunt) {
                 }]
             }
         },
+        clean: {
+            src: ['src/less/**']
+        },
         copy: {
+            src: {
+                files: [{
+                    expand: true,
+                    cwd: 'bower_components/roots-ualib/assets/css/less',
+                    src: ['**'],
+                    dest: 'src/less/',
+                    filter: 'isFile'
+                }]
+            },
             dist:{
                 files: [{
-                    src: ['src/assets/img/'],
-                    dest: 'assets/img/',
+                    expand: true,
+                    cwd: 'src/assets',
+                    src: ['**'],
+                    dest: 'assets/',
                     filter: 'isFile'
+                },{
+                    src: ['src/index.html'],
+                    dest: 'index.html',
+                    options: {
+                        process: true
+                    }
                 }]
             }
         },
@@ -101,20 +123,12 @@ module.exports = function (grunt) {
                 tasks: ['jshint:lib_test', 'qunit']
             }
         },
-        github:{
-            ualibweb:{
-                options: {
-                    task: {
-                        type: 'file'
-                    }
-                },
-                src: '/repos/ualibweb/ualib-styles/contents/src/styles',
-                dest: 'src/styles.json'
-            }
-        },
         exec: {
             kss: {
-                command: 'kss-node src/less styleguide --template src/template --helpers src/template/helpers --custom codetemplate --custom hidemarkup'
+                command: 'kss-node src/less styleguide --template src/template --helpers src/template/helpers --custom codetemplate --custom hidemarkup --custom icon --custom menublurb'
+            },
+            prep: {
+                command: 'bower update roots-ualib'
             }
         }
     });
@@ -125,8 +139,10 @@ module.exports = function (grunt) {
     grunt.loadNpmTasks('grunt-contrib-cssmin');
     grunt.loadNpmTasks('grunt-contrib-concat');
     grunt.loadNpmTasks('grunt-contrib-copy');
+    grunt.loadNpmTasks('grunt-contrib-clean');
 
     // Default task
-    grunt.registerTask('default', ['exec', 'less', 'concat', 'cssmin']);
+    grunt.registerTask('default', ['prep', 'exec:kss', 'less', 'concat', 'cssmin', 'copy:dist']);
+    grunt.registerTask('prep', ['exec:prep', 'clean:src', 'copy:src']);
 };
 
@@ -29,6 +29,10 @@
   "dependencies": {
     "bootstrap": "~3.3.2",
     "fontawesome": "~4.3.0",
-    "Yamm3": "https://github.com/geedmo/yamm3/archive/master.zip"
+    "Yamm3": "https://github.com/geedmo/yamm3/archive/master.zip",
+    "angular-scroll": "~0.6.5",
+    "angular-strap": "~2.2.0",
+    "angular-animate": "~1.3.14",
+    "roots-ualib": "https://github.com/ualibweb/roots-ualib.git"
   }
 }
@@ -7,197 +7,12 @@
 <head>
     <meta charset="utf-8">
     <title>UA Libraries Styleguide</title>
-
-    <meta name="description" content="">
-    <meta name="generator" content="kss-node">
-    <meta name="viewport" content="width=device-width">
-
-    <link rel="stylesheet" href="http://yandex.st/highlightjs/8.0/styles/github.min.css">
-    <link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500|Oxygen:400,700,300|Open+Sans|EB+Garamond|Lato:300,400' rel='stylesheet' type='text/css'>
-    <link rel="stylesheet" href="https://rawgit.com/ualibweb/roots-ualib/master/assets/css/main.min.css">
-    <link rel="stylesheet" href="styleguide/public/ualib-styleguide.css">
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
-    <link href="assets/css/vendor.css" rel="stylesheet">
-
+    <script>
+        // temporarily route to kss-node docs until new doc system implemented
+        window.location.replace("styleguide");
+    </script>
 </head>
-<body data-spy="scroll" data-target="#styleguide-nav" data-offset="90">
-<header id="header-nav">
-    <nav class="navbar navbar-static-top  navbar-ualib yamm" role="navigation">
-        <div class="container">
-            <div class="navbar-header">
-                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-                    <span class="sr-only">Toggle navigation</span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                </button>
-                <a class="navbar-brand" href="index.html" >UA Lib Web Docs</a>
-            </div>
-
-            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-                <ul class="nav navbar-nav">
-                    <li class="dropdown yamm-fw open">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="#">Styleguide</a>
-                        <ul class="dropdown-menu">
-                            <li>
-                                <div class="yamm-content ualib-mm">
-                                    <div class="row">
-                                        <ul class="list-unstyled">
-                                            <li class="col-xs-3 menu-col menu-practice-presentation-rooms">
-                                                <a href="styleguide/section-style.html">
-                                                    <h4>Style</h4>
-                                                </a>
-                                            </li>
-                                            <li class="col-xs-3 menu-col menu-practice-presentation-rooms">
-                                                <a href="styleguide/section-layout.html">
-                                                    <h4>Layout</h4>
-                                                </a>
-                                            </li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </li>
-                        </ul>
-                    </li>
-        </ul>
-        <ul class="nav navbar-nav navbar-right">
-            <li>
-                <a href="https://github.com/ualibweb/ualibweb.github.io" target="_new"><span class="fa fa-github"></span> Github</a>
-            </li>
-            <li class="dropdown">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Quick Links</a>
-                <ul class="dropdown-menu" role="menu">
-                    <li><a href="http://getbootstrap.com/"><span class="fa fa-fw fa-border">B</span> Bootstrap Docs</a></li>
-                    <li><a href="http://fortawesome.github.io/Font-Awesome/"><span class="fa fa-fw fa-flag"></span> Font Awesome</a></li>
-                    <li><a href="https://www.google.com/fonts"><span class="fa fa-fw fa-paint-brush"></span> Google Fonts</a></li>
-                    <li><a href="http://webaim.org/resources/contrastchecker/"><span class="fa fa-fw fa-adjust"></span> WCAG AA Contrast Checker</a></li>
-                    <li><a href="https://color.adobe.com"><span class="fa fa-fw fa-eyedropper"></span> Adobe Color CC</a></li>
-                </ul>
-            </li>
-        </ul>
-        </div>
-        </div>
-    </nav>
-</header>
-
-<div class="wrap">
-    <div class="content">
-        <main class="main" role="main">
-            <div class="jumbotron jumbotron-head">
-                <div class="container">
-                    <h1>University Libraries Web Docs</h1>
-                    <p>Styleguide, Pattern Library, and resources.</p>
-                </div>
-            </div>
-            <div class="container">
-                <div class="col-xs-12"> <h1 id="ua-libraries-web-docs">UA Libraries Web Docs</h1>
-                    <p>University Libraries represents the University of Alabama on an academic and institutional level, not just as a library, but also as a repository, archive, computer lab, and location for students to engage both academically and socially, all in support of the university mission. Consequently, the University Libraries Web Site Style Guide will reflect this usage and will help the Libraries provide students with access to information and resources. </p>
-                    <p>Web Services’ top priority is to provide users with easy-to-use, accessible, and “findable,” web content. To achieve this, the following style guide presents the Libraries with rules and best practices, regarding site content, writing methods, text usage, and additional website design elements. </p>
-                    <h2 id="content-strategy">Content Strategy</h2>
-                    <blockquote>
-                        <p>In short, your content has to be awesome. It has to be truly helpful. It cannot be about you.
-                            It has to be about your customers’ wants and needs.</p>
-                        <p>-- <cite>Forbes Magazine</cite></p>
-                    </blockquote>
-                    <p>The User Interface has a strict navigation structure, meaning that new pages or alterations to existing pages will need to fit within this new organizational structure. Pay close attention to link locations, content placement, top-level navigation, and sub-navigation areas.  </p>
-                    <h2 id="what-can-i-put-on-the-website-">What can I put on the website?</h2>
-                    <p>Anything that is relevant to your department’s services, public information about your department, or information about specialized areas or content types. Website content must not be suitable for a LibGuide or a Blog. We can create LibGuides to promote library resources or services that are specific to an academic research pursuit. Blogs also detail library resources and services, but done so frequently and require multiple postings. </p>
-                    <h2 id="what-areas-will-i-need-to-talk-to-web-services-about-editing-">What areas will I need to talk to web services about editing?</h2>
-                    <p>We identified 23 content areas where the design is extensively intermixed with the content; changes to these areas will need web services intervention to ensure the integrity of the design. Web Services have based the design of the site on usability and analytics data, and it is important that the content creator not alter them accidentally or arbitrarily. </p>
-                    <p>In no way does Web Services claim responsibility or ownership of the content; content creators retain full ownership and responsibility of their page content. Web Services simply assists in the design, the look, and overall feel of how the page presents the content.</p>
-                    <ul>
-                        <li>Databases (Application)</li>
-                        <li>Maps, Locations, Hours (Application)</li>
-                        <li><p>Directory (Application)</p>
-                        </li>
-                        <li><p>Using the Libraries</p>
-                        </li>
-                        <li>Research Tools </li>
-                        <li>Library Help</li>
-                        <li>News, Events, and Exhibitions</li>
-                        <li>About</li>
-                        <li><p>Libraries &amp; Collections</p>
-                        </li>
-                        <li><p>E-Resources (E-Books, E-Journals)</p>
-                        </li>
-                        <li>Reserves</li>
-                        <li>Interlibrary Borrowing</li>
-                        <li>Sanford Media Center</li>
-                        <li>Computers &amp; Software</li>
-                        <li>How Do I… (Ask A Librarian)</li>
-                        <li>Alabama Digital Humanities Center</li>
-                        <li>Print, Copy, Scan </li>
-                        <li>Circulation Policies (Borrow, Renew, Request)</li>
-                        <li><p>Equipment</p>
-                        </li>
-                        <li><p>Floor Maps</p>
-                        </li>
-                        <li>Classes, Workshops, Tours</li>
-                        <li>Practice Presentation Rooms</li>
-                        <li>Social Media Page</li>
-                    </ul>
-                    <h2 id="what-are-the-rules-for-adding-additional-content-">What are the rules for adding additional content?</h2>
-                    <p>Follow the template, use our styles as per the document, or simply let the elements (</p><p>, </p><div>, etc.) style automatically as we have intended.<p></p>
-                        <h2 id="how-do-i-use-our-styles-and-fonts-how-will-the-elements-appear-and-what-does-each-style-look-like-">How do I use our styles and fonts? How will the elements appear, and what does each style look like?</h2>
-                        <p>Please see the Style Elements section of this document</p>
-                        <h2 id="writing-for-the-web">Writing for the Web</h2>
-                        <p>The University Libraries website is not the final destination for users, but rather a tool to help connect users to the relevant resources and services available at the libraries.  Additionally, research has shown that users interact with website content in a very specific way.Important guidelines for writing for the web: </p>
-                        <ul>
-                            <li>Be succinct : write no more than 50% of the text you would have used in a hardcopy publication</li>
-                            <li>Write for scannability : don't require users to read long continuous blocks of text
-                                (<a href="http://www.nngroup.com/articles/be-succinct-writing-for-the-web/">http://www.nngroup.com/articles/be-succinct-writing-for-the-web/</a>)</li>
-                        </ul>
-                        <h3 id="additional-resources-">Additional Resources:</h3>
-                        <ul>
-                            <li><p>Writing for the Web
-                                <a href="http://www.nngroup.com/topic/writing-web/">http://www.nngroup.com/topic/writing-web/</a></p>
-                            </li>
-                            <li><p>Kill the Welcome Mat
-                                <a href="http://www.nngroup.com/articles/blah-blah-text-keep-cut-or-kill/">http://www.nngroup.com/articles/blah-blah-text-keep-cut-or-kill/</a></p>
-                            </li>
-                            <li><p>10 Tips for Good Web Writing
-                                <a href="http://webdesign.about.com/od/writing/a/aa031405.htm">http://webdesign.about.com/od/writing/a/aa031405.htm</a></p>
-                            </li>
-                        </ul>
-                        <h3 id="content">Content</h3>
-                        <ul>
-                            <li>Keep content relevant to topic and goal; your writing should have a goal.</li>
-                            <li>When writing, think of an inverted pyramid - get to the point in the first paragraph, then expand upon it. </li>
-                            <li>One idea per paragraph.</li>
-                            <li>Web pages need to be concise and to-the-point; short, meaty paragraphs are better than long rambling ones. </li>
-                            <li>Use action words.</li>
-                            <li>Tell your readers what to do and avoid the passive voice. Keep the flow of your pages moving.</li>
-                        </ul>
-                        <p><img src="assets/img/pages-flow.jpg" alt="Alt text">
-                            -- Lynda Felder, Peachpit.com</p>
-                        <h3 id="format">Format</h3>
-                        <ul>
-                            <li>Try to use lists instead of paragraphs - lists are easier to scan than paragraphs.  </li>
-                            <li>Try to limit list items to 7 words: studies have shown that people can only reliably remember 7-10 things at a time. More than 7 is occasionally acceptable, depending on context. </li>
-                            <li>Sentences should be as concise as you can make them. Use only the words you need to convey essential information.  </li>
-                            <li>Include internal sub-headings: sub-headings make the text more scannable. Your readers will move to the section of the document that is most useful for them, and internal cues make it easier for them to achieve this.  </li>
-                            <li>Make your links part of the copy: links are another way Web readers scan pages. They stand out from normal text, and provide additional cues as to what the page is about.</li>
-                        </ul>
-                        <h3 id="always">Always</h3>
-                        <ul>
-                            <li>Proofread your work - typos and spelling errors will send people away from your pages. Make sure you proofread everything you post to the Web.</li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </main>
-    </div>
-</div>
-
-<footer>
-
-</footer>
-
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
-<script src="http://cdnjs.cloudflare.com/ajax/libs/holder/2.4.0/holder.js"></script>
-<script>hljs.initHighlightingOnLoad();</script>
+<body>
 
 </body>
 </html>
@@ -28,6 +28,7 @@
     "grunt-contrib-less": "~1.0.0",
     "grunt-contrib-cssmin": "~0.12.2",
     "grunt-contrib-concat": "~0.5.1",
-    "grunt-contrib-copy": "~0.8.0"
+    "grunt-contrib-copy": "~0.8.0",
+    "grunt-contrib-clean": "~0.6.0"
   }
 }
@@ -7,197 +7,12 @@
 <head>
     <meta charset="utf-8">
     <title>UA Libraries Styleguide</title>
-
-    <meta name="description" content="">
-    <meta name="generator" content="kss-node">
-    <meta name="viewport" content="width=device-width">
-
-    <link rel="stylesheet" href="http://yandex.st/highlightjs/8.0/styles/github.min.css">
-    <link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500|Oxygen:400,700,300|Open+Sans|EB+Garamond|Lato:300,400' rel='stylesheet' type='text/css'>
-    <link rel="stylesheet" href="https://rawgit.com/ualibweb/roots-ualib/master/assets/css/main.min.css">
-    <link rel="stylesheet" href="styleguide/public/ualib-styleguide.css">
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
-    <link href="assets/css/vendor.css" rel="stylesheet">
-
+    <script>
+        // temporarily route to kss-node docs until new doc system implemented
+        window.location.replace("styleguide");
+    </script>
 </head>
-<body data-spy="scroll" data-target="#styleguide-nav" data-offset="90">
-<header id="header-nav">
-    <nav class="navbar navbar-static-top  navbar-ualib yamm" role="navigation">
-        <div class="container">
-            <div class="navbar-header">
-                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-                    <span class="sr-only">Toggle navigation</span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                </button>
-                <a class="navbar-brand" href="index.html" >UA Lib Web Docs</a>
-            </div>
-
-            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-                <ul class="nav navbar-nav">
-                    <li class="dropdown yamm-fw open">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="#">Styleguide</a>
-                        <ul class="dropdown-menu">
-                            <li>
-                                <div class="yamm-content ualib-mm">
-                                    <div class="row">
-                                        <ul class="list-unstyled">
-                                            <li class="col-xs-3 menu-col menu-practice-presentation-rooms">
-                                                <a href="styleguide/section-style.html">
-                                                    <h4>Style</h4>
-                                                </a>
-                                            </li>
-                                            <li class="col-xs-3 menu-col menu-practice-presentation-rooms">
-                                                <a href="styleguide/section-layout.html">
-                                                    <h4>Layout</h4>
-                                                </a>
-                                            </li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </li>
-                        </ul>
-                    </li>
-        </ul>
-        <ul class="nav navbar-nav navbar-right">
-            <li>
-                <a href="https://github.com/ualibweb/ualibweb.github.io" target="_new"><span class="fa fa-github"></span> Github</a>
-            </li>
-            <li class="dropdown">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Quick Links</a>
-                <ul class="dropdown-menu" role="menu">
-                    <li><a href="http://getbootstrap.com/"><span class="fa fa-fw fa-border">B</span> Bootstrap Docs</a></li>
-                    <li><a href="http://fortawesome.github.io/Font-Awesome/"><span class="fa fa-fw fa-flag"></span> Font Awesome</a></li>
-                    <li><a href="https://www.google.com/fonts"><span class="fa fa-fw fa-paint-brush"></span> Google Fonts</a></li>
-                    <li><a href="http://webaim.org/resources/contrastchecker/"><span class="fa fa-fw fa-adjust"></span> WCAG AA Contrast Checker</a></li>
-                    <li><a href="https://color.adobe.com"><span class="fa fa-fw fa-eyedropper"></span> Adobe Color CC</a></li>
-                </ul>
-            </li>
-        </ul>
-        </div>
-        </div>
-    </nav>
-</header>
-
-<div class="wrap">
-    <div class="content">
-        <main class="main" role="main">
-            <div class="jumbotron jumbotron-head">
-                <div class="container">
-                    <h1>University Libraries Web Docs</h1>
-                    <p>Styleguide, Pattern Library, and resources.</p>
-                </div>
-            </div>
-            <div class="container">
-                <div class="col-xs-12"> <h1 id="ua-libraries-web-docs">UA Libraries Web Docs</h1>
-                    <p>University Libraries represents the University of Alabama on an academic and institutional level, not just as a library, but also as a repository, archive, computer lab, and location for students to engage both academically and socially, all in support of the university mission. Consequently, the University Libraries Web Site Style Guide will reflect this usage and will help the Libraries provide students with access to information and resources. </p>
-                    <p>Web Services’ top priority is to provide users with easy-to-use, accessible, and “findable,” web content. To achieve this, the following style guide presents the Libraries with rules and best practices, regarding site content, writing methods, text usage, and additional website design elements. </p>
-                    <h2 id="content-strategy">Content Strategy</h2>
-                    <blockquote>
-                        <p>In short, your content has to be awesome. It has to be truly helpful. It cannot be about you.
-                            It has to be about your customers’ wants and needs.</p>
-                        <p>-- <cite>Forbes Magazine</cite></p>
-                    </blockquote>
-                    <p>The User Interface has a strict navigation structure, meaning that new pages or alterations to existing pages will need to fit within this new organizational structure. Pay close attention to link locations, content placement, top-level navigation, and sub-navigation areas.  </p>
-                    <h2 id="what-can-i-put-on-the-website-">What can I put on the website?</h2>
-                    <p>Anything that is relevant to your department’s services, public information about your department, or information about specialized areas or content types. Website content must not be suitable for a LibGuide or a Blog. We can create LibGuides to promote library resources or services that are specific to an academic research pursuit. Blogs also detail library resources and services, but done so frequently and require multiple postings. </p>
-                    <h2 id="what-areas-will-i-need-to-talk-to-web-services-about-editing-">What areas will I need to talk to web services about editing?</h2>
-                    <p>We identified 23 content areas where the design is extensively intermixed with the content; changes to these areas will need web services intervention to ensure the integrity of the design. Web Services have based the design of the site on usability and analytics data, and it is important that the content creator not alter them accidentally or arbitrarily. </p>
-                    <p>In no way does Web Services claim responsibility or ownership of the content; content creators retain full ownership and responsibility of their page content. Web Services simply assists in the design, the look, and overall feel of how the page presents the content.</p>
-                    <ul>
-                        <li>Databases (Application)</li>
-                        <li>Maps, Locations, Hours (Application)</li>
-                        <li><p>Directory (Application)</p>
-                        </li>
-                        <li><p>Using the Libraries</p>
-                        </li>
-                        <li>Research Tools </li>
-                        <li>Library Help</li>
-                        <li>News, Events, and Exhibitions</li>
-                        <li>About</li>
-                        <li><p>Libraries &amp; Collections</p>
-                        </li>
-                        <li><p>E-Resources (E-Books, E-Journals)</p>
-                        </li>
-                        <li>Reserves</li>
-                        <li>Interlibrary Borrowing</li>
-                        <li>Sanford Media Center</li>
-                        <li>Computers &amp; Software</li>
-                        <li>How Do I… (Ask A Librarian)</li>
-                        <li>Alabama Digital Humanities Center</li>
-                        <li>Print, Copy, Scan </li>
-                        <li>Circulation Policies (Borrow, Renew, Request)</li>
-                        <li><p>Equipment</p>
-                        </li>
-                        <li><p>Floor Maps</p>
-                        </li>
-                        <li>Classes, Workshops, Tours</li>
-                        <li>Practice Presentation Rooms</li>
-                        <li>Social Media Page</li>
-                    </ul>
-                    <h2 id="what-are-the-rules-for-adding-additional-content-">What are the rules for adding additional content?</h2>
-                    <p>Follow the template, use our styles as per the document, or simply let the elements (</p><p>, </p><div>, etc.) style automatically as we have intended.<p></p>
-                        <h2 id="how-do-i-use-our-styles-and-fonts-how-will-the-elements-appear-and-what-does-each-style-look-like-">How do I use our styles and fonts? How will the elements appear, and what does each style look like?</h2>
-                        <p>Please see the Style Elements section of this document</p>
-                        <h2 id="writing-for-the-web">Writing for the Web</h2>
-                        <p>The University Libraries website is not the final destination for users, but rather a tool to help connect users to the relevant resources and services available at the libraries.  Additionally, research has shown that users interact with website content in a very specific way.Important guidelines for writing for the web: </p>
-                        <ul>
-                            <li>Be succinct : write no more than 50% of the text you would have used in a hardcopy publication</li>
-                            <li>Write for scannability : don't require users to read long continuous blocks of text
-                                (<a href="http://www.nngroup.com/articles/be-succinct-writing-for-the-web/">http://www.nngroup.com/articles/be-succinct-writing-for-the-web/</a>)</li>
-                        </ul>
-                        <h3 id="additional-resources-">Additional Resources:</h3>
-                        <ul>
-                            <li><p>Writing for the Web
-                                <a href="http://www.nngroup.com/topic/writing-web/">http://www.nngroup.com/topic/writing-web/</a></p>
-                            </li>
-                            <li><p>Kill the Welcome Mat
-                                <a href="http://www.nngroup.com/articles/blah-blah-text-keep-cut-or-kill/">http://www.nngroup.com/articles/blah-blah-text-keep-cut-or-kill/</a></p>
-                            </li>
-                            <li><p>10 Tips for Good Web Writing
-                                <a href="http://webdesign.about.com/od/writing/a/aa031405.htm">http://webdesign.about.com/od/writing/a/aa031405.htm</a></p>
-                            </li>
-                        </ul>
-                        <h3 id="content">Content</h3>
-                        <ul>
-                            <li>Keep content relevant to topic and goal; your writing should have a goal.</li>
-                            <li>When writing, think of an inverted pyramid - get to the point in the first paragraph, then expand upon it. </li>
-                            <li>One idea per paragraph.</li>
-                            <li>Web pages need to be concise and to-the-point; short, meaty paragraphs are better than long rambling ones. </li>
-                            <li>Use action words.</li>
-                            <li>Tell your readers what to do and avoid the passive voice. Keep the flow of your pages moving.</li>
-                        </ul>
-                        <p><img src="assets/img/pages-flow.jpg" alt="Alt text">
-                            -- Lynda Felder, Peachpit.com</p>
-                        <h3 id="format">Format</h3>
-                        <ul>
-                            <li>Try to use lists instead of paragraphs - lists are easier to scan than paragraphs.  </li>
-                            <li>Try to limit list items to 7 words: studies have shown that people can only reliably remember 7-10 things at a time. More than 7 is occasionally acceptable, depending on context. </li>
-                            <li>Sentences should be as concise as you can make them. Use only the words you need to convey essential information.  </li>
-                            <li>Include internal sub-headings: sub-headings make the text more scannable. Your readers will move to the section of the document that is most useful for them, and internal cues make it easier for them to achieve this.  </li>
-                            <li>Make your links part of the copy: links are another way Web readers scan pages. They stand out from normal text, and provide additional cues as to what the page is about.</li>
-                        </ul>
-                        <h3 id="always">Always</h3>
-                        <ul>
-                            <li>Proofread your work - typos and spelling errors will send people away from your pages. Make sure you proofread everything you post to the Web.</li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </main>
-    </div>
-</div>
-
-<footer>
-
-</footer>
-
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
-<script src="http://cdnjs.cloudflare.com/ajax/libs/holder/2.4.0/holder.js"></script>
-<script>hljs.initHighlightingOnLoad();</script>
+<body>
 
 </body>
 </html>
@@ -7,6 +7,9 @@
 // Variables
 @import "_variables";
 
+// Mixins: Custom
+@import "mixins/link-icon.less";
+
 // Mixins: Utilities
 @import "../../../bower_components/bootstrap/less/mixins/hide-text";
 @import "../../../bower_components/bootstrap/less/mixins/opacity";
@@ -23,7 +26,7 @@
 
 // Mixins: Components
 @import "../../../bower_components/bootstrap/less/mixins/alerts";
-@import "../../../bower_components/bootstrap/less/mixins/buttons";
+@import "_buttons";
 @import "../../../bower_components/bootstrap/less/mixins/panels";
 @import "../../../bower_components/bootstrap/less/mixins/pagination";
 @import "../../../bower_components/bootstrap/less/mixins/list-group";
@@ -47,24 +50,24 @@
 // Reset
 @import "../../../bower_components/bootstrap/less/normalize";
 @import "../../../bower_components/bootstrap/less/print";
-@import "../../../bower_components/bootstrap/less/glyphicons";
+@import "_glyphicons";
 
 // Core CSS
-@import "../../../bower_components/bootstrap/less/scaffolding";
+@import "_scaffolding";
 @import "../../../bower_components/bootstrap/less/type";
 @import "../../../bower_components/bootstrap/less/code";
-@import "../../../bower_components/bootstrap/less/grid";
-@import "../../../bower_components/bootstrap/less/tables";
+@import "_grid";
+@import "_tables";
 @import "../../../bower_components/bootstrap/less/forms";
 @import "../../../bower_components/bootstrap/less/buttons";
 
 // Components
 @import "../../../bower_components/bootstrap/less/component-animations";
-@import "../../../bower_components/bootstrap/less/dropdowns";
+@import "_dropdowns";
 @import "../../../bower_components/bootstrap/less/button-groups";
 @import "../../../bower_components/bootstrap/less/input-groups";
 @import "../../../bower_components/bootstrap/less/navs";
-@import "../../../bower_components/bootstrap/less/navbar";
+@import "_navbar";
 @import "../../../bower_components/bootstrap/less/breadcrumbs";
 @import "../../../bower_components/bootstrap/less/pagination";
 @import "../../../bower_components/bootstrap/less/pager";
@@ -89,6 +92,4 @@
 
 // Utility classes
 @import "../../../bower_components/bootstrap/less/utilities";
-@import "../../../bower_components/bootstrap/less/responsive-utilities";
-
-@import "navbar-ualib";
+@import "../../../bower_components/bootstrap/less/responsive-utilities";
@@ -3,12 +3,18 @@
 // --------------------------------------------------
 
 // Import default Bootstrap buttons. Overrides, custom variables, and docs below.
+@import "../../../bower_components/bootstrap/less/mixins/buttons";
 @import "../../../bower_components/bootstrap/less/buttons";
 
 // Buttons
 //
 // <mark>TODO:</mark> Write out description and link to other mentions of button use in docs
 //
+// Icon: fa-hand-o-up
+//
+// MenuBlurb:
+// Types of buttons available to use on the website
+//
 // Styleguide style.buttons
 
 // Button Tags
 
@@ -0,0 +1,121 @@
+//
+// Dropdowns
+// --------------------------------------------------
+
+// Import default Bootstrap dropdowns. Overrides, custom variables, and docs below.
+@import "../../../bower_components/bootstrap/less/dropdowns";
+
+// Dropdowns
+//
+// <mark>TODO:</mark> dropdown description, etc.
+//
+// Markup:
+//  <div class="dropdown">
+//  <button class="btn btn-default dropdown-toggle"  type="button">
+//    Dropdown
+//  </button>
+//  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
+//    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
+//    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
+//    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
+//    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
+//  </ul>
+//  </div>
+//
+// Icon: fa-caret-square-o-down
+//
+// MenuBlurb:
+// Dropdowns for navigation and forms
+//
+// Styleguide components.dropdowns
+
+.dropdown{
+  .dropdown-toggle {
+    position: relative;
+    padding-right: 30px;
+
+    &::before,
+    &::after {
+      width: 9px;
+      -webkit-transform-origin: 50% 50%;
+      -moz-transform-origin: 50% 50%;
+      -ms-transform-origin: 50% 50%;
+      -o-transform-origin: 50% 50%;
+      transform-origin: 50% 50%;
+      background: #777;
+      -webkit-backface-visibility: hidden;
+      backface-visibility: hidden;
+      -webkit-transition: width 0.3s, -webkit-transform 0.3s;
+      -moz-transition: width 0.3s, -moz-transform 0.3s;
+      transition: width 0.3s, transform 0.3s;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      content: '';
+      position: absolute;
+      top: 50%;
+      margin-top: -1px;
+      display: inline-block;
+      height: 2px;
+    }
+
+    &::before {
+      right: 12px;
+      -webkit-transform: rotate(45deg);
+      -moz-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+      -o-transform: rotate(45deg);
+      transform: rotate(45deg);
+    }
+
+    &::after{
+      right: 7px;
+      -webkit-transform: rotate(-45deg);
+      -moz-transform: rotate(-45deg);
+      -ms-transform: rotate(-45deg);
+      -o-transform: rotate(-45deg);
+      transform: rotate(-45deg);
+    }
+  }
+
+  .dropdown-menu {
+    opacity: 0;
+    border: none;
+    display: block;
+    visibility: hidden;
+    -webkit-transition: opacity  .2s .1s, visibility 0s  .2s;
+    -moz-transition: opacity  .2s .1s, visibility 0s  .2s;
+    transition: opacity  .2s .1s, visibility 0s  .2s;
+  }
+}
+
+.open {
+  .dropdown-toggle{
+    &::before, &::after{
+      width: 14px;
+    }
+    &::before {
+      -webkit-transform: translateX(5px) rotate(-45deg);
+      -moz-transform: translateX(5px) rotate(-45deg);
+      -ms-transform: translateX(5px) rotate(-45deg);
+      -o-transform: translateX(5px) rotate(-45deg);
+      transform: translateX(5px) rotate(-45deg);
+    }
+
+    &::after{
+      -webkit-transform: rotate(45deg);
+      -moz-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+      -o-transform: rotate(45deg);
+      transform: rotate(45deg);
+    }
+  }
+
+  .dropdown-menu{
+    opacity: 1;
+    visibility: visible;
+    -webkit-transition: opacity  .2s 0s, visibility 0s 0s;
+    -moz-transition: opacity  .2s 0s, visibility 0s 0s;
+    transition: opacity  .2s 0s, visibility 0s 0s;
+  }
+}
@@ -1,6 +1,23 @@
 //
-// Glyphicons for Bootstrap and Icons from Font Awesome
+// Iconography
 // -----------------------------------------------------
 
-// Import default Bootstrap glyphicons. Overrides, custom variables, and docs below.
-@import "../../../bower_components/bootstrap/less/glyphicons";
+// Import Fontawesome icons
+// *** Bootstrap Glyphicons are not supported
+@import "../../../bower_components/fontawesome/less/font-awesome";
+
+// Icons
+//
+// Users tend to skim through context, looking for subtle clues and markers to determine the intent of a link or
+// block of text. **Icons** are a great way to make "skimmable" websites. However, to ensure "skimmability", each icon **must**
+// be used in a unique context that defines what that icon means on the website.
+// > Each icon should only represent one thing or idea, otherwise the user may feel disoriented or frustrated when they get an unexpected outcome.
+//
+// <mark>TODO:</mark> Define icons and their use
+//
+// Icon: fa-info-circle
+//
+// MenuBlurb:
+// Available icons and how to use them
+//
+// Styleguide style.icons
@@ -11,6 +11,11 @@
 // from phone to desktop to jumbotron! The grid can support a maximum 12 columns of equal size.
 // But don't worry, you can any number of columns, as long as they don't go over 12!
 //
+// Icon: fa-th
+//
+// MenuBlurb:
+// Make responsive layouts using the grid
+//
 // Styleguide layout.grid
 
 // Grid options
 
@@ -5,18 +5,282 @@
 // Import default Bootstrap navbars. Overrides, custom variables, and docs below.
 @import "../../../bower_components/bootstrap/less/navbar";
 
+// Import Yamm3, allowing megamenus within bootstrap dropdowns
+@import "../../../bower_components/yamm3/yamm/yamm";
 
+// Mega Menu
+//
+// The mega menu should only appear once, as the website's main header navigation. The mega menu dropdowns can
+// support almost any of the website's components: <mark>TODO:</mark> list components appropriate for mega menu. Finish responsive support.
+//
+// Markup:
+//  <nav class="navbar navbar-static-top navbar-mega" role="navigation">
+//    <div class="container-fluid">
+//      <div class="navbar-header">
+//        <button type="button" class="navbar-toggle collapsed">
+//          <span class="sr-only">Toggle navigation</span>
+//          <span class="fa fa-bars"></span>
+//        </button>
+//        <a class="navbar-brand" href="#">
+//          <img src="holder.js/110x75/text:Logo" class="img-responsive" alt="University of Alabama Libraries"/>
+//        </a>
+//      </div>
+//      <div class="collapse navbar-collapse">
+//        <ul class="nav navbar-nav">
+//          <li>
+//            <a href="#">Link</a>
+//          </li>
+//          <li class="dropdown yamm-fw">
+//            <a href="#" class="dropdown-toggle">Dropdown</a>
+//            <ul class="dropdown-menu">
+//              <li>
+//                <div class="yamm-content">
+//                  <div class="row">
+//                    <div class="col-xs-4">
+//                      <a href="#">
+//                        <span class="fa fa-compass"></span>
+//                        <h4>Action</h4>
+//                        <p>An action that does things very action-ably</p>
+//                      </a>
+//                    </div>
+//                    <div class="col-xs-4">
+//                      <a href="#">
+//                        <span class="fa fa-flask"></span>
+//                        <h4>Another Action</h4>
+//                        <p>Another action that also takes action</p>
+//                      </a>
+//                    </div>
+//                    <div class="col-xs-4">
+//                      <a href="#">
+//                        <span class="fa fa-"></span>
+//                        <h4>Links So Gridly</h4>
+//                        <p>Man, all these links & icons work well in a grid</p>
+//                      </a>
+//                    </div>
+//                  </div>
+//                </div>
+//              </li>
+//            </ul>
+//          </li>
+//        </ul>
+//        <ul class="nav navbar-nav navbar-left">
+//          <li>
+//            <a href="#">Left Aligned Navbar</a>
+//          </li>
+//        </ul>
+//        <ul class="nav navbar-nav navbar-right">
+//          <li>
+//            <a href="#">Link</a>
+//          </li>
+//          <li class="dropdown yamm-fw">
+//            <a href="#" class="dropdown-toggle">Dropdown</a>
+//            <ul class="dropdown-menu">
+//              <li>
+//                <div class="yamm-content">
+//                  <div class="row">
+//                    <div class="col-sm-4">
+//                      <div class="mm-heading">
+//                        <span class="fa fa-desktop"></span>
+//                        <h4>List Should Never Stack</h4>
+//                      </div>
+//                      <ul>
+//                        <li><a href="#">Action</a></li>
+//                        <li><a href="#">Another action</a></li>
+//                      </ul>
+//                    </div>
+//                    <div class="col-sm-4">
+//                      <div class="mm-heading">
+//                        <span class="fa fa-puzzle-piece"></span>
+//                        <h4>They Should Split By Columns</h4>
+//                      </div>
+//                      <ul>
+//                        <li><a href="#">Separated</a></li>
+//                        <li><a href="#">Link</a></li>
+//                        <li><a href="#">List</a></li>
+//                      </ul>
+//                    </div>
+//                    <div class="col-sm-4">
+//                      <div class="mm-heading">
+//                        <span class="fa fa-spoon"></span>
+//                        <h4>Like This!</h4>
+//                      </div>
+//                      <ul>
+//                        <li><a href="#">Another</a></li>
+//                        <li><a href="#">Separated</a></li>
+//                        <li><a href="#">Link</a></li>
+//                        <li><a href="#">List</a></li>
+//                      </ul>
+//                    </div>
+//                  </div>
+//                </div>
+//              </li>
+//            </ul>
+//          </li>
+//        </ul>
+//      </div>
+//    </div>
+//  </nav>
+//
+// Icon: th-list
+//
+// MenuBlurb:
+// Megamenu for main website navigation
+//
+// Styleguide components.megamenu
+
+header, .header{
+  height: 80px;
+}
+
+.navbar-mega {
+  .navbar-default;
+  .megamenu();
+}
+
+.navbar-mega-inverse {
+  .navbar-inverse;
+  .megamenu(@gray-lighter, @brand-primary);
+}
+
+.navbar-mega, .navbar-mega-inverse {
+  .yamm;
+}
 
-.navbar-meganav {
-  > .container, >.container-fluid {
-    .logo {
-      > img {
-        display: block;
+.megamenu(@color: @brand-primary, @hover-color: @gray-lighter) {
+  border: none;
+  margin-bottom: 0;
+  padding-left: 15px;
+  padding-right: 15px;
+
+  .navbar-brand {
+    margin-top: 15px;
+  }
+
+  .navbar-nav {
+    > li {
+      &.dropdown > a{
+        padding-right: 40px;
+      }
+
+      > a {
+        font-size: 16px;
+        padding: 30px;
+
+        &:hover,
+        &:focus {
+          &.dropdown-toggle::before,
+          &.dropdown-toggle::after{
+            background-color: @hover-color;
+          }
+        }
+
+        &,
+        &.active{
+          &.dropdown-toggle::before,
+          &.dropdown-toggle::after{
+            background-color: @hover-color;
+          }
+        }
+
+        &.dropdown-toggle::before,
+        &.dropdown-toggle::after {
+          background-color: @color;
+          width: 9px;
+        }
+
+        &.dropdown-toggle::before {
+          right: 20px;
+        }
+
+        &.dropdown-toggle::after{
+          right: 15px;
+        }
+      }
+
+      &.open > a{
+        &::before, &::after{
+          width: 14px;
+        }
       }
     }
 
-    > .meganav-nav {
+    .dropdown-menu{
+      .yamm-content {
+        a {
+          color: @gray-dark;
+          position: relative;
+          display: block;
+          padding: 15px;
+
+          & > h4, & > p {
+            margin-left: 45px;
+          }
+
+          & > h4 {
+            color: @brand-primary;
+            margin-bottom: 0;
+          }
+
+          & > .fa {
+            display: block;
+            position: absolute;
+            top: 30px;
+            font-size: 30px;
+            color: #555;
+          }
+          &:hover,
+          &:focus {
+            background-color: darken(@gray-lighter, 5%);
+            text-decoration: none;
+          }
+        }
+      }
+      .mm-heading{
+        min-height: 45px;
+        display: table;
+        margin-bottom: 5px;
+
+        > .fa, > h4{
+          color: @brand-primary;
+          display: table-cell;
+          vertical-align: middle;
+        }
+
+        > .fa{
+          font-size: 30px;
+          color: @gray-dark;
+        }
+
+        > h4{
+          padding-left: 15px;
+          color: @brand-primary;
+        }
+      }
+
+      ul {
+        list-style-type: none;
+        padding: 0;
+        > li {
+
+          &:last-child {
+            border-bottom: none;
+          }
 
+          > a{
+            color: @gray-dark;
+            position: relative;
+            display: block;
+            padding: 5px;
+            font-size: 16px;
+
+            &:hover,
+            &:focus {
+              background-color: darken(@gray-lighter, 5%);
+              text-decoration: none;
+            }
+          }
+        }
+      }
     }
   }
 }
@@ -5,16 +5,41 @@
 // Import default Bootstrap scaffolding. Overrides, custom variables, and docs below.
 @import "../../../bower_components/bootstrap/less/scaffolding";
 
+// Images
+//
+// ###Responsive images
+// Images that are children of the `.wrap` content container image are automatically made responsive
+//
+// <mark>TODO:</mark> Implement method to override responsive images
+//
+// Icon: fa-image
+//
+// MenuBlurb:
+// Using images in a responsive way
+//
+// Styleguide style.images
+
+img {
+  .img-responsive;
+}
+
 // Links
 //
 // <mark>TODO:</mark> Add details about link appearance and restrictions on text-decorations, etc
 //
+// Icon: fa-link
+//
+// MenuBlurb:
+// Link types and their decoration
+//
 // Styleguide style.links
 
 // External & File Links
 //
 // Links to download files and links to external website are automatically appended with a context icon.
-// This icon lets the user know what to expect when they click the link.
+// This icon lets the user know what to expect when they click the link. You can remove a link icon manually with the `.no-icon` class.
+// Use the `.no-icon` class cautiously - if you're not sure whether to use it, you probably shouldn't.
+//
 // <mark>TODO:</mark> Define when this differs via parent element context (i.e., in menus, footers, etc.)
 //
 // Markup: file-external-links.html
@@ -27,56 +52,27 @@
 // <a href="excel-file-path.doc">Works for old Word(*.doc) extensions</a>
 // <a href="http://codepen.io/ashleynolan/pen/rpjHg">Link to external website</a>
 // <a href="https://secure-site-url">Works with HTTPS too!</a>
+// <a href="https://secure-site-url" class="no-icon">No link icon.</a>
 //
 // Styleguide style.links.file-external
-/* Font Awesome icon codes */
-@icon-ext-link: "\f08e";
-@icon-pdf: "\f1c1";
-@icon-word: "\f1c2";
-@icon-excel: "\f1c3";
-@icon-powerpoint: "\f1c4";
 
-a[href^="http"]:after,
-a[href^="https"]:after{
-  .link-icon-after(@icon-ext-link);
-}
-
-a[href$=".pdf"]:before{
-  .link-icon-before(@icon-pdf);
-}
-a[href$=".doc"]:before,
-a[href$=".docx"]:before{
-  .link-icon-before(@icon-word);
-}
-a[href$=".xls"]:before,
-a[href$=".xlsx"]:before{
-  .link-icon-before(@icon-excel);
-}
+.@{content-container-class}{
+  a:not(.no-icon){
+    &[href^="http"]:after,
+    &[href^="https"]:after{
+      .link-icon-after(@icon-ext-link);
+    }
 
-a{
-  .navbar &:before,
-  .navbar &:after{
-    display: none;
+    &[href$=".pdf"]:before{
+      .link-icon-before(@icon-pdf);
+    }
+    &[href$=".doc"]:before,
+    &[href$=".docx"]:before{
+      .link-icon-before(@icon-word);
+    }
+    &[href$=".xls"]:before,
+    &[href$=".xlsx"]:before{
+      .link-icon-before(@icon-excel);
+    }
   }
-}
-
-.link-icon(@icon){
-  @line-height-reduction: floor(@line-height-computed * .20);
-  content: @icon;
-  font-family: FontAwesome;
-  font-size: .80em;
-  line-height: floor(@line-height-computed - @line-height-reduction);
-  display: inline-block;
-  text-decoration: none;
-}
-
-.link-icon-before(@icon){
-  .link-icon(@icon);
-  font-size: inherit;
-  padding-right: 5px;
-}
-
-.link-icon-after(@icon){
-  .link-icon(@icon);
-  padding-left: 5px;
 }
@@ -1,5 +1,5 @@
 //
-// Variables
+// Tables
 // --------------------------------------------------
 
 // Import default Bootstrap tables. Overrides, custom variables, and docs below.
@@ -26,4 +26,37 @@
 //    </tbody>
 // </table>
 //
-// Styleguide style.tables
+// Icon: fa-tables
+//
+// MenuBlurb:
+// Types of tables and where to use them
+//
+// Styleguide style.tables
+
+table {
+  .table;
+}
+
+// Striped Rows
+//
+// Use `.table-striped` class create a striped table with alternating row color
+// <em>Only</em> use striped tables for long tables.
+//
+// Markup: tables-striped.html
+//
+// CodeTemplate:
+// <table class="table-striped">
+//    <caption>Optional table caption.</caption>
+//    <thead>
+//      <tr>
+//        <th>...</th>
+//      </tr>
+//    </thead>
+//    <tbody>
+//      <tr>
+//        <td>...</td>
+//      </tr>
+//    </tbody>
+// </table>
+//
+// Styleguide style.tables.striped
@@ -14,6 +14,11 @@
 // for slight accents or highlights. [Secondary Colors](#1.2) should only be dominant
 // when used in a child/sub theme.
 //
+// Icon: fa-eyedropper
+//
+// MenuBlurb:
+// Color scheme for the website and how to use them
+//
 // Styleguide style.color
 
 // Primary Colors
@@ -46,6 +51,11 @@
 //
 // Use and availability of fonts
 //
+// Icon: fa-font
+//
+// MenuBlurb:
+// Fonts used for body, heading, and other text elements
+//
 // Styleguide style.typography
 
 // Body Text
@@ -78,17 +88,72 @@
 @headings-font-family:    'Oxygen', sans-serif;
 @headings-font-weight:    400;
 
-//== Iconography
-// -------------------------
-
-//** Load fonts from this directory.
-@icon-font-path:          "../../fonts/";
-
 // Components
 // -------------------------
 
 @border-radius-large:            4px;
 
+//== Navbar
+//
+//##
+
+// Basics of a navbar
+@navbar-height:                    50px;
+@navbar-margin-bottom:             @line-height-computed;
+@navbar-border-radius:             @border-radius-base;
+@navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
+@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
+@navbar-collapse-max-height:       340px;
+
+@navbar-default-color:             #777;
+@navbar-default-bg:                @gray-lighter;
+@navbar-default-border:            darken(@navbar-default-bg, 6.5%);
+
+// Navbar links
+@navbar-default-link-color:                @brand-primary;
+@navbar-default-link-hover-color:          @gray-lighter;
+@navbar-default-link-hover-bg:             @navbar-default-link-color;
+@navbar-default-link-active-color:         @navbar-default-link-hover-color;
+@navbar-default-link-active-bg:            @navbar-default-link-hover-bg;
+@navbar-default-link-disabled-color:       #ccc;
+@navbar-default-link-disabled-bg:          transparent;
+
+// Navbar brand label
+@navbar-default-brand-color:               @navbar-default-link-color;
+@navbar-default-brand-hover-color:         darken(@navbar-default-brand-color, 10%);
+@navbar-default-brand-hover-bg:            transparent;
+
+// Navbar toggle
+@navbar-default-toggle-hover-bg:           #ddd;
+@navbar-default-toggle-icon-bar-bg:        #888;
+@navbar-default-toggle-border-color:       #ddd;
+
+
+// Inverted navbar
+// Reset inverted navbar basics
+@navbar-inverse-color:                      @gray-lighter;
+@navbar-inverse-bg:                         @brand-primary;
+@navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
+
+// Inverted navbar links
+@navbar-inverse-link-color:                 @navbar-inverse-color;
+@navbar-inverse-link-hover-color:           @navbar-inverse-bg;
+@navbar-inverse-link-hover-bg:              @navbar-inverse-link-color;
+@navbar-inverse-link-active-color:          @navbar-inverse-bg;
+@navbar-inverse-link-active-bg:             @navbar-inverse-color;
+@navbar-inverse-link-disabled-color:        #e5d8d8;
+@navbar-inverse-link-disabled-bg:           transparent;
+
+// Inverted navbar brand label
+@navbar-inverse-brand-color:                @navbar-inverse-link-color;
+@navbar-inverse-brand-hover-color:          #fff;
+@navbar-inverse-brand-hover-bg:             transparent;
+
+// Inverted navbar toggle
+@navbar-inverse-toggle-hover-bg:            lighten(@navbar-inverse-bg, 10%);
+@navbar-inverse-toggle-icon-bar-bg:         @gray-lighter;
+@navbar-inverse-toggle-border-color:        transparent;
+
 // Jumbotron
 // -------------------------
 
@@ -103,81 +168,11 @@
 @navbar-meganav-height: 80px;
 @navbar-meganav-height-sm: 50px;
 
-
-// Crimson navbar
-// Reset crimson navbar basics
-@navbar-crimson-color:                      @gray-lighter;
-@navbar-crimson-bg:                         @brand-primary;
-@navbar-crimson-border:                     darken(@navbar-crimson-bg, 10%);
-
-// Crimson navbar links
-@navbar-crimson-link-color:                 @gray-lighter;
-@navbar-crimson-link-hover-color:           @navbar-crimson-bg;
-@navbar-crimson-link-hover-bg:              @navbar-crimson-color;
-@navbar-crimson-link-active-color:          @navbar-crimson-link-hover-color;
-@navbar-crimson-link-active-bg:             @navbar-crimson-link-hover-bg;
-@navbar-crimson-link-disabled-color:        #f2c1c1;
-@navbar-crimson-link-disabled-bg:           transparent;
-
-// Crimson navbar brand label
-@navbar-crimson-brand-color:                @navbar-crimson-link-color;
-@navbar-crimson-brand-hover-color:          #fff;
-@navbar-crimson-brand-hover-bg:             transparent;
-
-// Crimson navbar toggle
-@navbar-crimson-toggle-hover-bg:            #333;
-@navbar-crimson-toggle-icon-bar-bg:         #fff;
-@navbar-crimson-toggle-border-color:        #333;
-
 // File and External Links (iconography and decorations)
 // -------------------------
 
 @icon-ext-link: "\f08e";
 @icon-pdf: "\f1c1";
 @icon-word: "\f1c2";
 @icon-excel: "\f1c3";
-@icon-powerpoint: "\f1c4";
-
-// Standard body links
-
-.@{content-container-class}{
-  > a{
-    &[href^="http"]:after,
-    &[href^="https"]:after{
-      .link-icon-after(@icon-ext-link);
-    }
-
-    &[href$=".pdf"]:before{
-      .link-icon-before(@icon-pdf);
-    }
-    &[href$=".doc"]:before,
-    &[href$=".docx"]:before{
-      .link-icon-before(@icon-word);
-    }
-    &[href$=".xls"]:before,
-    &[href$=".xlsx"]:before{
-      .link-icon-before(@icon-excel);
-    }
-  }
-}
-
-.link-icon(@icon){
-  @line-height-reduction: floor(@line-height-computed * .20);
-  content: @icon;
-  font-family: FontAwesome;
-  font-size: .80em;
-  line-height: floor(@line-height-computed - @line-height-reduction);
-  display: inline-block;
-  text-decoration: none;
-}
-
-.link-icon-before(@icon){
-  .link-icon(@icon);
-  font-size: inherit;
-  padding-right: 5px;
-}
-
-.link-icon-after(@icon){
-  .link-icon(@icon);
-  padding-left: 5px;
-}
+@icon-powerpoint: "\f1c4";
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<!--[if lte IE 6]>            <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
-<!--[if IEMobile 7]>          <html class="no-js iem7" lang="en"> <![endif]-->
-<!--[if (IE 7)&(!IEMobile)]>  <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
-<!--[if IE 8]>                <html class="no-js lt-ie9" lang="en"> <![endif]-->
-<!--[if (gte IE 9)|(gt IEMobile 7)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<!--[if lte IE 6]>            <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en" ng-app="styleguide"> <![endif]-->
+<!--[if IEMobile 7]>          <html class="no-js iem7" lang="en" ng-app="styleguide"> <![endif]-->
+<!--[if (IE 7)&(!IEMobile)]>  <html class="no-js lt-ie9 lt-ie8" lang="en" ng-app="styleguide"> <![endif]-->
+<!--[if IE 8]>                <html class="no-js lt-ie9" lang="en" ng-app="styleguide"> <![endif]-->
+<!--[if (gte IE 9)|(gt IEMobile 7)]><!--> <html class="no-js" lang="en" ng-app="styleguide"> <!--<![endif]-->
 <head>
   <meta charset="utf-8">
   <title>UA Libraries Styleguide</title>
@@ -15,15 +15,16 @@
   <link rel="stylesheet" href="http://yandex.st/highlightjs/8.0/styles/github.min.css">
   <link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500|Oxygen:400,700,300|Open+Sans|EB+Garamond|Lato:300,400' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="https://rawgit.com/ualibweb/roots-ualib/master/assets/css/main.min.css">
+  <link href="../assets/css/vendor.css" rel="stylesheet">
   <link rel="stylesheet" href="public/ualib-styleguide.css">
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
-  <link href="../assets/css/vendor.css" rel="stylesheet">
+  <link href="https://rawgit.com/ualibweb/ui-components/master/dist/ui-components.css" rel="stylesheet">
   {{{styles}}}
 </head>
-<body data-spy="scroll" data-target="#styleguide-nav" data-offset="90">
+<body>
 <header id="header-nav">
-  <nav class="navbar navbar-static-top  navbar-ualib yamm" role="navigation">
-    <div class="container">
+  <nav class="navbar navbar-static-top navbar-mega" role="navigation">
+    <div class="container-fluid">
       <div class="navbar-header">
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
           <span class="sr-only">Toggle navigation</span>
@@ -36,33 +37,39 @@
 
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
         <ul class="nav navbar-nav">
+          {{#eachRoot}}
           <li class="dropdown yamm-fw">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="#">Styleguide</a>
+            <a href="#" class="dropdown-toggle">{{header}}</a>
+
             <ul class="dropdown-menu">
               <li>
-                <div class="yamm-content ualib-mm">
+                <div class="yamm-content">
                   <div class="row">
-                    <ul class="list-unstyled">
-                      {{#eachRoot}}
-                      <li class="col-xs-3 menu-col menu-practice-presentation-rooms"{{#isRoot @root.rootNumber}}  class="active" {{/isRoot}}>
-                        <a href="section-{{reference}}.html">
+                     <ul class="list-unstyled">
+                       {{#eachSection reference}}
+                       {{#ifDepth 2}}
+                      <li class="col-xs-3 menu-col">
+                        <a href="section-{{../../referenceURI}}.html#{{scrollSpyId referenceURI}}">
                           {{#if icon}}
                             <span class="fa {{icon}}"></span>
                           {{/if}}
                           <h4>{{header}}</h4>
-                          {{#if titleslug}}
-                            <p>{{titleslig}}</p>
+                          {{#if menublurb}}
+                            <p>{{menublurb}}</p>
                           {{/if}}
                         </a>
                       </li>
-                      {{/eachRoot}}
+                       {{/ifDepth}}
+                      {{/eachSection}}
                     </ul>
+
                   </div>
                 </div>
               </li>
             </ul>
-          </li>
 
+          </li>
+          {{/eachRoot}}
         </ul>
         <ul class="nav navbar-nav navbar-right">
           <li>
@@ -90,8 +97,8 @@ <h4>{{header}}</h4>
         <div class="jumbotron jumbotron-head">
           <div class="container">
             {{#if homepage}}
-              <h1>Styleguide</h1>
-              <p class="lead">CSS, Components, and Layout details</p>
+              <h1>University Libraries Web Docs</h1>
+              <p class="lead">Writing for the web, Styleguide, Website Components, and Resources.</p>
             {{else}}
               {{#section rootName}}
                 <h1>{{header}}</h1>
@@ -108,19 +115,19 @@ <h1>{{header}}</h1>
             <div class="col-xs-12">{{{homepage}}}</div>
           {{else}}
             <div class="col-sm-2 col-sm-push-10">
-              <nav class="fixie-menu">
+              <nav class="fixie-menu navbar-styleguide">
                 <ul class="nav nav-submenu">
                   {{#eachSection rootName}}
                     {{#ifDepth 2}}
-                      <li>
-                        <a href="#{{scrollSpyId reference}}" du-smooth-scroll du-scrollspy offset="100">
+                      <li data-target="#{{scrollSpyId reference}}" bs-scrollspy>
+                        <a class="menu-item" href="#{{scrollSpyId reference}}">
                           {{header}}
                         </a>
-                        <ul class="nav">
+                        <ul class="nav ">
                           {{#eachSection reference}}
                             {{#ifDepth 3}}
-                              <li>
-                                <a href="#{{scrollSpyId reference}}" du-smooth-scroll du-scrollspy offset="100">
+                              <li data-target="#{{scrollSpyId reference}}" bs-scrollspy>
+                                <a class="submenu-item" href="#{{scrollSpyId reference}}">
                                   {{header}}
                                 </a>
                               </li>
@@ -202,7 +209,55 @@ <h1>{{header}}</h1>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/holder/2.4.0/holder.js"></script>
+<script src="../assets/js/vendor.js"></script>
+<script src="https://rawgit.com/ualibweb/ui-components/master/dist/ui-components-templates.js"></script>
+<script src="https://rawgit.com/ualibweb/ui-components/master/dist/ui-components.js"></script>
 <script>hljs.initHighlightingOnLoad();</script>
+<script>
+  angular.module('styleguide', ['ngAnimate', 'mgcrea.ngStrap', 'ualib.ui'])
+
+          /*.run(['$rootScope', function($rootScope){
+            $rootScope.$on('duScrollspy:becameActive', function(event, elm){
+              /*console.log({
+                ev: event,
+                element: elm
+              })*
+            })
+          }])*/
 
+          .directive('fixieMenu', ['$window', function($window){
+            return {
+              restrict: 'AC',
+              link: function(scope, elm, attrs){
+                var width = elm[0].offsetWidth;
+                var fixed = false;
+                var fixieClass = 'nav-fixed';
+                var offset = 350;
+                angular.element($window).bind('scroll', fixieScroll);
+                function fixieScroll(ev){
+                  if (this.pageYOffset > offset) {
+                    if (!fixed){
+                      console.log(width);
+                      elm.addClass(fixieClass);
+                      elm.css('width', width+'px');
+                      fixed = true;
+                    }
+                  }
+                  else {
+                    if (fixed){
+                      elm.removeClass(fixieClass);
+                      elm.css('width', 'auto');
+                      fixed = false;
+                    }
+                  }
+                  scope.$apply();
+                }
+                scope.$on('$destroy', function(){
+                  angular.element($window).unbind('scroll', fixieScroll);
+                });
+              }
+            }
+          }]);
+</script>
 </body>
 </html>
@@ -1,4 +1,4 @@
-@import "../../less/_variables.less";
+@import "../../less/_variables";
 body{
   position: relative;
 
@@ -19,6 +19,15 @@ hr{
   border-color: #ddd;
 }
 
+.menu-col:nth-child(4n+1) {
+  clear: both;
+}
+
+.section{
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+
 .jumbotron-head{
   background-color: #993333;
   color: #f6f6f6;
@@ -28,56 +37,52 @@ hr{
   }
 }
 
-.navbar-inverse .navbar-brand{
-  color: #f6f6f6;
-}
-
-.navbar-right > li > a{
-  font-size: 18px;
-}
-
-.navbar-styleguide{
-  margin-bottom: 0 !important;
-  backgroung-color: @gray-lighter !important;
-  font-family: @headings-font-family;
-  font-size: 16px;
-
-  & a{
-    color: @brand-primary !important;
-  }
-
-  & .navbar-nav{
-    font-size: .95em;
-  }
-}
-
 
 /* styleguide nav */
 
 .nav-fixed{
-  top: 72px;
+  top: 30px;
   position: fixed;
 }
 
-.styleguide-nav > .nav > li > a{
-  font-family: 'Ubuntu', sans-serif;
-}
-
-.styleguide-nav > .nav > li > .styleguide-nav-3{
-  //padding-left: 30px;
-}
-
-.styleguide-nav > .nav-pills {
+.nav-submenu {
   > li {
     // Active state
-    &.active > a {
-      &,
-      &:hover,
-      &:focus {
+    a {
+      color: @brand-primary;
+    }
+
+    &.active,
+    &:hover,
+    &:focus {
+      > a{
         color: @nav-pills-active-link-hover-color;
-        background-color: @link-color;
+        background-color: @brand-primary;
       }
     }
+
+    &.active > ul{
+      display: block;
+    }
+
+    > ul {
+      display: none;
+      > li{
+
+        > a, a:hover {
+          padding-left: 15px;
+          border-left: 2px solid @body-bg;
+        }
+        &.active,
+        &:hover,
+        &:focus {
+          > a, a:hover, a:active, a:focus {
+            border-color: @gray-light;
+          }
+        }
+      }
+    }
+
   }
 }
 
 
@@ -7,197 +7,12 @@
 <head>
     <meta charset="utf-8">
     <title>UA Libraries Styleguide</title>
-
-    <meta name="description" content="">
-    <meta name="generator" content="kss-node">
-    <meta name="viewport" content="width=device-width">
-
-    <link rel="stylesheet" href="http://yandex.st/highlightjs/8.0/styles/github.min.css">
-    <link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500|Oxygen:400,700,300|Open+Sans|EB+Garamond|Lato:300,400' rel='stylesheet' type='text/css'>
-    <link rel="stylesheet" href="https://rawgit.com/ualibweb/roots-ualib/master/assets/css/main.min.css">
-    <link rel="stylesheet" href="styleguide/public/ualib-styleguide.css">
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
-    <link href="assets/css/vendor.css" rel="stylesheet">
-
+    <script>
+        // temporarily route to kss-node docs until new doc system implemented
+        window.location.replace("styleguide");
+    </script>
 </head>
-<body data-spy="scroll" data-target="#styleguide-nav" data-offset="90">
-<header id="header-nav">
-    <nav class="navbar navbar-static-top  navbar-ualib yamm" role="navigation">
-        <div class="container">
-            <div class="navbar-header">
-                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-                    <span class="sr-only">Toggle navigation</span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                </button>
-                <a class="navbar-brand" href="index.html" >UA Lib Web Docs</a>
-            </div>
-
-            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-                <ul class="nav navbar-nav">
-                    <li class="dropdown yamm-fw open">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="#">Styleguide</a>
-                        <ul class="dropdown-menu">
-                            <li>
-                                <div class="yamm-content ualib-mm">
-                                    <div class="row">
-                                        <ul class="list-unstyled">
-                                            <li class="col-xs-3 menu-col menu-practice-presentation-rooms">
-                                                <a href="styleguide/section-style.html">
-                                                    <h4>Style</h4>
-                                                </a>
-                                            </li>
-                                            <li class="col-xs-3 menu-col menu-practice-presentation-rooms">
-                                                <a href="styleguide/section-layout.html">
-                                                    <h4>Layout</h4>
-                                                </a>
-                                            </li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </li>
-                        </ul>
-                    </li>
-        </ul>
-        <ul class="nav navbar-nav navbar-right">
-            <li>
-                <a href="https://github.com/ualibweb/ualibweb.github.io" target="_new"><span class="fa fa-github"></span> Github</a>
-            </li>
-            <li class="dropdown">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Quick Links</a>
-                <ul class="dropdown-menu" role="menu">
-                    <li><a href="http://getbootstrap.com/"><span class="fa fa-fw fa-border">B</span> Bootstrap Docs</a></li>
-                    <li><a href="http://fortawesome.github.io/Font-Awesome/"><span class="fa fa-fw fa-flag"></span> Font Awesome</a></li>
-                    <li><a href="https://www.google.com/fonts"><span class="fa fa-fw fa-paint-brush"></span> Google Fonts</a></li>
-                    <li><a href="http://webaim.org/resources/contrastchecker/"><span class="fa fa-fw fa-adjust"></span> WCAG AA Contrast Checker</a></li>
-                    <li><a href="https://color.adobe.com"><span class="fa fa-fw fa-eyedropper"></span> Adobe Color CC</a></li>
-                </ul>
-            </li>
-        </ul>
-        </div>
-        </div>
-    </nav>
-</header>
-
-<div class="wrap">
-    <div class="content">
-        <main class="main" role="main">
-            <div class="jumbotron jumbotron-head">
-                <div class="container">
-                    <h1>University Libraries Web Docs</h1>
-                    <p>Styleguide, Pattern Library, and resources.</p>
-                </div>
-            </div>
-            <div class="container">
-                <div class="col-xs-12"> <h1 id="ua-libraries-web-docs">UA Libraries Web Docs</h1>
-                    <p>University Libraries represents the University of Alabama on an academic and institutional level, not just as a library, but also as a repository, archive, computer lab, and location for students to engage both academically and socially, all in support of the university mission. Consequently, the University Libraries Web Site Style Guide will reflect this usage and will help the Libraries provide students with access to information and resources. </p>
-                    <p>Web Services’ top priority is to provide users with easy-to-use, accessible, and “findable,” web content. To achieve this, the following style guide presents the Libraries with rules and best practices, regarding site content, writing methods, text usage, and additional website design elements. </p>
-                    <h2 id="content-strategy">Content Strategy</h2>
-                    <blockquote>
-                        <p>In short, your content has to be awesome. It has to be truly helpful. It cannot be about you.
-                            It has to be about your customers’ wants and needs.</p>
-                        <p>-- <cite>Forbes Magazine</cite></p>
-                    </blockquote>
-                    <p>The User Interface has a strict navigation structure, meaning that new pages or alterations to existing pages will need to fit within this new organizational structure. Pay close attention to link locations, content placement, top-level navigation, and sub-navigation areas.  </p>
-                    <h2 id="what-can-i-put-on-the-website-">What can I put on the website?</h2>
-                    <p>Anything that is relevant to your department’s services, public information about your department, or information about specialized areas or content types. Website content must not be suitable for a LibGuide or a Blog. We can create LibGuides to promote library resources or services that are specific to an academic research pursuit. Blogs also detail library resources and services, but done so frequently and require multiple postings. </p>
-                    <h2 id="what-areas-will-i-need-to-talk-to-web-services-about-editing-">What areas will I need to talk to web services about editing?</h2>
-                    <p>We identified 23 content areas where the design is extensively intermixed with the content; changes to these areas will need web services intervention to ensure the integrity of the design. Web Services have based the design of the site on usability and analytics data, and it is important that the content creator not alter them accidentally or arbitrarily. </p>
-                    <p>In no way does Web Services claim responsibility or ownership of the content; content creators retain full ownership and responsibility of their page content. Web Services simply assists in the design, the look, and overall feel of how the page presents the content.</p>
-                    <ul>
-                        <li>Databases (Application)</li>
-                        <li>Maps, Locations, Hours (Application)</li>
-                        <li><p>Directory (Application)</p>
-                        </li>
-                        <li><p>Using the Libraries</p>
-                        </li>
-                        <li>Research Tools </li>
-                        <li>Library Help</li>
-                        <li>News, Events, and Exhibitions</li>
-                        <li>About</li>
-                        <li><p>Libraries &amp; Collections</p>
-                        </li>
-                        <li><p>E-Resources (E-Books, E-Journals)</p>
-                        </li>
-                        <li>Reserves</li>
-                        <li>Interlibrary Borrowing</li>
-                        <li>Sanford Media Center</li>
-                        <li>Computers &amp; Software</li>
-                        <li>How Do I… (Ask A Librarian)</li>
-                        <li>Alabama Digital Humanities Center</li>
-                        <li>Print, Copy, Scan </li>
-                        <li>Circulation Policies (Borrow, Renew, Request)</li>
-                        <li><p>Equipment</p>
-                        </li>
-                        <li><p>Floor Maps</p>
-                        </li>
-                        <li>Classes, Workshops, Tours</li>
-                        <li>Practice Presentation Rooms</li>
-                        <li>Social Media Page</li>
-                    </ul>
-                    <h2 id="what-are-the-rules-for-adding-additional-content-">What are the rules for adding additional content?</h2>
-                    <p>Follow the template, use our styles as per the document, or simply let the elements (</p><p>, </p><div>, etc.) style automatically as we have intended.<p></p>
-                        <h2 id="how-do-i-use-our-styles-and-fonts-how-will-the-elements-appear-and-what-does-each-style-look-like-">How do I use our styles and fonts? How will the elements appear, and what does each style look like?</h2>
-                        <p>Please see the Style Elements section of this document</p>
-                        <h2 id="writing-for-the-web">Writing for the Web</h2>
-                        <p>The University Libraries website is not the final destination for users, but rather a tool to help connect users to the relevant resources and services available at the libraries.  Additionally, research has shown that users interact with website content in a very specific way.Important guidelines for writing for the web: </p>
-                        <ul>
-                            <li>Be succinct : write no more than 50% of the text you would have used in a hardcopy publication</li>
-                            <li>Write for scannability : don't require users to read long continuous blocks of text
-                                (<a href="http://www.nngroup.com/articles/be-succinct-writing-for-the-web/">http://www.nngroup.com/articles/be-succinct-writing-for-the-web/</a>)</li>
-                        </ul>
-                        <h3 id="additional-resources-">Additional Resources:</h3>
-                        <ul>
-                            <li><p>Writing for the Web
-                                <a href="http://www.nngroup.com/topic/writing-web/">http://www.nngroup.com/topic/writing-web/</a></p>
-                            </li>
-                            <li><p>Kill the Welcome Mat
-                                <a href="http://www.nngroup.com/articles/blah-blah-text-keep-cut-or-kill/">http://www.nngroup.com/articles/blah-blah-text-keep-cut-or-kill/</a></p>
-                            </li>
-                            <li><p>10 Tips for Good Web Writing
-                                <a href="http://webdesign.about.com/od/writing/a/aa031405.htm">http://webdesign.about.com/od/writing/a/aa031405.htm</a></p>
-                            </li>
-                        </ul>
-                        <h3 id="content">Content</h3>
-                        <ul>
-                            <li>Keep content relevant to topic and goal; your writing should have a goal.</li>
-                            <li>When writing, think of an inverted pyramid - get to the point in the first paragraph, then expand upon it. </li>
-                            <li>One idea per paragraph.</li>
-                            <li>Web pages need to be concise and to-the-point; short, meaty paragraphs are better than long rambling ones. </li>
-                            <li>Use action words.</li>
-                            <li>Tell your readers what to do and avoid the passive voice. Keep the flow of your pages moving.</li>
-                        </ul>
-                        <p><img src="assets/img/pages-flow.jpg" alt="Alt text">
-                            -- Lynda Felder, Peachpit.com</p>
-                        <h3 id="format">Format</h3>
-                        <ul>
-                            <li>Try to use lists instead of paragraphs - lists are easier to scan than paragraphs.  </li>
-                            <li>Try to limit list items to 7 words: studies have shown that people can only reliably remember 7-10 things at a time. More than 7 is occasionally acceptable, depending on context. </li>
-                            <li>Sentences should be as concise as you can make them. Use only the words you need to convey essential information.  </li>
-                            <li>Include internal sub-headings: sub-headings make the text more scannable. Your readers will move to the section of the document that is most useful for them, and internal cues make it easier for them to achieve this.  </li>
-                            <li>Make your links part of the copy: links are another way Web readers scan pages. They stand out from normal text, and provide additional cues as to what the page is about.</li>
-                        </ul>
-                        <h3 id="always">Always</h3>
-                        <ul>
-                            <li>Proofread your work - typos and spelling errors will send people away from your pages. Make sure you proofread everything you post to the Web.</li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </main>
-    </div>
-</div>
-
-<footer>
-
-</footer>
-
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
-<script src="http://cdnjs.cloudflare.com/ajax/libs/holder/2.4.0/holder.js"></script>
-<script>hljs.initHighlightingOnLoad();</script>
+<body>
 
 </body>
 </html>
@@ -28,6 +28,7 @@
     "grunt-contrib-less": "~1.0.0",
     "grunt-contrib-cssmin": "~0.12.2",
     "grunt-contrib-concat": "~0.5.1",
-    "grunt-contrib-copy": "~0.8.0"
+    "grunt-contrib-copy": "~0.8.0",
+    "grunt-contrib-clean": "~0.6.0"
   }
 }
@@ -7,197 +7,12 @@
 <head>
     <meta charset="utf-8">
     <title>UA Libraries Styleguide</title>
-
-    <meta name="description" content="">
-    <meta name="generator" content="kss-node">
-    <meta name="viewport" content="width=device-width">
-
-    <link rel="stylesheet" href="http://yandex.st/highlightjs/8.0/styles/github.min.css">
-    <link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500|Oxygen:400,700,300|Open+Sans|EB+Garamond|Lato:300,400' rel='stylesheet' type='text/css'>
-    <link rel="stylesheet" href="https://rawgit.com/ualibweb/roots-ualib/master/assets/css/main.min.css">
-    <link rel="stylesheet" href="styleguide/public/ualib-styleguide.css">
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
-    <link href="assets/css/vendor.css" rel="stylesheet">
-
+    <script>
+        // temporarily route to kss-node docs until new doc system implemented
+        window.location.replace("styleguide");
+    </script>
 </head>
-<body data-spy="scroll" data-target="#styleguide-nav" data-offset="90">
-<header id="header-nav">
-    <nav class="navbar navbar-static-top  navbar-ualib yamm" role="navigation">
-        <div class="container">
-            <div class="navbar-header">
-                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-                    <span class="sr-only">Toggle navigation</span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                </button>
-                <a class="navbar-brand" href="index.html" >UA Lib Web Docs</a>
-            </div>
-
-            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-                <ul class="nav navbar-nav">
-                    <li class="dropdown yamm-fw open">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="#">Styleguide</a>
-                        <ul class="dropdown-menu">
-                            <li>
-                                <div class="yamm-content ualib-mm">
-                                    <div class="row">
-                                        <ul class="list-unstyled">
-                                            <li class="col-xs-3 menu-col menu-practice-presentation-rooms">
-                                                <a href="styleguide/section-style.html">
-                                                    <h4>Style</h4>
-                                                </a>
-                                            </li>
-                                            <li class="col-xs-3 menu-col menu-practice-presentation-rooms">
-                                                <a href="styleguide/section-layout.html">
-                                                    <h4>Layout</h4>
-                                                </a>
-                                            </li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </li>
-                        </ul>
-                    </li>
-        </ul>
-        <ul class="nav navbar-nav navbar-right">
-            <li>
-                <a href="https://github.com/ualibweb/ualibweb.github.io" target="_new"><span class="fa fa-github"></span> Github</a>
-            </li>
-            <li class="dropdown">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Quick Links</a>
-                <ul class="dropdown-menu" role="menu">
-                    <li><a href="http://getbootstrap.com/"><span class="fa fa-fw fa-border">B</span> Bootstrap Docs</a></li>
-                    <li><a href="http://fortawesome.github.io/Font-Awesome/"><span class="fa fa-fw fa-flag"></span> Font Awesome</a></li>
-                    <li><a href="https://www.google.com/fonts"><span class="fa fa-fw fa-paint-brush"></span> Google Fonts</a></li>
-                    <li><a href="http://webaim.org/resources/contrastchecker/"><span class="fa fa-fw fa-adjust"></span> WCAG AA Contrast Checker</a></li>
-                    <li><a href="https://color.adobe.com"><span class="fa fa-fw fa-eyedropper"></span> Adobe Color CC</a></li>
-                </ul>
-            </li>
-        </ul>
-        </div>
-        </div>
-    </nav>
-</header>
-
-<div class="wrap">
-    <div class="content">
-        <main class="main" role="main">
-            <div class="jumbotron jumbotron-head">
-                <div class="container">
-                    <h1>University Libraries Web Docs</h1>
-                    <p>Styleguide, Pattern Library, and resources.</p>
-                </div>
-            </div>
-            <div class="container">
-                <div class="col-xs-12"> <h1 id="ua-libraries-web-docs">UA Libraries Web Docs</h1>
-                    <p>University Libraries represents the University of Alabama on an academic and institutional level, not just as a library, but also as a repository, archive, computer lab, and location for students to engage both academically and socially, all in support of the university mission. Consequently, the University Libraries Web Site Style Guide will reflect this usage and will help the Libraries provide students with access to information and resources. </p>
-                    <p>Web Services’ top priority is to provide users with easy-to-use, accessible, and “findable,” web content. To achieve this, the following style guide presents the Libraries with rules and best practices, regarding site content, writing methods, text usage, and additional website design elements. </p>
-                    <h2 id="content-strategy">Content Strategy</h2>
-                    <blockquote>
-                        <p>In short, your content has to be awesome. It has to be truly helpful. It cannot be about you.
-                            It has to be about your customers’ wants and needs.</p>
-                        <p>-- <cite>Forbes Magazine</cite></p>
-                    </blockquote>
-                    <p>The User Interface has a strict navigation structure, meaning that new pages or alterations to existing pages will need to fit within this new organizational structure. Pay close attention to link locations, content placement, top-level navigation, and sub-navigation areas.  </p>
-                    <h2 id="what-can-i-put-on-the-website-">What can I put on the website?</h2>
-                    <p>Anything that is relevant to your department’s services, public information about your department, or information about specialized areas or content types. Website content must not be suitable for a LibGuide or a Blog. We can create LibGuides to promote library resources or services that are specific to an academic research pursuit. Blogs also detail library resources and services, but done so frequently and require multiple postings. </p>
-                    <h2 id="what-areas-will-i-need-to-talk-to-web-services-about-editing-">What areas will I need to talk to web services about editing?</h2>
-                    <p>We identified 23 content areas where the design is extensively intermixed with the content; changes to these areas will need web services intervention to ensure the integrity of the design. Web Services have based the design of the site on usability and analytics data, and it is important that the content creator not alter them accidentally or arbitrarily. </p>
-                    <p>In no way does Web Services claim responsibility or ownership of the content; content creators retain full ownership and responsibility of their page content. Web Services simply assists in the design, the look, and overall feel of how the page presents the content.</p>
-                    <ul>
-                        <li>Databases (Application)</li>
-                        <li>Maps, Locations, Hours (Application)</li>
-                        <li><p>Directory (Application)</p>
-                        </li>
-                        <li><p>Using the Libraries</p>
-                        </li>
-                        <li>Research Tools </li>
-                        <li>Library Help</li>
-                        <li>News, Events, and Exhibitions</li>
-                        <li>About</li>
-                        <li><p>Libraries &amp; Collections</p>
-                        </li>
-                        <li><p>E-Resources (E-Books, E-Journals)</p>
-                        </li>
-                        <li>Reserves</li>
-                        <li>Interlibrary Borrowing</li>
-                        <li>Sanford Media Center</li>
-                        <li>Computers &amp; Software</li>
-                        <li>How Do I… (Ask A Librarian)</li>
-                        <li>Alabama Digital Humanities Center</li>
-                        <li>Print, Copy, Scan </li>
-                        <li>Circulation Policies (Borrow, Renew, Request)</li>
-                        <li><p>Equipment</p>
-                        </li>
-                        <li><p>Floor Maps</p>
-                        </li>
-                        <li>Classes, Workshops, Tours</li>
-                        <li>Practice Presentation Rooms</li>
-                        <li>Social Media Page</li>
-                    </ul>
-                    <h2 id="what-are-the-rules-for-adding-additional-content-">What are the rules for adding additional content?</h2>
-                    <p>Follow the template, use our styles as per the document, or simply let the elements (</p><p>, </p><div>, etc.) style automatically as we have intended.<p></p>
-                        <h2 id="how-do-i-use-our-styles-and-fonts-how-will-the-elements-appear-and-what-does-each-style-look-like-">How do I use our styles and fonts? How will the elements appear, and what does each style look like?</h2>
-                        <p>Please see the Style Elements section of this document</p>
-                        <h2 id="writing-for-the-web">Writing for the Web</h2>
-                        <p>The University Libraries website is not the final destination for users, but rather a tool to help connect users to the relevant resources and services available at the libraries.  Additionally, research has shown that users interact with website content in a very specific way.Important guidelines for writing for the web: </p>
-                        <ul>
-                            <li>Be succinct : write no more than 50% of the text you would have used in a hardcopy publication</li>
-                            <li>Write for scannability : don't require users to read long continuous blocks of text
-                                (<a href="http://www.nngroup.com/articles/be-succinct-writing-for-the-web/">http://www.nngroup.com/articles/be-succinct-writing-for-the-web/</a>)</li>
-                        </ul>
-                        <h3 id="additional-resources-">Additional Resources:</h3>
-                        <ul>
-                            <li><p>Writing for the Web
-                                <a href="http://www.nngroup.com/topic/writing-web/">http://www.nngroup.com/topic/writing-web/</a></p>
-                            </li>
-                            <li><p>Kill the Welcome Mat
-                                <a href="http://www.nngroup.com/articles/blah-blah-text-keep-cut-or-kill/">http://www.nngroup.com/articles/blah-blah-text-keep-cut-or-kill/</a></p>
-                            </li>
-                            <li><p>10 Tips for Good Web Writing
-                                <a href="http://webdesign.about.com/od/writing/a/aa031405.htm">http://webdesign.about.com/od/writing/a/aa031405.htm</a></p>
-                            </li>
-                        </ul>
-                        <h3 id="content">Content</h3>
-                        <ul>
-                            <li>Keep content relevant to topic and goal; your writing should have a goal.</li>
-                            <li>When writing, think of an inverted pyramid - get to the point in the first paragraph, then expand upon it. </li>
-                            <li>One idea per paragraph.</li>
-                            <li>Web pages need to be concise and to-the-point; short, meaty paragraphs are better than long rambling ones. </li>
-                            <li>Use action words.</li>
-                            <li>Tell your readers what to do and avoid the passive voice. Keep the flow of your pages moving.</li>
-                        </ul>
-                        <p><img src="assets/img/pages-flow.jpg" alt="Alt text">
-                            -- Lynda Felder, Peachpit.com</p>
-                        <h3 id="format">Format</h3>
-                        <ul>
-                            <li>Try to use lists instead of paragraphs - lists are easier to scan than paragraphs.  </li>
-                            <li>Try to limit list items to 7 words: studies have shown that people can only reliably remember 7-10 things at a time. More than 7 is occasionally acceptable, depending on context. </li>
-                            <li>Sentences should be as concise as you can make them. Use only the words you need to convey essential information.  </li>
-                            <li>Include internal sub-headings: sub-headings make the text more scannable. Your readers will move to the section of the document that is most useful for them, and internal cues make it easier for them to achieve this.  </li>
-                            <li>Make your links part of the copy: links are another way Web readers scan pages. They stand out from normal text, and provide additional cues as to what the page is about.</li>
-                        </ul>
-                        <h3 id="always">Always</h3>
-                        <ul>
-                            <li>Proofread your work - typos and spelling errors will send people away from your pages. Make sure you proofread everything you post to the Web.</li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </main>
-    </div>
-</div>
-
-<footer>
-
-</footer>
-
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
-<script src="http://cdnjs.cloudflare.com/ajax/libs/holder/2.4.0/holder.js"></script>
-<script>hljs.initHighlightingOnLoad();</script>
+<body>
 
 </body>
 </html>
@@ -7,6 +7,9 @@
 // Variables
 @import "_variables";
 
+// Mixins: Custom
+@import "mixins/link-icon.less";
+
 // Mixins: Utilities
 @import "../../../bower_components/bootstrap/less/mixins/hide-text";
 @import "../../../bower_components/bootstrap/less/mixins/opacity";
@@ -23,7 +26,7 @@
 
 // Mixins: Components
 @import "../../../bower_components/bootstrap/less/mixins/alerts";
-@import "../../../bower_components/bootstrap/less/mixins/buttons";
+@import "_buttons";
 @import "../../../bower_components/bootstrap/less/mixins/panels";
 @import "../../../bower_components/bootstrap/less/mixins/pagination";
 @import "../../../bower_components/bootstrap/less/mixins/list-group";
@@ -47,24 +50,24 @@
 // Reset
 @import "../../../bower_components/bootstrap/less/normalize";
 @import "../../../bower_components/bootstrap/less/print";
-@import "../../../bower_components/bootstrap/less/glyphicons";
+@import "_glyphicons";
 
 // Core CSS
-@import "../../../bower_components/bootstrap/less/scaffolding";
+@import "_scaffolding";
 @import "../../../bower_components/bootstrap/less/type";
 @import "../../../bower_components/bootstrap/less/code";
-@import "../../../bower_components/bootstrap/less/grid";
-@import "../../../bower_components/bootstrap/less/tables";
+@import "_grid";
+@import "_tables";
 @import "../../../bower_components/bootstrap/less/forms";
 @import "../../../bower_components/bootstrap/less/buttons";
 
 // Components
 @import "../../../bower_components/bootstrap/less/component-animations";
-@import "../../../bower_components/bootstrap/less/dropdowns";
+@import "_dropdowns";
 @import "../../../bower_components/bootstrap/less/button-groups";
 @import "../../../bower_components/bootstrap/less/input-groups";
 @import "../../../bower_components/bootstrap/less/navs";
-@import "../../../bower_components/bootstrap/less/navbar";
+@import "_navbar";
 @import "../../../bower_components/bootstrap/less/breadcrumbs";
 @import "../../../bower_components/bootstrap/less/pagination";
 @import "../../../bower_components/bootstrap/less/pager";
@@ -89,6 +92,4 @@
 
 // Utility classes
 @import "../../../bower_components/bootstrap/less/utilities";
-@import "../../../bower_components/bootstrap/less/responsive-utilities";
-
-@import "navbar-ualib";
+@import "../../../bower_components/bootstrap/less/responsive-utilities";
@@ -3,12 +3,18 @@
 // --------------------------------------------------
 
 // Import default Bootstrap buttons. Overrides, custom variables, and docs below.
+@import "../../../bower_components/bootstrap/less/mixins/buttons";
 @import "../../../bower_components/bootstrap/less/buttons";
 
 // Buttons
 //
 // <mark>TODO:</mark> Write out description and link to other mentions of button use in docs
 //
+// Icon: fa-hand-o-up
+//
+// MenuBlurb:
+// Types of buttons available to use on the website
+//
 // Styleguide style.buttons
 
 // Button Tags
 
@@ -0,0 +1,121 @@
+//
+// Dropdowns
+// --------------------------------------------------
+
+// Import default Bootstrap dropdowns. Overrides, custom variables, and docs below.
+@import "../../../bower_components/bootstrap/less/dropdowns";
+
+// Dropdowns
+//
+// <mark>TODO:</mark> dropdown description, etc.
+//
+// Markup:
+//  <div class="dropdown">
+//  <button class="btn btn-default dropdown-toggle"  type="button">
+//    Dropdown
+//  </button>
+//  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
+//    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
+//    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
+//    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
+//    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
+//  </ul>
+//  </div>
+//
+// Icon: fa-caret-square-o-down
+//
+// MenuBlurb:
+// Dropdowns for navigation and forms
+//
+// Styleguide components.dropdowns
+
+.dropdown{
+  .dropdown-toggle {
+    position: relative;
+    padding-right: 30px;
+
+    &::before,
+    &::after {
+      width: 9px;
+      -webkit-transform-origin: 50% 50%;
+      -moz-transform-origin: 50% 50%;
+      -ms-transform-origin: 50% 50%;
+      -o-transform-origin: 50% 50%;
+      transform-origin: 50% 50%;
+      background: #777;
+      -webkit-backface-visibility: hidden;
+      backface-visibility: hidden;
+      -webkit-transition: width 0.3s, -webkit-transform 0.3s;
+      -moz-transition: width 0.3s, -moz-transform 0.3s;
+      transition: width 0.3s, transform 0.3s;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      content: '';
+      position: absolute;
+      top: 50%;
+      margin-top: -1px;
+      display: inline-block;
+      height: 2px;
+    }
+
+    &::before {
+      right: 12px;
+      -webkit-transform: rotate(45deg);
+      -moz-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+      -o-transform: rotate(45deg);
+      transform: rotate(45deg);
+    }
+
+    &::after{
+      right: 7px;
+      -webkit-transform: rotate(-45deg);
+      -moz-transform: rotate(-45deg);
+      -ms-transform: rotate(-45deg);
+      -o-transform: rotate(-45deg);
+      transform: rotate(-45deg);
+    }
+  }
+
+  .dropdown-menu {
+    opacity: 0;
+    border: none;
+    display: block;
+    visibility: hidden;
+    -webkit-transition: opacity  .2s .1s, visibility 0s  .2s;
+    -moz-transition: opacity  .2s .1s, visibility 0s  .2s;
+    transition: opacity  .2s .1s, visibility 0s  .2s;
+  }
+}
+
+.open {
+  .dropdown-toggle{
+    &::before, &::after{
+      width: 14px;
+    }
+    &::before {
+      -webkit-transform: translateX(5px) rotate(-45deg);
+      -moz-transform: translateX(5px) rotate(-45deg);
+      -ms-transform: translateX(5px) rotate(-45deg);
+      -o-transform: translateX(5px) rotate(-45deg);
+      transform: translateX(5px) rotate(-45deg);
+    }
+
+    &::after{
+      -webkit-transform: rotate(45deg);
+      -moz-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+      -o-transform: rotate(45deg);
+      transform: rotate(45deg);
+    }
+  }
+
+  .dropdown-menu{
+    opacity: 1;
+    visibility: visible;
+    -webkit-transition: opacity  .2s 0s, visibility 0s 0s;
+    -moz-transition: opacity  .2s 0s, visibility 0s 0s;
+    transition: opacity  .2s 0s, visibility 0s 0s;
+  }
+}
@@ -1,6 +1,23 @@
 //
-// Glyphicons for Bootstrap and Icons from Font Awesome
+// Iconography
 // -----------------------------------------------------
 
-// Import default Bootstrap glyphicons. Overrides, custom variables, and docs below.
-@import "../../../bower_components/bootstrap/less/glyphicons";
+// Import Fontawesome icons
+// *** Bootstrap Glyphicons are not supported
+@import "../../../bower_components/fontawesome/less/font-awesome";
+
+// Icons
+//
+// Users tend to skim through context, looking for subtle clues and markers to determine the intent of a link or
+// block of text. **Icons** are a great way to make "skimmable" websites. However, to ensure "skimmability", each icon **must**
+// be used in a unique context that defines what that icon means on the website.
+// > Each icon should only represent one thing or idea, otherwise the user may feel disoriented or frustrated when they get an unexpected outcome.
+//
+// <mark>TODO:</mark> Define icons and their use
+//
+// Icon: fa-info-circle
+//
+// MenuBlurb:
+// Available icons and how to use them
+//
+// Styleguide style.icons
@@ -11,6 +11,11 @@
 // from phone to desktop to jumbotron! The grid can support a maximum 12 columns of equal size.
 // But don't worry, you can any number of columns, as long as they don't go over 12!
 //
+// Icon: fa-th
+//
+// MenuBlurb:
+// Make responsive layouts using the grid
+//
 // Styleguide layout.grid
 
 // Grid options
 
@@ -5,18 +5,282 @@
 // Import default Bootstrap navbars. Overrides, custom variables, and docs below.
 @import "../../../bower_components/bootstrap/less/navbar";
 
+// Import Yamm3, allowing megamenus within bootstrap dropdowns
+@import "../../../bower_components/yamm3/yamm/yamm";
 
+// Mega Menu
+//
+// The mega menu should only appear once, as the website's main header navigation. The mega menu dropdowns can
+// support almost any of the website's components: <mark>TODO:</mark> list components appropriate for mega menu. Finish responsive support.
+//
+// Markup:
+//  <nav class="navbar navbar-static-top navbar-mega" role="navigation">
+//    <div class="container-fluid">
+//      <div class="navbar-header">
+//        <button type="button" class="navbar-toggle collapsed">
+//          <span class="sr-only">Toggle navigation</span>
+//          <span class="fa fa-bars"></span>
+//        </button>
+//        <a class="navbar-brand" href="#">
+//          <img src="holder.js/110x75/text:Logo" class="img-responsive" alt="University of Alabama Libraries"/>
+//        </a>
+//      </div>
+//      <div class="collapse navbar-collapse">
+//        <ul class="nav navbar-nav">
+//          <li>
+//            <a href="#">Link</a>
+//          </li>
+//          <li class="dropdown yamm-fw">
+//            <a href="#" class="dropdown-toggle">Dropdown</a>
+//            <ul class="dropdown-menu">
+//              <li>
+//                <div class="yamm-content">
+//                  <div class="row">
+//                    <div class="col-xs-4">
+//                      <a href="#">
+//                        <span class="fa fa-compass"></span>
+//                        <h4>Action</h4>
+//                        <p>An action that does things very action-ably</p>
+//                      </a>
+//                    </div>
+//                    <div class="col-xs-4">
+//                      <a href="#">
+//                        <span class="fa fa-flask"></span>
+//                        <h4>Another Action</h4>
+//                        <p>Another action that also takes action</p>
+//                      </a>
+//                    </div>
+//                    <div class="col-xs-4">
+//                      <a href="#">
+//                        <span class="fa fa-"></span>
+//                        <h4>Links So Gridly</h4>
+//                        <p>Man, all these links & icons work well in a grid</p>
+//                      </a>
+//                    </div>
+//                  </div>
+//                </div>
+//              </li>
+//            </ul>
+//          </li>
+//        </ul>
+//        <ul class="nav navbar-nav navbar-left">
+//          <li>
+//            <a href="#">Left Aligned Navbar</a>
+//          </li>
+//        </ul>
+//        <ul class="nav navbar-nav navbar-right">
+//          <li>
+//            <a href="#">Link</a>
+//          </li>
+//          <li class="dropdown yamm-fw">
+//            <a href="#" class="dropdown-toggle">Dropdown</a>
+//            <ul class="dropdown-menu">
+//              <li>
+//                <div class="yamm-content">
+//                  <div class="row">
+//                    <div class="col-sm-4">
+//                      <div class="mm-heading">
+//                        <span class="fa fa-desktop"></span>
+//                        <h4>List Should Never Stack</h4>
+//                      </div>
+//                      <ul>
+//                        <li><a href="#">Action</a></li>
+//                        <li><a href="#">Another action</a></li>
+//                      </ul>
+//                    </div>
+//                    <div class="col-sm-4">
+//                      <div class="mm-heading">
+//                        <span class="fa fa-puzzle-piece"></span>
+//                        <h4>They Should Split By Columns</h4>
+//                      </div>
+//                      <ul>
+//                        <li><a href="#">Separated</a></li>
+//                        <li><a href="#">Link</a></li>
+//                        <li><a href="#">List</a></li>
+//                      </ul>
+//                    </div>
+//                    <div class="col-sm-4">
+//                      <div class="mm-heading">
+//                        <span class="fa fa-spoon"></span>
+//                        <h4>Like This!</h4>
+//                      </div>
+//                      <ul>
+//                        <li><a href="#">Another</a></li>
+//                        <li><a href="#">Separated</a></li>
+//                        <li><a href="#">Link</a></li>
+//                        <li><a href="#">List</a></li>
+//                      </ul>
+//                    </div>
+//                  </div>
+//                </div>
+//              </li>
+//            </ul>
+//          </li>
+//        </ul>
+//      </div>
+//    </div>
+//  </nav>
+//
+// Icon: th-list
+//
+// MenuBlurb:
+// Megamenu for main website navigation
+//
+// Styleguide components.megamenu
+
+header, .header{
+  height: 80px;
+}
+
+.navbar-mega {
+  .navbar-default;
+  .megamenu();
+}
+
+.navbar-mega-inverse {
+  .navbar-inverse;
+  .megamenu(@gray-lighter, @brand-primary);
+}
+
+.navbar-mega, .navbar-mega-inverse {
+  .yamm;
+}
 
-.navbar-meganav {
-  > .container, >.container-fluid {
-    .logo {
-      > img {
-        display: block;
+.megamenu(@color: @brand-primary, @hover-color: @gray-lighter) {
+  border: none;
+  margin-bottom: 0;
+  padding-left: 15px;
+  padding-right: 15px;
+
+  .navbar-brand {
+    margin-top: 15px;
+  }
+
+  .navbar-nav {
+    > li {
+      &.dropdown > a{
+        padding-right: 40px;
+      }
+
+      > a {
+        font-size: 16px;
+        padding: 30px;
+
+        &:hover,
+        &:focus {
+          &.dropdown-toggle::before,
+          &.dropdown-toggle::after{
+            background-color: @hover-color;
+          }
+        }
+
+        &,
+        &.active{
+          &.dropdown-toggle::before,
+          &.dropdown-toggle::after{
+            background-color: @hover-color;
+          }
+        }
+
+        &.dropdown-toggle::before,
+        &.dropdown-toggle::after {
+          background-color: @color;
+          width: 9px;
+        }
+
+        &.dropdown-toggle::before {
+          right: 20px;
+        }
+
+        &.dropdown-toggle::after{
+          right: 15px;
+        }
+      }
+
+      &.open > a{
+        &::before, &::after{
+          width: 14px;
+        }
       }
     }
 
-    > .meganav-nav {
+    .dropdown-menu{
+      .yamm-content {
+        a {
+          color: @gray-dark;
+          position: relative;
+          display: block;
+          padding: 15px;
+
+          & > h4, & > p {
+            margin-left: 45px;
+          }
+
+          & > h4 {
+            color: @brand-primary;
+            margin-bottom: 0;
+          }
+
+          & > .fa {
+            display: block;
+            position: absolute;
+            top: 30px;
+            font-size: 30px;
+            color: #555;
+          }
+          &:hover,
+          &:focus {
+            background-color: darken(@gray-lighter, 5%);
+            text-decoration: none;
+          }
+        }
+      }
+      .mm-heading{
+        min-height: 45px;
+        display: table;
+        margin-bottom: 5px;
+
+        > .fa, > h4{
+          color: @brand-primary;
+          display: table-cell;
+          vertical-align: middle;
+        }
+
+        > .fa{
+          font-size: 30px;
+          color: @gray-dark;
+        }
+
+        > h4{
+          padding-left: 15px;
+          color: @brand-primary;
+        }
+      }
+
+      ul {
+        list-style-type: none;
+        padding: 0;
+        > li {
+
+          &:last-child {
+            border-bottom: none;
+          }
 
+          > a{
+            color: @gray-dark;
+            position: relative;
+            display: block;
+            padding: 5px;
+            font-size: 16px;
+
+            &:hover,
+            &:focus {
+              background-color: darken(@gray-lighter, 5%);
+              text-decoration: none;
+            }
+          }
+        }
+      }
     }
   }
 }
@@ -5,16 +5,41 @@
 // Import default Bootstrap scaffolding. Overrides, custom variables, and docs below.
 @import "../../../bower_components/bootstrap/less/scaffolding";
 
+// Images
+//
+// ###Responsive images
+// Images that are children of the `.wrap` content container image are automatically made responsive
+//
+// <mark>TODO:</mark> Implement method to override responsive images
+//
+// Icon: fa-image
+//
+// MenuBlurb:
+// Using images in a responsive way
+//
+// Styleguide style.images
+
+img {
+  .img-responsive;
+}
+
 // Links
 //
 // <mark>TODO:</mark> Add details about link appearance and restrictions on text-decorations, etc
 //
+// Icon: fa-link
+//
+// MenuBlurb:
+// Link types and their decoration
+//
 // Styleguide style.links
 
 // External & File Links
 //
 // Links to download files and links to external website are automatically appended with a context icon.
-// This icon lets the user know what to expect when they click the link.
+// This icon lets the user know what to expect when they click the link. You can remove a link icon manually with the `.no-icon` class.
+// Use the `.no-icon` class cautiously - if you're not sure whether to use it, you probably shouldn't.
+//
 // <mark>TODO:</mark> Define when this differs via parent element context (i.e., in menus, footers, etc.)
 //
 // Markup: file-external-links.html
@@ -27,56 +52,27 @@
 // <a href="excel-file-path.doc">Works for old Word(*.doc) extensions</a>
 // <a href="http://codepen.io/ashleynolan/pen/rpjHg">Link to external website</a>
 // <a href="https://secure-site-url">Works with HTTPS too!</a>
+// <a href="https://secure-site-url" class="no-icon">No link icon.</a>
 //
 // Styleguide style.links.file-external
-/* Font Awesome icon codes */
-@icon-ext-link: "\f08e";
-@icon-pdf: "\f1c1";
-@icon-word: "\f1c2";
-@icon-excel: "\f1c3";
-@icon-powerpoint: "\f1c4";
 
-a[href^="http"]:after,
-a[href^="https"]:after{
-  .link-icon-after(@icon-ext-link);
-}
-
-a[href$=".pdf"]:before{
-  .link-icon-before(@icon-pdf);
-}
-a[href$=".doc"]:before,
-a[href$=".docx"]:before{
-  .link-icon-before(@icon-word);
-}
-a[href$=".xls"]:before,
-a[href$=".xlsx"]:before{
-  .link-icon-before(@icon-excel);
-}
+.@{content-container-class}{
+  a:not(.no-icon){
+    &[href^="http"]:after,
+    &[href^="https"]:after{
+      .link-icon-after(@icon-ext-link);
+    }
 
-a{
-  .navbar &:before,
-  .navbar &:after{
-    display: none;
+    &[href$=".pdf"]:before{
+      .link-icon-before(@icon-pdf);
+    }
+    &[href$=".doc"]:before,
+    &[href$=".docx"]:before{
+      .link-icon-before(@icon-word);
+    }
+    &[href$=".xls"]:before,
+    &[href$=".xlsx"]:before{
+      .link-icon-before(@icon-excel);
+    }
   }
-}
-
-.link-icon(@icon){
-  @line-height-reduction: floor(@line-height-computed * .20);
-  content: @icon;
-  font-family: FontAwesome;
-  font-size: .80em;
-  line-height: floor(@line-height-computed - @line-height-reduction);
-  display: inline-block;
-  text-decoration: none;
-}
-
-.link-icon-before(@icon){
-  .link-icon(@icon);
-  font-size: inherit;
-  padding-right: 5px;
-}
-
-.link-icon-after(@icon){
-  .link-icon(@icon);
-  padding-left: 5px;
 }
@@ -1,5 +1,5 @@
 //
-// Variables
+// Tables
 // --------------------------------------------------
 
 // Import default Bootstrap tables. Overrides, custom variables, and docs below.
@@ -26,4 +26,37 @@
 //    </tbody>
 // </table>
 //
-// Styleguide style.tables
+// Icon: fa-tables
+//
+// MenuBlurb:
+// Types of tables and where to use them
+//
+// Styleguide style.tables
+
+table {
+  .table;
+}
+
+// Striped Rows
+//
+// Use `.table-striped` class create a striped table with alternating row color
+// <em>Only</em> use striped tables for long tables.
+//
+// Markup: tables-striped.html
+//
+// CodeTemplate:
+// <table class="table-striped">
+//    <caption>Optional table caption.</caption>
+//    <thead>
+//      <tr>
+//        <th>...</th>
+//      </tr>
+//    </thead>
+//    <tbody>
+//      <tr>
+//        <td>...</td>
+//      </tr>
+//    </tbody>
+// </table>
+//
+// Styleguide style.tables.striped
@@ -14,6 +14,11 @@
 // for slight accents or highlights. [Secondary Colors](#1.2) should only be dominant
 // when used in a child/sub theme.
 //
+// Icon: fa-eyedropper
+//
+// MenuBlurb:
+// Color scheme for the website and how to use them
+//
 // Styleguide style.color
 
 // Primary Colors
@@ -46,6 +51,11 @@
 //
 // Use and availability of fonts
 //
+// Icon: fa-font
+//
+// MenuBlurb:
+// Fonts used for body, heading, and other text elements
+//
 // Styleguide style.typography
 
 // Body Text
@@ -78,17 +88,72 @@
 @headings-font-family:    'Oxygen', sans-serif;
 @headings-font-weight:    400;
 
-//== Iconography
-// -------------------------
-
-//** Load fonts from this directory.
-@icon-font-path:          "../../fonts/";
-
 // Components
 // -------------------------
 
 @border-radius-large:            4px;
 
+//== Navbar
+//
+//##
+
+// Basics of a navbar
+@navbar-height:                    50px;
+@navbar-margin-bottom:             @line-height-computed;
+@navbar-border-radius:             @border-radius-base;
+@navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
+@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
+@navbar-collapse-max-height:       340px;
+
+@navbar-default-color:             #777;
+@navbar-default-bg:                @gray-lighter;
+@navbar-default-border:            darken(@navbar-default-bg, 6.5%);
+
+// Navbar links
+@navbar-default-link-color:                @brand-primary;
+@navbar-default-link-hover-color:          @gray-lighter;
+@navbar-default-link-hover-bg:             @navbar-default-link-color;
+@navbar-default-link-active-color:         @navbar-default-link-hover-color;
+@navbar-default-link-active-bg:            @navbar-default-link-hover-bg;
+@navbar-default-link-disabled-color:       #ccc;
+@navbar-default-link-disabled-bg:          transparent;
+
+// Navbar brand label
+@navbar-default-brand-color:               @navbar-default-link-color;
+@navbar-default-brand-hover-color:         darken(@navbar-default-brand-color, 10%);
+@navbar-default-brand-hover-bg:            transparent;
+
+// Navbar toggle
+@navbar-default-toggle-hover-bg:           #ddd;
+@navbar-default-toggle-icon-bar-bg:        #888;
+@navbar-default-toggle-border-color:       #ddd;
+
+
+// Inverted navbar
+// Reset inverted navbar basics
+@navbar-inverse-color:                      @gray-lighter;
+@navbar-inverse-bg:                         @brand-primary;
+@navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
+
+// Inverted navbar links
+@navbar-inverse-link-color:                 @navbar-inverse-color;
+@navbar-inverse-link-hover-color:           @navbar-inverse-bg;
+@navbar-inverse-link-hover-bg:              @navbar-inverse-link-color;
+@navbar-inverse-link-active-color:          @navbar-inverse-bg;
+@navbar-inverse-link-active-bg:             @navbar-inverse-color;
+@navbar-inverse-link-disabled-color:        #e5d8d8;
+@navbar-inverse-link-disabled-bg:           transparent;
+
+// Inverted navbar brand label
+@navbar-inverse-brand-color:                @navbar-inverse-link-color;
+@navbar-inverse-brand-hover-color:          #fff;
+@navbar-inverse-brand-hover-bg:             transparent;
+
+// Inverted navbar toggle
+@navbar-inverse-toggle-hover-bg:            lighten(@navbar-inverse-bg, 10%);
+@navbar-inverse-toggle-icon-bar-bg:         @gray-lighter;
+@navbar-inverse-toggle-border-color:        transparent;
+
 // Jumbotron
 // -------------------------
 
@@ -103,81 +168,11 @@
 @navbar-meganav-height: 80px;
 @navbar-meganav-height-sm: 50px;
 
-
-// Crimson navbar
-// Reset crimson navbar basics
-@navbar-crimson-color:                      @gray-lighter;
-@navbar-crimson-bg:                         @brand-primary;
-@navbar-crimson-border:                     darken(@navbar-crimson-bg, 10%);
-
-// Crimson navbar links
-@navbar-crimson-link-color:                 @gray-lighter;
-@navbar-crimson-link-hover-color:           @navbar-crimson-bg;
-@navbar-crimson-link-hover-bg:              @navbar-crimson-color;
-@navbar-crimson-link-active-color:          @navbar-crimson-link-hover-color;
-@navbar-crimson-link-active-bg:             @navbar-crimson-link-hover-bg;
-@navbar-crimson-link-disabled-color:        #f2c1c1;
-@navbar-crimson-link-disabled-bg:           transparent;
-
-// Crimson navbar brand label
-@navbar-crimson-brand-color:                @navbar-crimson-link-color;
-@navbar-crimson-brand-hover-color:          #fff;
-@navbar-crimson-brand-hover-bg:             transparent;
-
-// Crimson navbar toggle
-@navbar-crimson-toggle-hover-bg:            #333;
-@navbar-crimson-toggle-icon-bar-bg:         #fff;
-@navbar-crimson-toggle-border-color:        #333;
-
 // File and External Links (iconography and decorations)
 // -------------------------
 
 @icon-ext-link: "\f08e";
 @icon-pdf: "\f1c1";
 @icon-word: "\f1c2";
 @icon-excel: "\f1c3";
-@icon-powerpoint: "\f1c4";
-
-// Standard body links
-
-.@{content-container-class}{
-  > a{
-    &[href^="http"]:after,
-    &[href^="https"]:after{
-      .link-icon-after(@icon-ext-link);
-    }
-
-    &[href$=".pdf"]:before{
-      .link-icon-before(@icon-pdf);
-    }
-    &[href$=".doc"]:before,
-    &[href$=".docx"]:before{
-      .link-icon-before(@icon-word);
-    }
-    &[href$=".xls"]:before,
-    &[href$=".xlsx"]:before{
-      .link-icon-before(@icon-excel);
-    }
-  }
-}
-
-.link-icon(@icon){
-  @line-height-reduction: floor(@line-height-computed * .20);
-  content: @icon;
-  font-family: FontAwesome;
-  font-size: .80em;
-  line-height: floor(@line-height-computed - @line-height-reduction);
-  display: inline-block;
-  text-decoration: none;
-}
-
-.link-icon-before(@icon){
-  .link-icon(@icon);
-  font-size: inherit;
-  padding-right: 5px;
-}
-
-.link-icon-after(@icon){
-  .link-icon(@icon);
-  padding-left: 5px;
-}
+@icon-powerpoint: "\f1c4";
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<!--[if lte IE 6]>            <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
-<!--[if IEMobile 7]>          <html class="no-js iem7" lang="en"> <![endif]-->
-<!--[if (IE 7)&(!IEMobile)]>  <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
-<!--[if IE 8]>                <html class="no-js lt-ie9" lang="en"> <![endif]-->
-<!--[if (gte IE 9)|(gt IEMobile 7)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<!--[if lte IE 6]>            <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en" ng-app="styleguide"> <![endif]-->
+<!--[if IEMobile 7]>          <html class="no-js iem7" lang="en" ng-app="styleguide"> <![endif]-->
+<!--[if (IE 7)&(!IEMobile)]>  <html class="no-js lt-ie9 lt-ie8" lang="en" ng-app="styleguide"> <![endif]-->
+<!--[if IE 8]>                <html class="no-js lt-ie9" lang="en" ng-app="styleguide"> <![endif]-->
+<!--[if (gte IE 9)|(gt IEMobile 7)]><!--> <html class="no-js" lang="en" ng-app="styleguide"> <!--<![endif]-->
 <head>
   <meta charset="utf-8">
   <title>UA Libraries Styleguide</title>
@@ -15,15 +15,16 @@
   <link rel="stylesheet" href="http://yandex.st/highlightjs/8.0/styles/github.min.css">
   <link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500|Oxygen:400,700,300|Open+Sans|EB+Garamond|Lato:300,400' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="https://rawgit.com/ualibweb/roots-ualib/master/assets/css/main.min.css">
+  <link href="../assets/css/vendor.css" rel="stylesheet">
   <link rel="stylesheet" href="public/ualib-styleguide.css">
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
-  <link href="../assets/css/vendor.css" rel="stylesheet">
+  <link href="https://rawgit.com/ualibweb/ui-components/master/dist/ui-components.css" rel="stylesheet">
   {{{styles}}}
 </head>
-<body data-spy="scroll" data-target="#styleguide-nav" data-offset="90">
+<body>
 <header id="header-nav">
-  <nav class="navbar navbar-static-top  navbar-ualib yamm" role="navigation">
-    <div class="container">
+  <nav class="navbar navbar-static-top navbar-mega" role="navigation">
+    <div class="container-fluid">
       <div class="navbar-header">
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
           <span class="sr-only">Toggle navigation</span>
@@ -36,33 +37,39 @@
 
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
         <ul class="nav navbar-nav">
+          {{#eachRoot}}
           <li class="dropdown yamm-fw">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="#">Styleguide</a>
+            <a href="#" class="dropdown-toggle">{{header}}</a>
+
             <ul class="dropdown-menu">
               <li>
-                <div class="yamm-content ualib-mm">
+                <div class="yamm-content">
                   <div class="row">
-                    <ul class="list-unstyled">
-                      {{#eachRoot}}
-                      <li class="col-xs-3 menu-col menu-practice-presentation-rooms"{{#isRoot @root.rootNumber}}  class="active" {{/isRoot}}>
-                        <a href="section-{{reference}}.html">
+                     <ul class="list-unstyled">
+                       {{#eachSection reference}}
+                       {{#ifDepth 2}}
+                      <li class="col-xs-3 menu-col">
+                        <a href="section-{{../../referenceURI}}.html#{{scrollSpyId referenceURI}}">
                           {{#if icon}}
                             <span class="fa {{icon}}"></span>
                           {{/if}}
                           <h4>{{header}}</h4>
-                          {{#if titleslug}}
-                            <p>{{titleslig}}</p>
+                          {{#if menublurb}}
+                            <p>{{menublurb}}</p>
                           {{/if}}
                         </a>
                       </li>
-                      {{/eachRoot}}
+                       {{/ifDepth}}
+                      {{/eachSection}}
                     </ul>
+
                   </div>
                 </div>
               </li>
             </ul>
-          </li>
 
+          </li>
+          {{/eachRoot}}
         </ul>
         <ul class="nav navbar-nav navbar-right">
           <li>
@@ -90,8 +97,8 @@ <h4>{{header}}</h4>
         <div class="jumbotron jumbotron-head">
           <div class="container">
             {{#if homepage}}
-              <h1>Styleguide</h1>
-              <p class="lead">CSS, Components, and Layout details</p>
+              <h1>University Libraries Web Docs</h1>
+              <p class="lead">Writing for the web, Styleguide, Website Components, and Resources.</p>
             {{else}}
               {{#section rootName}}
                 <h1>{{header}}</h1>
@@ -108,19 +115,19 @@ <h1>{{header}}</h1>
             <div class="col-xs-12">{{{homepage}}}</div>
           {{else}}
             <div class="col-sm-2 col-sm-push-10">
-              <nav class="fixie-menu">
+              <nav class="fixie-menu navbar-styleguide">
                 <ul class="nav nav-submenu">
                   {{#eachSection rootName}}
                     {{#ifDepth 2}}
-                      <li>
-                        <a href="#{{scrollSpyId reference}}" du-smooth-scroll du-scrollspy offset="100">
+                      <li data-target="#{{scrollSpyId reference}}" bs-scrollspy>
+                        <a class="menu-item" href="#{{scrollSpyId reference}}">
                           {{header}}
                         </a>
-                        <ul class="nav">
+                        <ul class="nav ">
                           {{#eachSection reference}}
                             {{#ifDepth 3}}
-                              <li>
-                                <a href="#{{scrollSpyId reference}}" du-smooth-scroll du-scrollspy offset="100">
+                              <li data-target="#{{scrollSpyId reference}}" bs-scrollspy>
+                                <a class="submenu-item" href="#{{scrollSpyId reference}}">
                                   {{header}}
                                 </a>
                               </li>
@@ -202,7 +209,55 @@ <h1>{{header}}</h1>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/holder/2.4.0/holder.js"></script>
+<script src="../assets/js/vendor.js"></script>
+<script src="https://rawgit.com/ualibweb/ui-components/master/dist/ui-components-templates.js"></script>
+<script src="https://rawgit.com/ualibweb/ui-components/master/dist/ui-components.js"></script>
 <script>hljs.initHighlightingOnLoad();</script>
+<script>
+  angular.module('styleguide', ['ngAnimate', 'mgcrea.ngStrap', 'ualib.ui'])
+
+          /*.run(['$rootScope', function($rootScope){
+            $rootScope.$on('duScrollspy:becameActive', function(event, elm){
+              /*console.log({
+                ev: event,
+                element: elm
+              })*
+            })
+          }])*/
 
+          .directive('fixieMenu', ['$window', function($window){
+            return {
+              restrict: 'AC',
+              link: function(scope, elm, attrs){
+                var width = elm[0].offsetWidth;
+                var fixed = false;
+                var fixieClass = 'nav-fixed';
+                var offset = 350;
+                angular.element($window).bind('scroll', fixieScroll);
+                function fixieScroll(ev){
+                  if (this.pageYOffset > offset) {
+                    if (!fixed){
+                      console.log(width);
+                      elm.addClass(fixieClass);
+                      elm.css('width', width+'px');
+                      fixed = true;
+                    }
+                  }
+                  else {
+                    if (fixed){
+                      elm.removeClass(fixieClass);
+                      elm.css('width', 'auto');
+                      fixed = false;
+                    }
+                  }
+                  scope.$apply();
+                }
+                scope.$on('$destroy', function(){
+                  angular.element($window).unbind('scroll', fixieScroll);
+                });
+              }
+            }
+          }]);
+</script>
 </body>
 </html>
@@ -1,4 +1,4 @@
-@import "../../less/_variables.less";
+@import "../../less/_variables";
 body{
   position: relative;
 
@@ -19,6 +19,15 @@ hr{
   border-color: #ddd;
 }
 
+.menu-col:nth-child(4n+1) {
+  clear: both;
+}
+
+.section{
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+
 .jumbotron-head{
   background-color: #993333;
   color: #f6f6f6;
@@ -28,56 +37,52 @@ hr{
   }
 }
 
-.navbar-inverse .navbar-brand{
-  color: #f6f6f6;
-}
-
-.navbar-right > li > a{
-  font-size: 18px;
-}
-
-.navbar-styleguide{
-  margin-bottom: 0 !important;
-  backgroung-color: @gray-lighter !important;
-  font-family: @headings-font-family;
-  font-size: 16px;
-
-  & a{
-    color: @brand-primary !important;
-  }
-
-  & .navbar-nav{
-    font-size: .95em;
-  }
-}
-
 
 /* styleguide nav */
 
 .nav-fixed{
-  top: 72px;
+  top: 30px;
   position: fixed;
 }
 
-.styleguide-nav > .nav > li > a{
-  font-family: 'Ubuntu', sans-serif;
-}
-
-.styleguide-nav > .nav > li > .styleguide-nav-3{
-  //padding-left: 30px;
-}
-
-.styleguide-nav > .nav-pills {
+.nav-submenu {
   > li {
     // Active state
-    &.active > a {
-      &,
-      &:hover,
-      &:focus {
+    a {
+      color: @brand-primary;
+    }
+
+    &.active,
+    &:hover,
+    &:focus {
+      > a{
         color: @nav-pills-active-link-hover-color;
-        background-color: @link-color;
+        background-color: @brand-primary;
       }
     }
+
+    &.active > ul{
+      display: block;
+    }
+
+    > ul {
+      display: none;
+      > li{
+
+        > a, a:hover {
+          padding-left: 15px;
+          border-left: 2px solid @body-bg;
+        }
+        &.active,
+        &:hover,
+        &:focus {
+          > a, a:hover, a:active, a:focus {
+            border-color: @gray-light;
+          }
+        }
+      }
+    }
+
   }
 }
 
 
@@ -1,45 +1,3 @@
-.wrap > a[href^="http"]:after,
-.wrap > a[href^="https"]:after {
-  content: "\f08e";
-  font-family: FontAwesome;
-  font-size: .80em;
-  line-height: 16px;
-  display: inline-block;
-  text-decoration: none;
-  padding-left: 5px;
-}
-.wrap > a[href$=".pdf"]:before {
-  content: "\f1c1";
-  font-family: FontAwesome;
-  font-size: .80em;
-  line-height: 16px;
-  display: inline-block;
-  text-decoration: none;
-  font-size: inherit;
-  padding-right: 5px;
-}
-.wrap > a[href$=".doc"]:before,
-.wrap > a[href$=".docx"]:before {
-  content: "\f1c2";
-  font-family: FontAwesome;
-  font-size: .80em;
-  line-height: 16px;
-  display: inline-block;
-  text-decoration: none;
-  font-size: inherit;
-  padding-right: 5px;
-}
-.wrap > a[href$=".xls"]:before,
-.wrap > a[href$=".xlsx"]:before {
-  content: "\f1c3";
-  font-family: FontAwesome;
-  font-size: .80em;
-  line-height: 16px;
-  display: inline-block;
-  text-decoration: none;
-  font-size: inherit;
-  padding-right: 5px;
-}
 body {
   position: relative;
 }
@@ -56,6 +14,13 @@ pre {
 hr {
   border-color: #ddd;
 }
+.menu-col:nth-child(4n+1) {
+  clear: both;
+}
+.section {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
 .jumbotron-head {
   background-color: #993333;
   color: #f6f6f6;
@@ -65,37 +30,44 @@ hr {
 .jumbotron-head .small {
   color: #E5D5D5;
 }
-.navbar-inverse .navbar-brand {
-  color: #f6f6f6;
-}
-.navbar-right > li > a {
-  font-size: 18px;
-}
-.navbar-styleguide {
-  margin-bottom: 0 !important;
-  backgroung-color: #f9f9f9 !important;
-  font-family: 'Oxygen', sans-serif;
-  font-size: 16px;
-}
-.navbar-styleguide a {
-  color: #993333 !important;
-}
-.navbar-styleguide .navbar-nav {
-  font-size: .95em;
-}
 /* styleguide nav */
 .nav-fixed {
-  top: 72px;
+  top: 30px;
   position: fixed;
 }
-.styleguide-nav > .nav > li > a {
-  font-family: 'Ubuntu', sans-serif;
+.nav-submenu > li a {
+  color: #993333;
 }
-.styleguide-nav > .nav-pills > li.active > a,
-.styleguide-nav > .nav-pills > li.active > a:hover,
-.styleguide-nav > .nav-pills > li.active > a:focus {
+.nav-submenu > li.active > a,
+.nav-submenu > li:hover > a,
+.nav-submenu > li:focus > a {
   color: #ffffff;
-  background-color: #428bca;
+  background-color: #993333;
+}
+.nav-submenu > li.active > ul {
+  display: block;
+}
+.nav-submenu > li > ul {
+  display: none;
+}
+.nav-submenu > li > ul > li > a,
+.nav-submenu > li > ul > li a:hover {
+  padding-left: 15px;
+  border-left: 2px solid #ffffff;
+}
+.nav-submenu > li > ul > li.active > a,
+.nav-submenu > li > ul > li:hover > a,
+.nav-submenu > li > ul > li:focus > a,
+.nav-submenu > li > ul > li.active a:hover,
+.nav-submenu > li > ul > li:hover a:hover,
+.nav-submenu > li > ul > li:focus a:hover,
+.nav-submenu > li > ul > li.active a:active,
+.nav-submenu > li > ul > li:hover a:active,
+.nav-submenu > li > ul > li:focus a:active,
+.nav-submenu > li > ul > li.active a:focus,
+.nav-submenu > li > ul > li:hover a:focus,
+.nav-submenu > li > ul > li:focus a:focus {
+  border-color: #777777;
 }
 /* Example and Markup style exceptions */
 .panel-default > .panel-body > .table-responsive {
@@ -439,7 +411,7 @@ footer {
 }
 .navbar-ualib .navbar-collapse,
 .navbar-ualib .navbar-form {
-  border-color: #e7e7e7;
+  border-color: #e8e8e8;
 }
 .navbar-ualib .navbar-nav .dropdown-menu {
   border: 1px solid #f9f9f9;
 
@@ -1,4 +1,4 @@
-@import "../../less/_variables.less";
+@import "../../less/_variables";
 body{
   position: relative;
 
@@ -19,6 +19,15 @@ hr{
   border-color: #ddd;
 }
 
+.menu-col:nth-child(4n+1) {
+  clear: both;
+}
+
+.section{
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+
 .jumbotron-head{
   background-color: #993333;
   color: #f6f6f6;
@@ -28,56 +37,52 @@ hr{
   }
 }
 
-.navbar-inverse .navbar-brand{
-  color: #f6f6f6;
-}
-
-.navbar-right > li > a{
-  font-size: 18px;
-}
-
-.navbar-styleguide{
-  margin-bottom: 0 !important;
-  backgroung-color: @gray-lighter !important;
-  font-family: @headings-font-family;
-  font-size: 16px;
-
-  & a{
-    color: @brand-primary !important;
-  }
-
-  & .navbar-nav{
-    font-size: .95em;
-  }
-}
-
 
 /* styleguide nav */
 
 .nav-fixed{
-  top: 72px;
+  top: 30px;
   position: fixed;
 }
 
-.styleguide-nav > .nav > li > a{
-  font-family: 'Ubuntu', sans-serif;
-}
-
-.styleguide-nav > .nav > li > .styleguide-nav-3{
-  //padding-left: 30px;
-}
-
-.styleguide-nav > .nav-pills {
+.nav-submenu {
   > li {
     // Active state
-    &.active > a {
-      &,
-      &:hover,
-      &:focus {
+    a {
+      color: @brand-primary;
+    }
+
+    &.active,
+    &:hover,
+    &:focus {
+      > a{
         color: @nav-pills-active-link-hover-color;
-        background-color: @link-color;
+        background-color: @brand-primary;
       }
     }
+
+    &.active > ul{
+      display: block;
+    }
+
+    > ul {
+      display: none;
+      > li{
+
+        > a, a:hover {
+          padding-left: 15px;
+          border-left: 2px solid @body-bg;
+        }
+        &.active,
+        &:hover,
+        &:focus {
+          > a, a:hover, a:active, a:focus {
+            border-color: @gray-light;
+          }
+        }
+      }
+    }
+
   }
 }
 
 
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<!--[if lte IE 6]>            <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
-<!--[if IEMobile 7]>          <html class="no-js iem7" lang="en"> <![endif]-->
-<!--[if (IE 7)&(!IEMobile)]>  <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
-<!--[if IE 8]>                <html class="no-js lt-ie9" lang="en"> <![endif]-->
-<!--[if (gte IE 9)|(gt IEMobile 7)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<!--[if lte IE 6]>            <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en" ng-app="styleguide"> <![endif]-->
+<!--[if IEMobile 7]>          <html class="no-js iem7" lang="en" ng-app="styleguide"> <![endif]-->
+<!--[if (IE 7)&(!IEMobile)]>  <html class="no-js lt-ie9 lt-ie8" lang="en" ng-app="styleguide"> <![endif]-->
+<!--[if IE 8]>                <html class="no-js lt-ie9" lang="en" ng-app="styleguide"> <![endif]-->
+<!--[if (gte IE 9)|(gt IEMobile 7)]><!--> <html class="no-js" lang="en" ng-app="styleguide"> <!--<![endif]-->
 <head>
   <meta charset="utf-8">
   <title>UA Libraries Styleguide</title>
@@ -15,15 +15,16 @@
   <link rel="stylesheet" href="http://yandex.st/highlightjs/8.0/styles/github.min.css">
   <link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500|Oxygen:400,700,300|Open+Sans|EB+Garamond|Lato:300,400' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="https://rawgit.com/ualibweb/roots-ualib/master/assets/css/main.min.css">
+  <link href="../assets/css/vendor.css" rel="stylesheet">
   <link rel="stylesheet" href="public/ualib-styleguide.css">
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
-  <link href="../assets/css/vendor.css" rel="stylesheet">
+  <link href="https://rawgit.com/ualibweb/ui-components/master/dist/ui-components.css" rel="stylesheet">
 
 </head>
-<body data-spy="scroll" data-target="#styleguide-nav" data-offset="90">
+<body>
 <header id="header-nav">
-  <nav class="navbar navbar-static-top  navbar-ualib yamm" role="navigation">
-    <div class="container">
+  <nav class="navbar navbar-static-top navbar-mega" role="navigation">
+    <div class="container-fluid">
       <div class="navbar-header">
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
           <span class="sr-only">Toggle navigation</span>
@@ -37,29 +38,130 @@
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
         <ul class="nav navbar-nav">
           <li class="dropdown yamm-fw">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="#">Styleguide</a>
+            <a href="#" class="dropdown-toggle">Components</a>
+
             <ul class="dropdown-menu">
               <li>
-                <div class="yamm-content ualib-mm">
+                <div class="yamm-content">
                   <div class="row">
-                    <ul class="list-unstyled">
-                      <li class="col-xs-3 menu-col menu-practice-presentation-rooms">
-                        <a href="section-style.html">
-                          <h4>Style</h4>
+                     <ul class="list-unstyled">
+                      <li class="col-xs-3 menu-col">
+                        <a href="section-components.html#components-dropdowns">
+                            <span class="fa fa-caret-square-o-down"></span>
+                          <h4>Dropdowns</h4>
+                            <p>Dropdowns for navigation and forms</p>
                         </a>
                       </li>
-                      <li class="col-xs-3 menu-col menu-practice-presentation-rooms">
-                        <a href="section-layout.html">
-                          <h4>Layout</h4>
+                      <li class="col-xs-3 menu-col">
+                        <a href="section-components.html#components-megamenu">
+                            <span class="fa th-list"></span>
+                          <h4>Mega Menu</h4>
+                            <p>Megamenu for main website navigation</p>
+                        </a>
+                      </li>
+                      <li class="col-xs-3 menu-col">
+                        <a href="section-components.html#components-pages_submenus">
+                            <span class="fa fs-columns"></span>
+                          <h4>Pages &amp; Submenus</h4>
+                            <p>Automatically generate submenus using the Page component</p>
                         </a>
                       </li>
                     </ul>
+
                   </div>
                 </div>
               </li>
             </ul>
+
           </li>
+          <li class="dropdown yamm-fw">
+            <a href="#" class="dropdown-toggle">Style</a>
 
+            <ul class="dropdown-menu">
+              <li>
+                <div class="yamm-content">
+                  <div class="row">
+                     <ul class="list-unstyled">
+                      <li class="col-xs-3 menu-col">
+                        <a href="section-style.html#style-buttons">
+                            <span class="fa fa-hand-o-up"></span>
+                          <h4>Buttons</h4>
+                            <p>Types of buttons available to use on the website</p>
+                        </a>
+                      </li>
+                      <li class="col-xs-3 menu-col">
+                        <a href="section-style.html#style-color">
+                            <span class="fa fa-eyedropper"></span>
+                          <h4>Colors</h4>
+                            <p>Color scheme for the website and how to use them</p>
+                        </a>
+                      </li>
+                      <li class="col-xs-3 menu-col">
+                        <a href="section-style.html#style-icons">
+                            <span class="fa fa-info-circle"></span>
+                          <h4>Icons</h4>
+                            <p>Available icons and how to use them</p>
+                        </a>
+                      </li>
+                      <li class="col-xs-3 menu-col">
+                        <a href="section-style.html#style-images">
+                            <span class="fa fa-image"></span>
+                          <h4>Images</h4>
+                            <p>Using images in a responsive way</p>
+                        </a>
+                      </li>
+                      <li class="col-xs-3 menu-col">
+                        <a href="section-style.html#style-links">
+                            <span class="fa fa-link"></span>
+                          <h4>Links</h4>
+                            <p>Link types and their decoration</p>
+                        </a>
+                      </li>
+                      <li class="col-xs-3 menu-col">
+                        <a href="section-style.html#style-tables">
+                            <span class="fa fa-tables"></span>
+                          <h4>Tables</h4>
+                            <p>Types of tables and where to use them</p>
+                        </a>
+                      </li>
+                      <li class="col-xs-3 menu-col">
+                        <a href="section-style.html#style-typography">
+                            <span class="fa fa-font"></span>
+                          <h4>Typography</h4>
+                            <p>Fonts used for body, heading, and other text elements</p>
+                        </a>
+                      </li>
+                    </ul>
+
+                  </div>
+                </div>
+              </li>
+            </ul>
+
+          </li>
+          <li class="dropdown yamm-fw">
+            <a href="#" class="dropdown-toggle">Layout</a>
+
+            <ul class="dropdown-menu">
+              <li>
+                <div class="yamm-content">
+                  <div class="row">
+                     <ul class="list-unstyled">
+                      <li class="col-xs-3 menu-col">
+                        <a href="section-layout.html#layout-grid">
+                            <span class="fa fa-th"></span>
+                          <h4>The Grid</h4>
+                            <p>Make responsive layouts using the grid</p>
+                        </a>
+                      </li>
+                    </ul>
+
+                  </div>
+                </div>
+              </li>
+            </ul>
+
+          </li>
         </ul>
         <ul class="nav navbar-nav navbar-right">
           <li>
@@ -94,20 +196,20 @@ <h1>Layout</h1>
         </div>
         <div class="container">
             <div class="col-sm-2 col-sm-push-10">
-              <nav class="fixie-menu">
+              <nav class="fixie-menu navbar-styleguide">
                 <ul class="nav nav-submenu">
-                      <li>
-                        <a href="#layout-grid" du-smooth-scroll du-scrollspy offset="100">
+                      <li data-target="#layout-grid" bs-scrollspy>
+                        <a class="menu-item" href="#layout-grid">
                           The Grid
                         </a>
-                        <ul class="nav">
-                              <li>
-                                <a href="#layout-grid-creation" du-smooth-scroll du-scrollspy offset="100">
+                        <ul class="nav ">
+                              <li data-target="#layout-grid-creation" bs-scrollspy>
+                                <a class="submenu-item" href="#layout-grid-creation">
                                   Grid creation
                                 </a>
                               </li>
-                              <li>
-                                <a href="#layout-grid-options" du-smooth-scroll du-scrollspy offset="100">
+                              <li data-target="#layout-grid-options" bs-scrollspy>
+                                <a class="submenu-item" href="#layout-grid-options">
                                   Grid options
                                 </a>
                               </li>
@@ -234,7 +336,55 @@ <h3>Grid options</h3>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/holder/2.4.0/holder.js"></script>
+<script src="../assets/js/vendor.js"></script>
+<script src="https://rawgit.com/ualibweb/ui-components/master/dist/ui-components-templates.js"></script>
+<script src="https://rawgit.com/ualibweb/ui-components/master/dist/ui-components.js"></script>
 <script>hljs.initHighlightingOnLoad();</script>
+<script>
+  angular.module('styleguide', ['ngAnimate', 'mgcrea.ngStrap', 'ualib.ui'])
+
+          /*.run(['$rootScope', function($rootScope){
+            $rootScope.$on('duScrollspy:becameActive', function(event, elm){
+              /*console.log({
+                ev: event,
+                element: elm
+              })*
+            })
+          }])*/
 
+          .directive('fixieMenu', ['$window', function($window){
+            return {
+              restrict: 'AC',
+              link: function(scope, elm, attrs){
+                var width = elm[0].offsetWidth;
+                var fixed = false;
+                var fixieClass = 'nav-fixed';
+                var offset = 350;
+                angular.element($window).bind('scroll', fixieScroll);
+                function fixieScroll(ev){
+                  if (this.pageYOffset > offset) {
+                    if (!fixed){
+                      console.log(width);
+                      elm.addClass(fixieClass);
+                      elm.css('width', width+'px');
+                      fixed = true;
+                    }
+                  }
+                  else {
+                    if (fixed){
+                      elm.removeClass(fixieClass);
+                      elm.css('width', 'auto');
+                      fixed = false;
+                    }
+                  }
+                  scope.$apply();
+                }
+                scope.$on('$destroy', function(){
+                  angular.element($window).unbind('scroll', fixieScroll);
+                });
+              }
+            }
+          }]);
+</script>
 </body>
 </html>
Original file line number	Diff line number	Diff line change
`@@ -29,6 +29,10 @@`
`29`	`29`	`"dependencies": {`
`30`	`30`	`"bootstrap": "~3.3.2",`
`31`	`31`	`"fontawesome": "~4.3.0",`
`32`		`- "Yamm3": "https://github.com/geedmo/yamm3/archive/master.zip"`
	`32`	`+ "Yamm3": "https://github.com/geedmo/yamm3/archive/master.zip",`
	`33`	`+ "angular-scroll": "~0.6.5",`
	`34`	`+ "angular-strap": "~2.2.0",`
	`35`	`+ "angular-animate": "~1.3.14",`
	`36`	`+ "roots-ualib": "https://github.com/ualibweb/roots-ualib.git"`
`33`	`37`	`}`
`34`	`38`	`}`
Original file line number	Diff line number	Diff line change
`@@ -28,6 +28,7 @@`
`28`	`28`	`"grunt-contrib-less": "~1.0.0",`
`29`	`29`	`"grunt-contrib-cssmin": "~0.12.2",`
`30`	`30`	`"grunt-contrib-concat": "~0.5.1",`
`31`		`- "grunt-contrib-copy": "~0.8.0"`
	`31`	`+ "grunt-contrib-copy": "~0.8.0",`
	`32`	`+ "grunt-contrib-clean": "~0.6.0"`
`32`	`33`	`}`
`33`	`34`	`}`