Skip to content

Commit

Permalink
Merge branch 'rebuild'
Browse files Browse the repository at this point in the history
  • Loading branch information
alistairtweedie committed Jan 27, 2016
2 parents 1bc0530 + 843f8b0 commit bd687f4
Show file tree
Hide file tree
Showing 45 changed files with 2,175 additions and 1,535 deletions.
1 change: 0 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
node_modules*
npm-debug*
.DS_STORE
css
2 changes: 1 addition & 1 deletion .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ node_js:
- '0.12'
before_script:
- npm install
script: gulp pre-process
script: gulp build
branches:
except:
- gh-pages
93 changes: 8 additions & 85 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,16 @@
[![devDependency Status](https://david-dm.org/alistairtweedie/pintsize/dev-status.svg)](https://david-dm.org/alistairtweedie/pintsize#info=devDependencies)


Sass front end template

A simple and modern flexible grid system

##Get started
It's easy to get started. Just follow the steps below.


###1.Download

Download Pintsize or install with bower
* [Download Pintsize](https://github.com/alistairtweedie/pintsize/archive/master.zip).

$ bower install pintsize


###2. Install
Expand All @@ -27,7 +25,7 @@ Run Node Package Manager

###3. Configure

Enter the pixel grid values used in your artwork in _variables.scss file. Done!
Copy the pixel grid values used in your design into _pintsize.scss file.

$columns: 12;
$column-width: 65px;
Expand All @@ -36,90 +34,15 @@ Enter the pixel grid values used in your artwork in _variables.scss file. Done!

###4. Build

Run Gulp

$ gulp


##Basic usage

This is the default usage. The grid is calculated and classes are genrated for you to get building quickly.

<div class="section">

<div class="container">

<div class="row">
<div class="col w-6">
A column with a width of 6 columns

</div>

<div class="col w-4 p-2">
A column with a width of 4 columns
And pushed from the left a width of 2 columns

</div>

</div>
</div>

</div>


##Advanced usage

By setting the $advanced-usage variable in _variables.scss to 'true' you can work with Pintsize more semantically.

//based on a 12 column grid

.main-page-content {
max-width: $grid-width; // calculated from your grid variables
margin: 0 auto;
padding: 0 1em;
@include clearfix;
}
.main-article {
//default is 100% width on small devices
//for devices larger than 640px
@include break-at(640px){
@include columns(8);
}
}
.popular-articles {
//default is 100% width on small devices
//for devices larger than 640px
@include break-at(640px) {
@include columns(6, omega); // omega is used to remove the margin-right
}
}



Run Gulp to build the grid

$ gulp build

## License

The MIT License (MIT)

Copyright (c) 2015 @alistairtweedie
Copyright (c) 2016 @alistairtweedie

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

Expand Down
15 changes: 8 additions & 7 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
{
"name": "Pintsize",
"version": "1.1.1",
"version": "2.0.0",
"authors": [
"Alistair Tweedie <info@alistairtweedie.com>"
"Alistair Tweedie @alistairtweedie"
],
"description": "Sass front end template",
"main": "gulpfile.js",
"description": "A simple and modern flexible grid system",
"main": "dist/pintsize.css",
"keywords": [
"sass",
"css",
"frontend"
"gulp",
"grid",
"system",
"flexbox"
],
"license": "MIT",
"homepage": "https://github.com/alistairtweedie/pintsize",
Expand Down

0 comments on commit bd687f4

Please sign in to comment.