A minimal framework that lets you build responsive layouts for the web as well as native applications. It has normalize.css already baked in and comes with a lot of options to manipulate the layout. Vars is written in Less so its super easy to customize it. It only adds upto around 6kb to your project size. Vars is compatible with every browser that has the support for flexbox.
Get the project files from Github or clone the respository using Git:
$ git clone https://github.com/itsag/vars.git
Or install using NPM or Yarn:
$ yarn add vars-less $ npm install vars-less
Understanding the Layout
Vars uses the concepts of Flexbox for its layout. The layout structure consists of
<div class="Wrapper"> <div class="Container"> <div class="Column">...</div> </div> </div>
Wrapper→ The wrapper is the main container for the layout. Everything goes inside it. A
wrapperis the easiest way to center the content on a page.
Container→ Containers live inside a wrapper. They are full-width spaces that act as parents for columns. Multiple containers can be used in a wrapper and when needed they can also be nested inside other containers and columns.
Columns→ Columns are the actual spaces that hold the content. Columns can be nested inside another columns when needed. By default, a column is equally distributed in the available space of it container. However, fixed width classes such as
_1of4can be used to create fixed width columns.
Fixed width classes - These classes begin with the
_ (underscore) prefix and are applied to the
.Column elements. These classes basically tell, create 1 column of X columns. For example, the class
_1of3 tells to create 1 column of 3 columns, which will render a column with
33.3333% width i.e
_1of1→ Creates a full width column. This is different from just using the
_1of2→ Creates a column that is half (
100%/2) the size of its parent container.
_1of3→ Creates a column that is one third (
100%/3) the size of its parent container.
_1of4→ Creates a column that is one fourth (
100%/4) the size of its parent container upto column
Grid count can be configured via
Making it Responsive
Vars comes with a set of pre-defined breakpoints. These breakpoints are used by columns and modifiers to determine their sizes and use cases. Vars comes with 4 breakpoints of which only one is defined manually, other breakpoints are calculated by the framework itself.
sm→ Small screens (
md→ Medium screens (
lg→ Large screens (
Breakpoints can be configured via
Columns can be used with breakpoint relative prefixes i.e.
lg to change their widths depending on the screen size. For example,
<div class="... sm_1of2 md_1of3"></div>
md_1of3 class will render the column as one third the size of it parent container on medium screens but the same element will be rendered as half the size of its parent container on small screens because of the
sm_1of2 class. Breakpoints give you more control over the layout and help in organizing its structure on different screen sizes.
Manipulating the Layout
Manipulation classes or modifiers are used to change the behavior of columns as well as other elements. Modifiers begin with an
_ (underscore) character and use camel-casing for their names. This helps to better distinguish between a column and a modifier class.
_flexRow→ Used on a parent element to stack its children horizontally as a row.
_flexColumn→ Used on a parent element to stack its children vertically as a column.
_flexRowRev→ Used on a parent element to stack its children horizontally as a row in a reverse order.
_flexColumnRev→ Used on a parent element to stack its children vertically as a column in a reverse order.
_flexWrap→ Used on a parent container to prevent the stack from overflowing by distributing the extra content in new lines.
_flexWrapRev→ Used on a parent container to prevent the stack from overflowing by distributing extra content in new lines in a reverse order.
_flexNoWrap→ Used on a parent element to prevent content wrapping.
_flexContentmodifiers are used on parent elements to align their children (content).
_flexContentTop→ Aligns the content to top.
_flexContentCenter→ Aligns the content to center.
_flexContentBottom→ Aligns the content to bottom.
_flexContentFill→ Distributes the content with equal space between them.
_flexSelfmodifiers are used on elements to align themselves (self).
_flexSelfLeft→ Aligns itself to the left of its parent container.
_flexSelfCenter→ Aligns itself to the center of its parent container.
_flexSelfRight→ Aligns itself to the right of its parent container.
_flexSelfBaseline→ Aligns itself to the baseline of its parent container.
_flexSelfStretch→ The element stretches itself.
_flexMain--modifiers are used to modify the alignment of the content on X-Axis.
_flexMainLeft→ Aligns the content to the left.
_flexMainCenter→ Aligns the content to the center.
_flexMainRight→ Aligns the content to the right.
_flexMainFill→ Distributes the content with equal space between them.
_flexMainEven→ Distributes the content with equal space around them.
_flexCross--modifiers are used to modify the alignment of the content on Y-Axis.
_flexCrossTop→ Aligns the content to the top.
_flexCrossCenter→ Aligns the content to the center.
_flexCrossBottom→ Aligns the content to the bottom.
_flexCrossFill→ Distributes the content with equal space between them.
_isTextLeft→ Aligns text to the left.
_isTextCenter→ Aligns text to the center.
_isTextRight→ Aligns text to the right.
_isTextJustify→ Justifies the text.
_isRelative→ Makes the position of an element as relative.
_isAbsolute→ Makes the position of an element as absolute.
_isFixed→ Makes the position of an element as fixed.
_isBlock→ Makes the element a block element.
_isInline→ Makes the element an inline element.
_isFlex→ Makes the element a flex element.
_isHidden→ Hides the element.
Vars is an open source project and is licensed under the MIT License which means it is free for personal and commercial uses as long as you stick to the terms of the licenses.
The MIT License (MIT) Copyright (c) 2017 Ajay Gupta [https://github.com/itsag] Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
VarsFramework — Crafted with ❤️ by Ajay Gupta.