{"id":16795327,"url":"https://github.com/lukasborawski/bigos","last_synced_at":"2026-04-12T23:44:59.513Z","repository":{"id":22483969,"uuid":"25823144","full_name":"lukasborawski/bigos","owner":"lukasborawski","description":"Simple front-end framework.","archived":false,"fork":false,"pushed_at":"2023-03-03T00:35:15.000Z","size":264,"stargazers_count":1,"open_issues_count":8,"forks_count":0,"subscribers_count":4,"default_branch":"v-0.3","last_synced_at":"2024-04-14T08:33:55.078Z","etag":null,"topics":["css","css-framework","framework","front-end","sass","scss"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lukasborawski.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-10-27T14:32:47.000Z","updated_at":"2024-04-14T08:33:55.079Z","dependencies_parsed_at":"2024-10-13T09:16:07.892Z","dependency_job_id":"8091c9fd-ee6e-423b-9bf5-2a1902eb4415","html_url":"https://github.com/lukasborawski/bigos","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasborawski%2Fbigos","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasborawski%2Fbigos/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasborawski%2Fbigos/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasborawski%2Fbigos/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukasborawski","download_url":"https://codeload.github.com/lukasborawski/bigos/tar.gz/refs/heads/v-0.3","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247312093,"owners_count":20918344,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-framework","framework","front-end","sass","scss"],"created_at":"2024-10-13T09:16:02.331Z","updated_at":"2025-10-17T13:28:24.005Z","avatar_url":"https://github.com/lukasborawski.png","language":"SCSS","readme":"Bigos\n===\n\nBigos is a simple, SCSS* only framework**. It's built for modern applications founded on multi module systems. It contains the set of prepared styles, classes and mixins. Comfortable in adaptation and implementation, let you systematize app based on scalable skeleton.\n\n**Major and most important advantage is brevity. This framework includes only base and most needed components. You will not find here complex blocks of styles like in Bootstrap or Fundation. It's only a strong backbone of your feature application. The rest and more advanced features you can define a base on prepared code.**\n\n**Although, the whole framework is a lean on special class connection system (CCS) and it may impose the certain character of application code writing. Before you go deeper, first check [syntax](#classes-syntax-class-connection-structure) behind it. After this, you can move on.**\n\n*if you're not familiar with, here you'll find more about [SASS](http://sass-lang.com/) and [SCSS](http://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass) language.\n\n**please note that this is very early alpha version, so far used with success in commercial but limited number of projects, feel free to create bug issue notification or propose code fix/change as a pull request.\n\n**Actual minified weight: 32kb**.\n\nInstallation\n---\n\n*Right now only as an GitHub repository. Soon as a NPM and Bower packages.*\n\nDocs:\n---\n\n* [Structure](#structure)\n* [Directory contents](#structure-of-directories)\n* [Normalize](#normalize)\n* [Variables](#variables)\n* [Helpers/Mixins](#helpers--mixins):\n   * [Classes syntax](#classes-syntax-class-connection-structure)\n   * [Globals](#globals)\n   * [Visuals](#visuals)\n   * [Abstracts](#abstracts)\n   * [Mobile](#mobilerwd)\n   * [Additionals](#additionals)\n* [Global classes and components](#global-classes-and-components):\n   * [Visuals](#visuals-1)\n   * [Fonts](#fonts--texts)\n   * [Boxes](#boxes)\n   * [Tables](#)\n   * [Collections](#collections)\n   * [Buttons](#buttons)\n   * [Inputs](#inputs)\n   * [Resets](#resets)\n   * [Additionals](#additionals-1)\n   * [Icons](#icons)\n* [Tests environment](#)\n* [Changelog - list of changes and improvements](#changelog)\n\n\n---\n###### Tests SCSS watch path\n  `sass --watch src/style.scss:test/style.css`\n\n## Structure\n\nHere's how the whole framework is built. Following individual directories and their contents - files and their dependencies.\n\n\u003ca name=\"\"\u003e\u003c/a\u003e\n#### Structure of directories\n\n    bigos\n    |---src\n\n## Normalize\nBigos includes '_normalize.scss' file with styles normalize system. It's based on [Normalize CSS](https://necolas.github.io/normalize.css/ \"Normalize CSS\") by Nicolas Gallagher. So, framework styles are not reset to default null values - they are adapted to application structure.\n\n## Variables\n\nAll variables are defined in `_variables.scss` file. They are devided into three parts: project, global and custom.\n\n* Project part defines all used and dedicated variables like colors or sizes - you can add/create that as much as you want.\n* Global variables are used precisely in the whole framework and shuold stay unchaned.\n* All others are system editable variables. They define visual part of framework, also they are used in a system classes. You can change them accordingly to your own needs and several elements customiziation (i.g. buttons or inputs). Remember that all variables are strictly connected with other parts of framework and they can not be removed.\n\nAll variables are accurately described in the source file.\n\n## Helpers / Mixins\n\n[Mixins](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins) are small pieces of code that provide lots of combined style features. They can be used as a definition of box layouts, backgrounds, gradients, positions or shifts. Mixins can contain customized variables that create prepared and systematized blocks of code.\n\nMixins are an integral part of the framework. You can use them with/as special dedicated class system or separatly. Here you can feel free.\n\nTo use one of them type:\n\n```scss\n@include mixin-name($variable(s)) {\n  // content, not always\n};\n```\n\nAnd the list of mixins:\n\n---\n\n### Classes Syntax (Class Connection Structure)\n\nAll base classes are built with special class connection structure (CCS). This structure is splitted in three elements: `class-model`, `class-modifier` and `class-option`. It looks like this:\n\n```scss\n@include class-model(button) {\n  @include class-modifier(color) {\n    @include class-option(red) {\n      ...\n    }\n  }\n}\n```\n\nIn output we will recive:\n\n```css\n[class*=\"button\"][class*=\"-color\"][class*=\"_red\"] {\n  ...\n}\n```\n\nAnd HTML usage:\n\n```html\n\u003cbutton class=\"button-color_red\" type=\"button\" /\u003e\n```\n\nAs you can see - or not - that kind of class connection gives us some special amenities, which are:\n\n* clear and compact class presentation\n* possibility of alternating use\n* ease of class expansion\n* internal class injection\n\nBased on this structure you can define style levels depending on the complexity of nesting several HTML elements. It may be familiar with [BEM](https://en.bem.info/methodology/) methodology (block, element, modifier), and acording to it we can build something similar and common.\n\nOf course there is a black side of this solution. Sometimes when classes will have the same name, parts can overwrites each other. To avoid this try to keep unique class modifiers and options even for main blocks/parents.\n\nOK, back to structure...\n\n\n```scss\n@include class-model(block) {\n  display: inline-block;\n  @include class-modifier(absolute) {\n    position: absolute;\n    left: 0px;\n    @include class-option(top) {\n      top: 0px;\n    }\n    @include class-option(bottom) {\n      bottom: 0px;\n    }\n  }\n}\n```\n\nCSS output:\n\n```css\n[class*=\"block\"] {\n  display: inline-block\n}\n[class*=\"block\"][class*=\"-absolute\"] {\n  position: absolute;\n  left: 0px;\n}\n[class*=\"block\"][class*=\"-position\"][class*=\"-top\"] {\n  top: 0px;\n}\n[class*=\"block\"][class*=\"-position\"][class*=\"-bottom\"] {\n  bottom: 0px;\n}\n```\n\nNow you can use it in your HTML in several ways:\n\n* only inline block notation `\u003cdiv class=\"block\"\u003e\u003c/div\u003e`\n* with absolute position `\u003cdiv class=\"block-absolute\"\u003e\u003c/div\u003e`\n* or with absolute position on bottom of parent `\u003cdiv class=\"block-absolute_bottom\"\u003e\u003c/div\u003e`\n\n`class-modifier` and `class-option` can be used as a mutiple notation i.g.:\n\n```scss\n// class modifier\n@include class-modifier(color, size, structure) {\n  ...\n}\n// class option\n@include class-option(red, big, relative) {\n  ...\n}\n```\n\nAnother very important advantage of this construction is use of `class-model` independently within defined code. Regardless of which part of the class function will be used, there will be ability to inject unplanned code.\n\nFor example we have this HTML element:\n\n`\u003cdiv class=\"this-is-normal-div-with-some-extra_class\"\u003e\u003c/div\u003e`\n\nand it's in the middle of code tree. Right now we have to inject some style to this but we don't have any class/selector definition. So let's use `class-model` notation like this:\n\n```scss\nbody {\n  main {\n    // use like this\n    @include class-model(normal-div) {\n      // code here\n      @include class-modifier(with) {\n        // code here\n        //\n        // css output: [class*=\"div\"][class*=\"-with\"]\n      }\n    }\n    // or\n    @include class-model(extra) {\n      // code here\n      @include class-option(class) {\n        // code here\n        //\n        // css output: [class*=\"extra\"][class*=\"_class\"]\n      }\n    }\n  }\n}\n```\n\n\u003ca name=\"class-option\"\u003e\u003c/a\u003e\nOK. At the end remember to not use `class-option` notation without nested in `class-modifier` above. Element will be not recognized as a dedicated class connection one and styles for it will be not assigned. Be careful especially when you are using the predefined classes.\n\n**Tip**: Inside framework code there will be a lot of class connections examples, analize them to learn more.\n\n---\n\n### Globals\n\n**Vandor prefixer** - may be not necessary as much right now but still needed.\n\n`prefixr($attribute, $value, $prefixes)`\n\n* `$attribute` - style atribute like `border-radius`\n* `$value` - style value like `10px`\n* `$prefixes` - used browser prefixes like `moz, webkit`\n\n*prefixr mixin is used over almost all other mixins.\n\n\n**Float clearfix** - `clearfix()` - simple and common\n\n---\n\n### Visuals\n\n**Font size***\n\n`font-size($size: $font-base-size, $inherit: true)`\n\n* `$font-base-size` variable defined globally\n* `$inherit` - switch to false to overwrite font size value\n\n**Line height***\n\n`line-height($line-height: $font-base-line-height)`\n\n* `$font-base-line-height` variable defined globally\n* line height has the same size factor as font size value\n\n*font size and line height are defined in rem units ([more about here](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/))\n\n**Font reset** - `font-reset()` - will reset/normalize style, weight and variant of font values\n\n**Text hide** - `text-hide()` - will hide but not disable text\n\n**Text wrap** - `text-wrap()` - will wrap to long text\n\n**Text truncate** - `text-truncate()` - will truncate to long text, remember that not all browsers support this feature\n\n**Font face**\n\n`font-face($font-face-name, $font-face-path: $font-custom-path)`\n\n* may be not needed because it's defined top-down, the one and only thing that you should define to use custom font face is set up name and path to it in `_variables.scss` file\n* the same for icons font face, enable and define in `_variables.scss` file\n\n**Font icon**\n\n`font-icon($code)`\n\n* icons as a font face are defined by special classes ([more about here](#icons)), but if the need arises use this mixin with the same code as in `_icons.scss` file defined for `$code` variable i.g. \"\\e900\\\"\n\n**Border radius** - `border-radius($radius: 5px)` - set `50%` value to fully round your object\n\n\u003ca name=\"border-radius-unregullar\"\u003e\u003c/a\u003e\n**Border radius unregullar**\n\n`border-radius-unregullar($top-left: 0, $top-right: 0, $bottom-left: 0, $bottom-right: 0)`\n\n* remember that you can use here more than one value as a one corner setup ([more about here](https://lea.verou.me/humble-border-radius/#for-browser))\n\n**Box shadow**\n\n`box-shadow($shadow-1, $shadow-2, ..., $shadow-4)`\n\n* possibility of using more than one box shadow setup\n\n**Opacity** - `opacity($alpha)` - just set a value form 0 to 1 / `.2`\n\n**Input placeholder color** - `placeholder-color($color)` - use for text inputs and textareas\n\n**Element fully disabled** - `element-disabled()` - fully out of DOM painting\n\n**Element matched**\n\n`element-matched($type: border-box)`\n\n* for accuracy this is box sizing setup\n\n**Element with custom width**\n\n`element-width-custom($width: 100%, $margin-top: false, $margin-bottom: false)`\n\n* this mixin sets up an element width and puts it at the center of relative parent, to change centered position use `$margin-top` or `$margin-bottom` variables\n* great for setting positions of main layout blocks like `\u003csection\u003e` or `\u003cmain\u003e` ([more about HTML5 tags](http://html5doctor.com/))\n\n**Element with full height** - `element-height-full()` - set up full height relatively to parent\n\n**Element size**\n\n`element-size($size)`\n\n* `$size` variable should have one (only for width) or two (for width and height) values notation like `20px` or `20px 100px`, of course you can use any other unit like `pt` or `vm/hm`\n\n**Position absolute centered**\n\n`position-absolute-center($top: 0)`\n\n* will put element in absolute position but at the center of parent element\n* change `$top` variable to move element\n\n**Custom absolute/fixed position**\n\n`position-absolute-custom($coords: 0 0 0 0, $fixed: false)`\n\n* `$coords` of absolute position (top right bottom left) should be written without commas\n* notice that unitless values will be not included as a position value - i.g. if you set `0px 0 0 0px` in output there will be only `position: absolute; top: 0px; left: 0px;` notation\n* change `$fixed` variable to exactly `fixed` value to set position on it\n\n**Element verticaly aligned** - `element-vertical-align()` - uses `transform-translate()` mixin\n\n**Background clipping** - `background-clip($clip)`\n\n**Covered background**\n\n`background-cover($image, $bg-position-x, $bg-position-y, $box-width, $box-height)`\n\n* `$image` variable is only a file name, if you have non-typical images/backgrounds path please change `$global-images-path` variable in `_variables.scss` file\n* you must provide all of variables to correctly set background as a block cover - great for flat big photos layouts\n\n**Custom background**\n\n`background-custom($image, $position-horizontal: center,  $position-vertical: top, $background-repeat: no-repeat, $background-size: auto)`\n\n* `$image` variable is only a file name, if you have one non-typical images/backgrounds path please change `$global-images-path` variable in `_variables.scss` file\n\n**Multiple backgrounds**\n\n`background-multiply($background_1, $background_2: false, $background_3: false)`\n\n* possibility of using more than one background\n\n**Sprites**\n\n`background-sprite($x: 0, $y: 0, $retina: false)`\n\n* fill `$x` and `$y` variables as a assigned icon position on your sprite file\n* this mixin contain couple of additional variables: `$global-sprite-type`, `$global-sprite-name` and `$global-sprite-size`; all of them are defined globally in `_variables.sccs' file\n* also it provides retina displays ([more about here](https://en.wikipedia.org/wiki/Retina_Display)) setup, so if you're preparing mobile version of your application remember to create special retina ready sprite file: `@2x`\n\n**Gradients***\n\n`background-gradient-linear($position: 0, $from: #fff 50%, $color-a: false, $color-b: false, $color_c: false)`\n\n* possibility of using more than two color gradient (max 4)\n* remember that you can manipulate position of gradients move ([more about here](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient))\n* use numeric values to set gradient direction or conected predefined definitions\n\n*there is no radial gradient mixin - sory\n\n---\n\n### Abstracts\n\n**Tansform custom** - `tranform-custom($params)`\n\n**Transform rotate** - `transform-rotate($degrees: 0)` - use only a number of degrees\n\n**Transform scale** - `transform-scale($factor: 0)`\n\n**Transform skew** - `transform-skew($x: 0, $y: 0)` - use only a number of degrees\n\n**Transform translate** - `transform-translate($x: 0, $y: 0)`\n\n**Transform translate 3D** - `transform-translate3d($perspective: 100px, $x: 0, $y: 0, $z: 0)`\n\n**Transform origin** - `transform-origin($x: 0, $y: 0)`\n\n*more and complex specs about CSS3 transforms you will find [here](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function)\n\n**Transition all**\n\n`transition-all($time: 300ms)`\n\n* it will smoothly transit all defined properties\n* you can change transition time\n\n**Custom transition**\n\n`transition-custom($property, $time: 300ms, $type: ease-in-out)`\n\n* define one of style property that you want to transition\n* you can change time and type o transition\n\n**Transition with cubic bezier**\n\n`transition-cubic($property, $time)`\n\n`transition-cubic-params($param-a: 0, $param-b: 0, $param-c: 0, $param-d: 0)`\n\n* these two mixins must act together\n* transitions with cubic bezier effect are complicated but very powerfull\n* you can use them instead of more aggravating keyframes animations\n* more about cubic bezier transitions you will find [here](http://callmenick.com/post/level-up-your-css-animations-with-cubic-bezier), also you can use ready to go [generator](http://cubic-bezier.com/#.17,.67,.83,.67)\n\n**Animations**\n\n`animation-custom($animation-name, $coords: 0 0 0)`\n\n`animation-keyframe(animation-name)`\n\n* these two mixins must act together\n* `animation-custom` mixin define animation name and coordinates (these must arrive with no comma notation):\n  * `$duration` - time duration of the animation\n  * `$delay` - delay before the animation starts\n  * `$iteration` - the number of animation repetitions\n* `animation-keyframe` is an defined above animation call, in content of this mixin you can set a whole scenario and animation schema\n\nSimple usage example:\n\n```scss\ndiv {\n  @include animation-custom(fadeout, 2s 0 infinite);\n  @include animation-keyframe(fadeout) {\n    0% { opacity: 1; }\n    50% { opacity: 0; }\n    100% { opacity: 1; }\n  }\n}\n```\nThis will build \"fadeout\" animation that will take 2 seconds, will be repeated infinite times and will be delayed 0 seconds. The core feature will be change opacity property from 1 to 1 in a 100% process schema.\n\nMore about CSS animations you can find [here](http://www.w3schools.com/css/css3_animations.asp).\n\n---\n\n### Mobile/RWD\n\nMobile mixins are nothing other than define of @media-queries rules ([more about here](https://developer.mozilla.org/pl/docs/Web/CSS/Media_Queries/Using_media_queries)). All dimensions are defined as a global variables and they are adapted to the most common mobile devices, phones and tablets.\n\nThere are two types of mobile mixins. They are built in a slightly different way than other mixins. One of this group comes with the possibility to customize viewport width value, second is predefined for most popular mobile devices.\n\nThis is the list of dimension names and connected breakpoint variables defined in `_variables.scss` file:\n\n```\nlarge-screen - $breakpoint-largescreen\nbig-screen - $breakpoint-bigscreen\napp-width - $breakpoint-appwidth\nipad-landscape - $breakpoint-ipad-max\nipad-portrait - $breakpoint-ipad-min\ntablet-portrait - $breakpoint-tablet-min\ntablet-landscape - $breakpoint-tablet-max\nipad-mini - $breakpoint-ipad-min\niphone6-landscape - $breakpoint-iphone6-max\niphone6-portrait - $breakpoint-iphone6-min\niphone5-landscape - $breakpoint-iphone5-max\niphone-landscape - $breakpoint-iphone-max\niphone-portrait - $breakpoint-iphone-min\n```\nNow, the core of mobile mixins usage looks like this:\n\n`breakpoint($breakpoint, $direction: false)`\n\nIf you want to use it with custom viewport values use:\n\n```scss\n@include breakpoint(640px) {\n  // content code here will append styles\n  // for all devices with 640px width or less\n}\n```\nas you probably noticed there is one other variable `$direction`. This define viewport/device width range that will assign code to the resolution.\n\nThree options in here:\n\n* `from-to` - range from to selected resolution\n* `from` - range only from selected resolution\n* `to` - range only to selected resolution\n\nand usage:\n\n```scss\n@include breakpoint(640px 1024px, 'from-to') {\n  // content code here will append styles\n  // for all devices that can display 640px but not less\n  // and devices that can display not more that 1024px\n}\n\n@include breakpoint(640px, 'from') {\n  // content code here will append styles\n  // for all devices that can display more than 640px but not less\n}\n\n@include breakpoint(640px, 'to') {\n  // content code here will append styles\n  // for all devices that can display less then 640px but not more\n\n  // it's the same mixin as lonely `breakpoint(640px)`\n  // except that here we know exactly what range is defined\n}\n```\n\nThis was the first group of mobile mixins. The second one is more transparent.\n\nSo, as a value of `$point` use one of predefined dimension names. i.g.\n\n```scss\n@include breakpoint(iphone6-landscape) {\n  // content code here will append styles\n  // for iPhone 6 landscape view\tand less\n}\n```\n*notice that all of this predefined rules comes with additional style properties like device pixel ratio\n\n---\n\n### Additionals\n\n**Calc** - `calc($property, $value)` - ([more about here](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)) - great for mobile features\n\n**Interface Appearance**\n\n`appearance($value: none)` -\n\n* the appearance property is used to display an element using a platform-native styling based on the users' operating system's theme\n* you can enable it using this mixin\n\n**User Select** - `user-select($value: none)` - ([more about here](https://css-tricks.com/almanac/properties/u/user-select/))\n\n**Image render** - `image-rendering($type: crisp)` - ([more about here](https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering))\n\n**Columns**\n\n`columns-custom($column-width: 200px, $column-count: 0, $column-gap: 20px, $column-rule: false)`\n\n* this contains additional scaling variables which are: `$base-unit-size`, `$base-unit-type` and `$base-unit`\n* you can skip `$column-count`, `$column-gap` and `$column-rule` then mixin will build columns layout by default\n* the `$column-rule` variable should contain three coords defined without comma notation, they are: `$width $style $color`\n* more about CSS column layout you will find [here](https://css-tricks.com/almanac/properties/c/columns/)\n\n## Global classes and components\n\nAs already mentioned, framework has prepared class system. They can help build overall layout structure and support main and common project styling. You will find here definitions for that kind of features like grids, shifts, borders, backgrounds, text, etc. All of them are defined in special `_base.scss` file. They are strictly based on system variables.\n\nBefore you will start using them check again the class connection methodology [here](#classes-syntax-class-connection-structure), and the model/modifier/option rules (also [read this](#class-option)).\n\n\u003ca name=\"array-variables\"\u003e\u003c/a\u003e\n**Important** - At some class models there are defined speical pair of variables (`$property-option-name` and `$property-option-code`). They appear to define colors and sizes of several elements. They are written in a comma notation. Please keep them unchanged because this construction works like array and system will iterate by them to build these classes. You can add another colors and corresponding names, aldo remember to keep the same number of both and keep some color prefix. Prefix? What for? In some cases compiler may treat them as a hex color presentation and generate color code instead of color name.\n\n### Visuals\n\nAll HTML elements in project markup will recive `box-sizing` property set to `border-box` and all of them will gonna have reset `outline` property (this applies mainly to buttons and inputs).\n\n---\n\n**Links**\n\nFull links/anchors configuration you can handle by changing dedicated variables for them in `_variables.scss` file. Also you can use special class `link` for any text object in your project. Before that, set up default links/anchors configuration.\n\nCouple avaliable variables:\n\n* `$link-base-color` - this is clear\n* `$link-decoration` - set link decoration true/false\n* `$link-decoration-type` - if you will set link decoration on `true` this variable will attach dedicated link decoration, by default `underline`\n* `$link-hover-type` - this variable will handle hover state for links, set here *\"color\"* property if you want change link color on hover, if not, leave none to keep none hover state for links, set *\"underline\"* or other property to set other link hover state\n* `$link-hover-color` - if you will use `color` as a link hover type this variable will set chosen color, blue by default\n* `$link-visited-color` - this is clear\n\nThe `link` class - you can use it for inline text elements. For those there are separated variables:\n\n* `$link-class-type` - this is clear - `underline` or `color`\n* `$link-class-hover-type` - the same as above\n\nThere is also special configuration to set links oposite type named `naked`; and the variables:\n\n* `$link-class-naked-hover-type` - `underline` or `color`\n* `$link-class-naked-hover-color` - used if `$link-class-naked-hover-type` is `color`\n\nClass model\n\n```html\n\u003c!-- this will append all properties from normal link element and will set it as a block element --\u003e\n\u003cspan class=\"link\"\u003e\u003c/span\u003e\n```\n\nClass modifiers\n\n```html\n\u003c!-- the same as for above one but as a inline-block element --\u003e\n\u003cspan class=\"link-inline\"\u003e\u003c/span\u003e\n\n\u003c!-- the same as normal link element but without any decoration for normal and hover state --\u003e\n\u003cspan class=\"link-naked\"\u003e\u003c/span\u003e\n\n\u003c!-- of course you can use them together --\u003e\n\u003cspan class=\"link-naked-inline\"\u003e\u003c/span\u003e\n\u003c!-- or --\u003e\n\u003cspan class=\"link-inline-naked\"\u003e\u003c/span\u003e\n```\n---\n\n**Cursors**\n\nThis class will help you to set preferred element cursor type\n\nClass model\n\n```html\n\u003c!-- this will set only cursor property on auto for all element children --\u003e\n\u003csection class=\"cursor\"\u003e\u003c/section\u003e\n```\n\nClass modifiers\n\n```html\n\u003c!-- this will set cursor property on pointer --\u003e\n\u003csection class=\"cursor-pointer\"\u003e\u003c/section\u003e\n\n\u003c!-- this will set cursor property on default --\u003e\n\u003csection class=\"cursor-default\"\u003e\u003c/section\u003e\n\n\u003c!-- this will set cursor property on auto --\u003e\n\u003csection class=\"cursor-auto\"\u003e\u003c/section\u003e\n```\n\nClass option\n\n```html\n\u003c!-- this will set defined cursor property for all children --\u003e\n\u003csection class=\"cursor-pointer_inherit\"\u003e\u003c/section\u003e\n\u003c!-- or --\u003e\n\u003csection class=\"cursord-default_inherit\"\u003e\u003c/section\u003e\n```\n---\n\n**Backgrounds**\n\nBy using background class model you can set colors for them.\n\nThere are defined two special variables for this purpose:\n\n* `$background-color-name`\n* `$background-color-code`\n\n[Read again how this construction works](#array-variables).\n\nClass model\n\n```html\n\u003c!-- it does not do anything - we need class modifier and option --\u003e\n\u003csection class=\"background\"\u003e\u003c/section\u003e\n```\n\nClass modifier\n\n```html\n\u003c!-- it does not do anything - we need class option --\u003e\n\u003csection class=\"background-color\"\u003e\u003c/section\u003e\n```\n\nClass option\n\n```html\n\u003c!-- use class option as a defined color name to set background for section element --\u003e\n\u003csection class=\"background-color_bwhite\"\u003e\u003c/section\u003e\n\u003c!-- or --\u003e\n\u003csection class=\"background-color_bblack\"\u003e\u003c/section\u003e\n\u003c!-- or --\u003e\n\u003csection class=\"background-color_grey\"\u003e\u003c/section\u003e\n\n\u003c!-- you can use all of defined colors in _variables.scss file and feel free to add your's --\u003e\n```\n---\n\n**Borders**\n\nBorder class model:\n\n```html\n\u003c!-- it does not do anything - we need class modifier and option --\u003e\n\u003csection class=\"border\"\u003e\u003c/section\u003e\n```\n\n*Types*\n\nBorder types are notated as a class options: `top, left, right, bottom, full`\n\nUsage:\n\n```html\n\u003csection class=\"border_top\"\u003e\u003c/section\u003e\n\u003c!-- or --\u003e\n\u003csection class=\"border_right\"\u003e\u003c/section\u003e\n\u003c!-- or --\u003e\n\u003csection class=\"border_full\"\u003e\u003c/section\u003e\n```\n\nthese class options will define which side of element will style our borders. Note that used solo will not gives visible resaults. You have to use another modifiers to menage border classes i.g. with color modifier.\n\n*Colors*\n\nColors are defined as a standard list of name/code notation. You can use all of defined colors or add your own in `_variables.sccs` file.\n\nUsage:\n\n```html\n\u003csection class=\"border-color_bwhite\"\u003e\u003c/section\u003e\n\u003c!-- or --\u003e\n\u003csection class=\"border-color_bblack\"\u003e\u003c/section\u003e\n\u003c!-- or --\u003e\n\u003csection class=\"border-color_bred\"\u003e\u003c/section\u003e\n\n\u003c!-- color as a class modifier and color name as a class option --\u003e\n```\n\nBy using this class notation you will recive full elemnet border color, but if you want to set color for only one type of element border connect these two class modifiers like this:\n\n```html\n\u003csection class=\"border_left-color_bwhite\"\u003e\u003c/section\u003e\n\u003c!-- or --\u003e\n\u003csection class=\"border_full-color_bblack\"\u003e\u003c/section\u003e\n\u003c!-- or --\u003e\n\u003csection class=\"border_bottom-color_bred\"\u003e\u003c/section\u003e\n\u003c!-- or --\u003e\n\u003csection class=\"border_bottom_right-color_bred\"\u003e\u003c/section\u003e\n\u003c!-- or --\u003e\n\u003csection class=\"border_bottom_top-color_bred\"\u003e\u003c/section\u003e\n```\n\n*Border radius*\n\nThere are four options to style element border radius\n\n* `circle` - will set fully rounded element\n* `small, medium, big` - defined in `_variables.scss` file, by default in sequence `2px, 5px, 10px`\n\nUsage:\n\n```html\n\u003csection class=\"border-radius_circle\"\u003e\u003c/section\u003e\n\u003c!-- or --\u003e\n\u003csection class=\"border-radius_small\"\u003e\u003c/section\u003e\n```\nFor more advanced border radius configuration use dedicated mixin ([more about here](#border-radius-unregullar)).\n\n*Bold*\n\nBesides all of these options there is also bold border modifier. For thickness responds `$border-bold-size` variable, use it like this:\n\n```html\n\u003csection class=\"border_right-bold\"\u003e\u003c/section\u003e\n```\n---\n\n**Shifts**\n\nShifts are simple, this is just a classes for margins and paddings. They are fastened together by special shifts mixin. Probably you notice before, that is no description about it - this one is special and there will be not need to use.\n\nBy default shifts are iterated 6 times. The gap between them is defined by `$shift-overall` global variable (`5px` by default). This means that the increase of value is proportional to the repetitions number. Number of repetitions you can change by changing the `$shift-iteration` variable.\n\nThere are plenty options of shifts configuration:\n\n* `full`\n* `top, bottom, left, right`\n* `horizontal, vertical`\n\nFor shift type responds class modifier `margin` or `padding` used with `shift` class model.\n\n```html\n\u003csection class=\"shift-margin_1\"\u003e\u003c/section\u003e\n```\n\nOK, quick instruction - this will set margin property on `5px`. 5 because `$shift-overall` variable is `5px`. Increase the factor to 2 to get `10px` value. By default there is 6 steps interation and this will provide `30px` value of margin property. The same for paddings. To reach higher range, change `$shift-iteration` variable.\n\nFull options:\n\n```html\n\u003c!-- section { margin: 5px; } --\u003e\n\u003csection class=\"shift-margin_1\"\u003e\u003c/section\u003e\n\n\u003c!-- section { margin: 15px; } --\u003e\n\u003csection class=\"shift-margin_3\"\u003e\u003c/section\u003e\n\n\u003c!-- section { margin: 30px; } --\u003e\n\u003csection class=\"shift-margin_6\"\u003e\u003c/section\u003e\n\n\u003c!-- section { padding: 30px; } --\u003e\n\u003csection class=\"shift-padding_6\"\u003e\u003c/section\u003e\n```\n\nSides options:\n\n```html\n\u003c!-- section { margin: 10px 0 0 0; } --\u003e\n\u003csection class=\"shift-margin_2-top\"\u003e\u003c/section\u003e\n\n\u003c!-- section { margin: 0 10px 0 0; } --\u003e\n\u003csection class=\"shift-margin_2-right\"\u003e\u003c/section\u003e\n\n\u003c!-- section { padding: 0 0 0 25px; } --\u003e\n\u003csection class=\"shift-padding_5-left\"\u003e\u003c/section\u003e\n```\n\nAnd vertical, horizontal options:\n\n```html\n\u003c!-- section { margin: 10px 0; } --\u003e\n\u003csection class=\"shift-margin_2-vertical\"\u003e\u003c/section\u003e\n\n\u003c!-- section { padding: 0 10px; } --\u003e\n\u003csection class=\"shift-padding_2-horizontal\"\u003e\u003c/section\u003e\n```\n\n### Fonts / Texts\n\n`strong` tag is handled by custom predefined font variables. So if you are using custom font face with bold variant and this font face is your master, all strong elements will recive bold font face for `font-family` property.\n\n---\n\n**Text**\n\n`text` class model comes with `color`, `size` and `align` modifiers.\n\nColors are defined as a standard list of name/code notation. You can use all of defined colors or add your own in `_variables.sccs` file.\n\n```html\n\u003cspan class=\"text-color_bwhite\"\u003e\u003c/span\u003e\n\u003c!-- or --\u003e\n\u003cspan class=\"text-color_bgrey\"\u003e\u003c/span\u003e\n```\n\nAlmost the same \"relationship\" applies to text sizes. For this, there are `$font-sizes-name` and `$font-sizes-number`. Use predefined names and sizes or change them to your own. Remember only, that this still works like an array and all values is precisely connected with each other.\n\n```html\n\u003cspan class=\"text-size_small\"\u003e\u003c/span\u003e\n\u003c!-- or --\u003e\n\u003cspan class=\"text-color_big\"\u003e\u003c/span\u003e\n```\n\nText align - `left`, `center` and of course `right`.\n\n```html\n\u003cspan class=\"text-align_center\"\u003e\u003c/span\u003e\n\u003c!-- or --\u003e\n\u003cspan class=\"text-align_right\"\u003e\u003c/span\u003e\n```\n\nText uppercase - use `uppercase` modifier.\nText capitalize - use `capitalize` modifier.\n\n**Important** - The text class model is a great opportunity to show connection feature.\n\n```html\n\u003c!-- set text color to white, size to tiny (12px) and alignment to right --\u003e\n\u003cspan class=\"text-color_bwhite-size_tiny-align_right\"\u003e\u003c/span\u003e\n\n\u003c!-- or set alignment on center and size to huge --\u003e\n\u003cspan class=\"text-align_center-size_huge\"\u003e\u003c/span\u003e\n```\n---\n\n**Fonts**\n\nConfiguration for fonts is simple and fully based on predefined variables.\n\nWant to use custom font face? Enable it by changing `$font-custom` to `true` and define names for several typeface. Your font face is master? Set `$font-custom-master` on `true`.\n\nSecondary custom font face? Like above, but use special variables for `$font-secondary`. Framework does not provide third option for custom font face. Three different font faces? Really?\n\nHolla, wait, there is a custom font face class.\n\nIf you are using custom typeface not as a primary one you have three special classes to inject style linearly.\n\n* `.cf` - assigned to `$font-base-regular`\n* `.cfb, .cfs` - assigned to `$font-base-bold`\n* `.cfl` - assigned to `$font-base-light`\n\n**Headings**\n\nClassically we have six defined headings. The size is defined by special variables: `$headings-size` and `$headings-size-factor`. Similar for line height: `$headings-lineheight-size` and `$headings-lineheight-factor`. Both of them are made proportionately by size from 1-6.\n\nFor additional comfort framework provide special headings classes - `.h1 .h2 .h3 .h4 .h5 .h6`. Use them - if you need - for none heading elements.\n\n---\n\n### Boxes\n\nMost likely this class model is most powerful and complex. Follow the all modifiers and remember that you can connect all of them.\n\nMain model\n\n```html\n\u003csection class=\"box\"\u003e\u003c/section\u003e\n```\n\nBy default this model does nothing. As probably you thought there is no any `display` property notation. Why? It's simple - this model should be used for default HTML block/box elements and they as you know comes with `block` value.\n\n*Full Size*\n\nAdd full `width` and `height` size for box.\n\n```html\n\u003c!-- width on 100% of parent --\u003e\n\u003csection class=\"box-full_width\"\u003e\u003c/section\u003e\n\n\u003c!-- width on 100% of screen --\u003e\n\u003csection class=\"box-full_width_ofscreen\"\u003e\u003c/section\u003e\n\n\u003c!-- height on 100% --\u003e\n\u003csection class=\"box-full_height\"\u003e\u003c/section\u003e\n\n\u003c!-- height on 100% of screen --\u003e\n\u003csection class=\"box-full_height_ofscreen\"\u003e\u003c/section\u003e\n\n\u003c!-- flexible height - sets height on auto --\u003e\n\u003csection class=\"box-full_height_flexible\"\u003e\u003c/section\u003e\n```\n\n*Relative box*\n\n```html\n\u003c!-- relative box position --\u003e\n\u003csection class=\"box-relative\"\u003e\u003c/section\u003e\n```\n\n---\n\n\u003ca name=\"grid-system\"\u003e\u003c/a\u003e\n**Grid**\n\nGrid system construction is simple and generally quite universal. There is `grid` parent element and inside `column` notation. By default grid is splitted into 12 parts - if you want less or more please change `$grid-count` global variable.\n\nColumn is an another class model and it cooperates closely with `grid` parent. For them we have `width` modifier with number notation (1-12). Width of columns is defined in `%` units.\n\nUsage:\n\n```html\n\u003c!-- /-/------------/ --\u003e\n\u003csection class=\"box-grid\"\u003e\n  \u003cdiv class=\"column-width_1\"\u003e\u003c/section\u003e\n  \u003cdiv class=\"column-width_11\"\u003e\u003c/section\u003e\n\u003c/section\u003e\n\n\u003c!-- /--/-----------/ --\u003e\n\u003csection class=\"box-grid\"\u003e\n  \u003cdiv class=\"column-width_2\"\u003e\u003c/section\u003e\n  \u003cdiv class=\"column-width_10\"\u003e\u003c/section\u003e\n\u003c/section\u003e\n\n\u003c!-- /---/----------/ --\u003e\n\u003csection class=\"box-grid\"\u003e\n  \u003cdiv class=\"column-width_3\"\u003e\u003c/section\u003e\n  \u003cdiv class=\"column-width_9\"\u003e\u003c/section\u003e\n\u003c/section\u003e\n\n\u003c!-- /----/---------/ --\u003e\n\u003csection class=\"box-grid\"\u003e\n  \u003cdiv class=\"column-width_4\"\u003e\u003c/section\u003e\n  \u003cdiv class=\"column-width_8\"\u003e\u003c/section\u003e\n\u003c/section\u003e\n\n\u003c!-- /-----/--------/ --\u003e\n\u003csection class=\"box-grid\"\u003e\n  \u003cdiv class=\"column-width_5\"\u003e\u003c/section\u003e\n  \u003cdiv class=\"column-width_7\"\u003e\u003c/section\u003e\n\u003c/section\u003e\n\n\u003c!-- /------/-------/ --\u003e\n\u003csection class=\"box-grid\"\u003e\n  \u003cdiv class=\"column-width_6\"\u003e\u003c/section\u003e\n  \u003cdiv class=\"column-width_6\"\u003e\u003c/section\u003e\n\u003c/section\u003e\n\n\u003c!-- /-------/-----/ --\u003e\n\u003csection class=\"box-grid\"\u003e\n  \u003cdiv class=\"column-width_7\"\u003e\u003c/section\u003e\n  \u003cdiv class=\"column-width_5\"\u003e\u003c/section\u003e\n\u003c/section\u003e\n\n\u003c!-- /--------/----/ --\u003e\n\u003csection class=\"box-grid\"\u003e\n  \u003cdiv class=\"column-width_8\"\u003e\u003c/section\u003e\n  \u003cdiv class=\"column-width_4\"\u003e\u003c/section\u003e\n\u003c/section\u003e\n\n\u003c!-- /---------/---/ --\u003e\n\u003csection class=\"box-grid\"\u003e\n  \u003cdiv class=\"column-width_9\"\u003e\u003c/section\u003e\n  \u003cdiv class=\"column-width_3\"\u003e\u003c/section\u003e\n\u003c/section\u003e\n\n\u003c!-- /----------/--/ --\u003e\n\u003csection class=\"box-grid\"\u003e\n  \u003cdiv class=\"column-width_10\t\"\u003e\u003c/section\u003e\n  \u003cdiv class=\"column-width_2\"\u003e\u003c/section\u003e\n\u003c/section\u003e\n\n\u003c!-- /-----------/-/ --\u003e\n\u003csection class=\"box-grid\"\u003e\n  \u003cdiv class=\"column-width_11\"\u003e\u003c/section\u003e\n  \u003cdiv class=\"column-width_1\"\u003e\u003c/section\u003e\n\u003c/section\u003e\n\n\u003c!-- /------------/ --\u003e\n\u003csection class=\"box-grid\"\u003e\n  \u003cdiv class=\"column-width_12\"\u003e\u003c/section\u003e\n\u003c/section\u003e\n```\n\nBe sure that for the `grid` parent is defined width. If not, use `full_width` class modifier. Like this:\n\n```html\n\u003csection class=\"box-grid-full_width\"\u003e\n  \u003cdiv class=\"column-width_11\"\u003e\u003c/section\u003e\n  \u003cdiv class=\"column-width_1\"\u003e\u003c/section\u003e\n\u003c/section\u003e\n\n\u003c!-- by default grid box has relative position --\u003e\n```\nAt the end you need to know that `grid` parent will set additional properties for it self.\n\nIt will recive:\n\n* `font-size` property on `0`\n* `position` on `relative`\n* and `height` on `auto`\n\n`font-size` reset is for full and hassle-free columns fitting.\n\nWhere are the grid gaps? There is no any. Why you ask. Because it affects simple and clean construction of grid system. However there is simple way to achive this solution. How? By using padding shifts.\n\nUsage:\n\n```html\n\u003csection class=\"box-grid-full_width\"\u003e\n  \u003cdiv class=\"column-width_11 shift-padding_2-left\"\u003e\u003c/section\u003e\n  \u003cdiv class=\"column-width_1 shift-padding_2-right\"\u003e\u003c/section\u003e\n\u003c/section\u003e\n\u003c!-- or --\u003e\n\u003csection class=\"box-grid-full_width\"\u003e\n  \u003cdiv class=\"column-width_4 shift-padding_2-horizonatl\"\u003e\u003c/section\u003e\n  \u003cdiv class=\"column-width_4 shift-padding_2-horizonatl\"\u003e\u003c/section\u003e\n  \u003cdiv class=\"column-width_4 shift-padding_2-horizonatl\"\u003e\u003c/section\u003e\n\u003c/section\u003e\n```\n\nRemember that all elements still have `border-box` value for `box-sizing` property and using paddings will not affects on column box width. They will stay as a brief, column based construction. Remember to not use margin shifts for column gapping - they will be moved not gapped.\n\n---\n\n**Box with aligned elements**\n\nBy using this class modifier you will set vertical align for all first level child elements.\n\n*Vertically aligned center*\n\n```html\n\u003csection class=\"box-vertical_align_transform\"\u003e\u003c/section\u003e\n```\n\nThis class modifier uses `transform-translate` to fit elements vertically centered.\n\n*Aligned to ...*\n\n```html\n\u003c!-- top --\u003e\n\u003csection class=\"box-vertical_align_top\"\u003e\u003c/section\u003e\n\u003c!-- middle --\u003e\n\u003csection class=\"box-vertical_align_middle\"\u003e\u003c/section\u003e\n\u003c!-- bottom --\u003e\n\u003csection class=\"box-vertical_align_bottom\"\u003e\u003c/section\u003e\n\u003c!-- baseline --\u003e\n\u003csection class=\"box-vertical_align_baseline\"\u003e\u003c/section\u003e\n```\nRemember that all alinged elements should have set `inline-block` value for `display` property. You can achieve this by using inline class modifier - look below.\n\n---\n\n**Box with inline elements**\n\nOK, you have simple modifier `inline` and two options to set all first level children or selected one as a `inline-block` element.\n\nUsage:\n\n```html\n\u003c!-- all first level children will be inline-block elements --\u003e\n\u003csection class=\"box-inline_full\"\u003e\u003c/section\u003e\n\n\u003c!-- selected elements will be inline-block --\u003e\n\u003csection class=\"box-inline\"\u003e\n  \u003cdiv class=\"element-inline\"\u003e\u003c/div\u003e\n  \u003cdiv\u003e\u003c/div\u003e\n\u003c/section\u003e\n```\n\n---\n\n**Box with image inside**\n\nThis modifier will help you to set and precisely fit image to the parent size.\n\nUsage:\n\n```html\n\u003csection class=\"box-image\"\u003e\n  \u003cimg src=\"\" class=\"element-image\" /\u003e\n\u003c/section\u003e\n\n\u003c!-- or if image is placed in another block\nuse inherit class option --\u003e\n\u003csection class=\"box-image\"\u003e\n  \u003cdiv class=\"element-image_inherit\"\u003e\n    \u003cimg src=\"\" /\u003e\n  \u003c/div\u003e\n\u003c/section\u003e\n```\n\n---\n\n**Floated box**\n\nUsage:\n\n```html\n\u003c!-- right --\u003e\n\u003csection class=\"box-float_right\"\u003e\u003c/section\u003e\n\u003c!-- or left --\u003e\n\u003csection class=\"box-float_left\"\u003e\u003c/section\u003e\n```\nNote that this will set `float` property exactly for this element, not for children.\n\n---\n\n**Flex box**\n\nUse `flex` class modifier and particular options:\n\n*Content justify*\n\n* `start`, `middle`, `end`, `spacebetween`, `spacearound`, `spaceevenly`\n\nUse as a class option  with class modifier `content` and class option `justify`:\n\n```html\n\u003csection class=\"box-flex-content_justify_bottom\"\u003e\u003c/section\u003e\n\u003c!-- or --\u003e\n\u003csection class=\"box-flex-content_justify_center\"\u003e\u003c/section\u003e\n```\n\n*Content alignment*\n\nIf your flex box items fills more than two lines you can set vertical alignment for them, but only when the parent container has bigger height than content.\n\n* `start`, `middle`, `end`, `spacebetween`, `spacearound`, `stretch`\n\nUse as a class option with class modifier `content` and class option `align`:\n\n```html\n\u003csection class=\"box-flex-content_align_top\"\u003e\u003c/section\u003e\n\u003c!-- or --\u003e\n\u003csection class=\"box-flex-content_align_middle\"\u003e\u003c/section\u003e\n\u003c!-- or --\u003e\n\u003csection class=\"box-flex-content_align_spacebetween\"\u003e\u003c/section\u003e\n```\n\n*Items wrapping*\n\nBy default flex box items wrapping to the next line, if they're not fit to the block/container width. If you want to avoid that behavior set special class option on `nowrap`.\n\nUsage:\n\n```html\n\u003csection class=\"box-flex_nowrap\"\u003e\u003c/section\u003e\n```\n\n*Items alignment*\n\n* `top`, `middle`, `bottom`, `baseline`, `stretch`\n* `auto` - only for single item alignment\n\nUse as a class option with special class modifier/option `content` and `items`):\n\n```html\n\u003csection class=\"box-flex-content_items_top\"\u003e\u003c/section\u003e\n\u003c!-- or --\u003e\n\u003csection class=\"box-flex-content_items_middle\"\u003e\u003c/section\u003e\n\u003c!-- or --\u003e\n\u003csection class=\"box-flex-content_items_stretch\"\u003e\u003c/section\u003e\n```\n\nIf you want to set alignment for several items use this class options not with block/container but with child of it - element with class modifier `item`.\n\n```html\n\u003csection class=\"box-flex-items_top\"\u003e\n  \u003cdiv class=\"box-flex-item_bottom\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"box-flex-item_middle\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"box-flex-item_stretch\"\u003e\u003c/div\u003e\n\u003c/section\u003e\n```\n\n*Items direction*\n\n* `row`, `rowreverse`, `col`, `colreverse`\n\nUse as a class option `direction_{$type}` with special class modifier/option `content` and `items`):\n\n```html\n\u003csection class=\"box-flex-content_items_direction_row\"\u003e\u003c/section\u003e\n\u003c!-- or --\u003e\n\u003csection class=\"box-flex-content_items_direction_col\"\u003e\u003c/section\u003e\n\n\u003c!-- of course you can use them together --\u003e\n\u003csection class=\"box-flex-content-items_top-items_direction_col\"\u003e\u003c/section\u003e\n```\n\nAs a special feature there is defined direction-wrapping flow shorthand.\n\n```html\n\u003csection class=\"box-flex-flow_rowwrap\"\u003e\u003c/section\u003e\n```\n\n*Item width*\n\nExcept all of that, you also have possibility to set width/sequence of flex box items (`flex` property). By default there is 1-6 sequence iteration, but you can change it by changing `$flex-box-items-sequence-count` variable. After this, set for one of flex box item one of sequence class, like this:\n\nUse as a child of box-flex block with special class midifier `item`:\n\n```html\n\u003c!-- simple and regullar order --\u003e\n\u003csection class=\"box-flex\"\u003e\n  \u003cdiv class=\"box-flex-item-width_1\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"box-flex-item-width_2\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"box-flex-item-width_3\"\u003e\u003c/div\u003e\n\u003c/section\u003e\n\u003c!-- or in the none regullar order --\u003e\n\u003csection class=\"box-flex\"\u003e\n  \u003cdiv class=\"box-flex-item-width_4\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"box-flex-item-width_1\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"box-flex-item-width_5\"\u003e\u003c/div\u003e\n\u003c/section\u003e\n```\n\n*Item grow/shrink*\n\nItems also can grow and shrink. Use value between 0 to `$flex-box-items-shrink-count` or `$flex-box-items-grow-count` (default: 6) to execute several items growing or shrinking.\n\nUse as a child of box-flex block with special class midifier `item`:\n\n```html\n\u003c!-- shrink --\u003e\n\u003csection class=\"box-flex\"\u003e\n  \u003cdiv class=\"box-flex-item-shrink_1\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"box-flex-item-shrink_2\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"box-flex-item-shrink_1\"\u003e\u003c/div\u003e\n\u003c/section\u003e\n\u003c!-- grow --\u003e\n\u003csection class=\"box-flex\"\u003e\n  \u003cdiv class=\"box-flex-item-grow_1\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"box-flex-item-grow_2\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"box-flex-item-grow_1\"\u003e\u003c/div\u003e\n\u003c/section\u003e\n\u003c!-- mixed --\u003e\n\u003csection class=\"box-flex\"\u003e\n  \u003cdiv class=\"box-flex-item-shrink_4\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"box-flex-item-grow_2\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"box-flex-item-shrink_4\"\u003e\u003c/div\u003e\n\u003c/section\u003e\n```\n\n-\n\nMore about flexbox layout you will find [here](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).\n\n---\n\n### Collections\n\nTBA\n\n---\n\n### Buttons\n\nButtons may be one of the most important elements on our project HTML markup. They navigate and supports page actions. That's why we should have very wide variety of customization. Framework will provides many options for buttons such as sizes, colors and positions. Let's dive into them...\n\nMain class model:\n\n```html\n\u003cbutton type=\"button\" class=\"button\"\u003eClick me\u003c/button\u003e\n```\n\nButtons take over custom font face if it will be defined. But to enable this you have to change one special `$button-text-style` variable from `ragular` to `custom`. By default - if it's defined - buttons will take `$font-base-bold` type face. Have defined other type faces? To set ragular use `regular` class modifier, to use thin use `thin`...\n\nExample:\n\n```html\n\u003cbutton type=\"button\" class=\"button-regular\"\u003eClick me\u003c/button\u003e\n```\n\nLet's move on to sizes.\n\n*Sizes and roundings*\n\nThere is main and most important variable to handle button sizes - `$button-size-factor` is responsible for proportion of buttons graduation. If you want to biger or smaller buttons change it. By default there is value of `2`. Button sizes has 6 steps of sizing, but you can increase it by changing `$button-size-iteration` variable.\n\nWith button sizes are closely related button proportion types - `panoramic` and `square`. By default we have `panoramic` value, that gives us wider side edges of button. Change `$button-size-proportion` variable to `square` to reach equal proportions.\n\nExcept that we have one more size variable that can be customized - `$button-text-size-factor`. This one is responsible for size of text inside the button. It will increase right with the size of button.\n\nUsage:\n\n```html\n\u003cbutton type=\"button\" class=\"button-size_1\"\u003eClick me\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"button-size_4\"\u003eClick me\u003c/button\u003e\n```\n\nIn case of using button roundings we have 6 `border-radius` property scale. Number of rounding iteration can be changed by `$button-rounding-iteration` variable. You can also change rounding size factor - `$button-rounding-factor`.\n\nUsage:\n\n```html\n\u003cbutton type=\"button\" class=\"button-rounded_1\"\u003eClick me\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"button-rounded_4\"\u003eClick me\u003c/button\u003e\n```\nWant to more advanced border radius configuration? Use special `border-radius-unregullar` mixin.\n\n*Colors*\n\nColors configuration comes with already well known array based structure.\n\nColors and their names are defined with two special variables: `$button-color-name` and `$button-color-code`. Use predefined colors or feel free to add your owne - keeping in mind the dependence of [array iteration thing](#array-variables).\n\nUsage:\n\n```html\n\u003cbutton type=\"button\" class=\"button-color_bwhite\"\u003eClick me\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"button-color_bgrey\"\u003eClick me\u003c/button\u003e\n```\n\nThere is posibility to reverse button colors and make it more light and flat. To do this use `clear` class option with `color` modifier. In here you have also option to set or remove background for clear buttons - change `$button-clear-background-color` variable to manipulate.\n\nUsage:\n```html\n\u003cbutton type=\"button\" class=\"button-color_bwhite_clear\"\u003eClick me\u003c/button\u003e\n```\n\nTo put these buttons somewhere use `.actionContainer` element. It has centered `100%` width and it's perfect, relative and worm parent for.\n\n```html\n\u003csection class=\"actionContainer\"\u003e\n  \u003cbutton type=\"button\" class=\"button-...\"\u003eClick me\u003c/button\u003e\n\u003c/section\u003e\n```\n\nAnd least but not last - fitting.\n\nIf you want to fit some button to parent box you can use `full` class modifier - comes with `width` and `height` options. These two will set button width on full of it parent. Great for grid/column layout.\n\nUsage:\n\n```html\n\u003cbutton type=\"button\" class=\"button-full_width\"\u003eClick me\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"button-full_height\"\u003eClick me\u003c/button\u003e\n```\nDon't forget about class connection system. That's mean that you can use all of this modifiers and options together and alternately. More abour CCS [here](#classes-syntax-class-connection-structure).\n\n---\n\n### Inputs\n\nIn case of inputs we have two class model configuration. One for type text inputs second for textarea's. Both supposed to live in a special form aware markup. In this markup as a parent we have `\u003cfieldset\u003e` element and of course, input inside.\n\nInputs and textarea's can be scaled just like other elements - by default - from 1-6 size iteration.\n\nUsage:\n\n```html\n\u003cfieldset\u003e\n  \u003cinput class=\"input_regular-scale_1\" type=\"text\"/\u003e\n\u003c/fieldset\u003e\n\u003c!-- or --\u003e\n\u003cfieldset\u003e\n  \u003ctextarea class=\"textarea-scale_1\"\u003e\u003c/textarea\u003e\n\u003c/fieldset\u003e\n```\nAs you've noticed input element has also `regular` option. This prevents the adoption of styles from other input type elements. For text input's keep this special class option.\n\nOf course there is posibility to change input color. And just like with other elements there is two variables type array iteration - `$input_text-color-name` and `$input_text-color-code`. Use defined ones or set your own.\n\nUsage:\n\n```html\n\u003cfieldset\u003e\n  \u003cinput class=\"input-regular-color_bwhite\" type=\"text\"/\u003e\n\u003c/fieldset\u003e\n```\nRouned inputs? Use `rounded` modifier to set `border-radius` property for them. Size of rounding is defined with `$input_text-border-radius` variable - by default it's size of `$shift-overall` variable.\n\nFor more complex `fieldset` parent setup - i.g. with button - there is special modifier named `type`. Dedicated to two type of situations - one with inline input-button elements and other with block styled...\n\nUsage:\n\n```html\n\u003cform\u003e\n  \u003cfieldset class=\"type-inline\"\u003e\n    \u003cinput class=\"input-regular\" type=\"text\"/\u003e\n    \u003cbutton class=\"button\" type=\"post\"\u003eSend me\u003c/button\u003e\n  \u003c/fieldset\u003e\n  \u003c!-- or --\u003e\n  \u003cfieldset class=\"type-blocked\"\u003e\n    ...\n  \u003c/fieldset\u003e\n\u003c/form\u003e\n```\n\n\n---\n\n### Resets\n\nTBA\n\n---\n\n### Additionals\n\nTBA\n\n---\n\n### Icons\n\nIcons configuration is moved to special file named `_icons.scss`. If you are using special icons font face you can define and enable it by changing dedicated global variables in `_variables.scss` file. Names, codes, colors and sizes works just like with other elements - more about options interation you will find [here](#array-variables).\n\nIcons should be presented as `\u003ci\u003e\u003c/i\u003e` HTML element. Icons sign is pinned as a `:before` pseudo class.\n\nUsage:\n\n```html\n\u003ci class=\"icon-message-size_2-color_bwhite\"\u003e\u003c/i\u003e\n```\n\nThe path for icons font face is the same as for normal custom used font faces. By default: `../font`.\n\nAdditionally icons can have strokes. You can enable them by using control variable `$font-icons-stroke`. Change their appearance by changing `$font-icons-stroke-size` and `$font-icons-stroke-color` variables.\n\n---\n\n## Changelog\n\nGo to [changelog file](CHANGELOG.md) to check all recent updates.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukasborawski%2Fbigos","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukasborawski%2Fbigos","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukasborawski%2Fbigos/lists"}