From c7977233b619f60e95d1255a00a529d83a292b80 Mon Sep 17 00:00:00 2001 From: Oriol Torrent Florensa Date: Fri, 9 Jun 2017 17:08:00 +0200 Subject: [PATCH 1/7] New layout and design for Estatico --- helpers/handlebars.js | 4 +- source/data/default.data.js | 3 +- source/data/tree.data.js | 45 + source/index.data.js | 37 +- source/index.hbs | 68 +- source/index.md | 69 ++ source/preview/assets/css/main.scss | 817 +++++++++++++----- source/preview/layouts/layout.hbs | 97 ++- source/preview/layouts/module.hbs | 151 ++-- source/preview/partials/code.hbs | 20 +- source/preview/partials/footer.hbs | 41 + source/preview/partials/tree.hbs | 67 ++ source/preview/styleguide/colors.hbs | 19 +- source/preview/styleguide/elements.data.js | 2 +- source/preview/styleguide/elements.hbs | 30 +- .../preview/styleguide/elements/address.hbs | 6 +- .../styleguide/elements/blockquote.hbs | 6 +- source/preview/styleguide/elements/figure.hbs | 6 +- .../preview/styleguide/elements/headings.hbs | 6 +- source/preview/styleguide/elements/lists.hbs | 12 +- source/preview/styleguide/elements/media.hbs | 22 +- .../styleguide/elements/preformatted_text.hbs | 10 +- source/preview/styleguide/elements/tables.hbs | 10 +- .../styleguide/elements/text_elements.hbs | 44 +- .../styleguide/elements/text_paragraph.hbs | 6 +- source/preview/styleguide/forms.hbs | 438 +++++----- source/preview/styleguide/icons.data.js | 2 +- source/preview/styleguide/icons.hbs | 18 +- source/preview/styleguide/webfonts.hbs | 83 +- 29 files changed, 1363 insertions(+), 776 deletions(-) create mode 100644 source/data/tree.data.js create mode 100644 source/index.md create mode 100644 source/preview/partials/footer.hbs create mode 100644 source/preview/partials/tree.hbs diff --git a/helpers/handlebars.js b/helpers/handlebars.js index 4a986604..8bd4524e 100644 --- a/helpers/handlebars.js +++ b/helpers/handlebars.js @@ -92,13 +92,13 @@ helpers.dynamicPartial = function(name, partialData, options) { }; // Module preview -helpers.hasVariants = function(variants, options) { +/*helpers.hasVariants = function(variants, options) { if (Object.keys(variants).length > 1) { return options.fn(this); } else { return options.inverse(this); } -}; +};*/ // Register helpers Handlebars.registerHelper(helpers); diff --git a/source/data/default.data.js b/source/data/default.data.js index 7c396206..c90a571e 100644 --- a/source/data/default.data.js +++ b/source/data/default.data.js @@ -1,14 +1,15 @@ 'use strict'; var util = require('gulp-util'), + tree = require('./tree.data.js'), data = { meta: { project: 'Estático' }, env: util.env, + tree: tree, props: { svgSprites: JSON.stringify([ - // Disabled since there are no icons by default // '/assets/media/svg/base.svg' ]) diff --git a/source/data/tree.data.js b/source/data/tree.data.js new file mode 100644 index 00000000..b5e45f5d --- /dev/null +++ b/source/data/tree.data.js @@ -0,0 +1,45 @@ +'use strict'; + +var _ = require('lodash'), + dataHelper = require('../../helpers/data.js'), + path = require('path'), + + transform = function(data, filePath) { + const previewUrl = '/' + path.relative('./source/', filePath).replace('.data.js', '.html'); + + return _.merge(data, { + meta: { + previewUrl: previewUrl, + documentation: dataHelper.getDocumentation('../index.md') + } + }); + }, + + data = { + pages: dataHelper.getDataGlob('./source/pages/**/*.data.js', transform), + demoPages: dataHelper.getDataGlob('./source/demo/pages/**/*.data.js', transform), + modules: dataHelper.getDataGlob('./source/modules/**/*.data.js', transform), + demoModules: dataHelper.getDataGlob('./source/demo/modules/**/*.data.js', transform), + styleguide: dataHelper.getDataGlob('./source/preview/styleguide/*.data.js', transform) + }; + +// console.log('pages =>', data.pages); + + +data.pages = _.sortBy(data.pages, function(item) { + return item.meta.title; +}).concat(_.sortBy(data.demoPages, function(item) { + return item.meta.title; +})); + +data.modules = _.sortBy(data.modules, function(item) { + return item.meta.title; +}).concat(_.sortBy(data.demoModules, function(item) { + return item.meta.title; +})); + +data.styleguide = _.sortBy(data.styleguide, function(item) { + return item.meta.title; +}); + +module.exports = data; diff --git a/source/index.data.js b/source/index.data.js index 35499eac..b2d8949a 100644 --- a/source/index.data.js +++ b/source/index.data.js @@ -4,41 +4,12 @@ var _ = require('lodash'), requireNew = require('require-new'), dataHelper = require('../helpers/data.js'), defaultData = requireNew('./data/default.data.js'), - path = require('path'), - transform = function(data, filePath) { - var previewUrl = path.relative('./source/', filePath).replace('.data.js', '.html'); - - data = _.merge(data, { - meta: { - previewUrl: previewUrl - } - }); - - return data; - }, data = _.merge(defaultData, { - pages: dataHelper.getDataGlob('./source/pages/**/*.data.js', transform), - demoPages: dataHelper.getDataGlob('./source/demo/pages/**/*.data.js', transform), - modules: dataHelper.getDataGlob('./source/modules/**/*.data.js', transform), - demoModules: dataHelper.getDataGlob('./source/demo/modules/**/*.data.js', transform), - styleguide: dataHelper.getDataGlob('./source/preview/styleguide/*.data.js', transform) + meta: { + documentation: dataHelper.getDocumentation('index.md') + }, + additionalLayoutClasses: 'sg--home' }); -data.pages = _.sortBy(data.pages, function(item) { - return item.meta.title; -}).concat(_.sortBy(data.demoPages, function(item) { - return item.meta.title; -})); - -data.modules = _.sortBy(data.modules, function(item) { - return item.meta.title; -}).concat(_.sortBy(data.demoModules, function(item) { - return item.meta.title; -})); - -data.styleguide = _.sortBy(data.styleguide, function(item) { - return item.meta.title; -}); - module.exports = data; diff --git a/source/index.hbs b/source/index.hbs index c7936c24..837cb04a 100644 --- a/source/index.hbs +++ b/source/index.hbs @@ -1,69 +1,11 @@ {{#extend "preview/layouts/layout"}} {{#content "content"}} -
- {{#if pages}} -
-

Pages

+

+ {{meta.project}}{{#if meta.title}} / {{meta.title}}{{/if}} +

-
    - {{#each pages}} - {{#unless meta.hideFromListing}} -
  • - {{meta.title}} - {{#if meta.jira}} - ( - {{meta.jira}} - ) - {{/if}} - {{#if meta.feature}} — {{meta.feature}}{{/if}} -
    • - {{/unless}} - {{/each}} -
-
- {{/if}} - - {{#if modules}} -
-

Modules

- -
    - {{#each modules}} - {{#unless meta.hideFromListing}} -
  • - - {{meta.title}} - - {{#if meta.jira}} - ( - {{meta.jira}} - ) - {{/if}} - {{#if meta.feature}} — {{meta.feature}}{{/if}} -
    • - {{/unless}} - {{/each}} -
-
- {{/if}} - - {{#if styleguide}} -
-

Styleguide

- -
    - {{#each styleguide}} - {{#unless meta.hideFromListing}} -
  • - - {{meta.title}} - -
    • - {{/unless}} - {{/each}} -
-
- {{/if}} +
+ {{{meta.documentation}}}
{{/content}} {{/extend}} diff --git a/source/index.md b/source/index.md new file mode 100644 index 00000000..7a3d273a --- /dev/null +++ b/source/index.md @@ -0,0 +1,69 @@ + + +> Estático is an open source static build system created with love at *[Unic AG](https://unic.com)* and crafted together with the community with the purpose of creating static and modular sites, systems, styleguides and/or design systems. diff --git a/source/preview/assets/css/main.scss b/source/preview/assets/css/main.scss index 720e2131..22eb70b4 100644 --- a/source/preview/assets/css/main.scss +++ b/source/preview/assets/css/main.scss @@ -27,14 +27,27 @@ $sg_colorGray: #999; $sg_colorBlack: #000; $sg_colorUnicGreen: #a4c400; $sg_colorWarning: #c30; +$sg_colorLightBlue: #5876a3; // Transitions $sg_defaultTransitionProperty: all; -$sg_defaultTransitionDuration: 0.2s; +$sg_defaultTransitionDuration: 0.3s; $sg_defaultTransitionTimingFunction: ease-in-out; $sg_defaultTransitionDelay: 0s; $sg_defaultTransition: $sg_defaultTransitionProperty $sg_defaultTransitionDuration $sg_defaultTransitionTimingFunction $sg_defaultTransitionDelay; +// Sizes +$sg_sizeIconsFooter: 30px; +$sg_sizeHeightFooter: 0; +$sg_sizeSpacingSmall: 20px; +$sg_sizeSpacingMedium: 40px; + +$sg_sizeTreeWidthSmall: 80%; +$sg_sizeTreeWidthMedium: 25%; + +$sg_sizeTopSpacing: 8px; + + // Preview: mixins @@ -55,153 +68,584 @@ $sg_defaultTransition: $sg_defaultTransitionProperty $sg_defaultTransitionDurati } } +@mixin sgPanelsPaddingSmall { + padding-left: $sg_sizeSpacingSmall; + padding-right: $sg_sizeSpacingSmall; +} +@mixin sgPanelsPaddingMedium { + padding-left: $sg_sizeSpacingMedium; + padding-right: $sg_sizeSpacingMedium; +} + +@mixin sgDefaultBoxShadow($isInset: false) { + @if($isInset) { + box-shadow: 0 0 3px $sg_colorGray inset; + } + @else { + box-shadow: 0 0 3px $sg_colorGray; + } +} + -// Preview: generic styles +// Preview // ---------------------------------------------------------------------------------------------------- -.sg_wrapper { - .sg_h2, - .sg_h3, - .sg_documentation, - .sg_code, - .sg_variant_meta, - .sg_tests { - @include sgBoxed; +$sg_hamburgerSize: 35px; +.sg__tree_trigger { + $sg_posLabelMedium: 8px; + @include visuallyhidden; + + &__label { + + display: block; + position: absolute; + width: $sg_hamburgerSize; + height: $sg_hamburgerSize; + white-space: nowrap; + + top: 0; + left: 0; + @include mq($from: small) { + top: $sg_sizeTopSpacing; + left: $sg_posLabelMedium; + } + + /* hide text */ + color: transparent; + overflow: hidden; + + z-index: 10; + cursor: pointer; + transition: left $sg_defaultTransitionDuration; + + span, span:before, span:after { + /* hamburger icon in CSS */ + position: absolute; + display: inline-block; + height: 3px; + width: 24px; + background: $sg_colorBlack; + //transition: background-color $sg_defaultTransitionDuration; + } + + span { + /* line in the center */ + position: absolute; + top: 50%; + right: 10px; + margin-top: -2px; + transition: background $sg_defaultTransitionDuration $sg_defaultTransitionDuration; + } + + span:before, span:after { + /* other 2 lines */ + content: ''; + right: 0; + /* Force Hardware Acceleration in WebKit */ + transform: translateZ(0); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform-origin: 0% 50%; + transition: transform $sg_defaultTransitionDuration $sg_defaultTransitionDuration; + } + + span:before { + /* menu icon top line */ + top: -6px; + } + + span:after { + /* menu icon bottom line */ + top: 6px; + } + } + + &:checked { + & ~ .sg__tree { + transform: translateX(0); + } + + & ~ .sg__tree_trigger__label { + position: fixed; + + left: calc(100% - #{$sg_hamburgerSize}); + @include mq($from: small) { + left: calc(#{$sg_sizeTreeWidthMedium} + #{$sg_posLabelMedium}); + position: absolute; + } + + span { + /* hide line in the center */ + background: rgba($sg_colorWhite, 0); + } + + span:before, span:after { + /* keep visible other 2 lines */ + @include mq($to: small) { + background: rgba($sg_colorWhite, 1); + } + } + + span:before { + transform: translateX(4px) translateY(-3px) rotate(45deg); + } + + span:after { + transform: translateX(4px) translateY(2px) rotate(-45deg); + } + } + + & ~ .sg__preview { + @include mq($from: small) { + margin-left: $sg_sizeTreeWidthMedium; + } + } + } +} + +.sg { + $sg_sizeTreePaddingSmall: $sg_sizeSpacingSmall; + $sg_sizeTreePaddingMedium: $sg_sizeSpacingMedium; + + /** + * Layout structure + */ + display: flex; + flex-direction: column; + min-height: 100vh; + + &__title, + &__tree nav { + @include mq($to: small) { + padding-left: $sg_sizeTreePaddingSmall; + padding-right: $sg_sizeTreePaddingSmall; + background-color: $sg_colorWhite; + } } - .sg_title { - @include sgBoxedMargins; - margin-bottom: pxToEm(70px, 35px); - font-family: Georgia, serif; - font-size: pxToEm(35px); + &__title { + //background-color: $sg_colorWhite; + color: inherit; + font-size: 18px; + font-weight: normal; + @include fontSmoothing; + font-family: monospace; + + padding-top: $sg_sizeTopSpacing; + padding-bottom: 10px; + padding-left: 10px; + padding-right: 10px; + + margin-top: 0; + margin-bottom: 0; a { - border-bottom: 3px solid; color: inherit; text-decoration: none; } - } - .sg_title, - .sg_h2, - .sg_h3, - .sg_h4 { - font-weight: 600; + &--main { + padding-left: $sg_hamburgerSize + 10px; + + @include mq($from: small) { + @include visuallyhidden; + } + } + + &--module { + background-color: rgba($sg_colorUnicGreen, .1); + border-bottom: 3px solid $sg_colorUnicGreen; + + font-size: 24px; + + margin: 0; + padding-left: $sg_hamburgerSize + 10px; + @include sgPanelsPaddingSmall; + + @include mq($from: small) { + padding-top: 7px; + padding-bottom: 7px; + @include sgPanelsPaddingMedium; + } + } } - .sg_h2, - .sg_h3, - .sg_h4 { + &__tree { + overflow-x: hidden; + overflow-y: auto; + + position: fixed; + top: 0; + bottom: 0; + left: 0; + width: 100%; + @include mq($from: small) { + width: $sg_sizeTreeWidthMedium; + } + nav { + @include mq($to: small) { + @include clearfix; + margin-right: 100% - $sg_sizeTreeWidthSmall; + } + } + + transition: transform $sg_defaultTransitionDuration; + transform: translateX(-100%); + + /** + * Look & Feel + */ + font-family: $sg_font; + box-sizing: border-box; + + a { + display: inline-block; + padding: 0.4em 0; + color: $sg_colorGray; + text-decoration: none; + line-height: 1.3; + + &:hover { + color: $sg_colorBlack; + text-decoration: none; + } + } + + @include mq($to: small) { + background-color: rgba($sg_colorBlack, .8); + } + + @include mq($from: small) { + border-right: 1px solid rgba(83, 83, 99, 0.25); + padding-left: $sg_sizeTreePaddingSmall; + padding-right: $sg_sizeTreePaddingSmall; + } + + &__section_title { + font-size: 18px; + font-family: monospace; + } + + nav { + min-height: 100%; + } } - .sg_h2 { - font-size: pxToEm(25px); + &__preview { + flex: 1 1 auto; + + display: flex; + flex-direction: column; + + @include mq($from: small) { + margin-top: 0; + margin-left: 0; + transition: margin $sg_defaultTransitionDuration; + } } -} -.sg_warning { - border: 1px solid $sg_colorWarning; - color: $sg_colorWarning; - padding: 1em; + &__styleguide, + &__module { + flex-grow: 1; + } + + &__module { + display: flex; + flex-direction: column; + } + + &__module { + &__section { + flex-grow: 1; + + display: flex; + flex-direction: column; + + border-top: 1px solid $sg_colorLightGray; + + &:nth-child(even) { + background-color: rgba($sg_colorLightGray, .2); + } + + &--variants { + border-top: none; + } + + &--mocks, + &--tests, + &--documentation { + margin-top: $sg_sizeSpacingMedium + $sg_sizeSpacingSmall; + @include mq($from: medium) { + padding-right: 100% - $sg_sizeTreeWidthSmall; + } + } + } + } + + &__footer{ + background-color: rgba($sg_colorLightGray, .2); + border-top: 1px solid $sg_colorLightGray; + //color: $sg_colorLightBlue; + font-size: 14px; + padding: 16px; + + p { + margin-top: 0; + } + + @include mq($from: small) { + display: flex; + flex-direction: row; + align-items: center; + + p { + flex-grow: 1; + margin-bottom: 0; + } + } + } + + &__sociallist { + @include resetList; + @include clearfix; + display: flex; + justify-content: flex-end; + + &__item { + display: block; + box-sizing: border-box; + margin-right: 12px; + + width: $sg_sizeIconsFooter; + height: $sg_sizeIconsFooter; + + &:last-child { + margin-right: 0; + } + } + } + + &__iconlink { + display: flex; + align-items: baseline; + text-decoration: none; + + border-radius: 100%; + background-color: $sg_colorGray; + color: $sg_colorWhite; // IE8 + fill: $sg_colorWhite; + + transition: all .2s ease-in-out 0s; + + &--icon-only { + .sg__iconlink__title { + @include visuallyhidden; + } + } + + &:hover { + background-color: $sg_colorUnicGreen; + } + } + + svg path { + fill: inherit; + } + + &__svgicon { + width: 100%; + height: 100%; + flex: 0 0 auto; + padding: 0; + } } -// Preview: modules +// Preview: tabs // ---------------------------------------------------------------------------------------------------- -.sg_tabs { - $numTabs: 5; - $bgcolorActive: $sg_colorLightGray; - +.sg__tabs { /* * Functionality */ - .tab_trigger { + + $numTabs: 10; + $bgcolorActive: $sg_colorLightGray; + $bgcolorFocus: $sg_colorUnicGreen; + + &__trigger { @include visuallyhidden; } - .tab_content { + &__panel { display: none; } $i: $numTabs; @while $i > 0 { - .tab_trigger:nth-child(#{$i}):checked ~ .panels > .tab_content:nth-child(#{$i}) { + &__trigger:nth-child(#{$i}):checked ~ .sg__tabs__panels > .sg__tabs__panel:nth-child(#{$i}) { display: block; } - .tab_trigger:nth-child(#{$i}):checked ~ .labels > label:nth-child(#{$i}) { + &__trigger:nth-child(#{$i}):checked ~ .sg__tabs__labels > label:nth-child(#{$i}) { background-color: $bgcolorActive; font-weight: bold; } - /*.tab_trigger:nth-child(#{$i}):focus ~ .labels > label:nth-child(#{$i}) { + &__trigger:nth-child(#{$i}):focus ~ .sg__tabs__labels > label:nth-child(#{$i}) { background-color: $bgcolorFocus; } - .tab_trigger:nth-child(#{$i}):hover ~ .labels > label:nth-child(#{$i}) { + /*&__trigger:nth-child(#{$i}):hover ~ .labels > label:nth-child(#{$i}) { background-color: $bgcolorHover; }*/ $i: $i - 1; } - .labels { + &__labels { @include clearfix; - @include sgBoxed; - border-bottom: 1px solid $sg_colorLightGray; - border-top: 1px solid $sg_colorLightGray; + + & > label { + display: block; + cursor: pointer; + transition: background-color .3s; + + &:hover { + background-color: $bgcolorActive; + } + } + } + + /* + * Layout + */ + $sg_sizeTabsPanelsSmall: 75%; + $sg_sizeTabsLabelsSmall: 100 - $sg_sizeTabsPanelsSmall; + $sg_sizeTabsPanelsMedium: 80%; + $sg_sizeTabsLabelsMedium: 100 - $sg_sizeTabsPanelsMedium; + + flex-grow: 1; + + display: flex; + flex-direction: row; + + &__panels { + min-width: 0; + width: $sg_sizeTabsPanelsSmall; + } + + &__labels { + margin-left: auto; + flex: none; + width: $sg_sizeTabsLabelsSmall; + & > label { - //border-radius: 4px 4px 0 0; - display: inline-block; padding: 8px 18px; } } -} -.hljs { - background-color: $sg_colorLightGray; + @include mq($from: small) { + &__panels { + width: $sg_sizeTabsPanelsMedium; + } + + &__labels { + width: $sg_sizeTabsLabelsMedium; + } + } + + /* + * Look & Feel + */ + + &__panels { + border-right: 1px solid $sg_colorLightGray; + @include sgPanelsPaddingSmall; + + @include mq($from: medium) { + @include sgPanelsPaddingMedium; + } + } + + &__labels { + background-color: rgba($sg_colorLightGray, .2); + } } -// Preview: commons +// Preview: content // ---------------------------------------------------------------------------------------------------- -.sg_inner_wrapper { - .sg_colors &, - .sg_elements &, - .sg_fonts &, - .sg_forms &, - .sg_icons &, - .sg_module & { - @include clearfix; - margin-bottom: pxToEm(70px); +.sg__code { + background-color: rgba($sg_colorLightBlue, .05); + @include sgDefaultBoxShadow($isInset: true); +} + +.sg__content { + &__section_title { + border-top: 1px solid; + font-family: monospace; + @include fontSmoothing; + font-size: 18px; + + @include mq($from: small) { + margin-left: -$sg_sizeSpacingSmall; + margin-right: -$sg_sizeSpacingSmall; + } + @include mq($from: small, $to: medium) { + padding-left: 10px; + padding-right: 10px; + } + + &--subtitle { + font-size: 16px; + word-break: break-word; + } + + + .sg__content:first-child & { + border: none; + } } - .sg_colors &, - .sg_elements &, - .sg_fonts &, - .sg_forms &, - .sg_icons & { - @include sgBoxed; + &--code { + margin-top: $sg_sizeSpacingMedium + $sg_sizeSpacingSmall; } -} -.sg_title { - .sg_colors &, - .sg_elements &, - .sg_fonts &, - .sg_forms &, - .sg_icons &, - .sg_module & { - @include sgBoxed; + &--meta { + display: block; + margin: $sg_sizeSpacingSmall auto 0; + padding: 1px 10px; + border-left: 3px solid #999; + background-color: rgba($sg_colorLightBlue, .05); + @include sgDefaultBoxShadow; + + p { + color: #555; + font-size: 1rem; + line-height: 1.4; + font-family: monospace; + } } } -.sg_demo { +.sg__demo { @include clearfix; + @include sgDefaultBoxShadow($isInset: true); + overflow: hidden; +} + +.sg__mocks, +.sg__documentation { + @include sgPanelsPaddingSmall; + + @include mq($from: medium) { + @include sgPanelsPaddingMedium; + } } -.sg_documentation { +.sg__documentation { + @include sgBoxed; th { border-bottom: 1px solid $sg_colorLightGray; @@ -222,10 +666,10 @@ $sg_defaultTransition: $sg_defaultTransitionProperty $sg_defaultTransitionDurati background: $sg_colorLightGray; color: #666; padding: 0 0.2em; + word-wrap: break-word; } pre { - code { display: block; padding: 0.5em; @@ -238,61 +682,6 @@ $sg_defaultTransition: $sg_defaultTransitionProperty $sg_defaultTransitionDurati // Preview: Index page // ---------------------------------------------------------------------------------------------------- -.sg_index { - flex-direction: row; - flex-wrap: wrap; - display:flex; - //justify-content: flex-start; - //align-content: flex-start; - //align-items: flex-start; - - margin-left: pxToEm(10px); - margin-right: pxToEm(10px); - font-family: $sg_font; - font-size: pxToEm(14px); - - ul, - li { - list-style-type: none; - } - - .sg_h2 { - margin: 0; - font-size: pxToEm(25px, 14px); - } - - a { - display: inline-block; - padding: 0.4em 0; - color: $sg_colorGray; - text-decoration: none; - line-height: 1.3; - - &:hover { - color: $sg_colorBlack; - text-decoration: none; - } - } - - .sg_inner_wrapper { - border-top: 6px solid; - box-sizing: border-box; - padding: 1em 0; - - margin: pxToEm(10px, 15px); - flex-grow: 1; - flex-basis: 100%; - - @include mq($from: 600px) { - flex-basis: 45%; - } - - @include mq($from: 900px) { - flex-basis: 30%; - } - } -} - // Lists on index page .sg_index_list { margin-bottom: 0; @@ -301,114 +690,112 @@ $sg_defaultTransition: $sg_defaultTransitionProperty $sg_defaultTransitionDurati -// Preview: Modules page -// ---------------------------------------------------------------------------------------------------- - -.sg_module { - .sg_h2, - .sg_h3, - .sg_h4 { - margin-top: 2em; - } - - .sg_inner_wrapper { - &:nth-of-type(even) { - margin-bottom: 1em; - padding-bottom: pxToEm(36px); - background-color: $sg_colorLightGray; - } - } - - // Remove clearfix in before to avoid big space from non-collapsed margins between h1 and h2 - .sg_inner_wrapper:first-of-type:before { - display: none; - } -} - - // Preview: Icons page // ---------------------------------------------------------------------------------------------------- -.sg_icons_label, -.sg_icons_icon { - display: table-cell; - border-top: 1px solid $sg_colorLightGray; - border-left: 1px solid $sg_colorLightGray; - vertical-align: top; - padding: 0.5em; -} - -.sg_icons_icon { - width: 20%; -} -.sg_icons_icon:last-of-type { - border-right: 1px solid $sg_colorLightGray; -} -.sg_icons_list { +.sg__icons { display: table; width: 100%; border-bottom: 1px solid $sg_colorLightGray; - .sg_icons_item { + &__item { display: table-row; } + + &__label, + &__icon { + display: table-cell; + border-top: 1px solid $sg_colorLightGray; + border-left: 1px solid $sg_colorLightGray; + vertical-align: top; + padding: 0.5em; + } + + &__icon { + width: 20%; + } + &__icon:last-of-type { + border-right: 1px solid $sg_colorLightGray; + } } -// Preview: Colors page +// Preview: styleguide // ---------------------------------------------------------------------------------------------------- -.sg_color_list { - @include clearfix; - @include resetList; +.sg__styleguide { + @include sgPanelsPaddingSmall; + @include mq($from: medium) { + @include sgPanelsPaddingMedium; + } - margin: 0 pxToEm(-10); -} + &__color { + &_list { + @include clearfix; + list-style: none; + margin: 0; + } -.sg_color_item { - font-size: pxToEm(14); - padding: pxToEm(15, 14) pxToEm(10, 14) pxToEm(20, 14); - width: pxToEm(($sg_maxWidth/6), 14); - float: left; - text-align: center; - box-sizing: border-box; + &_item { + font-size: 14px; + padding: 15px 10px 20px; + width: ($sg_maxWidth/6); + float: left; + text-align: center; + box-sizing: border-box; + + &:hover { + .sg__styleguide__color_preview { + transform: scale(1.25); + box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); + } + } + } - &:hover { + &_preview { + width: 7.5em; + height: 7.5em; + margin: 0 auto; + // border: 1px solid $sg_colorLightGray; + border-radius: 50%; + box-shadow: inset 0 0 0 2px rgba(0,0,0,.025); - .sg_color_preview { - transform: scale(1.25); - box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); + transition: $sg_defaultTransition; } - } -} -.sg_color_preview { - width: 7.5em; - height: 7.5em; - margin: 0 auto; - // border: 1px solid $sg_colorLightGray; - border-radius: 50%; - box-shadow: inset 0 0 0 2px rgba(0,0,0,.025); + &_name { + padding-top: 0.8em; + font-weight: bold; + } - transition: $sg_defaultTransition; -} + &_value { + } + } -.sg_color_name { - padding-top: 0.8em; - font-weight: bold; -} + &__elements { + .sg__content { + &:not(:first-child) { + margin-top: $sg_sizeSpacingMedium + $sg_sizeSpacingSmall; + } + } + } -.sg_color_value { + &__webfonts { + } } -// Preview: Fonts page -// ---------------------------------------------------------------------------------------------------- - -.sg_subsection { - border-bottom: 2px solid $sg_colorBlack; +.sg__subsection { + border-bottom: 2px solid $sg_colorLightGray; padding: 1em 0; position: relative; } + +.sg__warning { + border: 1px solid $sg_colorWarning; + color: $sg_colorWarning; + padding: 1em; + margin-top: 1.5em; +} diff --git a/source/preview/layouts/layout.hbs b/source/preview/layouts/layout.hbs index b101d070..0149b627 100644 --- a/source/preview/layouts/layout.hbs +++ b/source/preview/layouts/layout.hbs @@ -3,25 +3,84 @@ - - - - {{#if title}}{{title}} – {{/if}}{{meta.project}} - - - - - - - - -
-

- {{#if meta.title}} / {{meta.title}}{{/if}} + + + + {{#if meta.title}}{{meta.title}} – {{/if}}{{meta.project}} + + + + + + {{#if env.dev}} + + {{/if}} + + + + {{#if env.dev}} + + {{/if}} + + + + +

+ {{meta.project}}

- {{#block "content"}} - {{/block}} -
- +
+ {{#block "content"}} + {{/block}} + + {{> preview/partials/footer}} +
+ + {{> preview/partials/tree }} + + {{#if env.dev}} + + {{/if}} + diff --git a/source/preview/layouts/module.hbs b/source/preview/layouts/module.hbs index 6bd88cce..20f012c1 100644 --- a/source/preview/layouts/module.hbs +++ b/source/preview/layouts/module.hbs @@ -1,130 +1,89 @@ - - - - - - - - - {{#if meta.title}}{{meta.title}} – {{/if}}{{meta.project}} - - - - - - {{#if env.dev}} - - {{/if}} - - - - {{#if env.dev}} - - {{/if}} - - -
-

- {{#if meta.title}} / {{meta.title}}{{/if}} -

- - {{#hasVariants variants}} -
-

Module Preview

+{{#extend "preview/layouts/layout"}} + {{#content "content"}} +
+ +
+

+ {{#if meta.title}} + {{meta.title}} + {{else}} + Module Preview + {{/if}} +

-
+
{{#each variants}} - + {{/each}} -
- {{#each variants}} -
-
- {{{meta.demo}}} -
-
- {{/each}} -
- -
- {{else}} -
-

Module Preview

- - {{#each variants}} -
- {{#block "content"}} - {{{meta.demo}}} - {{/block}} +
+ {{#each variants}} + + {{/each}}
-{{! Indentation matters... }} -{{> "preview/partials/code"}} - {{/each}} +
- {{/hasVariants}} - {{#if meta.documentation}} -
-

Documentation

+ {{#if meta.documentation}} +
+

Documentation

-
- {{{meta.documentation}}} -
-
- {{/if}} +
+ {{{meta.documentation}}} +
+
+ {{/if}} - {{#if meta.mocks}} -
-

Data mocking

+ {{#if meta.mocks}} +
+

Data mocking

- {{#each meta.mocks}} - {{#if description}} -

{{description}}

- {{/if}} + {{#each meta.mocks}} + {{#if description}} +

{{description}}

+ {{/if}} - 
{{{data}}}
- {{/each}} -
- {{/if}} +
+ 
{{{data}}}
+
+ {{/each}} +
+ {{/if}} +
{{#block "scripts"}} {{#if meta.testScripts}} -
-

QUnit tests

+
+

QUnit tests

{{> "preview/partials/qunit"}}
{{/if}} {{/block}} -
- - + {{/content}} +{{/extend}} diff --git a/source/preview/partials/code.hbs b/source/preview/partials/code.hbs index 4444ae52..2dca3a97 100644 --- a/source/preview/partials/code.hbs +++ b/source/preview/partials/code.hbs @@ -1,25 +1,25 @@ {{#if meta.code}} -
-

Code

+
+

Code

{{#if meta.code.handlebars}} -

Handlebars Template

- 
{{{meta.code.handlebars.content}}}
+

Handlebars Template

+ 
{{{meta.code.handlebars.content}}}
{{#each meta.code.handlebars.partials as |partial|}} -

Handlebars Template of {{partial.name}}

- 
{{{partial.content}}}
+

Handlebars Template of {{partial.name}}

+ 
{{{partial.content}}}
{{/each}} {{/if}} {{#if meta.code.data}} -

Data

- 
{{{meta.code.data}}}
+

Data

+ 
{{{meta.code.data}}}
{{/if}} {{#if meta.code.html}} -

Rendered HTML

- 
{{{meta.code.html}}}
+

Rendered HTML

+ 
{{{meta.code.html}}}
{{/if}}
{{/if}} diff --git a/source/preview/partials/footer.hbs b/source/preview/partials/footer.hbs new file mode 100644 index 00000000..fb7b9c8e --- /dev/null +++ b/source/preview/partials/footer.hbs @@ -0,0 +1,41 @@ + diff --git a/source/preview/partials/tree.hbs b/source/preview/partials/tree.hbs new file mode 100644 index 00000000..d7d9b59d --- /dev/null +++ b/source/preview/partials/tree.hbs @@ -0,0 +1,67 @@ +
+ +
diff --git a/source/preview/styleguide/colors.hbs b/source/preview/styleguide/colors.hbs index 27d0a9ef..cf121874 100644 --- a/source/preview/styleguide/colors.hbs +++ b/source/preview/styleguide/colors.hbs @@ -1,13 +1,20 @@ {{#extend "preview/layouts/layout"}} {{#content "content"}} -
    +

    + {{#if meta.title}} + {{meta.title}} + {{else}} + Module Preview + {{/if}} +

    +
      {{#each colors}} {{#unless hideFromStyleguide}} -
    • -
      -
      {{name}}
      -
      $color{{capitalize name}}
      -
      {{color}}
      +
    • +
      +
      {{name}}
      +
      $color{{capitalize name}}
      +
      {{color}}
      • {{/unless}} {{/each}} diff --git a/source/preview/styleguide/elements.data.js b/source/preview/styleguide/elements.data.js index 01ed0d5d..29035d7c 100644 --- a/source/preview/styleguide/elements.data.js +++ b/source/preview/styleguide/elements.data.js @@ -5,7 +5,7 @@ var _ = require('lodash'), defaultData = requireNew('../../data/default.data.js'), data = _.merge(defaultData, { meta: { - title: 'Elements', + title: 'Elements' }, additionalLayoutClass: 'sg_elements' }); diff --git a/source/preview/styleguide/elements.hbs b/source/preview/styleguide/elements.hbs index 7b806116..3d3df75a 100644 --- a/source/preview/styleguide/elements.hbs +++ b/source/preview/styleguide/elements.hbs @@ -1,23 +1,33 @@ {{#extend "preview/layouts/layout"}} {{#content "content"}} - {{> preview/styleguide/elements/headings }} +

      + {{#if meta.title}} + {{meta.title}} + {{else}} + Module Preview + {{/if}} +

      - {{> preview/styleguide/elements/text_paragraph }} +
      + {{> preview/styleguide/elements/headings }} - {{> preview/styleguide/elements/figure }} + {{> preview/styleguide/elements/text_paragraph }} - {{> preview/styleguide/elements/blockquote }} + {{> preview/styleguide/elements/figure }} - {{> preview/styleguide/elements/address }} + {{> preview/styleguide/elements/blockquote }} - {{> preview/styleguide/elements/lists }} + {{> preview/styleguide/elements/address }} - {{> preview/styleguide/elements/preformatted_text }} + {{> preview/styleguide/elements/lists }} - {{> preview/styleguide/elements/text_elements }} + {{> preview/styleguide/elements/preformatted_text }} - {{> preview/styleguide/elements/tables }} + {{> preview/styleguide/elements/text_elements }} - {{> preview/styleguide/elements/media }} + {{> preview/styleguide/elements/tables }} + + {{> preview/styleguide/elements/media }} +
      {{/content}} {{/extend}} diff --git a/source/preview/styleguide/elements/address.hbs b/source/preview/styleguide/elements/address.hbs index ff378a8a..85e66205 100644 --- a/source/preview/styleguide/elements/address.hbs +++ b/source/preview/styleguide/elements/address.hbs @@ -1,6 +1,6 @@ -
      -

      Address

      -
      +
      +

      Address

      +
      Company Name, Inc.
      811 7th Ave, Suite 700
      diff --git a/source/preview/styleguide/elements/blockquote.hbs b/source/preview/styleguide/elements/blockquote.hbs index 0df1fbec..fed32178 100644 --- a/source/preview/styleguide/elements/blockquote.hbs +++ b/source/preview/styleguide/elements/blockquote.hbs @@ -1,6 +1,6 @@ -
      -

      Blockquote

      -
      +
      +

      Blockquote

      +

      Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.

      diff --git a/source/preview/styleguide/elements/figure.hbs b/source/preview/styleguide/elements/figure.hbs index 46a1c48d..1246da78 100644 --- a/source/preview/styleguide/elements/figure.hbs +++ b/source/preview/styleguide/elements/figure.hbs @@ -1,6 +1,6 @@ -
      -

      Figure

      -
      +
      +

      Figure

      +
      Image Alt Text
      Figcaption content
      diff --git a/source/preview/styleguide/elements/headings.hbs b/source/preview/styleguide/elements/headings.hbs index a6c533b3..12e96d52 100644 --- a/source/preview/styleguide/elements/headings.hbs +++ b/source/preview/styleguide/elements/headings.hbs @@ -1,6 +1,6 @@ -
      -

      Headings

      -
      +
      +

      Headings

      +

      Heading 1 with small text and a link

      Heading 2 with small text and a link

      Heading 3 with small text and a link

      diff --git a/source/preview/styleguide/elements/lists.hbs b/source/preview/styleguide/elements/lists.hbs index 755a1377..cb4f45ea 100644 --- a/source/preview/styleguide/elements/lists.hbs +++ b/source/preview/styleguide/elements/lists.hbs @@ -1,7 +1,7 @@ -
      -

      Lists

      -
      -
      +
      +

      Lists

      +
      +

      Definition List

      Description name
      @@ -15,7 +15,7 @@
      -
      +

      Ordered List

      1. list item 1
        2. @@ -37,7 +37,7 @@
      -
      +

      Unordered List

      • list item 1
        • diff --git a/source/preview/styleguide/elements/media.hbs b/source/preview/styleguide/elements/media.hbs index 7fb1c9a6..9946c4ef 100644 --- a/source/preview/styleguide/elements/media.hbs +++ b/source/preview/styleguide/elements/media.hbs @@ -1,29 +1,29 @@ -
        -

        Media

        -
        -
        +
        +

        Media

        +
        +

        Default Image

        Dog
        -
        +

        Linked Image

        Dog
        -
        +

        Missing Image

        This is an example of a missing image
        -
        +

        Svg

        -
        +

        Video

        -
        +

        Missing Video

        -
        +

        Audio

        -
        +

        Missing Audio

        diff --git a/source/preview/styleguide/elements/preformatted_text.hbs b/source/preview/styleguide/elements/preformatted_text.hbs index f04c6d5f..82bda0de 100644 --- a/source/preview/styleguide/elements/preformatted_text.hbs +++ b/source/preview/styleguide/elements/preformatted_text.hbs @@ -1,7 +1,7 @@ -
        -

        Preformatted text

        -
        -
        +
        +

        Preformatted text

        +
        +

        Pre

         	P R E F O R M A T T E D T E X T
@@ -14,7 +14,7 @@
        -
        +

        Code

        <html> <head> diff --git a/source/preview/styleguide/elements/tables.hbs b/source/preview/styleguide/elements/tables.hbs index 45cb7c72..7782cae0 100644 --- a/source/preview/styleguide/elements/tables.hbs +++ b/source/preview/styleguide/elements/tables.hbs @@ -1,7 +1,7 @@ -
        -

        Tables

        -
        -
        +
        +

        Tables

        +
        +

        Default Table

        @@ -39,7 +39,7 @@
        Table Caption
        -
        +

        Table with side headings

        diff --git a/source/preview/styleguide/elements/text_elements.hbs b/source/preview/styleguide/elements/text_elements.hbs index 4995c6b8..228cf1e1 100644 --- a/source/preview/styleguide/elements/text_elements.hbs +++ b/source/preview/styleguide/elements/text_elements.hbs @@ -1,10 +1,10 @@ -
        -

        Text Elements

        -
        +
        +

        Text Elements

        +

        There are a number of inline HTML elements you may use anywhere within other elements.

        -
        +

        Links and anchors

        The a element is used to hyperlink text, be that to another page, a named fragment on the current page or any other location on the web. Example:

        @@ -12,7 +12,7 @@
        -
        +

        Stressed emphasis

        The em element is used to denote text with stressed emphasis, i.e., something you’d pronounce differently. Where italicizing is required for stylistic differentiation, the i element may be preferable. Example:

        @@ -20,7 +20,7 @@
        -
        +

        Strong importance

        The strong element is used to denote text with strong importance. Where bolding is used for stylistic differentiation, the b element may be preferable. Example:

        @@ -28,7 +28,7 @@
        -
        +

        Small print

        The small element is used to represent disclaimers, caveats, legal restrictions, or copyrights (commonly referred to as ‘small print’). It can also be used for attributions or satisfying licensing requirements. Example:

        @@ -36,7 +36,7 @@
        -
        +

        Strikethrough

        The s element is used to represent content that is no longer accurate or relevant. When indicating document edits i.e., marking a span of text as having been removed from a document, use the del element instead. Example:

        @@ -44,7 +44,7 @@
        -
        +

        Citations

        The cite element is used to represent the title of a work (e.g. a book, essay, poem, song, film, TV show, sculpture, painting, musical, exhibition, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing. Example:

        @@ -52,7 +52,7 @@
        -
        +

        Inline quotes

        The q element is used for quoting text inline. Example showing nested quotations:

        @@ -60,7 +60,7 @@
        -
        +

        Definition

        The dfn element is used to highlight the first use of a term. The title attribute can be used to describe the term. Example:

        @@ -68,7 +68,7 @@
        -
        +

        Abbreviation

        The abbr element is used for any abbreviated text, whether it be acronym, initialism, or otherwise. Generally, it’s less work and useful (enough) to mark up only the first occurrence of any particular abbreviation on a page, and ignore the rest. Any text in the title attribute will appear when the user’s mouse hovers the abbreviation (although notably, this does not work in Internet Explorer for Windows). Example abbreviations:

        @@ -76,7 +76,7 @@
        -
        +

        Time

        The time element is used to represent either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset. Example:

        @@ -84,7 +84,7 @@
        -
        +

        Code

        The code element is used to represent fragments of computer code. Useful for technology-oriented sites, not so useful otherwise. Example:

        @@ -100,7 +100,7 @@
        -
        +

        Variable

        The var element is used to denote a variable in a mathematical expression or programming context, but can also be used to indicate a placeholder where the contents should be replaced with your own value. Example:

        @@ -108,7 +108,7 @@
        -
        +

        Sample output

        The samp element is used to represent (sample) output from a program or computing system. Useful for technology-oriented sites, not so useful otherwise. Example:

        @@ -116,7 +116,7 @@
        -
        +

        Keyboard entry

        The kbd element is used to denote user input (typically via a keyboard, although it may also be used to represent other input methods, such as voice commands). Example:

        @@ -124,7 +124,7 @@
        -
        +

        Superscript and subscript text

        The sup element represents a superscript and the sub element represents a sub. These elements must be used only to mark up typographical conventions with specific meanings, not for typographical presentation. As a guide, only use these elements if their absence would change the meaning of the content. Example:

        @@ -133,7 +133,7 @@
        -
        +

        Italicised

        The i element is used for text in an alternate voice or mood, or otherwise offset from the normal prose. Examples include taxonomic designations, technical terms, idiomatic phrases from another language, the name of a ship or other spans of text whose typographic presentation is typically italicised. Example:

        @@ -141,7 +141,7 @@
        -
        +

        Emboldened

        The b element is used for text stylistically offset from normal prose without conveying extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typographic presentation is typically emboldened. Example:

        @@ -149,7 +149,7 @@
        -
        +

        Marked or highlighted text

        The mark element is used to represent a run of text marked or highlighted for reference purposes. When used in a quotation it indicates a highlight not originally present but added to bring the reader’s attention to that part of the text. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its relevance to the user’s current activity. Example:

        @@ -157,7 +157,7 @@
        -
        +

        Edits

        The del element is used to represent deleted or retracted text which still must remain on the page for some reason. Meanwhile its counterpart, the ins element, is used to represent inserted text. Both del and ins have a datetime attribute which allows you to include a timestamp directly in the element. Example inserted text and usage:

        diff --git a/source/preview/styleguide/elements/text_paragraph.hbs b/source/preview/styleguide/elements/text_paragraph.hbs index 95db921c..d5310545 100644 --- a/source/preview/styleguide/elements/text_paragraph.hbs +++ b/source/preview/styleguide/elements/text_paragraph.hbs @@ -1,6 +1,6 @@ -
        -

        Paragraph/Text

        -
        +
        +

        Paragraph/Text

        +

        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        diff --git a/source/preview/styleguide/forms.hbs b/source/preview/styleguide/forms.hbs index 5231ca6a..6f4a7321 100644 --- a/source/preview/styleguide/forms.hbs +++ b/source/preview/styleguide/forms.hbs @@ -1,225 +1,235 @@ {{#extend "preview/layouts/layout"}} {{#content "content"}} -
        -

        Form buttons

        -
        -
        -
        -

        -

        -

        -

        -

        -

        -

        -

        -

        -
        - -
        -
        +

        + {{#if meta.title}} + {{meta.title}} + {{else}} + Module Preview + {{/if}} +

        -
        -

        Form fields default

        -
        -
        -
        -
        -
        -
        -
        -
        -
        -
        -
        -
        -
        - -
        -
        -
        -
        -
        -
        -
        -
        -
        -
        -
        -
        -
        -
        0 - -
        -
        -
        -
        -
        -
        -
        -
        - -
        -
        + +
        +
        +
        +
        +
        +
        +
        + + +
        +
        -
        -

        Form fields disabled

        -
        -
        -
        -
        -
        -
        -
        -
        -
        -
        -
        -
        -
        - -
        -
        +
        +

        Form fields disabled

        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        + +
        +
        -
        -

        Form fields readonly

        -
        -
        -
        -
        -
        -
        -
        -
        - -
        -
        +
        +

        Form fields readonly

        +
        +
        +
        +
        +
        +
        +
        +
        + +
        +
        -
        -

        Form fields with datalist

        -
        -
        -
        -
        - - - - - - - - - - -
        -
        - - - 0 - - - - - - -
        -
        - - - - - - - - - -
        -
        - - - - - - - -
        -
        - - - - - - - - -
        -
        - - - - - - - - -
        -
        - - - - - - - - - -
        -
        - - - - - - - - -
        -
        - -
        -
        + +
        +
        + + + + + + + + + +
        +
        + + + + + + + +
        +
        + + + + + + + + +
        +
        + + + + + + + + +
        +
        + + + + + + + + + +
        +
        + + + + + + + + +
        + + + +
        -
        -

        Form fieldset

        -
        -
        -
        - Fieldset with legend -

        -

        -
        -
        -

        Fieldset without legend

        -

        -

        -
        -
        - Fieldset with a very, very, very, very, very, long legend that can test the display of word wrapping to see how it looks. -

        -

        -
        - -
        -
        +
        +

        Form fieldset

        +
        +
        +
        + Fieldset with legend +

        +

        +
        +
        +

        Fieldset without legend

        +

        +

        +
        +
        + Fieldset with a very, very, very, very, very, long legend that can test the display of word wrapping to see how it looks. +

        +

        +
        + +
        +
        + {{/content}} {{/extend}} diff --git a/source/preview/styleguide/icons.data.js b/source/preview/styleguide/icons.data.js index 09a5edbc..e7fb92aa 100644 --- a/source/preview/styleguide/icons.data.js +++ b/source/preview/styleguide/icons.data.js @@ -7,7 +7,7 @@ var _ = require('lodash'), path = require('path'), data = _.merge(defaultData, { meta: { - title: 'Icons (font variant)', + title: 'Icons (font variant)' }, icons: _.map(glob.sync('./source/{,demo/}{assets/media/,modules/**/}icons/*'), function(file) { return path.basename(file).replace(path.extname(file), ''); diff --git a/source/preview/styleguide/icons.hbs b/source/preview/styleguide/icons.hbs index 6f389778..e72fa730 100644 --- a/source/preview/styleguide/icons.hbs +++ b/source/preview/styleguide/icons.hbs @@ -1,14 +1,22 @@ {{#extend "preview/layouts/layout"}} {{#content "content"}} +

        + {{#if meta.title}} + {{meta.title}} + {{else}} + Module Preview + {{/if}} +

        + -
        -
        +
        +
        {{#each icons}} -
        -
        {{this}}
        +
        +
        {{this}}
        {{#each ../sizes}} -
        +
        {{/each}} diff --git a/source/preview/styleguide/webfonts.hbs b/source/preview/styleguide/webfonts.hbs index 1b2c9997..3668e90f 100644 --- a/source/preview/styleguide/webfonts.hbs +++ b/source/preview/styleguide/webfonts.hbs @@ -7,51 +7,62 @@ In case of different sizes for each weight, they can be defined in separate obje {{#extend "preview/layouts/layout"}} {{#content "content"}} -
        - Warning: By default, the font loader assumes to find a /assets/css/fonts.css file. This can be configured as a parameter of the FontLoader instance in head.js. The result is that this currently fails on our GitHub pages, e.g., where the whole build is in a subdirectory. Subsequently, the request to the CSS file will result in a 404 and Roboto will not be loaded. +

        + {{#if meta.title}} + {{meta.title}} + {{else}} + Module Preview + {{/if}} +

        + +
        {{#each fonts}} -
        -

        family: {{family}}

        +
        +
        + Warning: By default, the font loader assumes to find a /assets/css/fonts.css file. This can be configured as a parameter of the FontLoader instance in head.js. The result is that this currently fails on our GitHub pages, e.g., where the whole build is in a subdirectory. Subsequently, the request to the CSS file will result in a 404 and Roboto will not be loaded. +
        + +

        family: {{family}}

        {{#each variants}} -
        -
        -

        weight: {{weight}}
        style: {{style}}

        -
        -

        - A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
        - a b c d e f g h i j k l m n o p q r s t u v w x y z
        - À È Ì Ò Ù Á É Í Ó Ú Ä Ë Ï Ö Ü Â Ê Î Ô Û Ç
        - à è ì ò ù á é í ó ú ä ë ï ö ü â ê î ô û ç
        - 0 1 2 3 4 5 6 7 8 9 . , ; : - _ = { } ( ) [ ] ? ! $ £ & % * " ' § °
        -

        -
        -

        example text

        -
        -

        - A static build is a compiled version of a program which has been statically linked against libraries. -

        -

        - In computer science, linking means taking one or more objects generated by compilers and assemble them into a single executable program. The objects are program modules containing machine code and symbol definitions, which come in two varieties: -

        -

        - Defined or exported symbols are functions or variables that are present in the module represented by the object, and which should be available for use by other modules. - Undefined or imported symbols are functions or variables that are called or referenced by this object, but not internally defined. - A linker program then resolves references to undefined symbols by finding out which other object defines a symbol in question, and replacing placeholders with the symbol's address. Linkers can take objects from a collection called a library. The final program does not include the whole library, only those objects from it that are needed. Libraries for diverse purposes exist, and one or more system libraries are usually linked in by default. -

        -

        - Modern operating system environments allow dynamic linking, or the postponing of the resolving of some undefined symbols until a program is run. That means that the executable still contains undefined symbols, plus a list of objects or libraries that will provide definitions for these. Loading the program will load these objects/libraries as well, and perform a final linking. -

        -
        - 
        +					
        
+						
        weight: {{weight}} 
        style: {{style}}
        
+						
        
+							
        
+								A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
        
+								a b c d e f g h i j k l m n o p q r s t u v w x y z
        
+								À È Ì Ò Ù Á É Í Ó Ú Ä Ë Ï Ö Ü Â Ê Î Ô Û Ç
        
+								à è ì ò ù á é í ó ú ä ë ï ö ü â ê î ô û ç
        
+								0 1 2 3 4 5 6 7 8 9 . , ; : - _ = { } ( ) [ ] ? ! $ £ & % * " ' § °
        
+							
        
+						
        
+
+						
        example text
        
+						
        
+							
        
+								A static build is a compiled version of a program which has been statically linked against libraries.
+							
        
+							
        
+								In computer science, linking means taking one or more objects generated by compilers and assemble them into a single executable program. The objects are program modules containing machine code and symbol definitions, which come in two varieties:
+							
        
+							
        
+								Defined or exported symbols are functions or variables that are present in the module represented by the object, and which should be available for use by other modules.
+								Undefined or imported symbols are functions or variables that are called or referenced by this object, but not internally defined.
+								A linker program then resolves references to undefined symbols by finding out which other object defines a symbol in question, and replacing placeholders with the symbol's address. Linkers can take objects from a collection called a library. The final program does not include the whole library, only those objects from it that are needed. Libraries for diverse purposes exist, and one or more system libraries are usually linked in by default.
+							
        
+							
        
+								Modern operating system environments allow dynamic linking, or the postponing of the resolving of some undefined symbols until a program is run. That means that the executable still contains undefined symbols, plus a list of objects or libraries that will provide definitions for these. Loading the program will load these objects/libraries as well, and perform a final linking.
+							
        
+						
        
+
+						
         .selector {
 	font-family: {{../family}};
 	font-weight: {{weight}};
 	font-style: {{style}};
 }
-							
        
-						
        
+
        {{/each}}
        From 36a200d6505c4589d24505fb6e25f11546684015 Mon Sep 17 00:00:00 2001 From: Oriol Torrent Florensa Date: Fri, 9 Jun 2017 17:21:59 +0200 Subject: [PATCH 2/7] Minor fixes for small viewport --- source/preview/assets/css/main.scss | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/source/preview/assets/css/main.scss b/source/preview/assets/css/main.scss index 22eb70b4..223fa913 100644 --- a/source/preview/assets/css/main.scss +++ b/source/preview/assets/css/main.scss @@ -104,12 +104,8 @@ $sg_hamburgerSize: 35px; height: $sg_hamburgerSize; white-space: nowrap; - top: 0; - left: 0; - @include mq($from: small) { - top: $sg_sizeTopSpacing; - left: $sg_posLabelMedium; - } + top: $sg_sizeTopSpacing; + left: $sg_posLabelMedium; /* hide text */ color: transparent; @@ -246,11 +242,7 @@ $sg_hamburgerSize: 35px; } &--main { - padding-left: $sg_hamburgerSize + 10px; - - @include mq($from: small) { - @include visuallyhidden; - } + @include visuallyhidden; } &--module { @@ -260,8 +252,9 @@ $sg_hamburgerSize: 35px; font-size: 24px; margin: 0; - padding-left: $sg_hamburgerSize + 10px; + //padding-left: $sg_hamburgerSize + 10px; @include sgPanelsPaddingSmall; + padding-left: $sg_sizeSpacingMedium; @include mq($from: small) { padding-top: 7px; From c069a654a65cd6d2777576bac893fc52e7b82b11 Mon Sep 17 00:00:00 2001 From: Oriol Torrent Florensa Date: Mon, 12 Jun 2017 13:01:20 +0200 Subject: [PATCH 3/7] Move JS to toggle tree from preview to its own JS file --- gulp/js/default.js | 3 ++- source/preview/assets/js/preview.js | 38 ++++++++++++++++++++++++++ source/preview/layouts/layout.hbs | 41 +---------------------------- 3 files changed, 41 insertions(+), 41 deletions(-) create mode 100644 source/preview/assets/js/preview.js diff --git a/gulp/js/default.js b/gulp/js/default.js index fda2159b..b6c66abd 100644 --- a/gulp/js/default.js +++ b/gulp/js/default.js @@ -12,7 +12,8 @@ var taskName = 'js', taskConfig = { src: [ './source/assets/js/main.js', - './source/assets/js/head.js' + './source/assets/js/head.js', + './source/preview/assets/js/preview.js' ], devSrc: [ './source/assets/js/dev.js' diff --git a/source/preview/assets/js/preview.js b/source/preview/assets/js/preview.js new file mode 100644 index 00000000..1ab9097d --- /dev/null +++ b/source/preview/assets/js/preview.js @@ -0,0 +1,38 @@ +/** + * Activate tree for viewport > small + */ + +const activateTree = function() { + if (document.documentElement.clientWidth <= 661) { + document.getElementById('sg__tree_trigger').checked = false; + } +}; + +// Reusing https://developer.mozilla.org/en-US/docs/Web/Events/resize +(function() { + const throttle = function(type, name, env) { + let running = false, + environment = env || window, + func = function() { + if (!running) { + running = true; + requestAnimationFrame(function() { + environment.dispatchEvent(new CustomEvent(name)); + running = false; + }); + } + }; + + environment.addEventListener(type, func); + }; + + /* init - you can init any event */ + throttle('resize', 'optimizedResize'); +})(); + +// handle event +window.addEventListener('optimizedResize', function() { + activateTree(); +}); + +activateTree(); diff --git a/source/preview/layouts/layout.hbs b/source/preview/layouts/layout.hbs index 0149b627..69d87bb0 100644 --- a/source/preview/layouts/layout.hbs +++ b/source/preview/layouts/layout.hbs @@ -41,46 +41,7 @@ {{> preview/partials/tree }} {{#if env.dev}} - + {{/if}} From 9291e974968f6ce27515d3d5ed18d3ab3d165b93 Mon Sep 17 00:00:00 2001 From: Oriol Torrent Florensa Date: Tue, 13 Jun 2017 12:07:34 +0200 Subject: [PATCH 4/7] Get rid from IIFE, rename variables with more meaningful names --- source/preview/assets/js/preview.js | 34 ++++++++++++++--------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/source/preview/assets/js/preview.js b/source/preview/assets/js/preview.js index 1ab9097d..eae0743a 100644 --- a/source/preview/assets/js/preview.js +++ b/source/preview/assets/js/preview.js @@ -2,37 +2,37 @@ * Activate tree for viewport > small */ -const activateTree = function() { - if (document.documentElement.clientWidth <= 661) { - document.getElementById('sg__tree_trigger').checked = false; - } -}; +const deactivateTree = function() { + if (document.documentElement.clientWidth < 661) { + document.getElementById('sg__tree_trigger').checked = false; + } + }, -// Reusing https://developer.mozilla.org/en-US/docs/Web/Events/resize -(function() { - const throttle = function(type, name, env) { + // Reusing https://developer.mozilla.org/en-US/docs/Web/Events/resize + throttle = function(type, name, target) { let running = false, - environment = env || window, - func = function() { + eventTarget = target || window, + listener = function() { if (!running) { running = true; requestAnimationFrame(function() { - environment.dispatchEvent(new CustomEvent(name)); + eventTarget.dispatchEvent(new CustomEvent(name)); running = false; }); } }; - environment.addEventListener(type, func); + eventTarget.addEventListener(type, listener); }; - /* init - you can init any event */ - throttle('resize', 'optimizedResize'); -})(); +// init - you can init any event +throttle('resize', 'optimizedResize'); + +// toggle tree if needed at the beginning +deactivateTree(); // handle event window.addEventListener('optimizedResize', function() { - activateTree(); + deactivateTree(); }); -activateTree(); From 4ecddd26dbbce6f077f89ded482be1c144395543 Mon Sep 17 00:00:00 2001 From: Oriol Torrent Florensa Date: Tue, 13 Jun 2017 12:58:38 +0200 Subject: [PATCH 5/7] Responsive styles --- source/index.md | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/source/index.md b/source/index.md index 7a3d273a..e8c3ef4a 100644 --- a/source/index.md +++ b/source/index.md @@ -4,14 +4,14 @@ align-items: center; } - blockquote{ + blockquote { display:block; background: #fff; padding: 15px 20px 15px 55px; position: relative; /*Font*/ - font: italic 400 2.5em/1.2 "Publico Headline Web", Georgia, "Times New Roman", Times, serif; + font: italic 400 1.5em/1.2 Georgia, "Times New Roman", Times, serif; color: #000; /*Box Shadow - (Optional)*/ @@ -29,7 +29,7 @@ border-right-color: #a4c400; } - blockquote:before{ + blockquote:before { content: "\201C"; /*Unicode for Left Double Quote*/ /*Font*/ @@ -43,7 +43,7 @@ top:5px; } - blockquote:after{ + blockquote:after { /*Reset to make sure*/ content: ""; } @@ -57,13 +57,19 @@ transition: color .3s } - blockquote a:hover{ + blockquote a:hover { color: #3a4ecc; } blockquote em { font-style: italic; } + + @media and (min-width: 661px) { + blockquote { + font-size: 2.5em + } + } > Estático is an open source static build system created with love at *[Unic AG](https://unic.com)* and crafted together with the community with the purpose of creating static and modular sites, systems, styleguides and/or design systems. From 3e69c593748932e09558dd1e56d12f2fe8772560 Mon Sep 17 00:00:00 2001 From: Oriol Torrent Florensa Date: Tue, 13 Jun 2017 13:00:13 +0200 Subject: [PATCH 6/7] Remove commented out code --- helpers/handlebars.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/helpers/handlebars.js b/helpers/handlebars.js index 8bd4524e..895bb148 100644 --- a/helpers/handlebars.js +++ b/helpers/handlebars.js @@ -91,15 +91,6 @@ helpers.dynamicPartial = function(name, partialData, options) { return new Handlebars.SafeString(output); }; -// Module preview -/*helpers.hasVariants = function(variants, options) { - if (Object.keys(variants).length > 1) { - return options.fn(this); - } else { - return options.inverse(this); - } -};*/ - // Register helpers Handlebars.registerHelper(helpers); From 5ce851b4779b6ec2814c913e88d22eaf6de9154a Mon Sep 17 00:00:00 2001 From: Oriol Torrent Florensa Date: Tue, 13 Jun 2017 13:35:20 +0200 Subject: [PATCH 7/7] Make footer content and data project related --- source/data/default.data.js | 36 ++++++++++++++++++++- source/preview/partials/footer.hbs | 52 +++++++++++------------------- 2 files changed, 53 insertions(+), 35 deletions(-) diff --git a/source/data/default.data.js b/source/data/default.data.js index c90a571e..864b26c6 100644 --- a/source/data/default.data.js +++ b/source/data/default.data.js @@ -4,7 +4,41 @@ var util = require('gulp-util'), tree = require('./tree.data.js'), data = { meta: { - project: 'Estático' + project: 'Estático', + client: { + name: 'Unic AG', + url: 'https://unic.com' + }, + license: { + name: 'Apache 2.0', + url: 'http://www.apache.org/licenses/LICENSE-2.0' + }, + social: [ + { + url: 'http://facebook.com/unic', + title: 'Follow @unic on Facebook', + iconPath: 'M211.9 197.4h-36.7v59.9h36.7V433.1h70.5V256.5h49.2l5.2-59.1h-54.4c0 0 0-22.1 0-33.7 0-13.9 2.8-19.5 16.3-19.5 10.9 0 38.2 0 38.2 0V82.9c0 0-40.2 0-48.8 0 -52.5 0-76.1 23.1-76.1 67.3C211.9 188.8 211.9 197.4 211.9 197.4z', + name: 'Facebook' + }, + { + url: 'http://twitter.com/unic', + title: 'Follow @unic on Twitter', + iconPath: 'M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z', + name: 'Twitter' + }, + { + url: 'https://www.linkedin.com/company/unic', + title: 'Find us on Linkedin', + iconPath: 'M186.4 142.4c0 19-15.3 34.5-34.2 34.5 -18.9 0-34.2-15.4-34.2-34.5 0-19 15.3-34.5 34.2-34.5C171.1 107.9 186.4 123.4 186.4 142.4zM181.4 201.3h-57.8V388.1h57.8V201.3zM273.8 201.3h-55.4V388.1h55.4c0 0 0-69.3 0-98 0-26.3 12.1-41.9 35.2-41.9 21.3 0 31.5 15 31.5 41.9 0 26.9 0 98 0 98h57.5c0 0 0-68.2 0-118.3 0-50-28.3-74.2-68-74.2 -39.6 0-56.3 30.9-56.3 30.9v-25.2H273.8z', + name: 'LinkedIn' + }, + { + url: 'https://github.com/unic/estatico', + title: 'Get the code on GitHub', + iconPath: 'M256 70.7c-102.6 0-185.9 83.2-185.9 185.9 0 82.1 53.3 151.8 127.1 176.4 9.3 1.7 12.3-4 12.3-8.9V389.4c-51.7 11.3-62.5-21.9-62.5-21.9 -8.4-21.5-20.6-27.2-20.6-27.2 -16.9-11.5 1.3-11.3 1.3-11.3 18.7 1.3 28.5 19.2 28.5 19.2 16.6 28.4 43.5 20.2 54.1 15.4 1.7-12 6.5-20.2 11.8-24.9 -41.3-4.7-84.7-20.6-84.7-91.9 0-20.3 7.3-36.9 19.2-49.9 -1.9-4.7-8.3-23.6 1.8-49.2 0 0 15.6-5 51.1 19.1 14.8-4.1 30.7-6.2 46.5-6.3 15.8 0.1 31.7 2.1 46.6 6.3 35.5-24 51.1-19.1 51.1-19.1 10.1 25.6 3.8 44.5 1.8 49.2 11.9 13 19.1 29.6 19.1 49.9 0 71.4-43.5 87.1-84.9 91.7 6.7 5.8 12.8 17.1 12.8 34.4 0 24.9 0 44.9 0 51 0 4.9 3 10.7 12.4 8.9 73.8-24.6 127-94.3 127-176.4C441.9 153.9 358.6 70.7 256 70.7z', + name: 'GitHub Repository' + } + ] }, env: util.env, tree: tree, diff --git a/source/preview/partials/footer.hbs b/source/preview/partials/footer.hbs index fb7b9c8e..ddf83b86 100644 --- a/source/preview/partials/footer.hbs +++ b/source/preview/partials/footer.hbs @@ -1,41 +1,25 @@
        Table Caption