https://github.com/milankyncl/flex-grid-framework

Super minimalistic CSS flex grid framework for easy manipulation with friendly-responsive websites.
https://github.com/milankyncl/flex-grid-framework

css flex flexbox framework framework-css grid scss

Last synced: 29 days ago
JSON representation

Super minimalistic CSS flex grid framework for easy manipulation with friendly-responsive websites.

• Host: GitHub
• URL: https://github.com/milankyncl/flex-grid-framework
• Owner: milankyncl
• License: mit
• Created: 2018-04-17T20:37:16.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2019-03-17T22:22:22.000Z (almost 6 years ago)
• Last Synced: 2024-11-22T19:27:18.332Z (3 months ago)
• Topics: css, flex, flexbox, framework, framework-css, grid, scss
• Language: CSS
• Size: 72.3 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Flex Grid Framework

Super minimalistic CSS (SCSS) flex grid framework for easy manipulation with responsive-friendly websites.

## Configuring

Just before including SCSS source file, you are able to define your own configuration of grid layout system. Variables are listed here:

**$columns**

Max. number of columns

```

default: 24

options: number

```

**$columnsGasp**

Gasp between columns in grid

```

default: 1rem

options: mixed (number of px/rem/em etc.)

```

**$indentation**

Max. number of margin/padding indentation

```

default: 10

options: number

```

**$breakpoints**

Breakpoints definition. You can define your own names and use them later.

```

default: (

    lg: 1440px,

    md: 1024px,

    sm: 768px,

    xs: 560px

)

options: list

```

## How to use

### Rows

Rows are used to wrapper columns using `row` class you cant set up row and write down columns in. There is a plenty of modifications for rows:

**Vertical aligning**

- `row--v-center` - columns will be centered vertically,

- `row--v-top` - columns will be aligned to top vertically, (defaultly)

- `row--v-bottom` - columns will be aligned to bottom vertically,

- `row--stretch` - columns will be centered vertically and they will have same height,

**Horizontal aligning**

- `row--h-center` - columns will be centered horizontally,

- `row--h-left` - columns will be aligned left horizontally, (defaultly)

- `row--h-right` - columns will be aligned right horizontally,

- `row--space-between` - columns will be separated with spaces between,

- `row--space-around` - every columns will be separated by space (event at sides of row)

**Wrapping**

- `row--wrap-reverse` - row will wrap with reversed order

- `row--nowrap` - row will not wrap at all

Example:

```html



    


        Column with auto-width.

    

    


        Column with size of 5 units.

    

    


        Column filling the remaining width.

    



        
Predefined width!

        
Will fill the rest of width...

    

    ```


## License

Released under the MIT license - http://opensource.org/licenses/MIT