Merge pull request #71 from nikolaswise/master

Document, Add, and Refine

CHANGELOG.md

@@ -3,6 +3,12 @@
 More documentation, new javascript components, working icon tooling prototype.
 
 ### Added
+- inline helper class
+- drawers
+- expanding nav
+- search bar component
+- user login component
+- esri logo componenet
 - Button group support for all button styles
 - `.sign-in` class for sign in + sign out buttons in top nav
 - modals
@@ -11,6 +17,8 @@ More documentation, new javascript components, working icon tooling prototype.
 ### Modified
 - Disabled button style to look less clickable
 - Tweak form styles
+- tighten panel padding
+- nav patterns now responsive
 
 ## v0.0.5
 Forms, table improvements, type changes, in progress icon tooling, more documentation.

data/table_of_contents.yml

@@ -1,4 +1,4 @@
-"get-started":
+get-started:
   title: "Get Started"
   base: "get-started"
   navigation:
@@ -114,6 +114,10 @@ type:
           link: list-numbered
           modifiers:
             - list-numbered
+    - group: "Defaults"
+      pages:
+        - title: "Overview"
+          link: type-defaults
 grid:
   title: "Grid"
   base: grid
@@ -179,6 +183,16 @@ grid:
           link: show-and-hide
         - title: "Left & Right"
           link: left-and-right
+        - title: "Inline"
+          link: inline
+    - group: "Interactive Layout Helpers"
+      pages:
+        - title: "Overview"
+          link: interactive-layout-helpers
+        - title: "Scroll Show & Hide"
+          link: scroll-show-and-hide
+        - title: "Scroll Sticky"
+          link: scroll-sticky
 
 icons:
   title: "Icons"
@@ -329,6 +343,10 @@ components:
           link: form-overview
           modifiers:
             - 'default'
+        - title: "Search Bar"
+          link: search-bar
+          modifiers:
+            - 'default'
         - title: "Text Inputs"
           link: text-inputs
           modifiers:
@@ -352,7 +370,13 @@ components:
         - title: "Radio Buttons"
           link: radio-buttons
           modifiers: true
-
+    - group: "Branding"
+      pages:
+        - title: "Esri Logo"
+          link: esri-logo
+          modifiers:
+            - 'esri-logo'
+            - 'esri-logo-reverse'
 patterns:
   title: "Patterns"
   base: patterns
@@ -366,6 +390,14 @@ patterns:
         - title: "Top Nav"
           link: top-nav
           modifiers: true
+        - title: "User Sign In"
+          link: user-sign-in
+          modifiers:
+            - sign-in
+        - title: "User Nav"
+          link: user-nav
+          modifiers:
+            - user-nav
         - title: "Sub Nav"
           link: sub-nav
           modifiers: true
@@ -377,7 +409,6 @@ patterns:
           modifiers: true
         - title: "Footer"
           link: footer
-          modifiers: true
         - title: "Pagination"
           link: pagination
           modifiers: true
@@ -386,12 +417,22 @@ patterns:
         - title: "Modals"
           link: modals
           modifiers: true
-        - title: "Click Dropdowns"
-          link: click-dropdown
         - title: "Tabs"
           link: tabs
+          modifiers:
+            - 'tabs'
+            - 'tabs-gray'
+            - 'tabs-transparent'
         - title: "Accordions"
           link: accordions
+          modifiers:
+            - default
+        - title: "Drawers"
+          link: drawers
+        - title: "Expanding Nav"
+          link: expanding-nav
+          modifiers:
+            - true
 sass:
   title: "Sass"
   base: sass
@@ -499,3 +540,21 @@ javascript:
         - title: "Browser Feature Detection"
           link: browser-feature-detection
 
+layouts:
+  title: 'Layouts'
+  base: page-layouts
+  navigation:
+    - group: "Building Layouts"
+      pages:
+        - title: "Homepage"
+          link: homepage
+        - title: "Landing Page"
+          link: landing-page
+        - title: "Documentation"
+          link: documentation
+        - title: "Web App"
+          link: web-app
+        - title: "Fullscreen Map App"
+          link: fullscreen-map-app
+        - title: "Embedded Map App"
+          link: embedded-map-app

docs/source/components/_esri-logo.md

@@ -0,0 +1,4 @@
+## Esri Logo
+A minimum buffer zone of clear space is maintained around the logo. Display of the logo should not be less than 78 x 28 pixels. This minimun size and buffer is part of the component, designed to be as simple to use as possible.
+
+Use of the reverse logo should only be on top of dark backgrounds. Neither logo should be used on top of images, or altered in any way.

docs/source/components/_search-bar.md

@@ -0,0 +1 @@
+## Search Bar

docs/source/components/_user-nav.md

@@ -0,0 +1,2 @@
+## User Nav
+Designed to be combined with the [user sign in pattern](#user-sign-in) pattern on sites where a logged in portion is accessible.

docs/source/components/sample-code/_esri-logo.html

@@ -0,0 +1 @@
+<div class="{{class}}"></div>

docs/source/components/sample-code/_search-bar.html

@@ -0,0 +1,8 @@
+<form method="GET" action="/search/">
+  <label>Search Context:
+    <div class="search-bar">
+      <input type='search' placeholder='Search'>
+      <button type="submit" class="search-submit icon-search"></button>
+    </div>
+  </label>
+</form>

docs/source/grid/_inline.md

@@ -0,0 +1,2 @@
+## Inline
+Adds `display: inline-block` to element.

docs/source/grid/_interactive-layout-helpers.md

@@ -0,0 +1,2 @@
+## Interactive Layout Helpers
+JavaScript dependant helper classes that surface simple class-based hooks for common interactive layout patterns.

docs/source/grid/_scroll-show-and-hide.md

@@ -0,0 +1,6 @@
+## Scroll Show and Hide
+Some layouts call for elements to appear or disapear as the user scrolls down the page. An element with the `scroll-show` class will appear when it reaches a point specified by the `data-show-top=x` attribute, appearing when it comes within the given value of the top of the screen.
+
+An element with the `scroll-hide` class will disappear when it reaches a point specified by the `data-hide-top=x` attribute, disappearing when the window scrolls past a given point.
+
+

docs/source/grid/_scroll-sticky.md

@@ -0,0 +1,2 @@
+## Scroll Sticky
+Elements that become position fixed as they reach a certain position in the viewport are refered to as 'sticky'. The `scroll-sticky` class takes an `data-stick-top=x` attribute that defines the point from the top of the window the sticky element will stick.

docs/source/grid/sample-code/_scroll-show-and-hide.html

@@ -0,0 +1,2 @@
+<div class="scroll-show"></div>
+<div class="scroll-hide"></div>

docs/source/grid/sample-code/_scroll-sticky.html

@@ -0,0 +1 @@
+<div class="scroll-sticky"></div>

docs/source/layouts/_layout.html

@@ -20,7 +20,6 @@
     <!-- stylesheets -->
     {% block head %}
       <link rel="stylesheet" href="{{relativePath}}assets/css/all.css">
-      <!-- <link type="text/css" rel="stylesheet" href="http://fast.fonts.net/cssapi/9431e9a5-7a6d-4b5f-82be-4d935972de5a.css"/> -->
     {% endblock %}
 
     <!--[if lt IE 9]>
@@ -31,33 +30,67 @@
   </head>
 
   <body>
+    <!--
+    ┌─────────┐
+    │ Drawers │
+    └─────────┘
+     ↳ http://esri.github.io/calcite-web/patterns/#drawers
+     ↳ patterns → _drawers.md
+    -->
+    <div class="drawer drawer-left js-drawer-toggle" data-drawer="top-nav">
+      <nav class="drawer-nav">
+        <aside class="side-nav">
+          <h2 class="side-nav-title padding-leader-half padding-trailer-half text-large">Esri Patterns</h2>
+          <div class="panel padding-trailer-half padding-leader-half">
+            <label class="trailer-0">
+              <input type='search' placeholder='Search'>
+            </label>
+          </div>
+          <a href="#" class="side-nav-link padding-trailer-half padding-leader-half">Branding</a>
+          <a href="{{relativePath}}" class="side-nav-link padding-trailer-half padding-leader-half">Web</a></a>
+          <a href="#" class="side-nav-link padding-trailer-half padding-leader-half">Mobile</a>
+          <a href="#" class="side-nav-link padding-trailer-half padding-leader-half">Presentations</a>
+        </aside>
+      </nav>
+    </div>
+
     <div class="wrapper">
       <!-- Logged Out Pattern-->
       <header class="top-nav">
-        <div class="container">
-          <a href="#" class="top-nav-title">Esri Design Patterns</a>
+      <div class="container">
+        <div class="tablet-hide">
+          <a href="#" class="top-nav-title">Calcite for Unicorns</a>
           <nav class="top-nav-list">
-            <a class="top-nav-link" href="#">Branding</a>
-            <a class="top-nav-link is-active" href="{{relativePath}}">Web</a>
-            <a class="top-nav-link" href="#">Mobile</a>
-            <a class="top-nav-link" href="#">Presentations</a>
-          </nav>
-          <!-- Site Search Pattern-->
-          <!-- Sign in / User Menu Patterns-->
-          <nav class="sign-in">
-            <a href="#" class="btn btn-small btn-clear">Sign Up</a>
-            <a href="#" class="btn btn-small btn-transparent">Sign In</a>
+            <a class="top-nav-link" href="#">Plains</a>
+            <a class="top-nav-link is-active" href="#">Fields</a>
+            <a class="top-nav-link" href="#">Forests</a>
+            <a class="top-nav-link" href="#">Mountains</a>
           </nav>
         </div>
-      </header>
+        <div class="tablet-show">
+          <a href="#" class="top-nav-title js-drawer-toggle" data-drawer="top-nav">☰ Calcite for Unicorns</a>
+        </div>
+        <nav class="sign-in">
+          <a href="#" class="btn btn-small btn-clear">Sign Up</a>
+          <a href="#" class="btn btn-small btn-transparent">Sign In</a>
+        </nav>
+      </div>
+    </header>
 
       <!-- Secondary Nav Pattern -->
       <header class="sub-nav">
         <div class="container">
-
           <h1 class="sub-nav-title"><a href="{{relativePath}}" class="link-white">Web</a></h1>
           <a href="https://github.com/ArcGIS/calcite-web/releases" class="btn btn-orange btn-arrow right leader-1">Latest Release</a>
-          <nav class="sub-nav-list">
+          <div class="phone-show dropdown column-6 trailer-half js-dropdown-toggle">
+             <a href="#" class="link-white">Calcite Web &darr;</a>
+              <nav class="dropdown-menu js-dropdown sidenav">
+                <a class="side-nav-link is-active" href="{{relativePath}}">Calcite Web</a>
+                <a class="side-nav-link" href="#">Calcite Dojo</a>
+                <a class="side-nav-link" href="#">Calcite Bootstrap</a>
+              </nav>
+          </div>
+          <nav class="sub-nav-list phone-hide">
             <a class="sub-nav-link is-active" href="{{relativePath}}">Calcite Web</a>
             <a class="sub-nav-link" href="#">Calcite Dojo</a>
             <a class="sub-nav-link" href="#">Calcite Bootstrap</a>
@@ -192,13 +225,13 @@ <h6>About Esri</h6>
               </ul>
             </nav>
 
-            <nav class="column-6">
-              <a class="esri-logo-footer" href="http://esri.com">Esri</a>
+            <nav class="column-6 padding-leader-half">
+              <a class="esri-logo" href="http://esri.com"></a>
               <section class="footer-social-nav">
-                <a class="icon-twitter" href="https://twitter.com/Esri/"></a>
-                <a class="icon-facebook" href="https://www.facebook.com/esrigis/"></a>
-                <a class="icon-github" href="http://esri.github.com/"></a>
-                <a class="icon-email" href="http://www.esri.com/about-esri/contact/"></a>
+                <a class="icon-twitter" href="https://twitter.com/Esri/">T</a>
+                <a class="icon-facebook" href="https://www.facebook.com/esrigis/">F</a>
+                <a class="icon-github" href="http://esri.github.com/">G</a>
+                <a class="icon-email" href="http://www.esri.com/about-esri/contact/">E</a>
               </section>
             </nav>
             <div class="column-24">

docs/source/page-layouts/_documentation.md

@@ -0,0 +1,3 @@
+## Documentation
+
+Documentation pages are the technnically focused descriptions of products, services, or other offerings. The documentation layout will be the key content for any product using the Calcite Web sytem, and as such it has been designed with rigor for primary use.

docs/source/page-layouts/_embedded-map-app.md

@@ -0,0 +1,3 @@
+## Embedded Map App
+
+An app that contain maps as an additional feature rather than as a primary focus can use this layout.

docs/source/page-layouts/_fullscreen-map-app.md

@@ -0,0 +1,3 @@
+## Fullscreen Map App
+
+Web applications that have a full screen map as the primary interface and interaction can use this layout for quick scaffolding. Map manipulation and exploration apps are the primary use cases for this layout

docs/source/page-layouts/_homepage.md

@@ -0,0 +1,3 @@
+## Homepage
+
+The homepage layout is desiged for quickly establishing an entry point for a new project that succintly describes the purpose and vision for the project, and enables a high-clickthrough to the content held within. The homepage structures should be augmented with clear and concise copy, and visual assets that illustrate and illuminate the text.

docs/source/page-layouts/_landing-page.md

@@ -0,0 +1,3 @@
+## Landing Page
+
+Landing pages are the marketing-forward descriptions of products, services, or other offerings. The landing page is an extention the homepage, but provides more in-depth overview of the aspect being presented. Again, clear, consice copy and usefull illustrations are a requisite for this layout.

docs/source/page-layouts/_web-app.md

@@ -0,0 +1,3 @@
+## Web App
+
+The Web App layout cam be used for any system that has a post-authorization suite of tools presented to the user. While the app in question will drive the main design for any web-based product, this layout provides a common core of useful archtectecture decisions.

docs/source/page-layouts/index.html

@@ -0,0 +1,7 @@
+---
+title: Calcite Web
+description: Quickly build beautiful, consistent websites with the Calcite Web Framework
+data:
+  - table_of_contents
+section: layouts
+---

docs/source/page-layouts/sample-code/documentation.html

@@ -0,0 +1,3 @@
+<body>
+
+</body>

docs/source/page-layouts/sample-code/embedded-map-app.html

@@ -0,0 +1,3 @@
+<body>
+
+</body>

docs/source/page-layouts/sample-code/fullscreen-map-app.html

@@ -0,0 +1,3 @@
+<body>
+
+</body>

docs/source/page-layouts/sample-code/homepage.html

@@ -0,0 +1,3 @@
+<body>
+
+</body>