https://github.com/ryanfitzgerald/construct
Ultra-simple, Sass-based grid boilerplate for quick project setups
https://github.com/ryanfitzgerald/construct
Last synced: about 1 year ago
JSON representation
Ultra-simple, Sass-based grid boilerplate for quick project setups
- Host: GitHub
- URL: https://github.com/ryanfitzgerald/construct
- Owner: RyanFitzgerald
- Created: 2017-06-08T01:01:09.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-08-29T22:39:37.000Z (almost 9 years ago)
- Last Synced: 2025-04-03T03:51:08.871Z (over 1 year ago)
- Language: CSS
- Homepage:
- Size: 41 KB
- Stars: 20
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Construct
Construct is an ultra-simple, Sass-based grid boilerplate system that is mobile first (~7KB Minified). The goal is to only provide the absolute necessities and stay out of your way for the rest. Construct provides style normalization, a simple grid system, and a small number of helper classes to make life a little easier. Construct doesn't make any changes to page colours, fonts (except base size), backgrounds, form elements, or anything of the sort.
## Installation
Clone this repo or simply pull the compiled CSS file into any project you're working on.
```html
```
Alternatively, you can run ```npm install construct-css``` to download it as an npm module.
## Usage
Construct works in terms of rows and columns, meaning each row has a series of nested columns that indicate their relative widths (more on the grid below). For example, the basic structure is as follows:
```html
Column Content Here
Column Content Here
```
For more extensive examples on how to use the grid, take a look at the ```index.html``` within the project repo.
## Grid
The grid system works in terms of small, medium, large, and extra large screen sizes (defined within ```_variables.scss```). The grid works mobile-first, meaning if you apply a class at a smaller screen size, it will ripple up to larger screen sizes unless any of the larger screen sizes have their own class applied.
### Basic
By default, rows consist of a total of 12 columns (this can be changed within ```_variables.scss```), therefore when defining columns for a row, they should total 12. The basic syntax is *SIZE-#COLS*. The available sizes are small (sm), medium (md), large (lg), and extra large (xl). An example usage is as follows:
```html
Column Content Here
Column Content Here
```
The above example has both columns 6 wide on both small and medium screens and 8 and 4 wide respectively on large and extra large screens. The ```column``` class is added to each column to indicate that its a column and if it's the only class defined, it will default to a full row width column.
#### Screen Sizes
The default screen sizes are as follows:
- Small: 0 - 639px
- Medium: 640px - 1023px
- Large: 1024px - 1439px
- Extra Large: 1440px onwards
### Nesting
Rows can also be nested easily by defining another row + column pair within a parent column. For example:
```html
md-6 column
md-8 column
md-4 column
```
To see it in action, take a look at the "Nested Grid" section of ```index.html```.
### Offsets
If you don't necessarily need columns taking up the entire row, you can offset columns as well. For example:
```html
sm-4 column
sm-4 sm-offset-4 column
```
The above example has 2 columns, both 4 wide, however the second column offsets by 4 as well, so the end result would be a 4-width column on the left and a 4-width column on the right, with 4 column space in the middle.
To see it in action, take a look at the "Offsets" section of ```index.html```.
### Column Ordering
You can change the order of columns by utilizing ```SIZE-push-NUM & SIZE-pull-NUM```. For example:
```html
sm-4 md-push-8 column
sm-8 md-pull-4 column
```
On small screens, the order will be the 4-col and then the 8-col, however once you hit a medium screen and up, the order will be the 8-col and then the 4-col. In order to use push/pull, you must use push on the first column in the amount of the second column and pull on the second column in the amount of the first column.
### Full-Width Rows
If you don't want a row to be capped by the max-width for whatever reason, you can simply add a ```.full-width``` class to the row to make it fill the width of the viewport. For example:
```html
sm-6 md-4 lg-6 column
sm-6 md-4 lg-3 column
md-4 lg-3 column
```
To see it in action, take a look at the "Full Width" section of ```index.html```.
## Helpers
Construct comes with a number of helper classes to try and make life a little easier. The helpers currently available are:
| Name | Description | Class |
| ---- | ----------- | ----- |
| Clearfix | Self-clears it's child elements | .clearfix |
| Text Center | Centers text within an element | .text-center |
| Small Center | Centers a column on small size and up | .sm-center |
| Medium Center | Centers a column on medium size and up | .md-center |
| Large Center | Centers a column on large size and up | .lg-center |
| Extra Large Center | Centers a column on extra large size and up | .xl-center |
| Hide Small | Hides an element only on small sizes | .hide-sm |
| Hide Medium | Hides an element only on medium sizes | .hide-md |
| Hide Large | Hides an element only on large sizes | .hide-lg |
| Hide Extra Large | Hides an element only on extra large sizes | .hide-xl |
| Hide Medium Up | Hides an element on medium sizes and up | .hide-md-up |
| Hide Large Up | Hides an element on large sizes and up | .hide-lg-up |
| No Print | Hides an element on print | .no-print |
## Credits
- [Normalize.css](https://github.com/necolas/normalize.css/) for style normalization