diff --git a/src/patterns/molecules/article-teaser/module.js b/_save/module.js similarity index 100% rename from src/patterns/molecules/article-teaser/module.js rename to _save/module.js diff --git a/package.json b/package.json index 16f181e90f2591d40a93c35e0bd6820eb270c4ea..0b38ccd3b1baf7a8e91b10813648f600e2c7534e 100644 --- a/package.json +++ b/package.json @@ -34,13 +34,13 @@ "license": "Apache-2.0", "babel": { "presets": [ - "es2015" + "env" ] }, "private": false, "dependencies": {}, "devDependencies": { - "babel-preset-es2015": "^6.3.13", + "babel-preset-env": "^1.6.0", "babel-register": "^6.7.2", "browser-sync": "^2.10.0", "require-dir": "^0.3.0", diff --git a/src/layouts/default.html b/src/layouts/default.html index 157a055b1f758704a3d3f757219ca82d3b544f33..da5f1e656a9f6ea19bb8f2d632229ae9a0b6f3a6 100644 --- a/src/layouts/default.html +++ b/src/layouts/default.html @@ -17,7 +17,7 @@ -
+
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}} {{> body}} diff --git a/src/pages/htmlelements.html b/src/pages/htmlelements.html index b3056d3dc39fabe7ecf1995e6eac909ea87362da..f0782a65429f4d15965ff02958eb3d5bf3befa51 100644 --- a/src/pages/htmlelements.html +++ b/src/pages/htmlelements.html @@ -81,7 +81,6 @@ layout: default
  • Lorem ipsum...
  • Lorem ipsum...
  • Lorem ipsum...
  • -
    1. Lorem ipsum...
    2. Lorem ipsum...
    3. @@ -92,6 +91,7 @@ layout: default
  • +
  • diff --git a/src/pages/kitchensink.html b/src/pages/kitchensink.html index 8af076d276944552e97a75f2363544cad32a118e..8f952bfb004a3a27a3cccbc7eaec2960e45241e6 100644 --- a/src/pages/kitchensink.html +++ b/src/pages/kitchensink.html @@ -1,4 +1,4 @@ - + - +
    @@ -1662,21 +1662,8 @@ - -
    - - - -
    - + \ No newline at end of file diff --git a/src/pages/typography.html b/src/pages/typography.html new file mode 100644 index 0000000000000000000000000000000000000000..658de357d46acf70495fd6919e1402c53c073011 --- /dev/null +++ b/src/pages/typography.html @@ -0,0 +1,31 @@ +--- +layout: default +--- +
    +
    +

    [Typography - Theme]

    +
    +
    + +
    +
    + +
    +

    H1 headline text example

    + +

    H2 headline text example

    + +

    H3 headline text example

    + +

    H4 headline text example

    + +
    H5 headline text example
    + +
    H6 headline text example
    + +

    paragraph text example

    + +
    + +
    +
    diff --git a/src/patterns/footer.html b/src/patterns/footer.html index 53f6b2d677b8eaf7f9f932597696ac26b140297a..5726c729fbb869ce521040644bd7b57beec8face 100644 --- a/src/patterns/footer.html +++ b/src/patterns/footer.html @@ -1,10 +1,18 @@ - - \ No newline at end of file + \ No newline at end of file diff --git a/src/patterns/molecules/article-excerpt-toggle/changelog.md b/src/patterns/molecules/article-excerpt-toggle/changelog.md new file mode 100644 index 0000000000000000000000000000000000000000..60731a9aa9bae739b988077b6de2a280556baff5 --- /dev/null +++ b/src/patterns/molecules/article-excerpt-toggle/changelog.md @@ -0,0 +1,4 @@ + +### 09/2017 + +- initial release \ No newline at end of file diff --git a/src/patterns/molecules/article-excerpt-toggle/index.html b/src/patterns/molecules/article-excerpt-toggle/index.html new file mode 100644 index 0000000000000000000000000000000000000000..2c15d930cc5ad678732998a6d1f2c51b7555ae5a --- /dev/null +++ b/src/patterns/molecules/article-excerpt-toggle/index.html @@ -0,0 +1,19 @@ +--- +pattern: + name: 'molecule/article-excerpt-toggle' + categories: ['typography','article'] + uses: ['atom/text-headline','molecule/text-excerpt-toggle','atom/link'] +params: + class: ['*'] + headline: ['*'] + content: ['*'] + url: ['*'] +defaults: + headline: 'This is some article headline...' + url: 'https://domain.tld/' +--- +
    + {{PL atom="text-headline" text=headline}} + {{PL molecule="text-excerpt-toggle" text=content}} + {{PL atom="link" href=url label="read more" class="more"}} +
    \ No newline at end of file diff --git a/src/patterns/molecules/article-excerpt-toggle/readme.md b/src/patterns/molecules/article-excerpt-toggle/readme.md new file mode 100644 index 0000000000000000000000000000000000000000..5305edea5e4d022fe150eebaf92ebe618c225c48 --- /dev/null +++ b/src/patterns/molecules/article-excerpt-toggle/readme.md @@ -0,0 +1,20 @@ +--- +title: molecule/article-excerpt-toggle +description: 'an article teaser module with "more" link, text paragraph is toggling to excerpt or full length' +sass: styles.scss +js: +--- + +Here you can either give a rather brief description of your pattern or provide extended usage information. + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti voluptatum inventore magnam, ea quod similique delectus doloremque ratione, accusamus assumenda error hic? Ea consequuntur quibusdam alias asperiores quisquam inventore deleniti. + +## A Markup Example + +```html_example +
    + {{patternlibrary atom="text-headline" text=headline}} + {{patternlibrary molecule="text-excerpt-toggle" text=content}} + {{patternlibrary atom="link" href=url label="read more" class="more"}} +
    +``` \ No newline at end of file diff --git a/src/patterns/molecules/article-excerpt-toggle/styles.scss b/src/patterns/molecules/article-excerpt-toggle/styles.scss new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/src/patterns/molecules/article-teaser/readme.md b/src/patterns/molecules/article-teaser/readme.md index ecbd72ea15222ebca8bfcac4b8a57db14452751f..482aa18beebe76c755988a162ae32886abf3badd 100644 --- a/src/patterns/molecules/article-teaser/readme.md +++ b/src/patterns/molecules/article-teaser/readme.md @@ -2,7 +2,7 @@ title: molecule/article-teaser description: 'an article teaser module with "more" link' sass: styles.scss -js: module.js +js: --- Here you can either give a rather brief description of your pattern or provide extended usage information. diff --git a/src/patterns/molecules/text-excerpt-toggle/changelog.md b/src/patterns/molecules/text-excerpt-toggle/changelog.md new file mode 100644 index 0000000000000000000000000000000000000000..60731a9aa9bae739b988077b6de2a280556baff5 --- /dev/null +++ b/src/patterns/molecules/text-excerpt-toggle/changelog.md @@ -0,0 +1,4 @@ + +### 09/2017 + +- initial release \ No newline at end of file diff --git a/src/patterns/molecules/text-excerpt-toggle/index.html b/src/patterns/molecules/text-excerpt-toggle/index.html new file mode 100644 index 0000000000000000000000000000000000000000..2d49550d8ceb707bc5ddbed11398124989c6ddca --- /dev/null +++ b/src/patterns/molecules/text-excerpt-toggle/index.html @@ -0,0 +1,11 @@ +--- +pattern: + name: 'molecule/text-excerpt-toggle' + categories: ['basic','typography'] + uses: ['atom/text-paragraph','atom/link'] +params: + class: ['*'] +--- +

    {{texthelper 'long'}}

    +show more +show less \ No newline at end of file diff --git a/src/patterns/molecules/text-excerpt-toggle/module.js b/src/patterns/molecules/text-excerpt-toggle/module.js new file mode 100644 index 0000000000000000000000000000000000000000..8fd92ce82cb45d06d7bd145c4ee450242604ad99 --- /dev/null +++ b/src/patterns/molecules/text-excerpt-toggle/module.js @@ -0,0 +1,423 @@ +'use strict'; + +import $ from 'jquery'; + +/** + * TextExcerptToggle module. + * + * @module Siteapp.TextExcerptToggle + * + */ + +class TextExcerptToggle { + + /** + * Creates a new instance of a Siteapp.TextExcerptToggle. + * @class + * @param {jQuery} element - jQuery object to make into a Siteapp.TextExcerptToggle. + * Object should be of the TextExcerptToggle panel, rather than its anchor. + * @param {Object} options - Overrides to the default plugin settings. + */ + constructor(element, options) { + this.$element = element; + this.options = $.extend({}, TextExcerptToggle.defaults, this.$element.data(), options); + this._init(); + + } + + /** + * Initializes the plugin by setting/checking options and attributes, adding helper variables, and saving the anchor. + * @function + * @private + */ + _init() { + var $id = this.$element.attr('id'); + + this.$anchor = $(`[data-toggle="${$id}"]`).length ? $(`[data-toggle="${$id}"]`) : $(`[data-open="${$id}"]`); + this.$anchor.attr({ + 'aria-controls': $id, + 'data-is-focus': false, + 'data-yeti-box': $id, + 'aria-haspopup': true, + 'aria-expanded': false + + }); + + if(this.options.parentClass){ + this.$parent = this.$element.parents('.' + this.options.parentClass); + }else{ + this.$parent = null; + } + this.options.positionClass = this.getPositionClass(); + this.counter = 4; + this.usedPositions = []; + this.$element.attr({ + 'aria-hidden': 'true', + 'data-yeti-box': $id, + 'data-resize': $id, + 'aria-labelledby': this.$anchor[0].id || GetYoDigits(6, 'dd-anchor') + }); + this._events(); + } + + /** + * Helper function to determine current orientation of TextExcerptToggle pane. + * @function + * @returns {String} position - string value of a position class. + */ + getPositionClass() { + var verticalPosition = this.$element[0].className.match(/(top|left|right|bottom)/g); + verticalPosition = verticalPosition ? verticalPosition[0] : ''; + var horizontalPosition = /float-(\S+)/.exec(this.$anchor[0].className); + horizontalPosition = horizontalPosition ? horizontalPosition[1] : ''; + var position = horizontalPosition ? horizontalPosition + ' ' + verticalPosition : verticalPosition; + + return position; + } + + /** + * Adjusts the TextExcerptToggle panes orientation by adding/removing positioning classes. + * @function + * @private + * @param {String} position - position class to remove. + */ + _reposition(position) { + this.usedPositions.push(position ? position : 'bottom'); + //default, try switching to opposite side + if(!position && (this.usedPositions.indexOf('top') < 0)){ + this.$element.addClass('top'); + }else if(position === 'top' && (this.usedPositions.indexOf('bottom') < 0)){ + this.$element.removeClass(position); + }else if(position === 'left' && (this.usedPositions.indexOf('right') < 0)){ + this.$element.removeClass(position) + .addClass('right'); + }else if(position === 'right' && (this.usedPositions.indexOf('left') < 0)){ + this.$element.removeClass(position) + .addClass('left'); + } + + //if default change didn't work, try bottom or left first + else if(!position && (this.usedPositions.indexOf('top') > -1) && (this.usedPositions.indexOf('left') < 0)){ + this.$element.addClass('left'); + }else if(position === 'top' && (this.usedPositions.indexOf('bottom') > -1) && (this.usedPositions.indexOf('left') < 0)){ + this.$element.removeClass(position) + .addClass('left'); + }else if(position === 'left' && (this.usedPositions.indexOf('right') > -1) && (this.usedPositions.indexOf('bottom') < 0)){ + this.$element.removeClass(position); + }else if(position === 'right' && (this.usedPositions.indexOf('left') > -1) && (this.usedPositions.indexOf('bottom') < 0)){ + this.$element.removeClass(position); + } + //if nothing cleared, set to bottom + else{ + this.$element.removeClass(position); + } + this.classChanged = true; + this.counter--; + } + + /** + * Sets the position and orientation of the TextExcerptToggle pane, checks for collisions. + * Recursively calls itself if a collision is detected, with a new position class. + * @function + * @private + */ + _setPosition() { + if(this.$anchor.attr('aria-expanded') === 'false'){ return false; } + var position = this.getPositionClass(), + $eleDims = Box.GetDimensions(this.$element), + $anchorDims = Box.GetDimensions(this.$anchor), + _this = this, + direction = (position === 'left' ? 'left' : ((position === 'right') ? 'left' : 'top')), + param = (direction === 'top') ? 'height' : 'width', + offset = (param === 'height') ? this.options.vOffset : this.options.hOffset; + + if(($eleDims.width >= $eleDims.windowDims.width) || (!this.counter && !Box.ImNotTouchingYou(this.$element, this.$parent))){ + var newWidth = $eleDims.windowDims.width, + parentHOffset = 0; + if(this.$parent){ + var $parentDims = Box.GetDimensions(this.$parent), + parentHOffset = $parentDims.offset.left; + if ($parentDims.width < newWidth){ + newWidth = $parentDims.width; + } + } + + this.$element.offset(Box.GetOffsets(this.$element, this.$anchor, 'center bottom', this.options.vOffset, this.options.hOffset + parentHOffset, true)).css({ + 'width': newWidth - (this.options.hOffset * 2), + 'height': 'auto' + }); + this.classChanged = true; + return false; + } + + this.$element.offset(Box.GetOffsets(this.$element, this.$anchor, position, this.options.vOffset, this.options.hOffset)); + + while(!Box.ImNotTouchingYou(this.$element, this.$parent, true) && this.counter){ + this._reposition(position); + this._setPosition(); + } + } + + /** + * Adds event listeners to the element utilizing the triggers utility library. + * @function + * @private + */ + _events() { + var _this = this; + this.$element.on({ + 'open.zf.trigger': this.open.bind(this), + 'close.zf.trigger': this.close.bind(this), + 'toggle.zf.trigger': this.toggle.bind(this), + 'resizeme.zf.trigger': this._setPosition.bind(this) + }); + + if(this.options.hover){ + this.$anchor.off('mouseenter.zf.textexcerpttoggle mouseleave.zf.textexcerpttoggle') + .on('mouseenter.zf.textexcerpttoggle', function(){ + var bodyData = $('body').data(); + if(typeof(bodyData.whatinput) === 'undefined' || bodyData.whatinput === 'mouse') { + clearTimeout(_this.timeout); + _this.timeout = setTimeout(function(){ + _this.open(); + _this.$anchor.data('hover', true); + }, _this.options.hoverDelay); + } + }).on('mouseleave.zf.textexcerpttoggle', function(){ + clearTimeout(_this.timeout); + _this.timeout = setTimeout(function(){ + _this.close(); + _this.$anchor.data('hover', false); + }, _this.options.hoverDelay); + }); + if(this.options.hoverPane){ + this.$element.off('mouseenter.zf.textexcerpttoggle mouseleave.zf.textexcerpttoggle') + .on('mouseenter.zf.textexcerpttoggle', function(){ + clearTimeout(_this.timeout); + }).on('mouseleave.zf.textexcerpttoggle', function(){ + clearTimeout(_this.timeout); + _this.timeout = setTimeout(function(){ + _this.close(); + _this.$anchor.data('hover', false); + }, _this.options.hoverDelay); + }); + } + } + this.$anchor.add(this.$element).on('keydown.zf.textexcerpttoggle', function(e) { + + var $target = $(this), + visibleFocusableElements = Keyboard.findFocusable(_this.$element); + + Keyboard.handleKey(e, 'TextExcerptToggle', { + open: function() { + if ($target.is(_this.$anchor)) { + _this.open(); + _this.$element.attr('tabindex', -1).focus(); + e.preventDefault(); + } + }, + close: function() { + _this.close(); + _this.$anchor.focus(); + } + }); + }); + } + + /** + * Adds an event handler to the body to close any TextExcerptToggle on a click. + * @function + * @private + */ + _addBodyHandler() { + var $body = $(document.body).not(this.$element), + _this = this; + $body.off('click.zf.textexcerpttoggle') + .on('click.zf.textexcerpttoggle', function(e){ + if(_this.$anchor.is(e.target) || _this.$anchor.find(e.target).length) { + return; + } + if(_this.$element.find(e.target).length) { + return; + } + _this.close(); + $body.off('click.zf.textexcerpttoggle'); + }); + } + + /** + * Opens the TextExcerptToggle pane, and fires a bubbling event to close other TextExcerptToggle. + * @function + * @fires TextExcerptToggle#closeme + * @fires TextExcerptToggle#show + */ + open() { + // var _this = this; + /** + * Fires to close other open TextExcerptToggle, typically when TextExcerptToggle is opening + * @event TextExcerptToggle#closeme + */ + this.$element.trigger('closeme.zf.textexcerpttoggle', this.$element.attr('id')); + this.$anchor.addClass('hover') + .attr({'aria-expanded': true}); + // this.$element/*.show()*/; + this._setPosition(); + this.$element.addClass('is-open') + .attr({'aria-hidden': false}); + + if(this.options.autoFocus){ + var $focusable = Keyboard.findFocusable(this.$element); + if($focusable.length){ + $focusable.eq(0).focus(); + } + } + + if(this.options.closeOnClick){ this._addBodyHandler(); } + + if (this.options.trapFocus) { + Keyboard.trapFocus(this.$element); + } + + /** + * Fires once the TextExcerptToggle is visible. + * @event TextExcerptToggle#show + */ + this.$element.trigger('show.zf.textexcerpttoggle', [this.$element]); + } + + /** + * Closes the open TextExcerptToggle pane. + * @function + * @fires TextExcerptToggle#hide + */ + close() { + if(!this.$element.hasClass('is-open')){ + return false; + } + this.$element.removeClass('is-open') + .attr({'aria-hidden': true}); + + this.$anchor.removeClass('hover') + .attr('aria-expanded', false); + + if(this.classChanged){ + var curPositionClass = this.getPositionClass(); + if(curPositionClass){ + this.$element.removeClass(curPositionClass); + } + this.$element.addClass(this.options.positionClass) + /*.hide()*/.css({height: '', width: ''}); + this.classChanged = false; + this.counter = 4; + this.usedPositions.length = 0; + } + /** + * Fires once the TextExcerptToggle is no longer visible. + * @event TextExcerptToggle#hide + */ + this.$element.trigger('hide.zf.textexcerpttoggle', [this.$element]); + + if (this.options.trapFocus) { + Keyboard.releaseFocus(this.$element); + } + } + + /** + * Toggles the TextExcerptToggle pane's visibility. + * @function + */ + toggle() { + if(this.$element.hasClass('is-open')){ + if(this.$anchor.data('hover')) return; + this.close(); + }else{ + this.open(); + } + } + + /** + * Destroys the TextExcerptToggle. + * @function + */ + _destroy() { + this.$element.off('.zf.trigger').hide(); + this.$anchor.off('.zf.textexcerpttoggle'); + $(document.body).off('click.zf.textexcerpttoggle'); + + } +} + +TextExcerptToggle.defaults = { + /** + * Class that designates bounding container of TextExcerptToggle (default: window) + * @option + * @type {?string} + * @default null + */ + parentClass: null, + /** + * Amount of time to delay opening a submenu on hover event. + * @option + * @type {number} + * @default 250 + */ + hoverDelay: 250, + /** + * Allow submenus to open on hover events + * @option + * @type {boolean} + * @default false + */ + hover: false, + /** + * Don't close TextExcerptToggle when hovering over TextExcerptToggle pane + * @option + * @type {boolean} + * @default false + */ + hoverPane: false, + /** + * Number of pixels between the TextExcerptToggle pane and the triggering element on open. + * @option + * @type {number} + * @default 1 + */ + vOffset: 1, + /** + * Number of pixels between the TextExcerptToggle pane and the triggering element on open. + * @option + * @type {number} + * @default 1 + */ + hOffset: 1, + /** + * Class applied to adjust open position. JS will test and fill this in. + * @option + * @type {string} + * @default '' + */ + positionClass: '', + /** + * Allow the plugin to trap focus to the TextExcerptToggle pane if opened with keyboard commands. + * @option + * @type {boolean} + * @default false + */ + trapFocus: false, + /** + * Allow the plugin to set focus to the first focusable element within the pane, regardless of method of opening. + * @option + * @type {boolean} + * @default false + */ + autoFocus: false, + /** + * Allows a click on the body to close the TextExcerptToggle. + * @option + * @type {boolean} + * @default false + */ + closeOnClick: false +} + +export {TextExcerptToggle}; diff --git a/src/patterns/molecules/text-excerpt-toggle/readme.md b/src/patterns/molecules/text-excerpt-toggle/readme.md new file mode 100644 index 0000000000000000000000000000000000000000..99071ca688fe3b35ae4ef69b8f949128c8b4854d --- /dev/null +++ b/src/patterns/molecules/text-excerpt-toggle/readme.md @@ -0,0 +1,31 @@ +--- +title: 'molecule/text-excerpt-toggle' +description: 'an inline text paragraph, toggling to excerpt or full length' +sass: styles.scss +js: module.js +--- + +Here you can either give a rather brief description of your pattern or provide extended usage information. + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti voluptatum inventore magnam, ea quod similique delectus doloremque ratione, accusamus assumenda error hic? Ea consequuntur quibusdam alias asperiores quisquam inventore deleniti. + +## A Markup Example + +```html_example +

    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti voluptatum + inventore magnam, ea quod similique delectus doloremque ratione, accusamus assumenda + error hic? Ea consequuntur quibusdam alias asperiores quisquam inventore deleniti. + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti voluptatum + inventore magnam, ea quod similique delectus doloremque ratione, accusamus assumenda + error hic? Ea consequuntur quibusdam alias asperiores quisquam inventore deleniti. + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti voluptatum + inventore magnam, ea quod similique delectus doloremque ratione, accusamus assumenda + error hic? Ea consequuntur quibusdam alias asperiores quisquam inventore deleniti. + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti voluptatum + inventore magnam, ea quod similique delectus doloremque ratione, accusamus assumenda + error hic? Ea consequuntur quibusdam alias asperiores quisquam inventore deleniti. +

    +show more +show less +``` \ No newline at end of file diff --git a/src/patterns/molecules/text-excerpt-toggle/styles.scss b/src/patterns/molecules/text-excerpt-toggle/styles.scss new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/src/styleguide/example.md b/src/styleguide/example.md new file mode 100644 index 0000000000000000000000000000000000000000..c02d1204135bc75b48acf4714cee8e9014991c89 --- /dev/null +++ b/src/styleguide/example.md @@ -0,0 +1,355 @@ +# The Grid + +

    Problem: You've got tons of content, each needing different sized vertical columns, and don't know how to quick and easily get it all done. Solution: The awesome grid!

    + +--- + +## Overview + +The grid is built around two key elements: rows and columns. Rows create a max-width and contain the columns, and columns create the final structure. Everything on your page that you don't give a specific structural style to should be within a row or column. + +--- + +## Nesting + +In the Grid you can nest columns down as far as you'd like. Just embed rows inside columns and go from there. Each embedded row can contain up to 12 columns. + +--- + +## How to Use + +Using this framework is easy. Here's how your code will look when you use a series of
    tags to create vertical columns. + +```html +
    +
    ...
    +
    ...
    +
    +``` + +
    +
    4
    +
    4
    +
    4
    +
    +
    +
    3
    +
    6
    +
    3
    +
    +
    +
    2
    +
    8
    +
    2
    +
    +
    +
    3
    +
    9
    +
    +
    +
    4
    +
    8
    +
    +
    +
    5
    +
    7
    +
    +
    +
    6
    +
    6
    +
    + +--- + +## Nesting Rows + +In the Grid you can nest columns down as far as you'd like. Just embed rows inside columns and go from there. Each embedded row can contain up to 12 columns. + +```html +
    +
    8 +
    +
    8 Nested +
    +
    8 Nested Again
    +
    4
    +
    +
    +
    4
    +
    +
    +
    4
    +
    +``` + +
    +
    8 +
    +
    8 Nested +
    +
    8 Nested Again
    +
    4
    +
    +
    +
    4
    +
    +
    +
    4
    +
    + +--- + +## Small Grid + +As you've probably noticed in the examples above, you have access to a small, medium, and large grid. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. You can override your small grid classes by adding medium or large grid classes. + +```html +
    +
    2
    +
    10, last
    +
    +
    +
    3
    +
    9, last
    +
    +``` + +
    +
    2
    +
    10, last
    +
    +
    +
    3
    +
    9, last
    +
    + + + +# Colors + +

    Below you can find the different values we created that support the primary color variable you can change at any time in \_settings.scss

    + +--- + +
    +
    +
    + + #2199e8 +
    +
    +
    +
    + + #3adb76 +
    +
    +
    +
    + + #ffae00 +
    +
    +
    +
    + + #ec5840 +
    +
    +
    +
    + + #0a0a0a +
    +
    +
    + + + +# Typography + +

    This design uses Helvetica Neue for headings and paragraph text.

    + +--- + +## Headings + +Headings are used to denote different sections of content, usually consisting of related paragraphs and other HTML elements. They range from h1 to h6 and should be styled in a clear hierarchy (i.e., largest to smallest) + +--- + +## Paragraphs + +Paragraphs are groups of sentences, each with a lead (first sentence) and transition (last sentence). They are block level elements, meaning they stack vertically when repeated. Use them as such. + +--- + +

    Heading Level 1

    + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio. + +

    Heading Level 2

    + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio. + +

    Heading Level 3

    + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio. + +

    Heading Level 4

    + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio. + +
    Heading Level 5
    + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio. + +
    Heading Level 6
    + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio. + + + +# Buttons + +

    Buttons are tied to an action of some kind, whether that button is on a cheese dispenser or launches the rocket that you're strapped to. On the web, we follow similar conventions.

    + +--- + +## Primary Buttons + +These buttons are primary calls to action and should be used sparingly. Their size can be adjusted with the `.tiny`, `.small`, and `.large` classes. + +```html_example +Large button +Regular button +Small button +Tiny button +``` + +--- + +## Secondary Buttons + +These buttons are used for less important, secondary actions on a page. + +```html_example +Large button +Regular button +Small button +Tiny button +``` + + + +# Forms + +

    Use forms to allow users to interact with the site and provide information to the company.

    + +--- + +## Elements of a Form + +A form should be marked up using its default HTML properties. The ones we make use of include (in hierarchical order): + +- Form +- Label +- Input +- Select +- Text area +- Button + +--- + +## How to Use + +Make forms great and easy to use with the following rules: + +- Wrap checkboxes and radio buttons within labels for larger hit areas, and be sure to set the for, name, and id attributes for all applicable elements. +- Series of checkboxes and radio buttons below within a `
      `. +- Before selecting any set of fields to use for a required input, explore other options (e.g., radio buttons over select lists). + +--- + +## Learn All About Forms + +Check out the [Foundation Docs](http://foundation.zurb.com/sites/docs) to learn about how flexible our forms are for creating different layouts. It works perfectly with the grid to meet all your form needs. + +--- + +## Form Layouts + +Form elements in Foundation are styled based on their type attribute rather than a class. Inputs in Foundation have another major advantage — they are full width by default. That means that inputs will run as wide as the column that contains them. However, you have two options which make these forms extremely versatile: + +- You can size inputs using column sizes, like `.medium-6`, `.small-6`. +- You can create row elements inside your form and use columns for the form, including inputs, labels and more. Rows inside a form inherit some special padding to even up input spacing. + +--- + +## Form Example + +```html_example +
      +
      +
      + + +
      +
      +
      +
      + + +
      +
      +
      + +
      + + .com +
      +
      +
      +
      +
      +
      + + +
      +
      +
      +
      + + + +
      +
      + + + +
      +
      +
      +
      + + +
      +
      +
      +``` + + + +# New Section + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora omnis suscipit id ut laborum recusandae molestias hic aliquid **expedita!** [Non dicta](zurb.com), autem obcaecati error, id ab voluptate unde culpa nulla. + +```html_example +Button +Button +Button +``` diff --git a/src/styleguide/template.html b/src/styleguide/template.html index 07f457e274483e73532022fb552014a929f33ff4..b07551f6352aa291ba783e7cb6c9d28ffc0fa6d8 100644 --- a/src/styleguide/template.html +++ b/src/styleguide/template.html @@ -1,11 +1,19 @@ - - - - - - Style Guide - - + + + + [site-app] + + + + + + + + + + + +