Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/a-tokyo/at-flex-grid
💄A lightweight CSS3 flexbox grid with extra flex functionalities.
https://github.com/a-tokyo/at-flex-grid
css css-framework css-grid customizable flex flex-grid flexbox flexbox-features flexbox-grid grid lightweight sass scss
Last synced: 23 days ago
JSON representation
💄A lightweight CSS3 flexbox grid with extra flex functionalities.
- Host: GitHub
- URL: https://github.com/a-tokyo/at-flex-grid
- Owner: a-tokyo
- License: mit
- Created: 2017-01-09T00:20:05.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-01-28T01:01:40.000Z (almost 8 years ago)
- Last Synced: 2024-10-11T10:35:22.184Z (about 1 month ago)
- Topics: css, css-framework, css-grid, customizable, flex, flex-grid, flexbox, flexbox-features, flexbox-grid, grid, lightweight, sass, scss
- Language: CSS
- Homepage:
- Size: 34.2 KB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# at-flex-grid
A lightweight CSS3 flexbox grid with extra flex functionalities.
[](https://badge.fury.io/js/at-flex-grid) [](https://badge.fury.io/bo/at-flex-grid)
## Description
at-flex-grid is a simple lightweight 12 column grid implemented using CSS3 flexbox specifications.
In Addition to the 12 column grid flexbox features are provided wrapped in classes or mixins.
The Grid works flawlessly along other grids like bootstrap or foundation because of the prefix in the naming convention.
## Getting Started
- To install at-flex-grid as a npm dependency
- run ``npm install --save at-flex-grid``
- To install at-flex-grid as a bower component
- run ``bower install --save at-flex-grid``
- To simply link the css file
- link it in your html using ````
- If you want the bootstrap3 compatible version out of the box
- link it in your html using ````
- If your prefer SASS/SCSS or you would like to customize the file
- import it in your SCSS file using ``@import 'pathToFile/at-flex-grid-grid.scss';``
## Features
- A 12 column grid using flexbox
- Flexbox features for each break point; i.e: class="at-center-xs"
- Bootstrap3 compatible version is supported under the name at-flex-grid-bootstrap3.css, utilizing the same breakpoints and container widths of Bootstrap version 3
## Customization
To customize the grid breakpoints, container widths, gutters and so on, Include the at-flex-grid.scss in your scss file and edit the following variables to suit your preferences.
```
/*
* Grid Breakpoints
*/
// Extra small screen / phone
$grid-breakpoint-xs: 0;
// Small screen / phone
$grid-breakpoint-sm: 576px;
// Medium screen / tablet
$grid-breakpoint-md: 768px;
// Large screen / desktop
$grid-breakpoint-lg: 992px;
// Extra large screen / wide desktop
$grid-breakpoint-xl: 1200px;
/*
* Container widths
*/
$container-max-width-sm: 540px;
$container-max-width-md: 720px;
$container-max-width-lg: 960px;
$container-max-width-xl: 1140px;
/*
* Gutters and spacing
*/
$padding-col-x: 0.5rem;
$padding-container-x: 1rem;
```
## Contribution and Customization
### Getting Started
- To start the development server on [localhost:9001](http://localhost:9001)
- run ``gulp start`` or ``npm start``
- To build the project to 'dist/' run ``gulp build``
- run ``gulp build`` or ``npm run build``
### Contribution guidline
- This project usis BEM scss naming conventions