Skip to content

Simple and lightweight CSS helper for building quick and efficient layouts.

License

Notifications You must be signed in to change notification settings

boriskirov/Fluidigrid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 

Repository files navigation

Intro

Fluidigrid is a simple and lightweight CSS helper for building quick and efficient layouts.

Getting started

  • You can copy the raw file and add it to your project.
  • You can use the Fluidigrid Generator to create your own naming convention for custom experience.

Structure

Fluidigrid setup is simple, it is based on 12 column grid-template-columns. Each of the 12 cells are using the fr (fractional unit). When going below 1024px the layout switches the 1fr.

How to use

You can create your own grid html element or add a class .grid to the wrapper you want to create the grid layout. Then you should declare start and values for each of your columns to create the layout. Fluidigrid comes with pre-declared naming convention, we use cs{n} for column-start-{column number} and ce{n} for column-end-{column number}. For example if you want to declare a column which starts from the first to last column you will declare cs1 ce12.

Easy to use

  • 2KB file
  • Change to :rootvalues for customization
  • Use the Fluidigrid Generator to create your own naming convention for custom experience.

Check the examples

License

Licensed under the MIT License.

Contributions

We are always working on improving Fluiditype, if you want you can always contribute and ask for more, this would help us create something more meaningful.

About

Simple and lightweight CSS helper for building quick and efficient layouts.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages