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/helpers/handlebars.js b/helpers/handlebars.js index 4a986604..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); diff --git a/source/data/default.data.js b/source/data/default.data.js index 7c396206..864b26c6 100644 --- a/source/data/default.data.js +++ b/source/data/default.data.js @@ -1,14 +1,49 @@ 'use strict'; 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, 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}} +

- -
- {{/if}} - - {{#if modules}} -
-

Modules

- - -
- {{/if}} - - {{#if styleguide}} -
-

Styleguide

- - -
- {{/if}} +
+ {{{meta.documentation}}}
{{/content}} {{/extend}} diff --git a/source/index.md b/source/index.md new file mode 100644 index 00000000..e8c3ef4a --- /dev/null +++ b/source/index.md @@ -0,0 +1,75 @@ + + +> 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..223fa913 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,577 @@ $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: $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 { + @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; + padding-left: $sg_sizeSpacingMedium; + + @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 +659,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 +675,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 +683,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/assets/js/preview.js b/source/preview/assets/js/preview.js new file mode 100644 index 00000000..eae0743a --- /dev/null +++ b/source/preview/assets/js/preview.js @@ -0,0 +1,38 @@ +/** + * Activate tree for viewport > small + */ + +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 + throttle = function(type, name, target) { + let running = false, + eventTarget = target || window, + listener = function() { + if (!running) { + running = true; + requestAnimationFrame(function() { + eventTarget.dispatchEvent(new CustomEvent(name)); + running = false; + }); + } + }; + + eventTarget.addEventListener(type, listener); + }; + +// init - you can init any event +throttle('resize', 'optimizedResize'); + +// toggle tree if needed at the beginning +deactivateTree(); + +// handle event +window.addEventListener('optimizedResize', function() { + deactivateTree(); +}); + diff --git a/source/preview/layouts/layout.hbs b/source/preview/layouts/layout.hbs index b101d070..69d87bb0 100644 --- a/source/preview/layouts/layout.hbs +++ b/source/preview/layouts/layout.hbs @@ -3,25 +3,45 @@ - - - - {{#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..ddf83b86 --- /dev/null +++ b/source/preview/partials/footer.hbs @@ -0,0 +1,25 @@ +
+

+ {{#and meta.client.name meta.client.url}} + Copyright © 2015-present {{meta.client.name}}. + {{/and}} + {{#and meta.license.name meta.license.url}} + Licensed under {{meta.license.name}}. + {{/and}} +

+ + +
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"}} -