a-pollo
Version:
The visual CSS style guide for teams
1,081 lines (1,080 loc) • 54 kB
JSON
[
{
"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": "<p>This core var is used to load default reset CSS behavior</p>\n",
"type": "var",
"version": "4.0.0",
"code": {
"code": "$use-core-base: true",
"snippet": "<pre><code class=\"lang-scss\">$use-core-base: true\n</code></pre>\n",
"text": "<p>To use core base reset behavior just set to <code>true</code> the var <code>$use-core-base</code></p>\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": "<a class=\"button\" href=\"#\">Visit this link</a>",
"copy": "<a class=\"button\" href=\"#\">Visit this link</a>",
"snippet": "<pre><code class=\"lang-html\"><a class="button" href="#">Visit this link</a>\n</code></pre>\n",
"source": "<a class=\"button\" href=\"#\">Visit this link</a>",
"text": "<p>A simple HTML element to see how mixin works</p>\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": "<p>Defines the block name of the BEM component. This mixin is required as wrapper of <code>element</code> and <code>modifier</code> mixins</p>\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": "<pre><code class=\"lang-scss\">@include block (button) {\n background: #3f6c44;\n color: #fff;\n display: inline-block;\n font-size: 12px;\n padding: 4px 8px;\n}\n</code></pre>\n",
"text": "<p>Example on using the mixin with some static property</p>\n"
},
"css": {
"code": ".button {\n background: #3f6c44;\n color: #fff;\n display: inline-block;\n font-size: 12px;\n padding: 4px 8px;\n}",
"snippet": "<pre><code class=\"lang-css\">.button {\n background: #3f6c44;\n color: #fff;\n display: inline-block;\n font-size: 12px;\n padding: 4px 8px;\n}\n</code></pre>\n",
"text": "<p>This is the CSS generated</p>\n"
}
},
{
"annotation": "doc",
"author": "Vittorio Vittori",
"category": "BEM",
"date": "2016-12-28T18:09:00+01:00",
"html": {
"code": "<a class=\"button\" href=\"#\"><span class=\"button__text\">Visit this link</span></a>",
"copy": "<a class=\"button\" href=\"#\"><span class=\"button__text\">Visit this link</span></a>",
"snippet": "<pre><code class=\"lang-html\"><a class="button" href="#"><span class="button__text">Visit this link</span></a>\n</code></pre>\n",
"source": "<a class=\"button\" href=\"#\">\n <span class=\"button__text\">Visit this link</span>\n</a>",
"text": "<p>Elements should be inside a parent block</p>\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": "<p>Defines the element name of the BEM component. This mixin is required as wrapped inside <code>block</code> mixin</p>\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": "<pre><code class=\"lang-scss\">@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</code></pre>\n",
"text": "<p>You must wrap <code>element</code> mixin inside <code>block</code> mixin</p>\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": "<pre><code class=\"lang-css\">.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</code></pre>\n",
"text": "<p>The CSS generated will keep everything on 1 class level deep</p>\n"
}
},
{
"annotation": "doc",
"author": "Vittorio Vittori",
"category": "BEM",
"date": "2016-12-28T18:09:00+01:00",
"html": {
"code": "<a class=\"button button--error\" href=\"#\">Click here to report the error</a>",
"copy": "<a class=\"button button--error\" href=\"#\">Click here to report the error</a>",
"snippet": "<pre><code class=\"lang-html\"><a class="button button--error" href="#">Click here to report the error</a>\n</code></pre>\n",
"source": "<a class=\"button button--error\" href=\"#\">Click here to report the error</a>",
"text": "<p>Remember to keep the modifier's original block or element selector</p>\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": "<p>Defines the modifier name of the BEM component. This mixin is required as wrapped inside <code>block</code> mixin</p>\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": "<pre><code class=\"lang-scss\">@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</code></pre>\n",
"text": "<p>Modifiers can be applied to <code>block</code> or <code>element</code> mixins</p>\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": "<pre><code class=\"lang-css\">.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</code></pre>\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": "<p>This core var is used for print media query behavior</p>\n",
"type": "var",
"version": "4.0.0",
"code": {
"code": "$use-core-print: true",
"snippet": "<pre><code class=\"lang-scss\">$use-core-print: true\n</code></pre>\n",
"text": "<p>To use media query default print behavior just set to <code>true</code> the var <code>$use-core-print</code></p>\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": "<p>Returns a css <code>url</code> parameter, this should be used with <code>$path-images</code> core var</p>\n",
"type": "function",
"version": "4.0.0",
"code": {
"code": ".selector {\n background-image: theme('image.svg');\n}",
"snippet": "<pre><code class=\"lang-scss\">.selector {\n background-image: theme('image.svg');\n}\n</code></pre>\n",
"text": "<p>Example on using the mixin with some static property</p>\n"
},
"css": {
"code": ".selector {\n background-image: url('path/to/image.svg');\n}",
"snippet": "<pre><code class=\"lang-css\">.selector {\n background-image: url('path/to/image.svg');\n}\n</code></pre>\n",
"text": "<p>This is the CSS generated</p>\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": "<p>Returns a css <code>grandient</code> parameter, this should be used with <code>$path-images</code> core var</p>\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": "<pre><code class=\"lang-scss\">.selector-a {\n background-image: vertical-gradient(#ff724d, 10%);\n}\n.selector-b {\n background-image: vertical-gradient(#80c6ff, #0082e6);\n}\n</code></pre>\n",
"text": "<p>Usage example</p>\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": "<pre><code class=\"lang-css\">.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</code></pre>\n",
"text": "<p>CSS generated</p>\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": "<p>Returns a css <code>ease</code> effect for the css <code>transition</code> parameters, you have these effects:\n | Easing | Equivalent CSS easing |\n |-|-|\n | <code>in-back</code> | <code>cubic-bezier(0.6, -0.28, 0.735, 0.045)</code> |\n | <code>in-circ</code> | <code>cubic-bezier(0.6, 0.04, 0.98, 0.335)</code> |\n | <code>in-cubic</code> | <code>cubic-bezier(0.55, 0.055, 0.675, 0.19)</code> |\n | <code>in-expo</code> | <code>cubic-bezier(0.95, 0.05, 0.795, 0.035)</code> |\n | <code>in-out-back</code> | <code>cubic-bezier(0.68, -0.55, 0.265, 1.55)</code> |\n | <code>in-out-circ</code> | <code>cubic-bezier(0.785, 0.135, 0.15, 0.86)</code> |\n | <code>in-out-cubic</code> | <code>cubic-bezier(0.645, 0.045, 0.355, 1)</code> |\n | <code>in-out-expo</code> | <code>cubic-bezier(1, 0, 0, 1)</code> |\n | <code>in-out-quad</code> | <code>cubic-bezier(0.455, 0.03, 0.515, 0.955)</code> |\n | <code>in-out-quart</code> | <code>cubic-bezier(0.77, 0, 0.175, 1)</code> |\n | <code>in-out-quint</code> | <code>cubic-bezier(0.86, 0, 0.07, 1)</code> |\n | <code>in-out-sine</code> | <code>cubic-bezier(0.445, 0.05, 0.55, 0.95)</code> |\n | <code>in-quad</code> | <code>cubic-bezier(0.55, 0.085, 0.68, 0.53)</code> |\n | <code>in-quart</code> | <code>cubic-bezier(0.895, 0.03, 0.685, 0.22)</code> |\n | <code>in-quint</code> | <code>cubic-bezier(0.755, 0.05, 0.855, 0.06)</code> |\n | <code>in-sine</code> | <code>cubic-bezier(0.47, 0, 0.745, 0.715)</code> |\n | <code>out-back</code> | <code>cubic-bezier(0.175, 0.885, 0.32, 1.275)</code> |\n | <code>out-circ</code> | <code>cubic-bezier(0.075, 0.82, 0.165, 1)</code> |\n | <code>out-cubic</code> | <code>cubic-bezier(0.215, 0.61, 0.355, 1)</code> |\n | <code>out-expo</code> | <code>cubic-bezier(0.19, 1, 0.22, 1)</code> |\n | <code>out-quad</code> | <code>cubic-bezier(0.25, 0.46, 0.45, 0.94)</code> |\n | <code>out-quart</code> | <code>cubic-bezier(0.165, 0.84, 0.44, 1)</code> |\n | <code>out-quint</code> | <code>cubic-bezier(0.23, 1, 0.32, 1)</code> |\n | <code>out-sine</code> | <code>cubic-bezier(0.39, 0.575, 0.565, 1)</code> |</p>\n",
"type": "function",
"version": "4.0.0",
"code": {
"code": ".selector {\n transition: color 0.25s ease('in-quad');\n}",
"snippet": "<pre><code class=\"lang-scss\">.selector {\n transition: color 0.25s ease('in-quad');\n}\n</code></pre>\n",
"text": "<p>Usage example</p>\n"
},
"css": {
"code": ".selector {\n transition: color 0.25s cubic-bezier(0.55, 0.085, 0.68, 0.53);\n}",
"snippet": "<pre><code class=\"lang-css\">.selector {\n transition: color 0.25s cubic-bezier(0.55, 0.085, 0.68, 0.53);\n}\n</code></pre>\n",
"text": "<p>CSS generated</p>\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": "<p>Scales unit values passed, the return value will be rounded.</p>\n",
"type": "function",
"version": "4.0.0",
"code": {
"code": ".selector {\n width: scale-value(40px, 0.5);\n}",
"snippet": "<pre><code class=\"lang-scss\">.selector {\n width: scale-value(40px, 0.5);\n}\n</code></pre>\n",
"text": "<p>Usage example</p>\n"
},
"css": {
"code": ".selector {\n width: 20px;\n}",
"snippet": "<pre><code class=\"lang-css\">.selector {\n width: 20px;\n}\n</code></pre>\n",
"text": "<p>The CSS generated</p>\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": "<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>",
"copy": "<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>",
"snippet": "<pre><code class=\"lang-html\"><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</code></pre>\n",
"source": "<a href=\"#\" class=\"button-social\">\n <div class=\"button-social__icon\">\n <i class=\"fa fa-dashboard\"></i>\n </div>\n <div class=\"button-social__network\">\n Button\n </div>\n</a>",
"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": "<p>The base usage without styles of the button, this component</p>\n",
"type": "snippet"
},
{
"annotation": "snippet",
"date": "2015-12-03",
"html": {
"code": "<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>",
"copy": "<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>",
"snippet": "<pre><code class=\"lang-html\"><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</code></pre>\n",
"source": "<a href=\"#\" class=\"button-social button-social--small\">\n <div class=\"button-social__icon\">\n <i class=\"fa fa-compress\"></i>\n </div>\n <div class=\"button-social__network\">\n Small button\n </div>\n</a>",
"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": "<p>The GitHub version with <code>button-social--small</code> and <code>button-social--with-effects</code> modifiers.</p>\n",
"type": "snippet",
"category": "Buttons"
},
{
"annotation": "snippet",
"date": "2017-01-06T17:54:08+01:00",
"html": {
"code": "<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>",
"copy": "<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>",
"snippet": "<pre><code class=\"lang-html\"><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</code></pre>\n",
"source": "<a href=\"#\" class=\"button-social button-social--rounded\">\n <div class=\"button-social__icon\">\n <i class=\"fa fa-life-ring\"></i>\n </div>\n <div class=\"button-social__network\">\n Rounded button\n </div>\n</a>",
"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": "<p>This Facebook version has also <code>button-social--rounded</code> modifier to set it with rounded corners.</p>\n",
"type": "snippet",
"category": "Buttons"
},
{
"annotation": "snippet",
"date": "2016-01-09",
"html": {
"code": "<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>",
"copy": "<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>",
"snippet": "<pre><code class=\"lang-html\"><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</code></pre>\n",
"source": "<a href=\"#\" class=\"button-social button-social--big\">\n <div class=\"button-social__icon\">\n <i class=\"fa fa-expand\"></i>\n </div>\n <div class=\"button-social__network\">\n Big button\n </div>\n</a>",
"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": "<p>This Facebook version has also <code>button-social--big</code> modifier to make it bigger.</p>\n",
"type": "snippet",
"category": "Buttons"
},
{
"annotation": "snippet",
"date": "2017-01-06T17:56:58+01:00",
"html": {
"code": "<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>",
"copy": "<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>",
"snippet": "<pre><code class=\"lang-html\"><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</code></pre>\n",
"source": "<a href=\"#\" class=\"button-social button-social--with-effects\">\n <div class=\"button-social__icon\">\n <i class=\"fa fa-magic\"></i>\n </div>\n <div class=\"button-social__network\">\n Button with effects\n </div>\n</a>",
"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": "<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>",
"copy": "<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>",
"snippet": "<pre><code class=\"lang-html\"><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</code></pre>\n",
"source": "<a href=\"#\" class=\"button-social button-social--facebook\">\n <div class=\"button-social__icon\">\n <i class=\"fa fa-facebook\"></i>\n </div>\n <div class=\"button-social__network\">\n facebook\n </div>\n</a>",
"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": "<p>This should be used to connect social accounts to the project service.</p>\n",
"type": "snippet",
"category": "Buttons"
},
{
"annotation": "snippet",
"date": "2017-01-06T18:01:30+01:00",
"html": {
"code": "<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>",
"copy": "<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>",
"snippet": "<pre><code class=\"lang-html\"><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</code></pre>\n",
"source": "<a href=\"#\" class=\"button-social button-social--twitter button-social--with-effects\">\n <div class=\"button-social__icon\">\n <i class=\"fa fa-twitter\"></i>\n </div>\n <div class=\"button-social__network\">\n twitter\n </div>\n</a>",
"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": "<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>",
"copy": "<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>",
"snippet": "<pre><code class=\"lang-html\"><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</code></pre>\n",
"source": "<a href=\"#\" class=\"button-social button-social--github\">\n <div class=\"button-social__icon\">\n <i class=\"fa fa-github-alt\"></i>\n </div>\n <div class=\"button-social__network\">\n github\n </div>\n</a>",
"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": "<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>",
"copy": "<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>",
"snippet": "<pre><code class=\"lang-html\"><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</code></pre>\n",
"source": "<a href=\"#\" class=\"button-social button-social--google-plus\">\n <div class=\"button-social__icon\">\n <i class=\"fa fa-google-plus\"></i>\n </div>\n <div class=\"button-social__network\">\n googe plus\n </div>\n</a>",
"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": {