Elements: Forms and form controls

README.md

@@ -71,14 +71,14 @@ To view the Pattern Library locally (and to watch for any local changes to conte
 gulp
 ```
 
-This will run the `default` gulp task defined in `gulpfile.js`, which has the following task dependencies: `['styles', pl_styles', 'images', 'pl_images', pl_scripts, jekyll-build' 'watch']`
+This will run the `default` gulp task defined in `gulpfile.js`, which has the following task dependencies: `['styles', pldoc_styles', 'images', 'pldoc_images', scripts, pldoc_scripts, jekyll-build', 'watch']`
 
-* The `styles` and `pl_styles` tasks compile your css files.
-* `images` and `pl_images` copies images from a source folder, performs optimizations, the outputs them into the build folder
+* The `styles` and `pldoc_styles` tasks compile your css files.
+* `images` and `pldoc_images` copies images from a source folder, performs optimizations, the outputs them into the build folder
 * `jekyll-build` and `jekyll-rebuild` run the local jekyll server/preview and re-process any layouts, posts, or templates changed.
 * `watch` will start watching source files and will re-run the appropriate tasks when those files change.
 
-**NOTE: some gulp tasks had to be separated to support both the pattern library 1)elements and 2)reference site UI separately.** Any task prefixed with `pl_*` refers to the reference site UI and not the elements.
+**NOTE: some gulp tasks had to be separated to support both the pattern library 1)elements and 2)reference site UI separately.** Any task prefixed with `pldoc_*` refers to the reference site UI and not the elements.
 
 ### Publishing & Viewing Remotely
 The most up-to-date version of the library can be viewed on our public domain, **http://ux.edx.org**
@@ -111,8 +111,9 @@ When contributing, its assumed that you're already familar with the following:
 ###Pattern Library Elements vs. Reference Site UI
 This repository contains both the code needed to generate pattern library elements as well as a reference site to view/learn about these elements. When and where possible, we've tried to keep the assets needed for both separate by:
 
-* prefixing any reference site UI with `pl-*` class names in our site templates and Sass/CSS;
+* prefixing any reference site UI with `pldoc-*` class names in our site templates and Sass/CSS;
 * containing any reference site UI within the ``_src/pl/`` directory.
+* the main pattern library files are contained within the ``_src/pattern-library`` and never compile on their own, but are rather used in this site's and other application's Sass compile files.
 
 - - -
 

_includes/assets-primary.html

@@ -1,3 +1,2 @@
-<link rel="stylesheet" href="{{ site.baseurl }}public/pl/css/main.css">
-<link rel="stylesheet" href="{{ site.baseurl }}public/pl/css/syntax.css">
-<link rel="stylesheet" href="{{ site.baseurl }}public/css/main-ltr.css">
+<link rel="stylesheet" href="{{ site.baseurl }}public/pldoc/css/main-ltr.css">
+<link rel="stylesheet" href="{{ site.baseurl }}public/pldoc/css/syntax.css">

_includes/assets-secondary.html

@@ -1 +1,2 @@
-<script src="{{ site.baseurl }}public/pl/js/main.min.js"></script>
+<script src="{{ site.baseurl }}public/js/pattern-library.js"></script>
+<script src="{{ site.baseurl }}public/pldoc/js/pldoc.js"></script>

_includes/canvas-assets-primary.html

@@ -0,0 +1,2 @@
+<link rel="stylesheet" href="{{ site.baseurl }}public/pldoc/css/main-ltr.css">
+<link rel="stylesheet" href="{{ site.baseurl }}public/pldoc/css/syntax.css">

_includes/canvas-assets-secondary.html

@@ -0,0 +1,2 @@
+<script src="{{ site.baseurl }}public/js/main.min.js"></script>
+<script src="{{ site.baseurl }}public/pldoc/js/main.min.js"></script>

_includes/footer.html

@@ -1,5 +1,5 @@
-<footer class="pl-footer-site">
-    <div class="pl-footer-site-copyright">
-        <p class="pl-copy">&copy; <time datetime="{{ site.time | date_to_xmlschema }}">{{ site.time | date: '%Y' }}</time> edX. All rights reserved.</p>
+<footer class="pldoc-footer-site">
+    <div class="pldoc-footer-site-copyright">
+        <p class="pldoc-copy copy copy-micro">&copy; <time datetime="{{ site.time | date_to_xmlschema }}">{{ site.time | date: '%Y' }}</time> edX. All rights reserved.</p>
     </div>
 </footer>

_includes/header.html

@@ -1,17 +1,17 @@
-<header class="pl-header-site">
+<header class="pldoc-header-site">
     {% if page.title == "Home" %}
-    <h1 class="pl-header-site-title">
-        <a class="pl-link title-name" href="{{ site.baseurl }}">
+    <h1 class="pldoc-header-site-title">
+        <a class="pldoc-link title-name" href="{{ site.baseurl }}">
             {{ site.title }}
         </a>
-        <span class="title-description">{{ site.tagline }}</span>
+        <span class="title-description copy copy-base">{{ site.tagline }}</span>
     </h1>
     {% else %}
-    <h2 class="pl-header-site-title">
-        <a class="pl-link title-name" href="{{ site.baseurl }}">
+    <h2 class="pldoc-header-site-title">
+        <a class="pldoc-link title-name" href="{{ site.baseurl }}">
             {{ site.title }}
         </a>
-        <span class="title-description">{{ site.tagline }}</span>
+        <span class="title-description copy copy-base">{{ site.tagline }}</span>
     </h2>
     {% endif %}
 </header>

_includes/navigation.html

@@ -1,63 +1,63 @@
-<nav class="pl-nav pl-nav-elements pl-nav-internal" id="pl-nav-elements">
-    <h2 class="pl-heading pl-nav-title">Elements</h2>
+<nav class="pldoc-nav pldoc-nav-elements pldoc-nav-internal" id="pldoc-nav-elements">
+    <h2 class="pldoc-heading pldoc-nav-title hd-6">Elements</h2>
 
     <ul class="nav-list list-elements">
         {% assign sorted_elements_posts = site.categories.elements | sort: 'title' %}
         {% for post in sorted_elements_posts %}
         <li class="nav-list-item">
             {% if page.title == "Home" %}
-            <a class="pl-link" href="#{{post.slug}}">{{post.title}}</a>
+            <a class="pldoc-link" href="#{{post.slug}}">{{post.title}}</a>
             {% else %}
-            <a class="pl-link" href="{{post.url}}">{{post.title}}</a>
+            <a class="pldoc-link" href="{{post.url}}">{{post.title}}</a>
             {% endif %}
         </li>
         {% endfor %}
     </ul>
 </nav>
 
-<nav class="pl-nav pl-nav-documentation pl-nav-external" id="pl-nav-documentation">
-    <h2 class="pl-heading pl-nav-title">Documentation</h2>
-    <ul class="pl-list nav-list list-styleguides">
+<nav class="pldoc-nav pldoc-nav-documentation pldoc-nav-external" id="pldoc-nav-documentation">
+    <h2 class="pldoc-heading pldoc-nav-title hd-6">Documentation</h2>
+    <ul class="pldoc-list nav-list list-styleguides">
         <li class="nav-list-item">
-            <a class="pl-link" rel="external" href="https://github.com/edx/ux-pattern-library/wiki/Styleguide:-General">
-                <span class="pl-icon" aria-hidden="true">&#65514;</span>
+            <a class="pldoc-link" rel="external" href="https://github.com/edx/ux-pattern-library/wiki/Styleguide:-General">
+                <span class="pldoc-icon" aria-hidden="true">&#65514;</span>
                 General Styleguide
             </a>
         </li>
         <li class="nav-list-item">
-            <a class="pl-link" rel="external" href="https://github.com/edx/ux-pattern-library/wiki/Styleguide:-HTML">
-                <span class="pl-icon" aria-hidden="true">&#65514;</span>
+            <a class="pldoc-link" rel="external" href="https://github.com/edx/ux-pattern-library/wiki/Styleguide:-HTML">
+                <span class="pldoc-icon" aria-hidden="true">&#65514;</span>
                 HTMLS Styleguide
             </a>
         </li>
         <li class="nav-list-item">
-            <a class="pl-link" rel="external" href="https://github.com/edx/ux-pattern-library/wiki/Styleguide:-Sass-&-CSS">
-                <span class="pl-icon" aria-hidden="true">&#65514;</span>
+            <a class="pldoc-link" rel="external" href="https://github.com/edx/ux-pattern-library/wiki/Styleguide:-Sass-&-CSS">
+                <span class="pldoc-icon" aria-hidden="true">&#65514;</span>
                 Sass &amp; CSS Styleguide
             </a>
         </li>
         <li class="nav-list-item">
-            <a class="pl-link" rel="external" href="https://github.com/edx/ux-pattern-library/wiki/Styleguide:-Accessibility">
-                <span class="pl-icon" aria-hidden="true">&#65514;</span>
+            <a class="pldoc-link" rel="external" href="https://github.com/edx/ux-pattern-library/wiki/Styleguide:-Accessibility">
+                <span class="pldoc-icon" aria-hidden="true">&#65514;</span>
                 Accessibility Styleguide
             </a>
         </li>
     </ul>
 </nav>
 
-<nav class="pl-nav pl-nav-project pl-nav-external" id="pl-nav-project">
-    <h2 class="pl-heading pl-nav-title">About This Project</h2>
+<nav class="pldoc-nav pldoc-nav-project pldoc-nav-external" id="pldoc-nav-project">
+    <h2 class="pldoc-heading pldoc-nav-title hd-6">About This Project</h2>
 
     <ul class="nav-list list-project">
         <li class="nav-list-item">
-            <a class="pl-link" rel="external" href="https://github.com/edx/ux-pattern-library/">
-                <span class="pl-icon" aria-hidden="true">&#65514;</span>
+            <a class="pldoc-link" rel="external" href="https://github.com/edx/ux-pattern-library/">
+                <span class="pldoc-icon" aria-hidden="true">&#65514;</span>
                 View on Github
             </a>
         </li>
         <li class="nav-list-item">
-            <a class="pl-link" rel="external" href="https://openedx.atlassian.net/browse/UX-1396">
-                <span class="pl-icon" aria-hidden="true">&#65514;</span>
+            <a class="pldoc-link" rel="external" href="https://openedx.atlassian.net/browse/UX-1396">
+                <span class="pldoc-icon" aria-hidden="true">&#65514;</span>
                 Project Planning
             </a>
         </li>

_layouts/default.html

@@ -3,26 +3,26 @@
 
 {% include head.html %}
 
-<body class="pl view-{{ page.viewclass }}">
-    <nav class="pl-nav-skip pl-sr">
-        <h2 class="pl-nav-skip-title">Skip to:</h2>
-        <a class="pl-action-skip" href="#content-main">this page's main content</a>
-        <a class="pl-action-skip" href="#nav-patterns">list of edX patterns</a>
-        <a class="pl-action-skip" href="#nav-documentation">list of edX documentation</a>
+<body class="pldoc view-{{ page.viewclass }}">
+    <nav class="pldoc-nav-skip sr-only">
+        <h2 class="pldoc-nav-skip-title">Skip to:</h2>
+        <a class="pldoc-action-skip" href="#content-main">this page's main content</a>
+        <a class="pldoc-action-skip" href="#nav-patterns">list of edX patterns</a>
+        <a class="pldoc-action-skip" href="#nav-documentation">list of edX documentation</a>
     </nav>
 
-    <hr class="pl-divider pl-sr">
+    <hr class="pldoc-divider sr-only">
 
-    <div class="pl-wrapper-view">
-        <div class="pl-wrapper-content" id="content-top">
-            <div class="pl-wrapper-content-supplemental">
+    <div class="pldoc-wrapper-view">
+        <div class="pldoc-wrapper-content" id="content-top">
+            <div class="pldoc-wrapper-content-supplemental">
                 {% include sidebar.html %}
             </div>
 
-            <hr class="pl-divider pl-sr">
+            <hr class="pldoc-divider sr-only">
 
-            <div class="pl-wrapper-content-main">
-                <main class="pl-content pl-content-main" id="content-main">
+            <div class="pldoc-wrapper-content-main">
+                <main class="pldoc-content pldoc-content-main" id="content-main">
                     {{ content }}
                 </main>
             </div>

_layouts/documentation.html

@@ -4,15 +4,15 @@
 viewclass:  documentation
 ---
 
-<div class="pl-wrapper-documentation">
-    <article class="pl-documentation documentation-{{ page.slug }}">
-        <h1 class="pl-heading pl-documentation-title">{{ page.title }}</h1>
+<div class="pldoc-wrapper-documentation">
+    <article class="pldoc-documentation documentation-{{ page.slug }}">
+        <h1 class="pldoc-heading pldoc-documentation-title">{{ page.title }}</h1>
 
-        <div class="pl-documentation-copy">
+        <div class="pldoc-documentation-copy">
             {{ content }}
         </div>
 
-        <div class="pl-documentation-meta">
+        <div class="pldoc-documentation-meta">
 
         </div>
     </article>

_layouts/element.html

@@ -4,63 +4,73 @@
 viewclass:  element
 ---
 
-<div class="pl-wrapper-element">
-    <article class="pl-element pl-element-{{ page.slug }}">
-        <header class="pl-element-header">
-            <h1 class="pl-heading pl-element-title">{{ page.title }}</h1>
+<div class="pldoc-wrapper-element">
+    <article class="pldoc-element pldoc-element-{{ page.slug }}">
+        <header class="pldoc-element-header">
+            <h1 class="pldoc-heading pldoc-element-title hd-4">{{ page.title }}</h1>
 
-            <ul class="pl-list pl-element-meta">
+            <ul class="pldoc-list pldoc-element-meta copy copy-micro de-emphasized">
                 <li class="meta meta-updated">
-                    <span class="pl-element-meta-updated-label">Last updated on </span>
-                    <time class="pl-element-meta-updated-value" datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%-m/%-d/%Y" }}</time>
+                    <span class="pldoc-element-meta-updated-label">Last updated on </span>
+                    <time class="pldoc-element-meta-updated-value" datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%-m/%-d/%Y" }}</time>
                 </li>
             </ul>
         </header>
 
-        <div class="pl-element-info">
-            <p>{{page.info}}</p>
+        <div class="pldoc-element-info">
+            <p class="copy copy-base">{{page.info}}</p>
         </div>
 
-        <div class="pl-tab-wrapper">
+        <div class="pldoc-tab-wrapper">
             {% if page.tags contains "pattern" %}
-            <ul class="pl-tab-labels pl-list pl-element-navigation">
-                <li class="pl-tab-label">
-                    <a class="pl-link is-active" href="#{{page.slug}}-preview">Preview</a>
+            <ul class="pldoc-tab-labels pldoc-list pldoc-element-navigation">
+                <li class="pldoc-tab-label">
+                    <a class="pldoc-link pldoc-link-preview is-active" href="#{{page.slug}}-preview">Preview</a>
                 </li>
-                <li class="pl-tab-label">
-                    <a class="pl-link" href="#{{page.slug}}-markup">Markup</a>
+                <li class="pldoc-tab-label">
+                    <a class="pldoc-link pldoc-link-markup" href="#{{page.slug}}-markup">Markup</a>
                 </li>
-                <li class="pl-tab-label">
-                    <a class="pl-link" href="#{{page.slug}}-styling">Styling</a>
+                <li class="pldoc-tab-label">
+                    <a class="pldoc-link pldoc-link-styling" href="#{{page.slug}}-styling">Styling</a>
                 </li>
             </ul>
             {% endif %}
 
-            <div class="pl-tabs">
-                <div class="pl-tab pl-element-preview is-active" id="{{page.slug}}-preview">
-                    <h2 class="pl-heading pl-tab-heading pl-element-preview-title">{{page.title}} Preview</h2>
+            <div class="pldoc-tabs">
+                <div class="pldoc-tab pldoc-element-preview is-active" id="{{page.slug}}-preview">
+                    <h2 class="pldoc-heading pldoc-tab-heading pldoc-element-preview-title">{{page.title}} Preview</h2>
+
+                    <div class="pldoc-tab-content">
+                        {% if page.tags contains "icons" %}
+                        <div class="pldoc-settings">
+                            <div class="pldoc-setting pldoc-setting-sizer">
+                                <label for="iconFontSlider" class="is-hidden">Drag to resize icons</label>
+                                <input id="iconFontSlider" type="range" min="12" max="144" step="12" value="24" role="slider" aria-min="12" aria-max="144" aria-now="24">
+                                <input type="text" id="iconFontSliderValue" size="3" value="24" readonly="true">
+                            </div>
+                        </div>
+                        {% endif %}
 
-                    <div class="pl-tab-content">
                         {{page.content}}
                     </div>
                 </div>
 
                 {% if page.tags contains "pattern" %}
-                <div class="pl-tab pl-element-markup is-hidden" id="{{page.slug}}-markup">
-                    <h2 class="pl-heading pl-tab-heading pl-element-markup-title">{{page.title}} Markup</h2>
+                <div class="pldoc-tab pldoc-element-markup is-hidden" id="{{page.slug}}-markup">
+                    <h2 class="pldoc-heading pldoc-tab-heading pldoc-element-markup-title">{{page.title}} Markup</h2>
 
-                    <div class="pl-tab-content">
+                    <div class="pldoc-tab-content">
                         {% highlight html %}
                         {{page.content}}
                         {% endhighlight %}
                     </div>
                 </div>
 
-                <div class="pl-tab pl-element-styling is-hidden" id="{{page.slug}}-styling">
-                    <h2 class="pl-heading pl-tab-heading pl-element-style-title">{{page.title}} Style</h2>
+                <div class="pldoc-tab pldoc-element-styling is-hidden" id="{{page.slug}}-styling">
+                    <h2 class="pldoc-heading pldoc-tab-heading pldoc-element-style-title">{{page.title}} Style</h2>
 
-                    <div class="pl-tab-content">
-                        <p>You can find <a class="pl-link" href="{{site.github.path_scss}}{{page.scssurl}}">the original source of the CSS as SCSS</a> in this project's repo.</p>
+                    <div class="pldoc-tab-content">
+                        <p class="copy copy-base">You can find <a class="pldoc-link" href="{{site.github.path_scss}}{{page.scssurl}}">the original source of the CSS as SCSS</a> in this project's repo.</p>
                     </div>
                 </div>
             </div>

_layouts/page.html

@@ -3,15 +3,15 @@
 viewclass:  page
 ---
 
-<div class="pl-wrapper-page">
-    <article class="pl-page pl-page-{{ page.slug }}">
-        <h1 class="pl-heading pl-page-title">{{ page.title }}</h1>
+<div class="pldoc-wrapper-page">
+    <article class="pldoc-page pldoc-page-{{ page.slug }}">
+        <h1 class="pldoc-heading pldoc-page-title">{{ page.title }}</h1>
 
-        <div class="pl-page-copy">
+        <div class="pldoc-page-copy">
             {{ content }}
         </div>
 
-        <div class="pl-page-meta">
+        <div class="pldoc-page-meta">
 
         </div>
     </article>