Assembler Grid

A grid component built for the Assembler framework.

Table of contents

• Quick start
• Bugs and feature requests
• Documentation
• Contributing
• Copyright

Quick Start

Five quick start options are available:

• Download the latest release.
• Clone the repo: git clone https://github.com/AssemblerUI/assembler-grid.git.
• Install with Bower: bower install assembler-grid.
• Install with component(1): component install assembler-grid.
• Install with npm: npm install assembler-grid.

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

assembler-grid/
├── dist/
│   ├── assembler-grid.flexbox.css
│   ├── assembler-grid.flexbox.css.map
│   ├── assembler-grid.flexbox.min.css
│   ├── assembler-grid.flexbox.min.css.map
│   ├── assembler-grid.fluid.css
│   ├── assembler-grid.fluid.css.map
│   ├── assembler-grid.fluid.min.css
│   └── assembler-grid.fluid.min.css.map
└── src/
    ├── assembler-grid.flexbox.scss
    ├── assembler-grid.fluid.scss
    └── sass/
        ├── _grid.scss
        ├── configuration/
        │   └── _breakpoints.scss
        ├── mixins/
        │   └── _respond-to.scss
        └── properties/
            ├── _alignment.scss
            ├── _basics.scss
            ├── _direction.scss
            ├── _order.scss
            ├── _responsive.scss
            └── _spacing.scss

Provided is the compiled CSS (dist/assembler-grid.*), and the source files written in SCSS (src/assembler-grid.*.scss). CSS source maps (assembler-grid.*.map) are available for use with certain browsers' developer tools.

Picking a Version

If you want to:

• consume the library as-is, with no modifications, then include the CSS files in the dist/ directory
• include the SCSS files as part of your build process, with no modifications, then include the SCSS files at the root of the src/ directory choosing either the flexbox or fluid version.
• modify the breakpoints or configuration using your own variables, then include the src/sass/_grid.scss in your project as an @import, override whatever variables you desire, then call the mixin passing in the style of grid you'd like to use, either flexbox or fluid. Note: leaving out the parameter to the mixin will default in a fluid grid.

Bugs and feature requests

Have a bug or a feature request? Please first read the Contributing documentation and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Documentation

assembler-grid's documentation is a Jekyll-based site and is publicly hosted on GitHub Pages. You may also run the docs locally.

Running documentation locally

Github has a great guide for setting up Jekyll for use with Github pages. I've outlined the basics below.

1. Install Ruby, if you don't already have it. Should be version 1.9.3 or better.
2. Install Bundler via gem install bundler.
3. Install Jekyll (requires v2.5.x).
4. Change into the /assembler-grid directory
5. Run bundle install from the root directory.
6. Run grunt dev in the command line.
7. It should open up the browser for you, but if it doesn't, open http://localhost:3000 in your browser.

❗ Note Windows users: Read this unofficial guide to get Jekyll up and running without problems.

Contributing

Contribution is a perfect way to help advance the project. Please read the contributing guidelines. before getting started.

Editor preferences are available in the editor config for use in common text editors. Read more and download plugins at http://editorconfig.org.

Getting Started

1. Clone the repo: git clone https://github.com/AssemblerUI/assembler-grid.git.
2. cd assembler-grid
3. Install documentation gems: bundle install
4. Install grunt build dependencies: npm install
5. Start the build process: grunt dev

Copyright

©️ 2015. See the LICENSE. Maintained by @chrisopedia.