TL;DR
  • unlimitedGrid is a very small / simple / flexible and functional grid "framework" (based on Sass)
  • Just set the properties in the ug-grid.scss file, next build / compile this file
  • Use the generated classes in your HTML to fast create your individual grid / layout structure!

unlimitedGrid - why use it?

ultra customizable
responsive, mobile first

module structure
use only what you need

small size - only 2kb (5kb)
12 columns + rwd (flexbox)

support 2 types of grid
gutter: margin | padding

support CSS3 features
rem | flexbox

generate full grid in 15-30s
set the variables compile

set your custom
settings | modules

set your custom
classnames | breakpoints

set your custom grid
by using @mixin | @function

About unlimitedGrid

The main reason that I wrote yet another grid system, was the fact that I can't found any grid system, which would give me the possibility to create functional grid in short time...

unlimitedGrid is a collection of functions principles and rules, by which you can easily and fast create an attractive and (ultra) functional grids.

unlimitedGrid based on a slightly different approach and mechanism of action than standard grid frameworks offer. He doesn’t provide functions or mixins*, which define the rules / size / properties for classes which you write, but immediately generate a whole set of classes based on your settings (see: settings). Just compile the mainly SCSS file (ug-grid.scss) and the grid will be ready for you!

unlimitedGrid is very flexible. It allows you to define multiple things, such as: the custom number of columns (10, 12, 16, 24 or maybe 7? no problem), custom size and type of gutters (in absolute or relative length units), custom class names (you prefer OOCSS, BEM or another methodology – easy), custom breakpoint values and class names for @media – for each module independently, according with your preferences – so you can generate the grid as you need – the only limitation is your imagination…

unlimitedGrid supports grid features like:
  • basic grid
  • responsive
  • custom gutter
  • nested
  • offset
  • order (pull / push)
  • visibility
All this things can have custom / different class names and responsive breakpoints!
*From version >= 2.0.0 the unlimitedGrid also provide the scss mixins and functions to build custom grid in another than described above way. Nay! The mixins & functions module, can be used alone, without the whole grid!

How to start?

Install

There are a couple of methods, to install unlimitedGrid:
  • npm
    npm install unlimitedgrid
  • bower
    bower install unlimitedgrid
  • github #1
    git clone https://github.com/PixelT/unlimitedGrid.git
  • github #2

    download the latest release

First / basic usage

unlimitedGrid is build with Sass (SCSS syntax) - so you can start to work with him in many ways:

Method 1 - generate grid classes based on settings:
  • set variables in the ug-grid.scss file
  • build / compile the ug-grid.scss file (after version 1.2.0 you can use / edit the included gulpfile.js which have predefined tasks for this)
  • include the generated ug-grid.css or ug-grid.min.css file into your project

<link rel="stylesheet" href="path/to/your/ug-grid.css">
Method 2 - If you work with Sass:
  • set variables in ug-grid.scss file
  • change the ug-grid.scss filename to _ug-grid.scss and import it as a part in your sass files:

@import ug-grid.scss;
Method 3 - Use the default grid:
  • include the grid.css or grid.min.css file yo your project

<link rel="stylesheet" href="path/to/your/ug-grid.css">
Method 4 - Use SCSS mixins & functions provided in unlimitedGrid:
  • more details about this method you can find in the Mixin & Function section
The default values you can find in the 'Settings' section below
That's all what you have to do (with the scss file(s)) to get stared with unlinitedGrid (using method 1-3). HTML take care a rest of the job! (see: Examples)

Settings

Settings can be found & set in the ug-grid.scss file. The values entered in this file depends how the grid will be look and how his functionality will be.
The ug-grid.scss file is the only file that you need edit to generate the grid!

Basic settings

Variable: Default value: Description:
$ug-grid-wrapper-width 1200px Maximum width of the grid container / wrapper. The container is always centered
$ug-grid-wrapper-gutter false Add gutter (padding) to the grid wrapper. If set true, the gutter for wrapper will have this same value as $ug-grid-gutter
$ug-grid-columns -12 Number of columns in grid
You can provide list of numbers values or a negative number value:


// list of values
$grid-columns: 2 4 6 12;

// negative value
$grid-columns: -6;

List of values create class ONLY for specific values
(in example above, will generate code for 2, 4, 6 and 12 columns).

Negative value create columns from 1 to this value (positive)
(in example above, will generate code for 1, 2, 3, 4, 5, 6 columns)
$ug-grid-gutter-type margin Type of the grid gutter. Allowed values are 'margin' or 'padding'
grid types infographics
$ug-grid-gutter 15px Size of the default grid gutter
$ug-grid-box-sizing grid Define that box-sizing should be available globally to all elements ('global'), or only for grid elements ('grid').
If you want to use unlimitedGrid in project which have already defined the box-sizing, set false value here
$ug-grid-flexbox true Build grid by using flexbox instead of floats
$ug-grid-use-rem false Use rem units by default, instead of px units

Class / names settings

Variable: Default value: Description:
$ug-grid-class-container ug-wrapper Class name for the grid container / wrapper
$ug-grid-class-row ug-row Class name for the row
$ug-grid-class-column ug-col- Class name (prefix) for the columns

Responsive settings

Variable: Default value: Description:
$ug-grid-responsive true Create responsive classes, based on $ug-grid-breapoints values. If set true, generate responsive classes for grid and all other modules which value is true
$ug-grid-breakpoints

$ug-grid-breakpoints: (
    's-' : 480px,
    'm-' : 768px,
    'l-' : 992px,
    'xl-': 1200px,
) !default;
Map with breakpoints (breakpoint names + values) for grid. Each breakpoint is a par of 'key': value
More about this you can read in the Responsive breakpoints section.

Helpers settings

Variable: Default value: Description:
$ug-helper-clearfix false If set true, generate class for clearfix
$ug-helper-clearfix-class ug-cf Class name for clearfix
Settings below ($ug-helper-gutter-*) will work / has effect only when $ug-grid-gutter-type = 'margin'
$ug-helper-gutter-class ug-gutter- Class name (prefix) for custom gutter
$ug-helper-gutter-values

$ug-helper-gutter-values: (
    'reset': 0,
) !default;
Map with breakpoints (breakpoint names + values) for custom grid gutter

Modules settings

The XX is the name of the module. Currently exist modules are: offset, pull, push, visibility
More about modules you can read in the modules section
Variable: Default value: Description:
$ug-module-XX false If set true, generate classes for current module
$ug-module-XX-class 'ug-XX-' Class name (prefix) for current module
$ug-module-XX-columns $ug-grid-columns Generate columns for class in specific module
By default, the columns are the same as in basic grid ($ug-grid-columns value)
$ug-module-XX-breakpoints

$ug-module-XX-breakpoints: (
    'm-': 768px,
) !default;
Generate breakpoints for class in specific module
By default, the breakpoints each module have the only one breakpoint

Debug settings

Variable: Default value: Description:
$ug-debug false Enable / disable generate class for debug grid
$ug-debug-class 'ug-debug' Class for the debug element
$ug-debug-settings

$ug-debug-settings: (
    'background-gutter': rgba(#3498db, 0.2),
    'background-column': rgba(#2980b9, 0.1),
) !default;
The background color for the gutter / column in debug grid

Responsive breakpoints

Responsive breakpoints is one of the most powerfull aspects in unlimitedGrid. You can define custom keys and its values for @media breakpoints, for each module independently!

Each breakpoint is a par of key: value
  • - key: is a string which is a part of the responsive class name
  • - value: is a number which is define the min-width condition in @media. The value should include the length unit
You can set unlimited number of breakpoints:

$grid-breakpoints: (
    "key_1": value_1_with_length_unit,
    "key_2": value_2_with_length_unit,
);
The default grid @media breakpoints ($ug-grid-breakpoints) are:

$grid-breakpoints: (
    's-' : 480px,
    'm-' : 768px,
    'l-' : 992px,
    'xl-': 1200px,
);
For modules, by default only one @media breakpoint is defined - for all existing modules:

$ug-module-<-module-name>-breakpoints: (
    'm-': 768px,
) !default;

Modules

In addition to the basic grid, you can add additional capabilities that have been called as modules
You can decided which modules should be added in your grid by set the true / false value in module name
Currenly available modules:
Module: Description
$ug-module-offset If true, generate classes for columns offset
$ug-module-pull If true, generate classes for pull columns
$ug-module-push If true, generate classes for push columns
$ug-module-visibility If true, generate classes to visibility the element (show / hide)
By default, all modules are enabled

Usage & Examples

All examples below based on default grid settings

Example: grid - wrapper

Each column must be inside wrapper $ug-grid-class-wrapper and row $ug-grid-class-row:

<div class="ug-wrapper">
    <div class="ug-row">
        //columns
    </div>
</div>

Example: grid - basic

Create the basic grid (columns)
Put the column class $ug-grid-class-column inside the row $ug-grid-class-row

Example: $ug-grid-class-column + number-of-columns

12
3
9
6
6
9
3
1
1
1
1
1
1
1
1
1
1
1
1

<div class="ug-wrapper">
    <div class="ug-row">
        <div class="ug-col-12">
            <div class="box box--primary">12</div>
        </div>
    </div>
    <div class="ug-row">
        <div class="ug-col-3">
            <div class="box box--primary">3</div>
        </div>
        <div class="ug-col-9">
            <div class="box box--secondary">9</div>
        </div>
    </div>
    <div class="ug-row">
        <div class="ug-col-6">
            <div class="box box--primary">6</div>
        </div>
        <div class="ug-col-6">
            <div class="box box--secondary">6</div>
        </div>
    </div>
    <div class="ug-row">
        <div class="ug-col-9">
            <div class="box box--primary">9</div>
        </div>
        <div class="ug-col-3">
            <div class="box box--secondary">3</div>
        </div>
    </div>
    <div class="ug-row">
        <div class="ug-col-1">
            <div class="box box--primary">1</div>
        </div>
        <div class="ug-col-1">
            <div class="box box--secondary">1</div>
        </div>
        <div class="ug-col-1">
            <div class="box box--primary">1</div>
        </div>
        <div class="ug-col-1">
            <div class="box box--secondary">1</div>
        </div>
        <div class="ug-col-1">
            <div class="box box--primary">1</div>
        </div>
        <div class="ug-col-1">
            <div class="box box--secondary">1</div>
        </div>
        <div class="ug-col-1">
            <div class="box box--primary">1</div>
        </div>
        <div class="ug-col-1">
            <div class="box box--secondary">1</div>
        </div>
        <div class="ug-col-1">
            <div class="box box--primary">1</div>
        </div>
        <div class="ug-col-1">
            <div class="box box--secondary">1</div>
        </div>
        <div class="ug-col-1">
            <div class="box box--primary">1</div>
        </div>
        <div class="ug-col-1">
            <div class="box box--secondary">1</div>
        </div>
    </div>
</div>

Example: grid - basic (responsive)

Create the basic grid (columns) based on responsive breakpoint values
Put the column class $ug-grid-class-column with responsive breakpoint key inside the row $ug-grid-class-row

Example: $ug-grid-class-column + $ug-grid-breakpoints(key) + number-of-columns

s6 m4 l2
s6 m4 l2
s6 m4 l2
s6 m4 l2
s6 m4 l2
s6 m4 l2

<div class="ug-wrapper">
    <div class="ug-row">
        <div class="ug-col-s-6 ug-col-m-4 ug-col-l-2">
            <div class="box box--primary">s6 m4 l2</div>
        </div>
        <div class="ug-col-s-6 ug-col-m-4 ug-col-l-2">
            <div class="box box--secondary">s6 m4 l2</div>
        </div>
        <div class="ug-col-s-6 ug-col-m-4 ug-col-l-2">
            <div class="box box--primary">s6 m4 l2</div>
        </div>
        <div class="ug-col-s-6 ug-col-m-4 ug-col-l-2">
            <div class="box box--secondary">s6 m4 l2</div>
        </div>
        <div class="ug-col-s-6 ug-col-m-4 ug-col-l-2">
            <div class="box box--primary">s6 m4 l2</div>
        </div>
        <div class="ug-col-s-6 ug-col-m-4 ug-col-l-2">
            <div class="box box--secondary">s6 m4 l2</div>
        </div>
    </div>
</div>
s3 m6 l9
s3 m6 l3

<div class="ug-wrapper">
    <div class="ug-row">
        <div class="ug-col-s-3 ug-col-m-6 ug-col-l-9">
            <div class="box box--primary">s3 m6 l9</div>
        </div>
        <div class="ug-col-s-9 ug-col-m-6 ug-col-l-3">
            <div class="box box--secondary">s3 m6 l3</div>
        </div>
    </div>
</div>

Example: grid - nested

To nest grids, create new row $ug-grid-class-row inside the column class $ug-grid-class-column

Example: $ug-grid-class-column + number-of-columns

5
9
3
2

<div class="ug-wrapper">
    <div class="ug-row">
        <div class="ug-col-5">
            <div class="box box--primary">5</div>
        </div>
        <div class="ug-col-5">
            <div class="ug-row">
                <div class="ug-col-9">
                    <div class="box box--secondary">9</div>
                </div>
                <div class="ug-col-3">
                    <div class="box box--secondary">3</div>
                </div>
            </div>
        </div>
        <div class="ug-col-2">
            <div class="box box--primary">2</div>
        </div>
    </div>
</div>
5
5
6
4
4
4
6
2

<div class="ug-wrapper">
    <div class="ug-row">
        <div class="ug-col-5">
            <div class="box box--primary">5</div>
        </div>
        <div class="ug-col-5">
            <div class="box box--secondary">5</div>
            <div class="ug-row">
                <div class="ug-col-6">
                    <div class="box box--primary">6</div>
                    <div class="ug-row">
                        <div class="ug-col-4">
                            <div class="box box--secondary">4</div>
                        </div>
                        <div class="ug-col-4">
                            <div class="box box--secondary">4</div>
                        </div>
                        <div class="ug-col-4">
                            <div class="box box--secondary">4</div>
                        </div>
                    </div>
                </div>
                <div class="ug-col-6">
                    <div class="box box--secondary">6</div>
                </div>
            </div>
        </div>
        <div class="ug-col-2">
            <div class="box box--primary">2</div>
        </div>
    </div>
</div>

Example: grid - nested (responsive)

This same ways as for » GRID: Basic (responsive)
Put the column class $ug-grid-class-column with responsive breakpoint key inside the row $ug-grid-class-row

Example: $ug-grid-class-column + $ug-grid-breakpoints(key) + number-of-columns

m4 l6
m8 l6
s6 l3
s6 l3
s6 l3
s6 l3

<div class="ug-wrapper">
    <div class="ug-row">
        <div class="ug-col-m-4 ug-col-l-6">
            <div class="box box--primary">m4 l6</div>
        </div>
        <div class="ug-col-m-8 ug-col-l-6">
            <div class="box box--secondary">m8 l6</div>
            <div class="ug-row">
                <div class="ug-col-s-6 ug-col-m-3">
                    <div class="box box--primary">s6 l3</div>
                </div>
                <div class="ug-col-s-6 ug-col-m-3">
                    <div class="box box--primary">s6 l3</div>
                </div>
                <div class="ug-col-s-6 ug-col-m-3">
                    <div class="box box--primary">s6 l3</div>
                </div>
                <div class="ug-col-s-6 ug-col-m-3">
                    <div class="box box--primary">s6 l3</div>
                </div>
            </div>
        </div>
    </div>
</div>

Example: grid - Offset

Move column to the right (offset) with left margin
Add the offset class $ug-grid-offset-class to the column class $ug-grid-class-column

Example: $ug-grid-offset-class + number-of-columns-to-move

2 | » 10
4 | » 8
6 | » 6
8 | » 4
10 | » 2

<div class="ug-wrapper">
    <div class="ug-row">
        <div class="ug-col-2 ug-offset-10">
            <div class="box box--primary">2 | » 10</div>
        </div>
    </div>
    <div class="ug-row">
        <div class="ug-col-4 ug-offset-8">
            <div class="box box--secondary">4 | » 8</div>
        </div>
    </div>
    <div class="ug-row">
        <div class="ug-col-6 ug-offset-6">
            <div class="box box--primary">6 | » 6</div>
        </div>
    </div>
    <div class="ug-row">
        <div class="ug-col-8 ug-offset-4">
            <div class="box box--secondary">8 | » 4</div>
        </div>
    </div>
    <div class="ug-row">
        <div class="ug-col-10 ug-offset-2">
            <div class="box box--primary">10 | » 2</div>
        </div>
    </div>
</div>
4
4 | » 2

<div class="ug-wrapper">
    <div class="ug-row">
        <div class="ug-col-4">
            <div class="box box--primary">4</div>
        </div>
        <div class="ug-col-4 ug-offset-2">
            <div class="box box--secondary">4 | » 2</div>
        </div>
    </div>
</div>
4 | » 4
4

<div class="ug-wrapper">
    <div class="ug-row">
        <div class="ug-col-4 ug-offset-4">
            <div class="box box--primary">4 | » 4</div>
        </div>
        <div class="ug-col-4">
            <div class="box box--secondary">4</div>
        </div>
    </div>
</div>

Example: grid - Offset (responsive)

Move column to the right (offset) with left margin, based on responsive breakpoint values
Add the offset class $ug-grid-offset-class with responsive breakpoint key to the column class $ug-grid-class-column

Example: $ug-grid-offset-class + $ug-grid-breakpoints(key) + number-of-columns-to-move

3
3 | M6

<div class="ug-wrapper">
    <div class="ug-row">
        <div class="ug-col-3">
            <div class="box box--primary">3</div>
        </div>
        <div class="ug-col-3 ug-offset-m-6">
            <div class="box box--secondary">3 | M6</div>
        </div>
    </div>
</div>
3 | M3
3 | M3

<div class="ug-wrapper">
    <div class="ug-row">
        <div class="ug-col-3 ug-offset-m-3">
            <div class="box box--primary">3 | M3</div>
        </div>
        <div class="ug-col-3 ug-offset-m-3">
            <div class="box box--secondary">3 | M3</div>
        </div>
    </div>
</div>

Example: grid - Ordering (pull / push)

Change the column order
Add the pull class $ug-grid-pull-class - for move left, or push class $ug-module-push-class - for move right, to the column class $ug-grid-class-column

Example: $ug-grid-(pull | push)-class + number-of-columns-to-move

3 | 9
9 | 3

<div class="ug-wrapper">
    <div class="ug-row">
        <div class="ug-col-3 ug-push-9">
            <div class="box box--primary">3 | 9</div>
        </div>
        <div class="ug-col-9 ug-pull-3">
            <div class="box box--secondary">9 | 3</div>
        </div>
    </div>
</div>

Example: grid - Ordering (pull / push)(responsive)

Change the column order based on responsive breakpoint values
Add the pull class $ug-grid-pull-class - for move left, or push class $ug-module-push-class - for move right, with responsive breakpoint key to the column class $ug-grid-class-column

Example: $ug-grid-(pull | push)-class + $ug-grid-breakpoints(key) + number-of-columns-to-move

3 | M9
9 | M3

<div class="ug-wrapper">
    <div class="ug-row">
        <div class="ug-col-3 ug-push-m-9">
            <div class="box box--primary">3 | M9</div>
        </div>
        <div class="ug-col-9 ug-pull-m-3">
            <div class="box box--secondary">9 | M3</div>
        </div>
    </div>
</div>

Example: grid - Visibility (show / hide)

Define visibility: show $ug-module-show-class or hide $ug-module-hide-class the element

Example: $ug-module-(show | hide)-class + $ug-grid-breakpoints(key)

3
3 | s
3 | m
3 | l

<div class="ug-wrapper">
    <div class="ug-row">
        <div class="ug-col-3">
            <div class="box box--primary">3</div>
        </div>
        <div class="ug-col-3 ug-show-s">
            <div class="box box--secondary">3 | s</div>
        </div>
        <div class="ug-col-3 ug-show-m">
            <div class="box box--primary">3 | m</div>
        </div>
        <div class="ug-col-3 ug-show-l">
            <div class="box box--secondary">3 | l</div>
        </div>
    </div>
</div>

Example: grid - Gutter

Gutter is a gap between each column.
You can set the default gutter by change the $ug-grid-gutter variable in UG-GRID.SCSS file.

Example: grid - Custom gutter

Create your own gutters with custom name & value - in some cases you may want use another gutter size than default $ug-grid-gutter
Add the gutter class $ug-helper-gutter-class with $ug-helper-gutter-values(key) to the row class $ug-grid-class-row

Example: $ug-helper-gutter-class + $ug-helper-gutter-values(key)
Gutters you can define in the same way, as you define Responsive breakpoints
Custom gutters works only, if $ug-grid-gutter-type = 'margin'
4
4
4

<div class="ug-wrapper">
    <div class="ug-row ug-gutter-reset">
        <div class="ug-col-4">
            <div class="box box--secondary">4</div>
        </div>
        <div class="ug-col-4">
            <div class="box box--primary">4</div>
        </div>
        <div class="ug-col-4">
            <div class="box box--secondary">4</div>
        </div>
    </div>
</div>

Mixins & Functions

If you don't want to generate automatically the grid, you can create it yourself, by using the @mixin and @function which are provided by unlimitedGrid. To do this, you don't need to include all grid library. It's enough to import the _ug-mixins.scss to your project:

@import 'ug-mixins';
Settings for the mixins are this same as for grid (see: Basic settings).

@functions

ug-rem($values)
Convert value(s) from px to rem. Allow to provide values with / without unit.
  • $values - single value or list of values

ug-rem(32)
//return
2rem

ug-rem(16 16px 0 32px)
//return:
1rem 1rem 0 2rem
ug-max-value($values)
Return the max value from provided values
  • $values - list of values

ug-max-value(2 10 5 18 12 3);
//return:
18
ug-random-color($alpha)
Return random color in rgba format
  • $alpha - alpha value between 0 and 1.
    Default value: 1

ug-random-color(.5);
//return:
rgba(26, 35, 12, .5);
ug-replace($string, $search, $replace)
Replace or remove char in string
  • $string - string which should be checked to replace.
  • $search - char/string which should be replaced/removed.
  • $replace - char/string which should replace $search char/string.
    Default: ''

$string: example string for test
$new-string: ug-replace($string, 'e', '_');
//$new-string return:
_xampl_ string for t_est

@mixins

ug-clearfix()
Add clearfix

@include ug-clearfix();
ug-clearlist()
Remove margin, padding and list-style. Especial usefull to reset ul and ol lists

@include ug-clearlist();
ug-wrapper($width, $gutter, $gutter-wrapper)
Create grid wrapper / container
  • $width - max. width for the wrapper / container. Value can be number (of columns) or percentage.
    Default: $ug-grid-wrapper-width
  • $gutter - gutter size, the gap between columns
    Default: $ug-grid-gutter
  • $gutter-wrapper - outside gutter for the wrapper. Have effect only when $ug-grid-gutter-type = 'margin'
    Default: false

// create grid:
// - max-width 1200px
// - 15px gutter
@include ug-wrapper(1200, 15);
ug-row($gutter)
Create grid row
  • $gutter - gutter size, the gap between columns
    Default: $ug-grid-gutter

// create row with 15px gutter
@include ug-row(15);
ug-col($width, $gutter)
Create grid column
  • $width - width of the column. Value can be number (of columns) or percentage.
    Default: 100%
  • $gutter - gutter size, the gap between columns
    Default: $ug-grid-gutter

// create column with 3-column width
@include ug-col(3); // 25%

// create column with 50% width
@include ug-col(50%);
ug-width($width)
Create width for the column. This is not create the whole column, but only the width property. Usefull when mix it with CSS @media
  • $width - width of the column. Value can be number (of columns) or percentage.
    Default: 100%

// set width to 3-columns
@include ug-width(3); // 25%

// set width to 50%
@include ug-width(50%);
ug-offset($width)
Create grid offset
  • $width - number of the columns or percentage width for offset. Value can be number (of columns) or percentage.
    Default: 0

//move 5-colums to the right
@include ug-offset(5); // 41.666%

//move column 20% to the right
@include ug-offset(20%);
ug-push($width)
Set offset to the column
  • $width - number of the columns or percentage width to push (move right). Value can be number (of columns) or percentage.
    Default: 0

//move 4-colums to the right
@include ug-push(4); // 33.333%

//move column 25% to the right
@include ug-push(25%);
ug-pull($width)
Pull the column
  • $width - number of the columns or percentage width to pull (move left). Value can be number (of columns) or percentage.
    Default: 0

//move 7-colums to the left
@include ug-pull(7); // 58.333%

//move column 33% to the left
@include ug-pull(33%);
ug-show($display)
Show the element
  • $display - type of display (block, inline-block, flex etc.)
    Default: block

@include ug-show();
ug-hide()
Hide the element

@include ug-hide();
ug-placeholder()
Create styles for placeholder attr in forms

@include ug-placeholder() {
    // styles for placeholder
}
ug-selection($current-selector)
Create styles for text / content selection
  • $current-selector - choose that selection should be available globally, or for current element
    Default: false

@include ug-selection() {
    // styles for selection
}

//selection only for element
.element {
    @include ug-selection(true) {
        // styles for selection
    }
}
ug-align-vertical($top)
Align element for the vertical (y-axis)
  • $top - percentage value from the top
    Default: 50%

// center element horizontally and vertically
@include ug-align-vertical();
ug-align-horizontal($left)
Align element for the horizontal (x-axis)
  • $left - percentage value from the left
    Default: 50%

// center element horizontally
@include ug-align-horizontal();
ug-align-both($top, $left)
Align element for the horizontal (x-axis) and vertical (y-axis)
  • $top - percentage value from the top
    Default: 50%
  • $left - percentage value from the left
    Default: 50%

// center element horizontally and vertically
@include ug-align-both();
ug-create-triangle($direction, $color, $size)
Create CSS triangle with pseudo element. This must be added into pseudo element (::before / ::after)
  • $direction - direction of the triangle. Possible values: top | right | bottom | left
    Default: right
  • $color - color of the triangle
    Default: random color (use ug-random-color function)
  • $size - size of the triangle
    Default: 10px

// create triangle:
// - default
.element {
    &::before {
        @include ug-create-triangle();
    }
}

// - triangle 10px black top
@include ug-create-triangle(top, #000, 10px);
ug-hamburger($width, $height, $size, $bgcolor, $padding, $hcolor)
Create hamburger menu icon
  • $width - width of the hamburger menu icon
    Default: 32px
  • $height - height of the hamburger menu icon
    Default: 24px
  • $size - height of the bar lines
    Default: 4px
  • $bgcolor - color of the bar lines
    Default: #000
  • $padding - padding inside the hamburger menu icon
    Default: 3px
  • $hcolor - color of the bar lines after :hover on hamburger menu icon
    Default: inherit (this same as $bgcolor)

// create hamburger menu icon:
// - based on default settings
@include ug-hamburger();

// - with custom settings
@include ug-hamburger(32, 32, 5, #d35400, 3);
ug-truncate($width)
Truncate long text
  • $width - after this value (width of the element) the text will be truncated
    Default: none

// truncate text
@include ug-truncate();

// truncate text after 250px width
@include ug-truncate(250);
ug-bp($value, $rule)
Create @media rule
  • $value - value for @media breakpoint
  • $rule - possibility to declare 'min' or 'max' part of width.
    Default: min

//create @media (min-width: 200px)
@include ug-bp(200);
@include ug-bp(200px);

//create @media (max-width: 500px)
@include ug-bp(500px, max);

//create breakpoint with use $ug-grid-breakpoints key/value
@include ug-bp(s);
@include ug-bp(xl);
It's possible to use defined breakpoints/values in $ug-grid-breakpoints map.
Just put as the $value the key of value which you want to use as breakpoint, without any - and _ chars.
For example, for 1200px you should use xl, for 480px use s. If you use 'max' in $rule, the value will be automatically reduced by 1

Browser compatibility

Google Chrome Firefox Internet Explorer* Edge Opera Safari
* Flexbox version ($ug-grid-flexbox: true) works only for IE10 and newest

FAQ

» The grid based on unlimitedGrid wrong display on different devices.
Make sure that your website have in <head> section the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">

Issues

If you find in project / doc page some bugs or have an ideas for improvements / features, feel free to create an issue on Github project page.

Changelog

Version Changes
v2.4.0
04/05/2017
  • Add new mixin: ug-bp (for breakpoints)
  • Add new function: ug-replace (for replace char in string)
  • Add scss linter config file
  • Remove $ug-module-offset-media-range
  • Rename $ug-helper-gutter-wrapper to $ug-grid-wrapper-gutter + support custom value for this variable
  • Enable $ug-debug by default + update demo page
  • Replace all @media occurrences to ug-bp mixin
  • Move ug-ordering into two separate modules: ug-pull and ug-push
  • Update gulpfile.js (use gulp-load-plugins now)
  • Update ug-debug mixin (to support $ug-grid-wrapper-gutter value)
  • General code cleanup
v2.3.1
28/03/2017
  • Fix ug-block module (wrong variables & responsive breakpoint name)
  • Update demo
v2.3.0
23/03/2017
  • Add new module - block (ug-block)
  • Update (rewrite) ug-hamburger mixin
v2.2.2
02/03/2017
  • Fix column attribute selector
v2.2.0
03/02/2017
  • Add unlimitedGrid into npm, Bower and Sache
  • Add $ug-helper-attr-selector variable in settings
  • Add column auto & column expand (only in flexbox grid)
v2.1.0
12/12/2016
  • Fix default $size value parameter in ug-create-triangle mixin
  • Add new mixins: ug-hamburger (create hamburger menu icon), ug-truncate (truncate long text)
v2.0.0
16/11/2016
  • Add _ug-mixins.scss file, with a lot of usefull SCSS mixins and functions
  • Add possibility to create custom grid by using only the _ug-mixins.scss file
  • Add support for 2 types of grid gutter: 'margin' and 'padding'
  • Add support for rem unit
  • Remove block module
  • Update all grid modules - now the modules are using the mixins from _ug-mixins.scss
  • Update new version and url for grid documentation
  • Update new demo page
1.X.X
30.01.2016
28.06.2016
  • First release
0.9.X
25.07.2015
  • First beta
This documentation version is compatible with unlimitedGrid v2.4.0.
Last modification: 06/05/2017