@guebbit/css-toolkit 1.0.0

package/docs/.vitepress/config.ts

@@ -0,0 +1,89 @@
+import { defineConfig } from 'vitepress';
+
+export default defineConfig({
+    lang: "en-US",
+    title: "Guebbit SCSS Library",
+    titleTemplate: ":title - base SCSS plus components",
+    description: "Guebbit's personal SCSS Library (MIT license, free to use).",
+    themeConfig: {
+        logo: "/logotype.svg",
+        siteTitle: "SCSS Library",
+        search: {
+            provider: 'local'
+        },
+        nav: [
+            {
+                text: 'Github',
+                link: 'https://github.com/Guebbit/css-toolkit',
+            },
+        ],
+        sidebar: [
+            {
+                text: 'Colors',
+                collapsed: false,
+                items: [
+                    {
+                        text: 'Bootstrap',
+                        link: '/colors/bootstrap.md',
+                    },
+                    {
+                        text: 'Brands',
+                        link: '/colors/brands.md',
+                    },
+                    {
+                        text: 'Gradients',
+                        link: '/colors/customs.md',
+                    }
+                ]
+            },
+            {
+                text: 'Functions',
+                collapsed: false,
+                items: [
+                    {
+                        text: 'Colors',
+                        link: '/functions/colors.md',
+                    },
+                    {
+                        text: 'Helpers',
+                        link: '/functions/helpers.md',
+                    }
+                ]
+            },
+            {
+                text: 'Mixins',
+                collapsed: false,
+                items: [
+                    {
+                        text: 'Build Aspect Ratio',
+                        link: '/mixins/build-aspect-ratio.md',
+                    },
+                    {
+                        text: 'Build Compatibility',
+                        link: '/mixins/build-compatibility.md',
+                    },
+                    {
+                        text: 'Build Scrollbar',
+                        link: '/mixins/build-scrollbar.md',
+                    },
+                    {
+                        text: 'Create Colors',
+                        link: '/mixins/create-colors.md',
+                    },
+                    {
+                        text: 'Create Size instruction',
+                        link: '/mixins/create-instruction.md',
+                    },
+                    {
+                        text: 'Create Margin helper',
+                        link: '/mixins/create-helper-margin.md',
+                    },
+                    {
+                        text: 'Create Padding helper',
+                        link: '/mixins/create-helper-padding.md',
+                    }
+                ]
+            },
+        ]
+    }
+})

package/docs/.vitepress/theme/index.js

@@ -0,0 +1,12 @@
+import DefaultTheme from "vitepress/theme";
+
+export default {
+    ...DefaultTheme,
+    /*
+    Layout() {
+        return h(DefaultTheme.Layout, null, {
+            'aside-outline-before': () => h(MyComponent)
+        })
+    }
+    */
+}

package/docs/colors/bootstrap.md

@@ -0,0 +1 @@
+# TODO

package/docs/colors/brands.md

@@ -0,0 +1 @@
+# TODO

package/docs/colors/customs.md

@@ -0,0 +1 @@
+# TODO

package/docs/functions/colors.md

@@ -0,0 +1,66 @@
+# Colors
+
+https://blog.logrocket.com/using-hsl-colors-css/#what-hsl
+https://blog.logrocket.com/building-color-palette-css/#60-30-10-design-rule
+
+## color-brightness
+
+Gives %, less than 50 darker is better, less than 50, lighter.
+
+```scss
+@if(color-brightness($color) > 50)
+```
+
+```scss
+@function color-brightness($color) {
+  @return math.div(((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)), 255 * 100%);
+}
+```
+
+| Variable  | Description    | Accepted Values | Default |
+|:----------|:---------------|:----------------|:--------|
+| `$color`  | Color to check | `color`         | `none`  |
+
+
+
+## color-contrast
+
+Compares contrast of a given color to the light/dark arguments and returns whichever is most "contrasty"
+
+```scss
+background-color: $background;
+color: color-contrast($background);
+```
+
+```scss
+@function color-contrast($color: #fff, $dark: #000, $light: #fff) {
+  $color-brightness: color-brightness($color);
+  $light-text-brightness: color-brightness($light);
+  $dark-text-brightness: color-brightness($dark);
+
+  @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
+}
+```
+
+## color-hex2rgba
+
+Convert HEX color to RGBA color
+
+```scss
+color: color-hex2rgba(#00ff00, 0.5);
+```
+
+## color-hex2rgbcore
+
+Compares contrast of a given color to the light/dark arguments and returns whichever is most "contrasty"
+
+```scss
+--custom-var: color-hex2rgbcore(#00ff00);
+```
+
+
+| Variable | Description          | Accepted Values | Default |
+|:---------|:---------------------|:----------------|:--------|
+| `$color` | Color to check       | `color`         | `4px`   |
+| `$dark`  | Dark color to apply  | `color`         | `#000`  |
+| `$light` | White color to apply | `color`         | `#fff`  |

package/docs/functions/helpers.md

@@ -0,0 +1 @@
+# TODO

package/docs/functions/strings.md

@@ -0,0 +1 @@
+# TODO

package/docs/index.md

@@ -0,0 +1 @@
+<!-- @include: ../README.md -->

package/docs/logo.svg

@@ -0,0 +1,55 @@
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg id="guebbit-logo-colored" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 557.775 548.025" xml:space="preserve">
+	<desc xmlns:guebbit="https://guebbit.com">
+		<guebbit:title>guebbit</guebbit:title>
+		<guebbit:descr>
+			<guebbit:emph>guebbit</guebbit:emph>
+			web developer
+			website ecommerce
+			soluzioni digitali internet
+		</guebbit:descr>
+	</desc>
+	<!-- shadow -->
+	<!-- (original: #11838E) -->
+	<path style="fill:#00838f;" d="M557.073,266.44C546.815,115.053,415.775,0.639,264.39,10.894
+		C113.002,21.148-1.412,152.19,8.843,303.576c6.17,91.094,42.998,166.667,124.414,212.986l-0.019,0.074
+		c9.358,5.856,20.078,11.201,32.182,15.979c12.098,4.789,24.96,8.795,38.581,12.026c23.426,5.556,45.804,3.106,63.017,0.852
+		c17.218-2.267,32.046-8.215,44.483-17.846c12.446-9.632,22.802-22.847,31.078-39.608c8.271-16.776,15.166-36.799,20.662-60.082
+		l47.769-202.23c-4.661-3.022-10.234-6.21-16.723-9.578c-6.494-3.368-13.584-6.636-21.275-9.805
+		c-7.688-3.167-15.796-6.185-24.316-9.078c-8.524-2.888-17.324-5.408-26.408-7.557c-19.792-4.691-38.494-5.907-56.091-3.644
+		c-17.605,2.262-33.334,7.568-47.196,15.906c-13.858,8.33-25.718,19.591-35.591,33.768c-9.871,14.193-17.064,30.831-21.576,49.944
+		c-3.779,16.003-5.1,30.916-3.95,44.734c1.144,13.814,4.782,26.216,10.927,37.174c6.134,10.96,14.756,20.312,25.875,28.035
+		c11.125,7.729,24.761,13.508,40.924,17.335c14.529,3.449,28.163,4.182,40.902,2.204c12.745-1.965,25.056-5.392,36.941-10.261
+		l-4.128,17.468c-3.049,12.915-6.903,24.781-11.566,35.591c-4.665,10.81-10.522,19.789-17.587,26.955
+		c-7.054,7.15-15.515,12.116-25.373,14.877c-9.857,2.754-21.501,2.534-34.942-0.653c-11.805-2.8-23.896-6.804-36.273-12.053
+		c-12.031-5.099-24.28-11.265-36.73-18.449c-50.615-38.528-84.967-97.877-89.605-166.331
+		C48.725,176.475,143.825,67.557,269.662,59.033c125.834-8.524,234.75,86.574,243.275,212.407
+		c5.688,83.978-34.777,160.412-99.722,204.51c-19.597,15.131-9.715,39.855,15.259,42.134
+		C514.953,466.912,564.325,373.533,557.073,266.44z M287.942,376.525c-11.768,1.915-22.373,1.754-31.814-0.485
+		c-8.717-2.068-16.246-5.095-22.595-9.093c-6.336-4.003-11.293-9.222-14.857-15.63c-3.563-6.424-5.635-14.12-6.197-23.091
+		c-0.566-8.963,0.567-19.458,3.403-31.458c2.622-11.1,6.581-21.55,11.859-31.338c5.287-9.799,12.122-18.026,20.505-24.685
+		c8.376-6.66,18.383-11.249,30.002-13.78c11.625-2.521,25.063-1.985,40.319,1.631c6.357,1.512,12.463,3.246,18.326,5.215
+		c5.868,1.963,11.031,4.054,15.493,6.271l-29.459,124.709C311.369,370.701,299.708,374.605,287.942,376.525z"/>
+	<!-- body -->
+	<!-- (original: #36B9CF) -->
+	<path style="fill:#00bcd4;" d="M548.868,256.184C538.612,104.797,407.571-9.616,256.186,0.639
+		C104.797,10.894-9.615,141.936,0.639,293.32c6.171,91.095,42.999,166.669,124.415,212.986l-0.02,0.075
+		c9.358,5.857,20.079,11.2,32.182,15.979c12.099,4.789,24.961,8.795,38.582,12.025c23.426,5.556,45.804,3.106,63.017,0.854
+		c17.217-2.269,32.047-8.217,44.482-17.848c12.446-9.632,22.802-22.847,31.077-39.609c8.273-16.774,15.168-36.799,20.664-60.082
+		l47.768-202.229c-4.662-3.022-10.235-6.211-16.723-9.578c-6.494-3.367-13.585-6.636-21.274-9.804
+		c-7.688-3.167-15.797-6.185-24.316-9.078c-8.524-2.888-17.327-5.408-26.409-7.557c-19.792-4.691-38.496-5.907-56.091-3.644
+		c-17.606,2.261-33.335,7.567-47.196,15.906c-13.859,8.33-25.718,19.59-35.591,33.768c-9.872,14.192-17.064,30.832-21.576,49.943
+		c-3.78,16.003-5.1,30.917-3.95,44.735c1.144,13.814,4.782,26.217,10.927,37.174c6.133,10.96,14.755,20.313,25.875,28.037
+		c11.125,7.727,24.76,13.508,40.924,17.335c14.53,3.449,28.163,4.18,40.901,2.202c12.745-1.964,25.057-5.392,36.941-10.261
+		l-4.127,17.469c-3.048,12.915-6.903,24.78-11.565,35.59c-4.666,10.81-10.523,19.79-17.588,26.956
+		c-7.055,7.15-15.516,12.116-25.373,14.878c-9.858,2.752-21.502,2.533-34.942-0.655c-11.806-2.798-23.897-6.804-36.273-12.052
+		c-12.031-5.1-24.28-11.264-36.73-18.448c-50.616-38.53-84.967-97.879-89.605-166.332C40.52,166.219,135.621,57.303,261.458,48.778
+		c125.834-8.524,234.75,86.574,243.274,212.407c5.689,83.978-34.775,160.411-99.721,204.509
+		c-19.597,15.133-9.716,39.855,15.258,42.134C506.748,456.658,556.122,363.277,548.868,256.184z M279.736,366.271
+		c-11.766,1.914-22.371,1.754-31.812-0.484c-8.717-2.07-16.247-5.096-22.596-9.095c-6.336-4.003-11.294-9.22-14.857-15.63
+		c-3.563-6.423-5.635-14.119-6.197-23.089c-0.566-8.963,0.567-19.459,3.403-31.459c2.621-11.1,6.58-21.549,11.86-31.338
+		c5.285-9.797,12.122-18.026,20.504-24.683c8.376-6.66,18.382-11.249,30.002-13.781c11.625-2.522,25.062-1.985,40.318,1.63
+		c6.358,1.512,12.463,3.247,18.328,5.215c5.867,1.963,11.03,4.054,15.492,6.271l-29.459,124.708
+		C303.166,360.445,291.503,364.353,279.736,366.271z"/>
+</svg>

package/docs/logotype.svg

@@ -0,0 +1,149 @@
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg id="guebbit-logo-long-colored" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 577.347 175.894" xml:space="preserve">
+	<desc xmlns:guebbit="https://guebbit.com">
+		<guebbit:title>guebbit</guebbit:title>
+		<guebbit:descr>
+			<guebbit:emph>guebbit</guebbit:emph>
+			web developer
+			website ecommerce
+			soluzioni digitali internet
+		</guebbit:descr>
+	</desc>
+	<g>
+		<path style="fill:#00838f;" d="M149.099,64.026h16.038v42.221c0,4.764,0.982,8.445,2.951,11.05
+			c1.966,2.604,4.946,3.907,8.934,3.907c1.772,0,3.502-0.221,5.193-0.665c1.691-0.443,3.284-1.039,4.78-1.786
+			c1.496-0.749,2.893-1.579,4.194-2.492c1.303-0.915,2.479-1.873,3.535-2.87V64.026h16.04v68.23h-15.542l-0.497-6.814
+			c-1.166,1.051-2.467,2.078-3.908,3.073c-1.442,0.999-3.033,1.886-4.78,2.661c-1.743,0.775-3.628,1.399-5.65,1.868
+			c-2.022,0.471-4.169,0.708-6.439,0.708c-8.477,0-14.74-2.257-18.782-6.773c-4.044-4.516-6.066-11.096-6.066-19.738V64.026z"/>
+		<path style="fill:#00838f;" d="M231.456,97.685c0-5.263,0.858-10.068,2.576-14.42
+			c1.716-4.348,4.142-8.061,7.271-11.135c3.127-3.075,6.884-5.458,11.26-7.147c4.376-1.691,9.252-2.536,14.628-2.536
+			c5.263,0,9.873,0.763,13.836,2.286c3.96,1.524,7.3,3.698,10.014,6.524c2.715,2.825,4.75,6.289,6.108,10.388
+			c1.358,4.101,2.037,8.726,2.037,13.878v6.816h-52.192c0.277,2.825,1.01,5.443,2.203,7.854c1.19,2.407,2.796,4.474,4.821,6.189
+			c2.021,1.718,4.405,3.063,7.147,4.031s5.775,1.453,9.101,1.453c1.938,0,4.001-0.179,6.192-0.538
+			c2.188-0.361,4.432-0.887,6.73-1.582c2.297-0.688,4.598-1.535,6.898-2.531c2.298-0.999,4.5-2.161,6.605-3.494v12.553
+			c-4.21,2.379-8.655,4.223-13.339,5.524c-4.682,1.303-10.014,1.954-15.996,1.954c-5.542,0-10.527-0.82-14.96-2.454
+			c-4.433-1.631-8.201-3.998-11.303-7.103c-3.104-3.104-5.485-6.884-7.147-11.344C232.285,108.391,231.456,103.335,231.456,97.685z
+			 M267.023,74.913c-5.319,0-9.655,1.344-13.005,4.031c-3.354,2.688-5.584,6.607-6.692,11.757h36.071
+			c-0.279-5.15-1.832-9.069-4.655-11.757C275.917,76.257,272.009,74.913,267.023,74.913z"/>
+		<path style="fill:#00838f;" d="M320.048,24.716h15.957v29.918c0,0.722-0.016,1.663-0.041,2.826
+			c-0.03,1.164-0.056,2.369-0.084,3.615c-0.028,1.248-0.068,2.452-0.125,3.616c-0.057,1.162-0.138,2.132-0.247,2.908
+			c1.161-0.719,2.52-1.398,4.069-2.036c1.553-0.636,3.202-1.176,4.946-1.621c1.746-0.442,3.543-0.803,5.403-1.08
+			c1.853-0.277,3.64-0.416,5.359-0.416c5.151,0,9.75,0.79,13.795,2.37c4.044,1.577,7.465,3.809,10.264,6.689
+			c2.797,2.882,4.931,6.303,6.398,10.263c1.469,3.963,2.204,8.353,2.204,13.171c0,5.819-0.942,11.112-2.826,15.877
+			c-1.885,4.765-4.543,8.837-7.979,12.215c-3.435,3.382-7.604,5.985-12.507,7.813c-4.904,1.828-10.401,2.742-16.496,2.742
+			c-2.715,0-5.416-0.125-8.104-0.373c-2.687-0.25-5.263-0.582-7.729-1c-2.463-0.415-4.748-0.871-6.855-1.369
+			c-2.105-0.501-3.905-0.998-5.401-1.497V24.716z M336.005,120.539c1.55,0.276,3.185,0.54,4.902,0.79
+			c1.719,0.247,3.601,0.375,5.653,0.375c4.651,0,8.572-0.736,11.758-2.204c3.187-1.468,5.775-3.408,7.771-5.818
+			c1.996-2.411,3.437-5.179,4.322-8.309c0.886-3.131,1.329-6.358,1.329-9.682c0-3.494-0.484-6.552-1.454-9.185
+			c-0.971-2.631-2.301-4.834-3.989-6.607c-1.688-1.773-3.712-3.102-6.066-3.99c-2.355-0.887-4.918-1.33-7.687-1.33
+			c-1.221,0-2.592,0.125-4.113,0.374c-1.525,0.25-3.034,0.583-4.53,0.999c-1.497,0.415-2.937,0.928-4.323,1.536
+			c-1.384,0.611-2.576,1.276-3.572,1.995V120.539z"/>
+		<path style="fill:#00838f;" d="M408.721,24.716h15.958v29.918c0,0.722-0.015,1.663-0.04,2.826
+			c-0.031,1.164-0.057,2.369-0.085,3.615c-0.027,1.248-0.068,2.452-0.125,3.616c-0.056,1.162-0.138,2.132-0.248,2.908
+			c1.163-0.719,2.521-1.398,4.071-2.036c1.552-0.636,3.201-1.176,4.944-1.621c1.748-0.442,3.545-0.803,5.403-1.08
+			c1.854-0.277,3.641-0.416,5.359-0.416c5.152,0,9.752,0.79,13.795,2.37c4.046,1.577,7.467,3.809,10.265,6.689
+			c2.796,2.882,4.932,6.303,6.399,10.263c1.468,3.963,2.204,8.353,2.204,13.171c0,5.819-0.945,11.112-2.828,15.877
+			c-1.884,4.765-4.542,8.837-7.978,12.215c-3.435,3.382-7.604,5.985-12.507,7.813c-4.904,1.828-10.401,2.742-16.497,2.742
+			c-2.714,0-5.416-0.125-8.104-0.373c-2.686-0.25-5.263-0.582-7.728-1c-2.466-0.415-4.75-0.871-6.856-1.369
+			c-2.106-0.501-3.907-0.998-5.403-1.497V24.716z M424.679,120.539c1.55,0.276,3.184,0.54,4.903,0.79
+			c1.718,0.247,3.601,0.375,5.651,0.375c4.653,0,8.572-0.736,11.76-2.204c3.186-1.468,5.775-3.408,7.769-5.818
+			c1.996-2.411,3.438-5.179,4.324-8.309c0.885-3.131,1.329-6.358,1.329-9.682c0-3.494-0.485-6.552-1.454-9.185
+			c-0.971-2.631-2.302-4.834-3.988-6.607c-1.691-1.773-3.713-3.102-6.067-3.99c-2.357-0.887-4.918-1.33-7.688-1.33
+			c-1.221,0-2.592,0.125-4.113,0.374c-1.524,0.25-3.033,0.583-4.529,0.999c-1.496,0.415-2.938,0.928-4.322,1.536
+			c-1.384,0.611-2.577,1.276-3.573,1.995V120.539z"/>
+		<path style="fill:#00838f;" d="M515.597,44.579c0,1.331-0.277,2.522-0.831,3.575s-1.287,1.952-2.202,2.7
+			c-0.914,0.748-1.98,1.317-3.201,1.704c-1.218,0.388-2.492,0.581-3.822,0.581c-2.771,0-5.109-0.733-7.021-2.202
+			c-1.913-1.466-2.867-3.586-2.867-6.357c0-2.659,0.954-4.737,2.867-6.233c1.912-1.496,4.251-2.244,7.021-2.244
+			c1.33,0,2.604,0.195,3.822,0.582c1.221,0.389,2.287,0.956,3.201,1.704c0.915,0.748,1.648,1.635,2.202,2.66
+			C515.32,42.073,515.597,43.249,515.597,44.579z M513.354,132.257h-15.959v-68.23h15.959V132.257z"/>
+		<path style="fill:#00838f;" d="M576.183,130.761c-1.885,0.998-4.154,1.743-6.815,2.244
+			c-2.658,0.498-5.431,0.748-8.311,0.748c-6.702,0-11.494-1.829-14.375-5.487c-2.883-3.656-4.323-9.25-4.323-16.784V74.913H529.56
+			V64.026h13.298c0.941-2.937,1.896-5.998,2.867-9.183c0.97-3.186,1.871-6.192,2.701-9.017h9.889v18.2h19.032v10.886h-19.032v38.978
+			c0,2.383,0.609,4.308,1.828,5.775c1.218,1.468,2.993,2.201,5.321,2.201c2.048,0,3.96-0.095,5.731-0.291
+			c1.775-0.194,3.438-0.429,4.987-0.705V130.761z"/>
+	</g>
+	<path style="fill:#00838f;" d="M164.577,57.437C158.53,17.074,105.285-3.482,67.219,7.77
+		C21.415,21.313-4.741,69.422,8.8,115.229c8.149,27.557,24.649,48.246,52.84,56.888v0.025c3.277,1.156,6.935,2.063,10.982,2.701
+		c4.045,0.638,8.272,0.987,12.678,1.047c7.58,0.097,14.284-2.19,19.419-4.065c5.132-1.879,9.279-4.724,12.438-8.533
+		c3.164-3.814,5.438-8.586,6.83-14.304c1.39-5.722,2.133-12.347,2.224-19.875l0.794-65.405c-1.638-0.611-3.571-1.208-5.793-1.796
+		c-2.227-0.588-4.631-1.107-7.209-1.552c-2.58-0.445-5.278-0.815-8.092-1.121c-2.819-0.303-5.696-0.469-8.634-0.508
+		c-6.402-0.083-12.232,0.828-17.483,2.73c-5.252,1.903-9.72,4.612-13.406,8.127c-3.686,3.509-6.556,7.782-8.617,12.816
+		c-2.059,5.036-3.124,10.644-3.201,16.825c-0.063,5.176,0.557,9.846,1.859,14.014c1.298,4.166,3.267,7.725,5.907,10.672
+		c2.637,2.94,5.927,5.225,9.873,6.833c3.947,1.61,8.532,2.45,13.761,2.518c4.702,0.061,8.94-0.649,12.718-2.13
+		c3.779-1.48,7.327-3.375,10.646-5.689l-0.072,5.65c-0.05,4.178-0.42,8.087-1.11,11.729s-1.874,6.801-3.553,9.488
+		c-1.677,2.681-3.934,4.786-6.773,6.312c-2.84,1.521-6.43,2.255-10.778,2.196c-3.82-0.047-7.81-0.45-11.971-1.211
+		c-4.046-0.74-8.233-1.793-12.551-3.148c-18.193-8.361-32.821-24.238-38.944-44.945C12.33,73.441,34.07,33.454,72.143,22.2
+		c30.682-9.072,69.556,6.313,76.956,35.236C154.613,57.124,160.982,57.763,164.577,57.437z M98.804,70.933
+		c2.058,0.027,4.051,0.141,5.989,0.344c1.937,0.2,3.668,0.489,5.191,0.862l-0.491,40.333c-3.146,2.611-6.46,4.613-9.942,6.007
+		c-3.484,1.396-6.753,2.076-9.808,2.036c-2.819-0.037-5.339-0.45-7.564-1.242c-2.222-0.797-4.104-2.057-5.639-3.783
+		c-1.535-1.729-2.7-3.947-3.488-6.67c-0.789-2.711-1.162-6.016-1.114-9.896c0.044-3.591,0.543-7.073,1.493-10.439
+		c0.951-3.375,2.486-6.371,4.605-8.992c2.116-2.622,4.875-4.717,8.27-6.293"/>
+	<g>
+		<path style="fill:#00bcd4;" d="M143.869,59.311h16.037v42.221c0,4.764,0.983,8.448,2.952,11.053
+			c1.965,2.604,4.945,3.905,8.933,3.905c1.773,0,3.504-0.222,5.194-0.666c1.689-0.442,3.284-1.039,4.78-1.785
+			c1.496-0.75,2.893-1.579,4.194-2.494c1.303-0.914,2.479-1.872,3.534-2.868V59.311h16.04v68.23h-15.541l-0.499-6.813
+			c-1.164,1.053-2.466,2.076-3.906,3.075c-1.444,0.996-3.034,1.884-4.78,2.661c-1.745,0.775-3.629,1.396-5.651,1.868
+			c-2.021,0.471-4.17,0.705-6.439,0.705c-8.478,0-14.741-2.258-18.783-6.771c-4.044-4.515-6.066-11.098-6.066-19.737V59.311z"/>
+		<path style="fill:#00bcd4;" d="M226.226,92.969c0-5.263,0.858-10.068,2.577-14.418c1.715-4.348,4.141-8.061,7.272-11.137
+			c3.127-3.073,6.883-5.456,11.26-7.147c4.376-1.689,9.252-2.535,14.627-2.535c5.261,0,9.874,0.762,13.836,2.285
+			c3.959,1.526,7.3,3.698,10.014,6.526c2.713,2.825,4.748,6.289,6.106,10.388c1.358,4.101,2.038,8.726,2.038,13.879v6.813h-52.192
+			c0.278,2.826,1.012,5.443,2.204,7.854c1.189,2.407,2.796,4.476,4.821,6.192c2.019,1.715,4.404,3.061,7.146,4.028
+			c2.742,0.971,5.776,1.456,9.099,1.456c1.938,0,4.001-0.179,6.192-0.541c2.188-0.358,4.433-0.884,6.73-1.579
+			c2.299-0.691,4.599-1.537,6.899-2.534c2.297-0.999,4.499-2.161,6.605-3.491v12.549c-4.211,2.383-8.656,4.227-13.339,5.528
+			c-4.683,1.3-10.014,1.951-15.996,1.951c-5.542,0-10.529-0.817-14.96-2.451c-4.433-1.634-8.201-4.001-11.304-7.103
+			c-3.102-3.106-5.484-6.884-7.146-11.349C227.055,103.678,226.226,98.622,226.226,92.969z M261.793,70.198
+			c-5.318,0-9.653,1.344-13.003,4.031c-3.355,2.688-5.584,6.607-6.692,11.759h36.071c-0.278-5.152-1.831-9.071-4.654-11.759
+			C270.687,71.542,266.781,70.198,261.793,70.198z"/>
+		<path style="fill:#00bcd4;" d="M314.818,20.001h15.959V49.92c0,0.722-0.016,1.663-0.041,2.825c-0.031,1.165-0.057,2.37-0.084,3.616
+			c-0.028,1.248-0.069,2.452-0.125,3.616c-0.057,1.163-0.138,2.133-0.249,2.907c1.162-0.717,2.521-1.396,4.071-2.036
+			c1.551-0.635,3.201-1.175,4.945-1.62c1.746-0.443,3.544-0.803,5.402-1.08c1.854-0.277,3.642-0.417,5.359-0.417
+			c5.153,0,9.751,0.79,13.797,2.37c4.043,1.577,7.465,3.809,10.264,6.689c2.795,2.882,4.931,6.303,6.398,10.263
+			c1.468,3.963,2.203,8.354,2.203,13.173c0,5.817-0.941,11.109-2.826,15.874c-1.885,4.767-4.542,8.837-7.979,12.218
+			c-3.434,3.38-7.604,5.981-12.506,7.811c-4.904,1.828-10.402,2.745-16.497,2.745c-2.714,0-5.415-0.128-8.104-0.376
+			c-2.686-0.25-5.262-0.582-7.729-0.998c-2.464-0.414-4.75-0.873-6.855-1.371c-2.107-0.498-3.907-0.998-5.403-1.494V20.001z
+			 M330.777,115.823c1.55,0.278,3.184,0.54,4.901,0.79c1.719,0.25,3.601,0.375,5.654,0.375c4.651,0,8.57-0.733,11.757-2.204
+			c3.188-1.466,5.776-3.405,7.77-5.816c1.998-2.41,3.437-5.181,4.323-8.311c0.886-3.128,1.33-6.358,1.33-9.682
+			c0-3.491-0.484-6.552-1.455-9.185c-0.97-2.63-2.3-4.832-3.988-6.605c-1.69-1.773-3.712-3.103-6.066-3.99
+			c-2.357-0.887-4.918-1.33-7.688-1.33c-1.221,0-2.592,0.125-4.113,0.374c-1.524,0.25-3.033,0.583-4.529,0.997
+			c-1.496,0.415-2.936,0.929-4.322,1.538c-1.384,0.611-2.576,1.276-3.572,1.995V115.823z"/>
+		<path style="fill:#00bcd4;" d="M403.493,20.001h15.957V49.92c0,0.722-0.016,1.663-0.041,2.825c-0.029,1.165-0.055,2.37-0.084,3.616
+			c-0.028,1.248-0.067,2.452-0.125,3.616c-0.057,1.163-0.138,2.133-0.247,2.907c1.161-0.717,2.52-1.396,4.069-2.036
+			c1.553-0.635,3.203-1.175,4.946-1.62c1.746-0.443,3.544-0.803,5.403-1.08c1.853-0.277,3.641-0.417,5.359-0.417
+			c5.152,0,9.75,0.79,13.795,2.37c4.044,1.577,7.467,3.809,10.265,6.689c2.796,2.882,4.93,6.303,6.397,10.263
+			c1.47,3.963,2.204,8.354,2.204,13.173c0,5.817-0.945,11.109-2.826,15.874c-1.884,4.767-4.542,8.837-7.979,12.218
+			c-3.435,3.38-7.603,5.981-12.506,7.811c-4.905,1.828-10.402,2.745-16.496,2.745c-2.716,0-5.416-0.128-8.104-0.376
+			c-2.688-0.25-5.263-0.582-7.729-0.998c-2.464-0.414-4.749-0.873-6.855-1.371c-2.105-0.498-3.906-0.998-5.402-1.494V20.001z
+			 M419.45,115.823c1.551,0.278,3.185,0.54,4.902,0.79c1.72,0.25,3.601,0.375,5.653,0.375c4.652,0,8.572-0.733,11.758-2.204
+			c3.187-1.466,5.775-3.405,7.771-5.816c1.996-2.41,3.438-5.181,4.322-8.311c0.887-3.128,1.33-6.358,1.33-9.682
+			c0-3.491-0.484-6.552-1.455-9.185c-0.971-2.63-2.301-4.832-3.988-6.605c-1.689-1.773-3.713-3.103-6.067-3.99
+			c-2.355-0.887-4.917-1.33-7.687-1.33c-1.221,0-2.592,0.125-4.114,0.374c-1.523,0.25-3.032,0.583-4.528,0.997
+			c-1.496,0.415-2.938,0.929-4.324,1.538c-1.384,0.611-2.576,1.276-3.572,1.995V115.823z"/>
+		<path style="fill:#00bcd4;" d="M510.369,39.864c0,1.33-0.278,2.522-0.833,3.574c-0.554,1.052-1.285,1.953-2.2,2.701
+			c-0.914,0.748-1.981,1.318-3.201,1.704c-1.218,0.388-2.492,0.581-3.822,0.581c-2.771,0-5.109-0.733-7.022-2.202
+			c-1.912-1.467-2.867-3.586-2.867-6.357c0-2.66,0.955-4.736,2.867-6.233c1.913-1.497,4.252-2.245,7.022-2.245
+			c1.33,0,2.604,0.195,3.822,0.583c1.22,0.388,2.287,0.956,3.201,1.704c0.915,0.748,1.646,1.634,2.2,2.659
+			C510.09,37.358,510.369,38.535,510.369,39.864z M508.125,127.541h-15.959v-68.23h15.959V127.541z"/>
+		<path style="fill:#00bcd4;" d="M570.954,126.045c-1.885,0.999-4.155,1.746-6.814,2.246c-2.658,0.496-5.431,0.746-8.311,0.746
+			c-6.704,0-11.496-1.829-14.376-5.484c-2.883-3.656-4.322-9.253-4.322-16.786V70.198H524.33V59.311h13.298
+			c0.942-2.936,1.896-5.996,2.867-9.183c0.971-3.185,1.873-6.191,2.702-9.017h9.89v18.2h19.032v10.888h-19.032v38.979
+			c0,2.38,0.609,4.304,1.827,5.775c1.218,1.465,2.992,2.201,5.321,2.201c2.047,0,3.96-0.098,5.732-0.291
+			c1.773-0.194,3.436-0.43,4.986-0.705V126.045z"/>
+	</g>
+	<path style="fill:#00bcd4;" d="M159.347,52.722c-6.046-40.363-59.292-60.919-97.358-49.667
+		C16.186,16.598-9.971,64.708,3.571,110.512c8.149,27.559,24.65,48.251,52.841,56.891v0.022c3.277,1.158,6.935,2.063,10.982,2.706
+		c4.046,0.638,8.273,0.984,12.678,1.046c7.58,0.098,14.285-2.192,19.419-4.065c5.132-1.878,9.28-4.723,12.438-8.535
+		c3.164-3.814,5.437-8.588,6.83-14.301c1.391-5.725,2.133-12.349,2.224-19.878l0.794-65.404c-1.638-0.612-3.571-1.208-5.793-1.796
+		c-2.227-0.588-4.63-1.107-7.209-1.552c-2.58-0.445-5.278-0.815-8.091-1.121c-2.819-0.302-5.697-0.47-8.635-0.51
+		c-6.402-0.081-12.231,0.83-17.482,2.73c-5.252,1.904-9.72,4.614-13.406,8.127c-3.686,3.509-6.557,7.783-8.618,12.817
+		c-2.06,5.036-3.125,10.642-3.2,16.823c-0.063,5.176,0.556,9.848,1.858,14.012c1.299,4.168,3.267,7.727,5.907,10.674
+		c2.638,2.943,5.928,5.228,9.874,6.835c3.948,1.609,8.532,2.451,13.761,2.519c4.702,0.061,8.94-0.649,12.718-2.13
+		c3.779-1.48,7.327-3.376,10.646-5.689l-0.072,5.648c-0.05,4.177-0.42,8.088-1.11,11.73c-0.69,3.64-1.874,6.801-3.553,9.486
+		c-1.677,2.682-3.934,4.785-6.772,6.313c-2.841,1.522-6.431,2.253-10.779,2.195c-3.819-0.048-7.809-0.448-11.971-1.21
+		c-4.045-0.743-8.233-1.795-12.55-3.15c-18.194-8.36-32.822-24.236-38.945-44.945C7.101,68.727,28.841,28.739,66.913,17.485
+		c30.682-9.071,69.556,6.314,76.956,35.237C149.384,52.409,155.752,53.049,159.347,52.722z M93.576,66.217
+		c2.057,0.028,4.051,0.142,5.989,0.345c1.937,0.2,3.667,0.487,5.19,0.862l-0.492,40.334c-3.146,2.608-6.46,4.61-9.942,6.004
+		c-3.484,1.399-6.752,2.079-9.808,2.038c-2.819-0.036-5.339-0.449-7.564-1.244c-2.223-0.794-4.104-2.056-5.639-3.78
+		c-1.535-1.732-2.7-3.95-3.487-6.67c-0.79-2.715-1.162-6.016-1.115-9.897c0.045-3.589,0.543-7.071,1.493-10.44
+	c0.951-3.375,2.486-6.37,4.605-8.991c2.116-2.623,4.876-4.717,8.271-6.294"/>
+</svg>

package/docs/mixins/build-aspect-ratio.md

@@ -0,0 +1 @@
+# TODO

package/docs/mixins/build-compatibility.md

@@ -0,0 +1,23 @@
+# Build Compatibility
+
+## Example
+
+Compatibility mode for browsers
+Firefox, Internet Explorer, Microsoft Edge, Opera (TODO), Safari (TODO)
+
+```scss
+@include guebbit-compatibility("ie") {
+    ...
+}
+```
+
+# Code
+
+<<< ../../src/mixins/_build-compatibility.scss 
+
+## SCSS variables
+
+| Variable     | Description        | Accepted Values | Default |
+|:-------------|:-------------------|:----------------|:--------|
+| `@content`   | CSS Style to apply | `content`       | ``      |
+| `$browser`   | browser name       | `string`        | `none`  |

package/docs/mixins/build-scrollbar.md

@@ -0,0 +1,19 @@
+# Scrollbar
+
+## Example
+Scrollbars of element
+
+```scss
+    @include build-scrollbar(4px, #fff, #000, 10px);
+```
+
+## Code
+
+<<< ../../src/mixins/_build-scrollbar.scss
+
+| Variable  | Description             | Accepted Values | Default |
+|:----------|:------------------------|:----------------|:--------|
+| `$size`   | Size of scrollbar       | `size`          | `4px`   |
+| `$color`  | Color of scrollbar      | `color`         | `#fff`  |
+| `$bg`     | Color in the background | `color`         | `auto`  |
+| `$radius` | Radius of scrollbar     | `size`          | `10px`  |

package/docs/mixins/create-colors.md

@@ -0,0 +1 @@
+# TODO

package/docs/mixins/create-helper-margin.md

@@ -0,0 +1,25 @@
+# Create Margin
+
+## Example
+
+```scss
+@include create-helper-margin((
+    (auto, auto),
+    (6, 6px),
+    (12, 12px),
+    (24, 24px),
+    (36, 36px),
+    (48, 48px),
+), true);
+```
+
+## Code
+
+<<< ../../src/mixins/_create-helper-margin.scss
+
+
+| Variable          | Description                                              | Accepted Values       | Default |
+|:------------------|:---------------------------------------------------------|:----------------------|:--------|
+| `$measure-list`   | List of pairs <name, value>                              | `Array<name,value>[]` | `[]`    |
+| `$important`      | If instruction is !important                             | `boolean`             | `false` |
+| `$prefix`         | Eventual prefix (like `guebbit-`), to prevent collisions | `string`              | ``      |

package/docs/mixins/create-helper-padding.md

@@ -0,0 +1,24 @@
+# Create Padding
+
+## Example
+
+```scss
+@include create-helper-padding((
+    (6, 6px),
+    (12, 12px),
+    (24, 24px),
+    (36, 36px),
+    (48, 48px),
+), true);
+```
+
+## Code
+
+<<< ../../src/mixins/_create-helper-margin.scss
+
+
+| Variable          | Description                                              | Accepted Values       | Default |
+|:------------------|:---------------------------------------------------------|:----------------------|:--------|
+| `$measure-list`   | List of pairs <name, value>                              | `Array<name,value>[]` | `[]`    |
+| `$important`      | If instruction is !important                             | `boolean`             | `false` |
+| `$prefix`         | Eventual prefix (like `guebbit-`), to prevent collisions | `string`              | ``      |

package/docs/mixins/create-instruction.md

@@ -0,0 +1,33 @@
+# Create Instruction
+
+Create instructions. Given name and size.
+Example: width and min-width
+
+## Example
+
+```scss
+@include create-instruction("width", (
+    (25, 25%),
+    (50, 50%),
+    (75, 75%),
+    (100, 100%),
+    (p25, 25px),
+    (p50, 50px),
+    (p75, 75px),
+    (p100, 100px)
+), true);
+```
+
+## Code
+
+<<< ../../src/mixins/_create-instruction.scss
+
+## SCSS variables
+
+| Variable          | Description                                              | Accepted Values       | Default |
+|:------------------|:---------------------------------------------------------|:----------------------|:--------|
+| `$instruction`    | CSS instruction to insert                                | `string`              | `none`  |
+| `$measure-list`   | List of pairs <name, value>                              | `Array<name,value>[]` | `[]`    |
+| `$important`      | Flag: if instruction is !important                       | `boolean`             | `false` |
+| `$prefix`         | Eventual prefix (like `guebbit-`), to prevent collisions | `string`              | ``      |
+| `$delimiter`      | Custom delimeter of the final classnames                 | `string`              | `-`     |

package/index.scss

@@ -0,0 +1 @@
+@forward "./src";