vars-lessdeprecated

A minimal toolkit that lets you build robust and responsive layouts for web and native applications using Flexbox.

Usage no npm install needed!

<script type="module">
  import varsLess from 'https://cdn.skypack.dev/vars-less';
</script>

README

Vars

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 Started

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 wrappers, containers and columns.

<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 wrapper is 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 _1of2 or _1of4 can 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 100%/3.

  • _1of1 → Creates a full width column. This is different from just using the Column class.
  • _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 _1of8.

Grid count can be configured via _variables.less

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.

Default Breakpoints:

  • sm → Small screens (480px).
  • md → Medium screens (840px).
  • lg → Large screens (1200px).

Breakpoints can be configured via _variables.less

Columns can be used with breakpoint relative prefixes i.e. sm, md and lg to change their widths depending on the screen size. For example,

<div class="... sm_1of2 md_1of3"></div>

The 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.

    The _flexContent modifiers 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.

    The _flexSelf modifiers 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.

    The _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.

    The _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.

License

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.