2017 © Pedro Peláez
 

library candy-grid-system

The simple and intuitive grid, configurable layout for your every need... Designed and optimized to improve the development of a website. You can choose for 12, 16 or 24 columns.

image

candygs/candy-grid-system

The simple and intuitive grid, configurable layout for your every need... Designed and optimized to improve the development of a website. You can choose for 12, 16 or 24 columns.

  • Thursday, October 13, 2016
  • by andreamariotti
  • Repository
  • 2 Watchers
  • 2 Stars
  • 6 Installations
  • CSS
  • 1 Dependents
  • 0 Suggesters
  • 2 Forks
  • 1 Open issues
  • 5 Versions
  • 0 % Grown

The README.md

Candy grid system

Quick start

HTML:

To use the Grid, you need to include the file with Grid number 12, 16 or 24 that you want to use in the section <head> of the page., (*1)

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/candy-grid-system/2.0.0/12-candygs.min.css">

```html , (*2)

```html
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/candy-grid-system/2.0.0/24-candygs.min.css">

candygs : This class is required to use to set the values of the grids., (*3)

<body class="candygs">
    <div class="container">
        <div class="..."></div>
    </div>
</body>

fluid : This class is required to have a fluid layout, setting the width of the container to 100%., (*4)

<body class="candygs fluid">
    <div class="container">
        <div class="..."></div>
    </div>
</body>

container : It has a default width for each resolution - 720px - 960px - 1200px - 1560px - 1920px, (*5)

<body class="candygs">
    <div class="container">
        <div class="..."></div>
    </div>
</body>

It is possible to set a minimum width and / or maximum container * min-widht container : * min-sm : Set up a min-width to the container, which will be no smaller than 720px * min-md : Set up a min-width to the container, which will be no smaller than 960px, (*6)

  • max-widht container :
    • max-sm : Set up a max-width to the container, which will be no larger than 720px
    • max-md : Set up a max-width to the container, which will be no larger than 960px
    • max-lg : Set up a max-width to the container, which will be no larger than 1200px
    • max-xl : Set up a max-width to the container, which will be no larger than 1560px
<body class="candygs min-sm max-lg">
    <div class="container">
        <div class="..."></div>
    </div>
    <div class="container">
        <div class="..."></div>
    </div>
</body>

Now you can set the grids depending on your needs., (*7)

<body class="candygs">
    <div class="container">
        <div class="grid-8">
            <div class="row">
                <div class="grid-6"></div>
                <div class="grid-6"></div>
            </div>
        </div>
        <div class="grid-4"></div>
    </div>
</body>

You can also choose different values, depending on the screen resolution. * grid- : For all resolutions * grid-xs- : Only for mobile @media (max-width: 767px) * grid-sm- : @media (min-width: 768px) * grid-md- : @media (min-width: 992px) * grid-lg- : @media (min-width: 1200px) * grid-xl- : @media (min-width: 1560px) * grid-xxl- : @media (min-width: 1920px), (*8)

<body class="candygs">
    <div class="container">
        <div class="grid-xs-8 grid-sm-8 grid-md-7 grid-lg-6 grid-xl-5 grid-xxl-4"></div>
        <div class="grid-xs-4 grid-sm-4 grid-md-5 grid-lg-6 grid-xl-7 grid-xxl-8"></div>
    </div>
</body>

In additon to the class grid-, you can select:, (*9)

  • prefix-
  • suffix-
  • push-
  • pull-

Depending on your needs, choose the same variables as the grid-., (*10)

LESS:

Coming soon, (*11)


SASS:

Coming soon, (*12)


PSD:

Download psd templates., (*13)

Author

Created by Andrea Mariotti. See the official site for more info: http://candygridsystem.com, (*14)

  • https://github.com/andreamariotti83

Code and documentation copyright 2016 Andrea Mariotti Code released under the MIT license., (*15)

Thanks

The Versions

13/10 2016

2.x-dev

2.9999999.9999999.9999999-dev http://candygridsystem.com

The simple and intuitive grid, configurable layout for your every need... Designed and optimized to improve the development of a website. You can choose for 12, 16 or 24 columns.

  Sources   Download

MIT

by Andrea Mariotti

css grid responsive less front-end sass

07/10 2016

dev-master

9999999-dev http://candygridsystem.com

The simple and intuitive grid, configurable layout for your every need... Designed and optimized to improve the development of a website. You can choose for 12, 16 or 24 columns.

  Sources   Download

MIT

by Andrea Mariotti

css grid responsive less front-end sass

07/10 2016

v2.0.0

2.0.0.0 http://candygridsystem.com

The simple and intuitive grid, configurable layout for your every need... Designed and optimized to improve the development of a website. You can choose for 12, 16 or 24 columns.

  Sources   Download

MIT

by Andrea Mariotti

css grid responsive less front-end sass

05/10 2016

v1.3.0

1.3.0.0 http://candygridsystem.com

The simple and intuitive grid, configurable layout for your every need... Designed and optimized to improve the development of a website. You can choose for 12, 16 or 24 columns.

  Sources   Download

MIT

by Andrea Mariotti

css grid responsive less front-end sass

13/09 2016

v1.2.0

1.2.0.0 http://candygridsystem.com

The simple and intuitive grid, configurable layout for your every need... Designed and optimized to improve the development of a website. You can choose for 12, 16 or 24 columns.

  Sources   Download

MIT

by Andrea Mariotti

css grid responsive less front-end sass