[ { "annotation": "doc", "annotations": [ { "annotation": "doc", "author": "Vittorio Vittori", "category": "Core vars", "date": "2017-02-20T14:48:35+01:00", "name": "Base", "params": [ { "default": "true", "name": "$use-core-base", "text": "Enables CSS core reset styles", "type": "boolean" } ], "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/core/components", "base": "base.scss", "ext": ".scss", "name": "base", "relative": "sass/frontsize/core/components", "project": "/samples/sass/frontsize/core/components", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/core/components/base.scss" }, "public": true, "text": "

This core var is used to load default reset CSS behavior

\n", "type": "var", "version": "4.0.0", "code": { "code": "$use-core-base: true", "snippet": "
$use-core-base: true\n
\n", "text": "

To use core base reset behavior just set to true the var $use-core-base

\n" } } ], "breadcrumb": [ "Frontsize", "Core", "Components", "Base" ], "category": "Core vars", "file": "docs/frontsize/core/components/base.md", "title": "Base", "url": { "short": "docs/frontsize/core/components/base", "folder": "docs/frontsize/core/components/base/", "full": "docs/frontsize/core/components/base/index.html" } }, { "annotation": "doc", "annotations": [ { "annotation": "doc", "author": "Vittorio Vittori", "category": "BEM", "date": "2016-12-28T17:40:42+01:00", "html": { "code": "Visit this link", "copy": "Visit this link", "snippet": "
<a class="button" href="#">Visit this link</a>\n
\n", "source": "Visit this link", "text": "

A simple HTML element to see how mixin works

\n" }, "icon": "fa fa-css3", "name": "block", "params": [ { "default": "required", "name": "$block-name", "text": "Defines the block name of the BEM component", "type": "string" } ], "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/core/components", "base": "bem.scss", "ext": ".scss", "name": "bem", "relative": "sass/frontsize/core/components", "project": "/samples/sass/frontsize/core/components", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/core/components/bem.scss" }, "public": true, "returns": "css", "text": "

Defines the block name of the BEM component. This mixin is required as wrapper of element and modifier mixins

\n", "type": "mixin", "version": "4.0.0", "code": { "code": "@include block (button) {\n background: #3f6c44;\n color: #fff;\n display: inline-block;\n font-size: 12px;\n padding: 4px 8px;\n}", "snippet": "
@include block (button) {\n  background: #3f6c44;\n  color: #fff;\n  display: inline-block;\n  font-size: 12px;\n  padding: 4px 8px;\n}\n
\n", "text": "

Example on using the mixin with some static property

\n" }, "css": { "code": ".button {\n background: #3f6c44;\n color: #fff;\n display: inline-block;\n font-size: 12px;\n padding: 4px 8px;\n}", "snippet": "
.button {\n  background: #3f6c44;\n  color: #fff;\n  display: inline-block;\n  font-size: 12px;\n  padding: 4px 8px;\n}\n
\n", "text": "

This is the CSS generated

\n" } }, { "annotation": "doc", "author": "Vittorio Vittori", "category": "BEM", "date": "2016-12-28T18:09:00+01:00", "html": { "code": "Visit this link", "copy": "Visit this link", "snippet": "
<a class="button" href="#"><span class="button__text">Visit this link</span></a>\n
\n", "source": "\n Visit this link\n", "text": "

Elements should be inside a parent block

\n" }, "icon": "fa fa-css3", "name": "element", "params": [ { "default": "required", "name": "$element-name", "text": "Defines the element name of the BEM component", "type": "string" } ], "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/core/components", "base": "bem.scss", "ext": ".scss", "name": "bem", "relative": "sass/frontsize/core/components", "project": "/samples/sass/frontsize/core/components", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/core/components/bem.scss" }, "public": true, "returns": "css", "text": "

Defines the element name of the BEM component. This mixin is required as wrapped inside block mixin

\n", "type": "mixin", "version": "4.0.0", "code": { "code": "@include block (button) {\n background: #3f6c44;\n display: inline-block;\n padding: 4px 8px;\n\n @include element (text) {\n color: #fff;\n font-size: 12px;\n }\n}", "snippet": "
@include block (button) {\n  background: #3f6c44;\n  display: inline-block;\n  padding: 4px 8px;\n\n  @include element (text) {\n    color: #fff;\n    font-size: 12px;\n  }\n}\n
\n", "text": "

You must wrap element mixin inside block mixin

\n" }, "css": { "code": ".button {\n background: #3f6c44;\n display: inline-block;\n padding: 4px 8px;\n}\n.button__text {\n color: #fff;\n font-size: 12px;\n}", "snippet": "
.button {\n  background: #3f6c44;\n  display: inline-block;\n  padding: 4px 8px;\n}\n.button__text {\n  color: #fff;\n  font-size: 12px;\n}\n
\n", "text": "

The CSS generated will keep everything on 1 class level deep

\n" } }, { "annotation": "doc", "author": "Vittorio Vittori", "category": "BEM", "date": "2016-12-28T18:09:00+01:00", "html": { "code": "Click here to report the error", "copy": "Click here to report the error", "snippet": "
<a class="button button--error" href="#">Click here to report the error</a>\n
\n", "source": "Click here to report the error", "text": "

Remember to keep the modifier's original block or element selector

\n" }, "icon": "fa fa-css3", "name": "modifier", "params": [ { "default": "required", "name": "$modifier-name", "text": "Defines the modifier name of the BEM component", "type": "string" } ], "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/core/components", "base": "bem.scss", "ext": ".scss", "name": "bem", "relative": "sass/frontsize/core/components", "project": "/samples/sass/frontsize/core/components", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/core/components/bem.scss" }, "public": true, "returns": "css", "text": "

Defines the modifier name of the BEM component. This mixin is required as wrapped inside block mixin

\n", "type": "mixin", "version": "4.0.0", "code": { "code": "@include block (button) {\n background: #3f6c44;\n color: #fff;\n display: inline-block;\n font-size: 12px;\n padding: 4px 8px;\n\n @include modifier (error) {\n background: #f02052;\n }\n}", "snippet": "
@include block (button) {\n  background: #3f6c44;\n  color: #fff;\n  display: inline-block;\n  font-size: 12px;\n  padding: 4px 8px;\n\n  @include modifier (error) {\n    background: #f02052;\n  }\n}\n
\n", "text": "

Modifiers can be applied to block or element mixins

\n" }, "css": { "code": ".button {\n background: #3f6c44;\n color: #fff;\n display: inline-block;\n font-size: 12px;\n padding: 4px 8px;\n}\n.button--error {\n background: #f02052;\n}", "snippet": "
.button {\n  background: #3f6c44;\n  color: #fff;\n  display: inline-block;\n  font-size: 12px;\n  padding: 4px 8px;\n}\n.button--error {\n  background: #f02052;\n}\n
\n", "text": null } } ], "breadcrumb": [ "Frontsize", "Core", "Components", "Bem" ], "category": "BEM", "file": "docs/frontsize/core/components/bem.md", "title": "block", "url": { "short": "docs/frontsize/core/components/bem", "folder": "docs/frontsize/core/components/bem/", "full": "docs/frontsize/core/components/bem/index.html" } }, { "annotation": "doc", "annotations": [ { "annotation": "doc", "author": "Vittorio Vittori", "category": "Core vars", "date": "2017-02-20T17:01:46+01:00", "name": "Print", "params": [ { "default": "true", "name": "$use-core-print", "text": "Enables CSS default print media query behavior", "type": "boolean" } ], "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/core/components", "base": "print.scss", "ext": ".scss", "name": "print", "relative": "sass/frontsize/core/components", "project": "/samples/sass/frontsize/core/components", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/core/components/print.scss" }, "public": true, "text": "

This core var is used for print media query behavior

\n", "type": "var", "version": "4.0.0", "code": { "code": "$use-core-print: true", "snippet": "
$use-core-print: true\n
\n", "text": "

To use media query default print behavior just set to true the var $use-core-print

\n" } } ], "breadcrumb": [ "Frontsize", "Core", "Components", "Print" ], "category": "Core vars", "file": "docs/frontsize/core/components/print.md", "title": "Print", "url": { "short": "docs/frontsize/core/components/print", "folder": "docs/frontsize/core/components/print/", "full": "docs/frontsize/core/components/print/index.html" } }, { "annotation": "doc", "annotations": [ { "annotation": "doc", "author": "Vittorio Vittori", "category": "Background", "date": "2017-02-20T17:06:06+01:00", "name": "theme", "params": [ { "default": "required", "name": "$image", "text": "An image file", "type": "string" }, { "default": "optional", "name": "$path", "text": "[$path-images]\n The relative or absolute path to override, by default is based on core var `$path-images` used in config", "type": "string" } ], "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/core/functions", "base": "background.scss", "ext": ".scss", "name": "background", "relative": "sass/frontsize/core/functions", "project": "/samples/sass/frontsize/core/functions", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/core/functions/background.scss" }, "public": true, "returns": "css", "text": "

Returns a css url parameter, this should be used with $path-images core var

\n", "type": "function", "version": "4.0.0", "code": { "code": ".selector {\n background-image: theme('image.svg');\n}", "snippet": "
.selector {\n  background-image: theme('image.svg');\n}\n
\n", "text": "

Example on using the mixin with some static property

\n" }, "css": { "code": ".selector {\n background-image: url('path/to/image.svg');\n}", "snippet": "
.selector {\n  background-image: url('path/to/image.svg');\n}\n
\n", "text": "

This is the CSS generated

\n" } }, { "annotation": "doc", "author": "Vittorio Vittori", "category": "Background", "date": "2017-02-20T17:06:06+01:00", "name": "vertical-gradient", "params": [ { "default": "required", "name": "$color-base", "text": "A color value", "type": "string" }, { "default": "optional", "name": "$strength-or-color", "text": "[5%]\n You have two usages, the % strength contrast to the color base or the bottom color for `grandient` paramter generated", "type": "string" } ], "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/core/functions", "base": "background.scss", "ext": ".scss", "name": "background", "relative": "sass/frontsize/core/functions", "project": "/samples/sass/frontsize/core/functions", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/core/functions/background.scss" }, "public": true, "returns": "css", "text": "

Returns a css grandient parameter, this should be used with $path-images core var

\n", "type": "function", "version": "4.0.0", "code": { "code": ".selector-a {\n background-image: vertical-gradient(#ff724d, 10%);\n}\n.selector-b {\n background-image: vertical-gradient(#80c6ff, #0082e6);\n}", "snippet": "
.selector-a {\n  background-image: vertical-gradient(#ff724d, 10%);\n}\n.selector-b {\n  background-image: vertical-gradient(#80c6ff, #0082e6);\n}\n
\n", "text": "

Usage example

\n" }, "css": { "code": ".selector-a {\n background-image: linear-gradient(\"top, #ff9a80 0%, #ff4a1a 100%\");\n}\n.selector-b {\n background-image: linear-gradient(\"top, #80c6ff 0%, #0082e6 100%\");\n}", "snippet": "
.selector-a {\n  background-image: linear-gradient("top, #ff9a80 0%, #ff4a1a 100%");\n}\n.selector-b {\n  background-image: linear-gradient("top, #80c6ff 0%, #0082e6 100%");\n}\n
\n", "text": "

CSS generated

\n" } } ], "breadcrumb": [ "Frontsize", "Core", "Functions", "Background" ], "category": "Background", "file": "docs/frontsize/core/functions/background.md", "title": "theme", "url": { "short": "docs/frontsize/core/functions/background", "folder": "docs/frontsize/core/functions/background/", "full": "docs/frontsize/core/functions/background/index.html" } }, { "annotation": "doc", "annotations": [ { "annotation": "doc", "author": "Vittorio Vittori", "category": "Transition", "date": "2017-02-20T18:59:41+01:00", "name": "ease", "params": [ { "default": "required", "name": "$easing", "text": "An easing name", "type": "string" } ], "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/core/functions", "base": "ease.scss", "ext": ".scss", "name": "ease", "relative": "sass/frontsize/core/functions", "project": "/samples/sass/frontsize/core/functions", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/core/functions/ease.scss" }, "public": true, "returns": "css", "text": "

Returns a css ease effect for the css transition parameters, you have these effects:\n | Easing | Equivalent CSS easing |\n |-|-|\n | in-back | cubic-bezier(0.6, -0.28, 0.735, 0.045) |\n | in-circ | cubic-bezier(0.6, 0.04, 0.98, 0.335) |\n | in-cubic | cubic-bezier(0.55, 0.055, 0.675, 0.19) |\n | in-expo | cubic-bezier(0.95, 0.05, 0.795, 0.035) |\n | in-out-back | cubic-bezier(0.68, -0.55, 0.265, 1.55) |\n | in-out-circ | cubic-bezier(0.785, 0.135, 0.15, 0.86) |\n | in-out-cubic | cubic-bezier(0.645, 0.045, 0.355, 1) |\n | in-out-expo | cubic-bezier(1, 0, 0, 1) |\n | in-out-quad | cubic-bezier(0.455, 0.03, 0.515, 0.955) |\n | in-out-quart | cubic-bezier(0.77, 0, 0.175, 1) |\n | in-out-quint | cubic-bezier(0.86, 0, 0.07, 1) |\n | in-out-sine | cubic-bezier(0.445, 0.05, 0.55, 0.95) |\n | in-quad | cubic-bezier(0.55, 0.085, 0.68, 0.53) |\n | in-quart | cubic-bezier(0.895, 0.03, 0.685, 0.22) |\n | in-quint | cubic-bezier(0.755, 0.05, 0.855, 0.06) |\n | in-sine | cubic-bezier(0.47, 0, 0.745, 0.715) |\n | out-back | cubic-bezier(0.175, 0.885, 0.32, 1.275) |\n | out-circ | cubic-bezier(0.075, 0.82, 0.165, 1) |\n | out-cubic | cubic-bezier(0.215, 0.61, 0.355, 1) |\n | out-expo | cubic-bezier(0.19, 1, 0.22, 1) |\n | out-quad | cubic-bezier(0.25, 0.46, 0.45, 0.94) |\n | out-quart | cubic-bezier(0.165, 0.84, 0.44, 1) |\n | out-quint | cubic-bezier(0.23, 1, 0.32, 1) |\n | out-sine | cubic-bezier(0.39, 0.575, 0.565, 1) |

\n", "type": "function", "version": "4.0.0", "code": { "code": ".selector {\n transition: color 0.25s ease('in-quad');\n}", "snippet": "
.selector {\n  transition: color 0.25s ease('in-quad');\n}\n
\n", "text": "

Usage example

\n" }, "css": { "code": ".selector {\n transition: color 0.25s cubic-bezier(0.55, 0.085, 0.68, 0.53);\n}", "snippet": "
.selector {\n  transition: color 0.25s cubic-bezier(0.55, 0.085, 0.68, 0.53);\n}\n
\n", "text": "

CSS generated

\n" } } ], "breadcrumb": [ "Frontsize", "Core", "Functions", "Ease" ], "category": "Transition", "file": "docs/frontsize/core/functions/ease.md", "title": "ease", "url": { "short": "docs/frontsize/core/functions/ease", "folder": "docs/frontsize/core/functions/ease/", "full": "docs/frontsize/core/functions/ease/index.html" } }, { "annotation": "doc", "annotations": [ { "annotation": "doc", "author": "Vittorio Vittori", "category": "Functions", "date": "2017-01-05T15:01:54+01:00", "icon": "fa fa-terminal", "name": "scale-value", "params": [ { "default": "required", "name": "$value", "text": "The unit value to be scaled, es: `10px`, `2em`, etc.", "type": "unit-value" }, { "default": "required", "name": "$scale", "text": "The scale number to change the value, es: `0.5`, `1`, `1.75`, etc.", "type": "number" } ], "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/core/functions", "base": "public.scss", "ext": ".scss", "name": "public", "relative": "sass/frontsize/core/functions", "project": "/samples/sass/frontsize/core/functions", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/core/functions/public.scss" }, "public": true, "returns": "unit-value", "text": "

Scales unit values passed, the return value will be rounded.

\n", "type": "function", "version": "4.0.0", "code": { "code": ".selector {\n width: scale-value(40px, 0.5);\n}", "snippet": "
.selector {\n  width: scale-value(40px, 0.5);\n}\n
\n", "text": "

Usage example

\n" }, "css": { "code": ".selector {\n width: 20px;\n}", "snippet": "
.selector {\n  width: 20px;\n}\n
\n", "text": "

The CSS generated

\n" } } ], "breadcrumb": [ "Frontsize", "Core", "Functions", "Public" ], "category": "Functions", "file": "docs/frontsize/core/functions/public.md", "title": "scale-value", "url": { "short": "docs/frontsize/core/functions/public", "folder": "docs/frontsize/core/functions/public/", "full": "docs/frontsize/core/functions/public/index.html" } }, { "annotation": "snippet", "annotations": [ { "annotation": "snippet", "category": "Buttons", "date": "2017-01-06T17:50:18+01:00", "html": { "code": "\n
\n
Button
\n", "copy": "\n
\n
Button
\n", "snippet": "
<a class="button-social" href="#">\n  <div class="button-social__icon"><i class="fa fa-dashboard"></i></div>\n  <div class="button-social__network">Button</div>\n</a>\n
\n", "source": "\n
\n \n
\n
\n Button\n
\n", "text": null }, "name": "button-social", "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/default/widgets", "base": "button-social.scss", "ext": ".scss", "name": "button-social", "relative": "sass/frontsize/themes/default/widgets", "project": "/samples/sass/frontsize/themes/default/widgets", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/default/widgets/button-social.scss" }, "text": "

The base usage without styles of the button, this component

\n", "type": "snippet" }, { "annotation": "snippet", "date": "2015-12-03", "html": { "code": "\n
\n
Small button
\n", "copy": "\n
\n
Small button
\n", "snippet": "
<a class="button-social button-social--small" href="#">\n  <div class="button-social__icon"><i class="fa fa-compress"></i></div>\n  <div class="button-social__network">Small button</div>\n</a>\n
\n", "source": "\n
\n \n
\n
\n Small button\n
\n", "text": null }, "name": "button-social--small", "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/default/widgets", "base": "button-social.scss", "ext": ".scss", "name": "button-social", "relative": "sass/frontsize/themes/default/widgets", "project": "/samples/sass/frontsize/themes/default/widgets", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/default/widgets/button-social.scss" }, "text": "

The GitHub version with button-social--small and button-social--with-effects modifiers.

\n", "type": "snippet", "category": "Buttons" }, { "annotation": "snippet", "date": "2017-01-06T17:54:08+01:00", "html": { "code": "\n
\n
Rounded button
\n", "copy": "\n
\n
Rounded button
\n", "snippet": "
<a class="button-social button-social--rounded" href="#">\n  <div class="button-social__icon"><i class="fa fa-life-ring"></i></div>\n  <div class="button-social__network">Rounded button</div>\n</a>\n
\n", "source": "\n
\n \n
\n
\n Rounded button\n
\n", "text": null }, "name": "button-social--rounded", "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/default/widgets", "base": "button-social.scss", "ext": ".scss", "name": "button-social", "relative": "sass/frontsize/themes/default/widgets", "project": "/samples/sass/frontsize/themes/default/widgets", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/default/widgets/button-social.scss" }, "text": "

This Facebook version has also button-social--rounded modifier to set it with rounded corners.

\n", "type": "snippet", "category": "Buttons" }, { "annotation": "snippet", "date": "2016-01-09", "html": { "code": "\n
\n
Big button
\n", "copy": "\n
\n
Big button
\n", "snippet": "
<a class="button-social button-social--big" href="#">\n  <div class="button-social__icon"><i class="fa fa-expand"></i></div>\n  <div class="button-social__network">Big button</div>\n</a>\n
\n", "source": "\n
\n \n
\n
\n Big button\n
\n", "text": null }, "name": "button-social--big", "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/default/widgets", "base": "button-social.scss", "ext": ".scss", "name": "button-social", "relative": "sass/frontsize/themes/default/widgets", "project": "/samples/sass/frontsize/themes/default/widgets", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/default/widgets/button-social.scss" }, "text": "

This Facebook version has also button-social--big modifier to make it bigger.

\n", "type": "snippet", "category": "Buttons" }, { "annotation": "snippet", "date": "2017-01-06T17:56:58+01:00", "html": { "code": "\n
\n
Button with effects
\n", "copy": "\n
\n
Button with effects
\n", "snippet": "
<a class="button-social button-social--with-effects" href="#">\n  <div class="button-social__icon"><i class="fa fa-magic"></i></div>\n  <div class="button-social__network">Button with effects</div>\n</a>\n
\n", "source": "\n
\n \n
\n
\n Button with effects\n
\n", "text": null }, "name": "button-social--with-effects", "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/default/widgets", "base": "button-social.scss", "ext": ".scss", "name": "button-social", "relative": "sass/frontsize/themes/default/widgets", "project": "/samples/sass/frontsize/themes/default/widgets", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/default/widgets/button-social.scss" }, "type": "snippet", "category": "Buttons" }, { "annotation": "snippet", "date": "2017-01-06T17:57:20+01:00", "html": { "code": "\n
\n
facebook
\n", "copy": "\n
\n
facebook
\n", "snippet": "
<a class="button-social button-social--facebook" href="#">\n  <div class="button-social__icon"><i class="fa fa-facebook"></i></div>\n  <div class="button-social__network">facebook</div>\n</a>\n
\n", "source": "\n
\n \n
\n
\n facebook\n
\n", "text": null }, "name": "button-social--facebook", "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/default/widgets", "base": "button-social.scss", "ext": ".scss", "name": "button-social", "relative": "sass/frontsize/themes/default/widgets", "project": "/samples/sass/frontsize/themes/default/widgets", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/default/widgets/button-social.scss" }, "text": "

This should be used to connect social accounts to the project service.

\n", "type": "snippet", "category": "Buttons" }, { "annotation": "snippet", "date": "2017-01-06T18:01:30+01:00", "html": { "code": "\n
\n
twitter
\n", "copy": "\n
\n
twitter
\n", "snippet": "
<a class="button-social button-social--twitter button-social--with-effects" href="#">\n  <div class="button-social__icon"><i class="fa fa-twitter"></i></div>\n  <div class="button-social__network">twitter</div>\n</a>\n
\n", "source": "\n
\n \n
\n
\n twitter\n
\n", "text": null }, "name": "button-social--twitter", "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/default/widgets", "base": "button-social.scss", "ext": ".scss", "name": "button-social", "relative": "sass/frontsize/themes/default/widgets", "project": "/samples/sass/frontsize/themes/default/widgets", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/default/widgets/button-social.scss" }, "type": "snippet", "category": "Buttons" }, { "annotation": "snippet", "date": "2017-01-06T17:59:33+01:00", "html": { "code": "\n
\n
github
\n", "copy": "\n
\n
github
\n", "snippet": "
<a class="button-social button-social--github" href="#">\n  <div class="button-social__icon"><i class="fa fa-github-alt"></i></div>\n  <div class="button-social__network">github</div>\n</a>\n
\n", "source": "\n
\n \n
\n
\n github\n
\n", "text": null }, "name": "button-social--github", "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/default/widgets", "base": "button-social.scss", "ext": ".scss", "name": "button-social", "relative": "sass/frontsize/themes/default/widgets", "project": "/samples/sass/frontsize/themes/default/widgets", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/default/widgets/button-social.scss" }, "type": "snippet", "category": "Buttons" }, { "annotation": "snippet", "date": "2017-01-06T18:02:15+01:00", "html": { "code": "\n
\n
googe plus
\n", "copy": "\n
\n
googe plus
\n", "snippet": "
<a class="button-social button-social--google-plus" href="#">\n  <div class="button-social__icon"><i class="fa fa-google-plus"></i></div>\n  <div class="button-social__network">googe plus</div>\n</a>\n
\n", "source": "\n
\n \n
\n
\n googe plus\n
\n", "text": null }, "name": "button-social--google-plus", "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/default/widgets", "base": "button-social.scss", "ext": ".scss", "name": "button-social", "relative": "sass/frontsize/themes/default/widgets", "project": "/samples/sass/frontsize/themes/default/widgets", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/default/widgets/button-social.scss" }, "type": "snippet", "category": "Buttons" } ], "breadcrumb": [ "Buttons", "Button social" ], "category": "Buttons", "file": "snippets/buttons/button-social.md", "title": "button-social", "url": { "short": "snippets/buttons/button-social", "folder": "snippets/buttons/button-social/", "full": "snippets/buttons/button-social/index.html" } }, { "annotation": "color", "annotations": [ { "annotation": "color", "category": "identity", "name": "$color-azure", "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/_config", "base": "vars.scss", "ext": ".scss", "name": "vars", "relative": "sass/frontsize/themes/_config", "project": "/samples/sass/frontsize/themes/_config", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/_config/vars.scss" }, "type": "color", "title": "Azure", "value": "#135aa3", "names": { "basic": "indigo", "html": "darkslateblue", "ntc": "Azure", "pantone": "Denim", "roygbiv": "indigo", "x11": "darkslateblue" }, "css": { "rgb": "rgb(19, 90, 163)", "hsl": "hsl(210, 79%, 36%)", "hex": "#135AA3", "cmyk": "cmyk(88%, 45%, 0%, 36%)" }, "channel": { "rgb": { "r": 19, "g": 90, "b": 163 }, "cmyk": { "c": 88, "m": 45, "y": 0, "k": 36 } } }, { "annotation": "color", "category": "identity", "name": "$color-candy-corn", "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/_config", "base": "vars.scss", "ext": ".scss", "name": "vars", "relative": "sass/frontsize/themes/_config", "project": "/samples/sass/frontsize/themes/_config", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/_config/vars.scss" }, "type": "color", "title": "Candy corn", "value": "rgb(246, 225, 82)", "names": { "basic": "gold", "html": "gold", "ntc": "Candy Corn", "pantone": "Unmellow Yellow", "roygbiv": "yellow", "x11": "gold" }, "css": { "rgb": "rgb(246, 225, 82)", "hsl": "hsl(52, 90%, 64%)", "hex": "#F6E152", "cmyk": "cmyk(0%, 9%, 67%, 4%)" }, "channel": { "rgb": { "r": 246, "g": 225, "b": 82 }, "cmyk": { "c": 0, "m": 9, "y": 67, "k": 4 } } }, { "annotation": "color", "category": "identity", "name": "$color-conifer", "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/_config", "base": "vars.scss", "ext": ".scss", "name": "vars", "relative": "sass/frontsize/themes/_config", "project": "/samples/sass/frontsize/themes/_config", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/_config/vars.scss" }, "type": "color", "title": "Conifer", "value": "rgb(177, 232, 75)", "names": { "basic": "yellow", "html": "yellowgreen", "ntc": "Conifer", "pantone": "Inch Worm", "roygbiv": "yellow", "x11": "yellowgreen" }, "css": { "rgb": "rgb(177, 232, 75)", "hsl": "hsl(81, 77%, 60%)", "hex": "#B1E84B", "cmyk": "cmyk(24%, 0%, 68%, 9%)" }, "channel": { "rgb": { "r": 177, "g": 232, "b": 75 }, "cmyk": { "c": 24, "m": 0, "y": 68, "k": 9 } } }, { "annotation": "color", "category": "identity", "name": "$color-cranberry", "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/_config", "base": "vars.scss", "ext": ".scss", "name": "vars", "relative": "sass/frontsize/themes/_config", "project": "/samples/sass/frontsize/themes/_config", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/_config/vars.scss" }, "type": "color", "title": "Cranberry", "value": "rgb(246, 96, 141)", "names": { "basic": "brown", "html": "palevioletred", "ntc": "Cranberry", "pantone": "Blush", "roygbiv": "violet", "x11": "palevioletred" }, "css": { "rgb": "rgb(246, 96, 141)", "hsl": "hsl(342, 89%, 67%)", "hex": "#F6608D", "cmyk": "cmyk(0%, 61%, 43%, 4%)" }, "channel": { "rgb": { "r": 246, "g": 96, "b": 141 }, "cmyk": { "c": 0, "m": 61, "y": 43, "k": 4 } } }, { "annotation": "color", "category": "identity", "name": "$color-limed-spruce", "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/_config", "base": "vars.scss", "ext": ".scss", "name": "vars", "relative": "sass/frontsize/themes/_config", "project": "/samples/sass/frontsize/themes/_config", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/_config/vars.scss" }, "type": "color", "title": "Limed spruce", "value": "#3f494f", "names": { "basic": "gray", "html": "darkslategray", "ntc": "Limed Spruce", "pantone": "Outer Space", "roygbiv": "indigo", "x11": "darkslategrey" }, "css": { "rgb": "rgb(63, 73, 79)", "hsl": "hsl(203, 11%, 28%)", "hex": "#3F494F", "cmyk": "cmyk(20%, 8%, 0%, 69%)" }, "channel": { "rgb": { "r": 63, "g": 73, "b": 79 }, "cmyk": { "c": 20, "m": 8, "y": 0, "k": 69 } } }, { "annotation": "color", "category": "identity", "name": "$color-picton-blue", "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/_config", "base": "vars.scss", "ext": ".scss", "name": "vars", "relative": "sass/frontsize/themes/_config", "project": "/samples/sass/frontsize/themes/_config", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/_config/vars.scss" }, "type": "color", "title": "Picton blue", "value": "#47b0ec", "names": { "basic": "teal", "html": "deepskyblue", "ntc": "Picton Blue", "pantone": "Cerulean", "roygbiv": "violet", "x11": "deepskyblue" }, "css": { "rgb": "rgb(71, 176, 236)", "hsl": "hsl(202, 81%, 60%)", "hex": "#47B0EC", "cmyk": "cmyk(70%, 25%, 0%, 7%)" }, "channel": { "rgb": { "r": 71, "g": 176, "b": 236 }, "cmyk": { "c": 70, "m": 25, "y": 0, "k": 7 } } }, { "annotation": "color", "category": "identity", "name": "$color-turquoise-blue", "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/_config", "base": "vars.scss", "ext": ".scss", "name": "vars", "relative": "sass/frontsize/themes/_config", "project": "/samples/sass/frontsize/themes/_config", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/_config/vars.scss" }, "type": "color", "title": "Turquoise blue", "value": "rgb(81, 215, 223)", "names": { "basic": "turquoise", "html": "darkturquoise", "ntc": "Turquoise Blue", "pantone": "Aquamarine", "roygbiv": "green", "x11": "darkturquoise" }, "css": { "rgb": "rgb(81, 215, 223)", "hsl": "hsl(183, 69%, 60%)", "hex": "#51D7DF", "cmyk": "cmyk(64%, 4%, 0%, 13%)" }, "channel": { "rgb": { "r": 81, "g": 215, "b": 223 }, "cmyk": { "c": 64, "m": 4, "y": 0, "k": 13 } } }, { "annotation": "color", "category": "identity", "name": "$color-white", "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/_config", "base": "vars.scss", "ext": ".scss", "name": "vars", "relative": "sass/frontsize/themes/_config", "project": "/samples/sass/frontsize/themes/_config", "file": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/_config/vars.scss" }, "type": "color", "title": "White", "value": "#fff", "names": { "basic": "white", "html": "white", "ntc": "White", "pantone": "White", "roygbiv": "violet", "x11": "white" }, "css": { "rgb": "rgb(255, 255, 255)", "hsl": "hsl(0, 0%, 100%)", "hex": "#FFFFFF", "cmyk": "cmyk(0%, 0%, 0%, 0%)" }, "channel": { "rgb": { "r": 255, "g": 255, "b": 255 }, "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0 } } } ], "breadcrumb": [ "Color" ], "category": "identity", "file": "identity/color.md", "title": "$color-azure", "url": { "short": "identity/color", "folder": "identity/color/", "full": "identity/color/index.html" } }, { "annotation": "typography", "annotations": [ { "annotation": "typography", "category": "identity", "name": "Merriweather", "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/fonts/widgets", "base": "text.scss", "ext": ".scss", "name": "text", "relative": "sass/fonts/widgets", "project": "/samples/sass/fonts/widgets", "file": "/path/to/user/a-pollo/test/samples/sass/fonts/widgets/text.scss" }, "text": "

This is used for paragraphs text blocks, it's nice on web browser and digial devices with low or high density displays.\n If you need to write on physical object it's recommended to use Kepler STD.

\n", "type": "snippet", "alphabet": { "uppercase": "ABCDEFGHIJKLMNOPQRSTUVWXYZ", "lowercase": "abcdefghijklmnopqrstuvwxyz", "symbols": "‘?’“!”(%)[#]{@}/&<-+÷×=>®©$€£¥¢:;,.*" }, "selector": ".text.text--big", "selectorClass": "text text--big", "preview": { "title": "Random text", "sentence": "Random text", "paragraph": "Random text" } } ], "breadcrumb": [ "Typography" ], "category": "identity", "file": "identity/typography.md", "title": "Merriweather", "url": { "short": "identity/typography", "folder": "identity/typography/", "full": "identity/typography/index.html" } }, { "annotation": "typography", "annotations": [ { "annotation": "typography", "category": "identity", "name": "Raleway", "path": { "root": "/", "dir": "/path/to/user/a-pollo/test/samples/sass/fonts/widgets", "base": "title.scss", "ext": ".scss", "name": "title", "relative": "sass/fonts/widgets", "project": "/samples/sass/fonts/widgets", "file": "/path/to/user/a-pollo/test/samples/sass/fonts/widgets/title.scss" }, "text": "

Use it for big titles blocks, it's nice on web browser and digial devices with low or high density displays, also for typographic uses on physical objects.

\n", "type": "snippet", "alphabet": { "uppercase": "ABCDEFGHIJKLMNOPQRSTUVWXYZ", "lowercase": "abcdefghijklmnopqrstuvwxyz", "symbols": "‘?’“!”(%)[#]{@}/&<-+÷×=>®©$€£¥¢:;,.*" }, "selector": ".title", "selectorClass": "title", "preview": { "title": "Random text", "sentence": "Random text", "paragraph": "Random text" } } ], "breadcrumb": [ "Typography" ], "category": "identity", "file": "identity/typography.md", "title": "Raleway", "url": { "short": "identity/typography", "folder": "identity/typography/", "full": "identity/typography/index.html" } } ]