项目作者: A-Tokyo

项目描述 :
💄A lightweight CSS3 flexbox grid with extra flex functionalities.
高级语言: CSS
项目地址: git://github.com/A-Tokyo/at-flex-grid.git
创建时间: 2017-01-09T00:20:05Z
项目社区:https://github.com/A-Tokyo/at-flex-grid

开源协议:MIT License

下载


at-flex-grid

A lightweight CSS3 flexbox grid with extra flex functionalities.

npm version Bower version

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 <link rel="stylesheet" href="/pathToFile/at-flex-grid.css">
  • If you want the bootstrap3 compatible version out of the box
    • link it in your html using <link rel="stylesheet" href="/pathToFile/at-flex-grid-bootstrap3.css">
  • 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.

  1. /*
  2. * Grid Breakpoints
  3. */
  4. // Extra small screen / phone
  5. $grid-breakpoint-xs: 0;
  6. // Small screen / phone
  7. $grid-breakpoint-sm: 576px;
  8. // Medium screen / tablet
  9. $grid-breakpoint-md: 768px;
  10. // Large screen / desktop
  11. $grid-breakpoint-lg: 992px;
  12. // Extra large screen / wide desktop
  13. $grid-breakpoint-xl: 1200px;
  14. /*
  15. * Container widths
  16. */
  17. $container-max-width-sm: 540px;
  18. $container-max-width-md: 720px;
  19. $container-max-width-lg: 960px;
  20. $container-max-width-xl: 1140px;
  21. /*
  22. * Gutters and spacing
  23. */
  24. $padding-col-x: 0.5rem;
  25. $padding-container-x: 1rem;

Contribution and Customization

Getting Started

  • To start the development server on 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