polar-express 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- data/MIT-LICENSE +19 -0
- data/README.md +37 -0
- data/lib/generators/inuitcss/install/USAGE +9 -0
- data/lib/generators/inuitcss/install/install_generator.rb +9 -0
- data/lib/generators/inuitcss/install/templates/inuit.css.scss +99 -0
- data/lib/polar-express.rb +6 -0
- data/vendor/assets/stylesheets/CHANGELOG.md +26 -0
- data/vendor/assets/stylesheets/CONTRIBUTING.md +42 -0
- data/vendor/assets/stylesheets/LICENSE +13 -0
- data/vendor/assets/stylesheets/README.md +367 -0
- data/vendor/assets/stylesheets/_defaults.scss +225 -0
- data/vendor/assets/stylesheets/_inuit.scss +213 -0
- data/vendor/assets/stylesheets/base/_code.scss +63 -0
- data/vendor/assets/stylesheets/base/_forms.scss +174 -0
- data/vendor/assets/stylesheets/base/_headings.scss +60 -0
- data/vendor/assets/stylesheets/base/_images.scss +73 -0
- data/vendor/assets/stylesheets/base/_lists.scss +19 -0
- data/vendor/assets/stylesheets/base/_main.scss +8 -0
- data/vendor/assets/stylesheets/base/_paragraphs.scss +11 -0
- data/vendor/assets/stylesheets/base/_quotes.scss +96 -0
- data/vendor/assets/stylesheets/base/_smallprint.scss +13 -0
- data/vendor/assets/stylesheets/base/_tables.scss +163 -0
- data/vendor/assets/stylesheets/component.json +5 -0
- data/vendor/assets/stylesheets/generic/_brand.scss +18 -0
- data/vendor/assets/stylesheets/generic/_clearfix.scss +15 -0
- data/vendor/assets/stylesheets/generic/_debug.scss +168 -0
- data/vendor/assets/stylesheets/generic/_helper.scss +184 -0
- data/vendor/assets/stylesheets/generic/_mixins.scss +328 -0
- data/vendor/assets/stylesheets/generic/_normalize.scss +396 -0
- data/vendor/assets/stylesheets/generic/_pull.scss +147 -0
- data/vendor/assets/stylesheets/generic/_push.scss +147 -0
- data/vendor/assets/stylesheets/generic/_reset.scss +80 -0
- data/vendor/assets/stylesheets/generic/_shared.scss +61 -0
- data/vendor/assets/stylesheets/generic/_widths.scss +158 -0
- data/vendor/assets/stylesheets/objects/_arrows.scss +147 -0
- data/vendor/assets/stylesheets/objects/_beautons.scss +226 -0
- data/vendor/assets/stylesheets/objects/_block-list.scss +44 -0
- data/vendor/assets/stylesheets/objects/_breadcrumb.scss +63 -0
- data/vendor/assets/stylesheets/objects/_columns.scss +22 -0
- data/vendor/assets/stylesheets/objects/_flexbox.scss +55 -0
- data/vendor/assets/stylesheets/objects/_flyout.scss +63 -0
- data/vendor/assets/stylesheets/objects/_greybox.scss +58 -0
- data/vendor/assets/stylesheets/objects/_grids.scss +69 -0
- data/vendor/assets/stylesheets/objects/_icon-text.scss +40 -0
- data/vendor/assets/stylesheets/objects/_island.scss +38 -0
- data/vendor/assets/stylesheets/objects/_link-complex.scss +32 -0
- data/vendor/assets/stylesheets/objects/_lozenges.scss +46 -0
- data/vendor/assets/stylesheets/objects/_marginalia.scss +52 -0
- data/vendor/assets/stylesheets/objects/_matrix.scss +89 -0
- data/vendor/assets/stylesheets/objects/_media.scss +60 -0
- data/vendor/assets/stylesheets/objects/_nav.scss +155 -0
- data/vendor/assets/stylesheets/objects/_options.scss +45 -0
- data/vendor/assets/stylesheets/objects/_pagination.scss +50 -0
- data/vendor/assets/stylesheets/objects/_rules.scss +65 -0
- data/vendor/assets/stylesheets/objects/_split.scss +39 -0
- data/vendor/assets/stylesheets/objects/_sprite.scss +98 -0
- data/vendor/assets/stylesheets/objects/_stats.scss +52 -0
- data/vendor/assets/stylesheets/objects/_this-or-this.scss +38 -0
- data/vendor/assets/stylesheets/style.scss +26 -0
- metadata +122 -0
data/MIT-LICENSE
ADDED
@@ -0,0 +1,19 @@
|
|
1
|
+
Copyright (c) 2013 Daniel Boggs
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
4
|
+
of this software and associated documentation files (the "Software"), to deal
|
5
|
+
in the Software without restriction, including without limitation the rights
|
6
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
7
|
+
copies of the Software, and to permit persons to whom the Software is
|
8
|
+
furnished to do so, subject to the following conditions:
|
9
|
+
|
10
|
+
The above copyright notice and this permission notice shall be included in
|
11
|
+
all copies or substantial portions of the Software.
|
12
|
+
|
13
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
14
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
15
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
16
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
17
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
18
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
19
|
+
THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,37 @@
|
|
1
|
+
#Polar Express
|
2
|
+
|
3
|
+
Polar Express is a Ruby gem that allows easy integration of the awesome [inuit.css](http://inuitcss.com/) framework into the Rails asset pipeline.
|
4
|
+
|
5
|
+
##Installation
|
6
|
+
|
7
|
+
Add the following line to your `Gemfile` then run the `bundle` command.
|
8
|
+
|
9
|
+
```
|
10
|
+
gem 'polar-express'
|
11
|
+
```
|
12
|
+
|
13
|
+
To use the latest releae of the gem from github add the following line to your `Gemfile` instead of the line above and run the `bundle` command to install the gem.
|
14
|
+
|
15
|
+
```
|
16
|
+
gem 'polar-express', :git => 'https://github.com/danielboggs/polar-express.git'
|
17
|
+
```
|
18
|
+
|
19
|
+
Use the included generator to create the necessary assets.
|
20
|
+
|
21
|
+
```
|
22
|
+
rails g inuitcss:install
|
23
|
+
```
|
24
|
+
|
25
|
+
This creates a `/app/assets/stylesheets/inuit.css.scss` file in your application which abstracts inuit.css's styles.scss and _vars.scss files into your application so you can still use the framework's built in variables and customizations.
|
26
|
+
|
27
|
+
##Additional Installation Notes
|
28
|
+
|
29
|
+
Once I have the gem installed and the assets generated I typically remove the `require_tree .` line from my `/app/assets/stylesheets/application.css` file and manually require the generated asset file with `*= require inuit.css.scss`. This allows the framework to totally handle the css of your project without rails automatically including anything that gets dropped into the stylesheets directory.
|
30
|
+
|
31
|
+
From here I typically create a `theme` folder in my stylesheets directory and add any custom/theme sass files there such as `_layout.scss`, `_header.scss` etc. then manually import them at the bottom of the `inuit.css.scss` file.
|
32
|
+
|
33
|
+
e.g.
|
34
|
+
|
35
|
+
```
|
36
|
+
@import "theme/layout";
|
37
|
+
```
|
@@ -0,0 +1,9 @@
|
|
1
|
+
module Inuitcss
|
2
|
+
class InstallGenerator < ::Rails::Generators::Base
|
3
|
+
source_root File.expand_path("../templates", __FILE__)
|
4
|
+
desc "This generator adds inuit.css to the Rails asset pipeline"
|
5
|
+
def install
|
6
|
+
copy_file "inuit.css.scss", "app/assets/stylesheets/inuit.css.scss"
|
7
|
+
end
|
8
|
+
end
|
9
|
+
end
|
@@ -0,0 +1,99 @@
|
|
1
|
+
/*------------------------------------*\
|
2
|
+
VARS.SCSS
|
3
|
+
\*------------------------------------*/
|
4
|
+
/**
|
5
|
+
* Any variables you find set in inuit.css’ `_vars.scss` that you do not wish to
|
6
|
+
* keep, simply redefine here. This means that if inuit.css, for example, sets
|
7
|
+
* your `$base-font-size` at 16px and you wish it to be 14px, simply redeclare
|
8
|
+
* that variable in this file. inuit.css ignores its own variables in favour of
|
9
|
+
* using your own, so you can completely modify how inuit.css works without ever
|
10
|
+
* having to alter the framework itself.
|
11
|
+
*/
|
12
|
+
|
13
|
+
|
14
|
+
|
15
|
+
|
16
|
+
|
17
|
+
/*------------------------------------*\
|
18
|
+
$OBJECTS-AND-ABSTRACTIONS
|
19
|
+
\*------------------------------------*/
|
20
|
+
/**
|
21
|
+
* All of inuit.css’ objects and abstractions are initially turned off by
|
22
|
+
* default. This means that you start any project with as little as possible,
|
23
|
+
* and introducing objects and abstractions is as simple as switching the
|
24
|
+
* following variables to `true`.
|
25
|
+
*/
|
26
|
+
$use-grids: false;
|
27
|
+
$use-flexbox: false;
|
28
|
+
$use-columns: false;
|
29
|
+
$use-nav: false;
|
30
|
+
$use-options: false;
|
31
|
+
$use-pagination: false;
|
32
|
+
$use-breadcrumb: false;
|
33
|
+
$use-media: false;
|
34
|
+
$use-marginalia: false;
|
35
|
+
$use-island: false;
|
36
|
+
$use-block-list: false;
|
37
|
+
$use-matrix: false;
|
38
|
+
$use-split: false;
|
39
|
+
$use-this-or-this: false;
|
40
|
+
$use-link-complex: false;
|
41
|
+
$use-flyout: false;
|
42
|
+
$use-arrows: false;
|
43
|
+
$use-sprite: false;
|
44
|
+
$use-icon-text: false;
|
45
|
+
$use-beautons: false;
|
46
|
+
$use-lozenges: false;
|
47
|
+
$use-rules: false;
|
48
|
+
$use-stats: false;
|
49
|
+
$use-greybox: false;
|
50
|
+
|
51
|
+
|
52
|
+
|
53
|
+
|
54
|
+
|
55
|
+
/*------------------------------------*\
|
56
|
+
$OVERRIDES
|
57
|
+
\*------------------------------------*/
|
58
|
+
/**
|
59
|
+
* Place any variables that should override inuit.css’ defaults here.
|
60
|
+
*/
|
61
|
+
|
62
|
+
|
63
|
+
|
64
|
+
|
65
|
+
|
66
|
+
/*------------------------------------*\
|
67
|
+
$CUSTOM
|
68
|
+
\*------------------------------------*/
|
69
|
+
/**
|
70
|
+
* Place any of your own variables that sit on top of inuit.css here.
|
71
|
+
*/
|
72
|
+
|
73
|
+
|
74
|
+
|
75
|
+
|
76
|
+
|
77
|
+
/*------------------------------------*\
|
78
|
+
$INUIT
|
79
|
+
\*------------------------------------*/
|
80
|
+
/**
|
81
|
+
* Imports the base inuit.css styles
|
82
|
+
*/
|
83
|
+
|
84
|
+
@import "style";
|
85
|
+
|
86
|
+
|
87
|
+
|
88
|
+
/*------------------------------------*\
|
89
|
+
$THEME
|
90
|
+
\*------------------------------------*/
|
91
|
+
/**
|
92
|
+
* Place any of your own theme css file imports here.
|
93
|
+
* e.g.
|
94
|
+
* @import "theme/theme";
|
95
|
+
*/
|
96
|
+
|
97
|
+
|
98
|
+
|
99
|
+
|
@@ -0,0 +1,26 @@
|
|
1
|
+
# Changelog
|
2
|
+
|
3
|
+
This changelog only exists as of v5.0 onward, for previous inuit.css versions’
|
4
|
+
history please browse the commit logs.
|
5
|
+
|
6
|
+
## v5.0.0
|
7
|
+
|
8
|
+
This major version bump saw the introduction of the
|
9
|
+
[inuit.css web template](https://github.com/csswizardry/inuit.css-web-template),
|
10
|
+
a means of including inuit.css as a submodule through which you can easily pull
|
11
|
+
updates from GitHub whilst avoiding having to touch any library code.
|
12
|
+
|
13
|
+
* Use [beautons](https://github.com/csswizardry/beautons) for button styling
|
14
|
+
* Use [csswizardry-grids](https://github.com/csswizardry/csswizardry-grids) for
|
15
|
+
inuit.css’ built-in grid system.
|
16
|
+
* Removed [Batch](http://adamwhitcroft.com/batch/)
|
17
|
+
* Moved over to [HTML5 Boilerplate](http://html5boilerplate.com/) style helper
|
18
|
+
classes.
|
19
|
+
* Added a few more helper classes and mixins.
|
20
|
+
* Introduced switches to turn objects and abstractions on/off.
|
21
|
+
|
22
|
+
## v5.1.1
|
23
|
+
|
24
|
+
* Convert special character to unicode.
|
25
|
+
* Fix/change the `headings` mixin.
|
26
|
+
* Fix some typos pertaining to the renaming of the spriting object.
|
@@ -0,0 +1,42 @@
|
|
1
|
+
# Contributing to inuit.css
|
2
|
+
|
3
|
+
So, you want to contribute to inuit.css? That’s awesome!
|
4
|
+
|
5
|
+
However, I do ask that you follow a few small rules…
|
6
|
+
|
7
|
+
## Bugs and issues
|
8
|
+
|
9
|
+
If you believe you have a bug or issue that needs investigating:
|
10
|
+
|
11
|
+
* Search existing issues to avoid opening a duplicate.
|
12
|
+
* Please open an issue and be as descriptive as possible.
|
13
|
+
* If you can, accompany the report with a reduced test case via
|
14
|
+
[jsFiddle](http://jsfiddle.net/) or similar.
|
15
|
+
|
16
|
+
## Pull requests
|
17
|
+
|
18
|
+
If submitting a pull request:
|
19
|
+
|
20
|
+
* Follow the predefined code style used in the framework (I’m afraid that means
|
21
|
+
no spaces before opening braces and after colons (I’m weird like that)).
|
22
|
+
* Read my [Git workflow for inuit.css](http://csswizardry.com/2012/12/my-git-workflow-for-inuit-css/)
|
23
|
+
and try and keep as close to that as possible.
|
24
|
+
* Carry out all your work in a topic branch with a suitable name, e.g.
|
25
|
+
`fix/grids`, `feature/new-object` etc.
|
26
|
+
* Commit sensibly and, if needs be, rebase your branch to tidy your commits up.
|
27
|
+
* Ensure inuit.css still compiles without error through both the standalone
|
28
|
+
library and the web template.
|
29
|
+
* Submit all pull requests against the `incoming` branch. Any pull requests
|
30
|
+
submitted against `master` **will** be declined.
|
31
|
+
* Advise on versioning if possible; if the changes require a version bump or
|
32
|
+
merely a patch bump, please let me know.
|
33
|
+
|
34
|
+
## Feature requests
|
35
|
+
|
36
|
+
I am open to requests for adding new features, but please bear in mind:
|
37
|
+
|
38
|
+
* Make sure it fits in the with ideals and scope of the project; inuit.css has a
|
39
|
+
very specific purpose and all features need tp tie in with this.
|
40
|
+
* Have a go at adding the new functionality yourself and opening a pull request.
|
41
|
+
* **Discuss any features before attempting to develop them yourself;** I would
|
42
|
+
hate for anyone to spend a tonne of time on something that I end up rejecting.
|
@@ -0,0 +1,13 @@
|
|
1
|
+
Copyright 2012 Harry Roberts
|
2
|
+
|
3
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
4
|
+
you may not use this file except in compliance with the License.
|
5
|
+
You may obtain a copy of the License at
|
6
|
+
|
7
|
+
http://apache.org/licenses/LICENSE-2.0
|
8
|
+
|
9
|
+
Unless required by applicable law or agreed to in writing, software
|
10
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
11
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
12
|
+
See the License for the specific language governing permissions and
|
13
|
+
limitations under the License.
|
@@ -0,0 +1,367 @@
|
|
1
|
+
![inuit.css](http://inuitcss.com/img/content/logo.png)
|
2
|
+
|
3
|
+
# inuit.css – v5.0
|
4
|
+
|
5
|
+
inuit.css is a powerful little framework designed for _serious_ developers.
|
6
|
+
|
7
|
+
It is a Sass based, Object Oriented framework that is full of objects and
|
8
|
+
abstractions. inuit.css provides little-to-no design which means no undoing
|
9
|
+
things, no deleting CSS and no adhering to other peoples’ design decisions.
|
10
|
+
|
11
|
+
inuit.css is built on a [BEM](http://bem.info/)-style naming convention and
|
12
|
+
honed based on [work done by Nicolas Gallagher](https://gist.github.com/1309546).
|
13
|
+
|
14
|
+
inuit.css is ideally suited to designers who want to focus on the creative and
|
15
|
+
not code, and developers who understand the need for abstraction and an OO
|
16
|
+
approach.
|
17
|
+
|
18
|
+
inuit.css gives you design patterns, not design decisions. It features nestable,
|
19
|
+
fluid grids; a double-stranded heading hierarchy; sprites; buttons and a lot,
|
20
|
+
_lot_ more.
|
21
|
+
|
22
|
+
|
23
|
+
**Use inuit.css if:**
|
24
|
+
|
25
|
+
* You need a powerful library of objects and abstractions.
|
26
|
+
* You understand/appreciate the value of OO code and the need for scalability
|
27
|
+
and reuse.
|
28
|
+
* You are a confident/competent developer comfortable with OOCSS and Sass, as
|
29
|
+
well as familiarity with OO principles in general.
|
30
|
+
|
31
|
+
**Do not use inuit.css if:**
|
32
|
+
|
33
|
+
* You need a framework that supplies design (I’d recommend
|
34
|
+
[Bootstrap](http://twitter.github.com/bootstrap/) for that).
|
35
|
+
|
36
|
+
## Browser support
|
37
|
+
|
38
|
+
inuit.css is a modern framework for modern browsers. It takes advantage of
|
39
|
+
[normalize.css](http://necolas.github.com/normalize.css/) and global
|
40
|
+
`box-sizing:border-box;` (optional). As such, inuit.css is intended for **IE8**
|
41
|
+
and above only. The last release to support IE7 was
|
42
|
+
[v4.1.5](https://github.com/csswizardry/inuit.css/archive/v4.1.5.zip).
|
43
|
+
|
44
|
+
## The developer
|
45
|
+
|
46
|
+
There are a million-and-one different CSS frameworks out there so this rather
|
47
|
+
cringeworthy section is an attempt to validate inuit.css and give it some
|
48
|
+
credibility…
|
49
|
+
|
50
|
+
I am [Harry Roberts](http://hry.rbrts.me), I am a 22 year old developer and
|
51
|
+
front-end architect from the UK. I work as a Senior UI Developer for
|
52
|
+
[BSkyB](http://en.wikipedia.org/wiki/BSkyB) where it is my job to build scalable
|
53
|
+
front-ends, write internally used CSS frameworks and libraries, and to architect
|
54
|
+
CSS and front-end builds.
|
55
|
+
|
56
|
+
I [write](http://csswizardry.com), [tweet](http://twitter.com/csswizardry) and
|
57
|
+
[speak](http://speakerdeck.com/u/csswizardry/) about OOCSS, scalable CSS,
|
58
|
+
maintainability, working in large teams, CSS performance, CSS architecture and a
|
59
|
+
whole lot more.
|
60
|
+
|
61
|
+
inuit.css is the result of years of my specialism in CSS (as CSS is all I do).
|
62
|
+
It is a collection of design patterns, objects, and abstractions that have been
|
63
|
+
refined and bulletproofed over hours of development across an array of projects
|
64
|
+
of varying sizes. inuit.css is the result of hundreds of hours of work all
|
65
|
+
condensed into one powerful little framework.
|
66
|
+
|
67
|
+
## Installation
|
68
|
+
|
69
|
+
**Requires Sass 3.2**
|
70
|
+
|
71
|
+
inuit.css v5.0+ is designed to be even more advanced than previous versions of
|
72
|
+
your favourite CSS framework! inuit.css’ core library is now intended to be used
|
73
|
+
as a submodule which means you can always get inuit.css’ latest updates without
|
74
|
+
ever having to touch a line of library code.
|
75
|
+
|
76
|
+
This works by having this, the inuit.css core library, and the
|
77
|
+
[inuit.css-web-template](https://github.com/csswizardry/inuit.css-web-template).
|
78
|
+
The web template is very un-opinionated and simply houses your site, however
|
79
|
+
you wish to build it. It has a `css/` directory which contains your
|
80
|
+
project-specific variables and any stylesheets that extend inuit.css, as well as
|
81
|
+
housing inuit.css as an updatable submodule. Any of inuit.css’ default settings
|
82
|
+
can be simply overridden from the web template which means you no longer have to
|
83
|
+
edit a single line of the framework (which in turn means that incorporating
|
84
|
+
inuit.css updates is as simple as a `$ git pull`).
|
85
|
+
|
86
|
+
### Install via command line (recommended)
|
87
|
+
|
88
|
+
The command line install of inuit.css is _incredibly_ simple:
|
89
|
+
|
90
|
+
$ git clone --recursive git@github.com:csswizardry/inuit.css-web-template.git your-project-folder
|
91
|
+
$ cd your-project-folder
|
92
|
+
$ ./go
|
93
|
+
|
94
|
+
What we are doing here is cloning an instance of the inuit.css-web-template and
|
95
|
+
its submodules (that’s what the `--recursive` does) into a directory which you
|
96
|
+
specify. Next we `cd` into that directory and run [our `go` script](https://github.com/csswizardry/inuit.css-web-template/blob/master/go).
|
97
|
+
This script (courtesy of [Nick Payne](http://twitter.com/makeusabrew)) simply
|
98
|
+
removes the web template’s Git instance and replaces it with a fresh one for
|
99
|
+
your project, whilst also maintaining your inuit.css submodule.
|
100
|
+
|
101
|
+
### Install via zip
|
102
|
+
|
103
|
+
Though not tested, using inuit.css from its GitHub zip _should_ be fairly
|
104
|
+
simple. Using inuit.css from zipped source does mean that you can’t update
|
105
|
+
inuit.css as a submodule, but you may well be able to drop fresh zip files into
|
106
|
+
the `css/inuit.css/` directory provided you don’t edit any library code.
|
107
|
+
|
108
|
+
Firstly you need to download [the web template](https://github.com/csswizardry/inuit.css-web-template)
|
109
|
+
zip and unpack it to a location of your choosing. Next you need to download the
|
110
|
+
inuit.css core zip and unpack that into `css/inuit.css/` in your new project.
|
111
|
+
|
112
|
+
## Getting started
|
113
|
+
|
114
|
+
Once you have your project set up, you should be looking at a directory
|
115
|
+
structure a little like this:
|
116
|
+
|
117
|
+
your-project-folder/
|
118
|
+
css/
|
119
|
+
inuit.css/
|
120
|
+
_vars.scss
|
121
|
+
style.scss
|
122
|
+
watch
|
123
|
+
index.html
|
124
|
+
|
125
|
+
Your CSS directory holds everything you need to get building:
|
126
|
+
|
127
|
+
* Everything in `css/inuit.css/` is library code which **should not** be edited.
|
128
|
+
If you `cd` into here you should see that this submodule will initially be on
|
129
|
+
`(no branch)`, this is because the submodule points at a specific commit and
|
130
|
+
not a branch. You can treat this directory like any other Git project which
|
131
|
+
means you can `$ git checkout master` to get your submodule on the most
|
132
|
+
up-to-date stable version of inuit.css. To grab any new changes simply run
|
133
|
+
`$ git pull` on the `master` branch.
|
134
|
+
* `_vars.scss` contains any project variables you need, as well as any overrides
|
135
|
+
you wish to make to the inuit.css library. It also houses feature switches to
|
136
|
+
turn inuit.css’ objects and abstractions on and off as you need them.
|
137
|
+
* `style.scss` is your master Sass stylesheet which will concatenate any other
|
138
|
+
stylesheets from inuit.css and your extensions when it is compiled.
|
139
|
+
* `watch` is a handy little script which makes it easier for you to watch your
|
140
|
+
Sass from the command line; instead of the `$ sass --watch ...` command, you
|
141
|
+
now need only type `$ ./watch` and the script will do the rest. Running this
|
142
|
+
will compile your project into `style[.min].css`.
|
143
|
+
|
144
|
+
## How inuit.css works
|
145
|
+
|
146
|
+
inuit.css works in ‘layers’, not dissimilar to [SMACSS](http://smacss.com/). The
|
147
|
+
principle of inuit.css’ architecture is levels of extension; each layer of code
|
148
|
+
extends the layer below.
|
149
|
+
|
150
|
+
We start in `inuit.css/generic/`, with our most generic, low-level styling,
|
151
|
+
things like a clearfix, [normalize.css](http://necolas.github.com/normalize.css/),
|
152
|
+
our reset and any shared styling like margins (for vertical rythmn).
|
153
|
+
|
154
|
+
On top of that we lay our base styles, found in `inuit.css/base/`; these are
|
155
|
+
things like unclassed headings, what our basic forms look like, how simple
|
156
|
+
tables appear. These are all design-free HTML elements that you can extend with
|
157
|
+
your own styles later on.
|
158
|
+
|
159
|
+
Next up, in `inuit.css/objects/`, we have our objects and abstractions; these
|
160
|
+
are all scaffolding type constructs that hold no styling, but do heavy lifting.
|
161
|
+
In here we have things like
|
162
|
+
[the media object](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/),
|
163
|
+
[the nav abstraction](http://csswizardry.com/2011/09/the-nav-abstraction/) and
|
164
|
+
other unstyled objects that you can use to construct design patterns _without_
|
165
|
+
design (that bit is left up to you).
|
166
|
+
|
167
|
+
Finally we have our helper classes (though these live back in the `inuit.css/generic/`
|
168
|
+
directory); these are things like margin helper classes, width classes and other
|
169
|
+
‘style trumps’ which need to take precedence over any things that have gone
|
170
|
+
before them. These classes are used to modify your objects and abstractions on a
|
171
|
+
case-by-case basis.
|
172
|
+
|
173
|
+
## Overriding inuit.css’ defaults
|
174
|
+
|
175
|
+
inuit.css has a file called `_defaults.scss` which contains all the Sass
|
176
|
+
variables required for the library to compile without failing. These variables
|
177
|
+
are preset because Sass will error without them, however they are **not** set in
|
178
|
+
stone, and you are encouranged to override and experiment with them.
|
179
|
+
|
180
|
+
It is tempting to modify their vaules in the inuit.css submodule but this is
|
181
|
+
**not** the correct method for modifying inuit.css, and in doing so you will
|
182
|
+
prevent yourself from being able to update inuit.css’ core library. The correct
|
183
|
+
proceedure is to redefine that variable in `_vars.scss` found in the inuit.css
|
184
|
+
web template. Let’s take an example…
|
185
|
+
|
186
|
+
In inuit.css’ `_defaults.scss` we find the following:
|
187
|
+
|
188
|
+
$h1-size: 36px!default; // .alpha
|
189
|
+
$h2-size: 30px!default; // .beta
|
190
|
+
$h3-size: 24px!default; // .gamma
|
191
|
+
$h4-size: 20px!default; // .delta
|
192
|
+
$h5-size: 16px!default; // .epsilon
|
193
|
+
$h6-size: 14px!default; // .zeta
|
194
|
+
|
195
|
+
Let’s say we want our `h1`s to be `48px` and not `36px`; instead of modifying
|
196
|
+
the value of `$h1-size` here, pop open your `_vars.scss` file and add this in
|
197
|
+
the overrides section:
|
198
|
+
|
199
|
+
/*------------------------------------*\
|
200
|
+
$OVERRIDES
|
201
|
+
\*------------------------------------*/
|
202
|
+
/**
|
203
|
+
* Place any variables that should override inuit.css’ defaults here.
|
204
|
+
*/
|
205
|
+
$h1-size:48px;
|
206
|
+
|
207
|
+
Now when you compile your CSS, inuit.css will know to ignore its preset value
|
208
|
+
(that is what `!default` is for) in favour of your own. By doing things this way
|
209
|
+
you can change the values that inuit.css uses without having to modify inuit.css
|
210
|
+
itself, thus leaving it free to be updated.
|
211
|
+
|
212
|
+
In this file you will also see your feature switches needed to turn objects and
|
213
|
+
abstractions on and off. Feature switches are only preset for objects and
|
214
|
+
abstractions; you will **not** initially find switches for things like
|
215
|
+
`$debug-mode` in here, but they can be turned on and off by adding an override
|
216
|
+
as outlined above, e.g.:
|
217
|
+
|
218
|
+
/*------------------------------------*\
|
219
|
+
$OVERRIDES
|
220
|
+
\*------------------------------------*/
|
221
|
+
/**
|
222
|
+
* Place any variables that should override inuit.css’ defaults here.
|
223
|
+
*/
|
224
|
+
$h1-size:48px;
|
225
|
+
$push:true;
|
226
|
+
$palm-push:true;
|
227
|
+
|
228
|
+
This file can also house any custom variables that you wish to use in extending
|
229
|
+
inuit.css, as covered in the next section.
|
230
|
+
|
231
|
+
## Extending inuit.css
|
232
|
+
|
233
|
+
inuit.css is, by design, a very design-free framework. This means that the
|
234
|
+
style and design of your site is left entirely up to you (as it should be).
|
235
|
+
Because inuit.css gives you lots of customisable foundations, you need to add
|
236
|
+
the final layer: UI.
|
237
|
+
|
238
|
+
How you go about this step is largely left up to you, but it is common practice
|
239
|
+
to create another directory in `css/` called `ui/`, leaving you with:
|
240
|
+
|
241
|
+
your-project-folder/
|
242
|
+
css/
|
243
|
+
inuit.css/
|
244
|
+
ui/
|
245
|
+
_vars.scss
|
246
|
+
style.scss
|
247
|
+
watch
|
248
|
+
index.html
|
249
|
+
|
250
|
+
In here you can place your own Sass files which hold your UI’s CSS, for example:
|
251
|
+
|
252
|
+
ui/
|
253
|
+
_contact-form.scss
|
254
|
+
_footer.scss
|
255
|
+
_pricing-table.scss
|
256
|
+
|
257
|
+
You then include these from `style.scss`, like so:
|
258
|
+
|
259
|
+
/**
|
260
|
+
* She’s all yours, cap’n... Begin importing your stuff here.
|
261
|
+
*/
|
262
|
+
//@import "ui/example";
|
263
|
+
@import "ui/footer";
|
264
|
+
@import "ui/contact-form";
|
265
|
+
@import "ui/pricing-table";
|
266
|
+
|
267
|
+
Now, when you run `$ ./watch`, `style.scss` will be calling:
|
268
|
+
|
269
|
+
1. Your variables
|
270
|
+
2. The inuit.css core library (as outlined above)
|
271
|
+
3. Your custom/UI CSS
|
272
|
+
|
273
|
+
…and building a concatenated stylesheet out of it all. Neat, huh?!
|
274
|
+
|
275
|
+
## Footprint
|
276
|
+
|
277
|
+
Out of the box, inuit.css is very small, however it is **imperative** that you
|
278
|
+
only ever deploy a minified version of your compiled stylesheet to your live
|
279
|
+
environment. inuit.css compiles stright to minified output by default, but you
|
280
|
+
can change this in `watch` if you have a build process in place.
|
281
|
+
|
282
|
+
It is also **highly** recommended that you enable gzip compression on any text
|
283
|
+
assets being served from your site; doing so will further reduce the footprint
|
284
|
+
of inuit.css and greatly help your site’s performance.
|
285
|
+
|
286
|
+
## Documentation
|
287
|
+
|
288
|
+
There are no official docs for inuit.css because the code _is_ the
|
289
|
+
documentation. Everything is heavily commented with example HTML. If you
|
290
|
+
struggle with anything please tweet at [@inuitcss](http://twitter.com/inuitcss)
|
291
|
+
and/or [open an issue](https://github.com/csswizardry/inuit.css/issues) and I’ll
|
292
|
+
try help out and use your feedback to improve the documentation.
|
293
|
+
|
294
|
+
It is strongly encouraged that you thoroughly read the source of inuit.css’
|
295
|
+
files, particularly `_inuit.scss`.
|
296
|
+
|
297
|
+
### Demos
|
298
|
+
|
299
|
+
Although there are no docs as such, there is [a dedicated inuit.css jsFiddle
|
300
|
+
account](http://jsfiddle.net/user/inuitcss/fiddles/) which houses plenty of
|
301
|
+
demos of various aspects of the framework.
|
302
|
+
|
303
|
+
### Development
|
304
|
+
|
305
|
+
You can keep up-to-date with upcoming features, suggestions and fixes by looking
|
306
|
+
at the [inuit.css Trello board](https://trello.com/board/inuit-css/50a16487543dea585502f3d2).
|
307
|
+
|
308
|
+
## Looking for a little LESS?
|
309
|
+
|
310
|
+
[Peter Wilson](http://twitter.com/pwcc) is maintaining a LESS port of inuit.css:
|
311
|
+
check [the GitHub repo](https://github.com/peterwilsoncc/inuit.css).
|
312
|
+
|
313
|
+
## Using Compass?
|
314
|
+
|
315
|
+
[Stephen Way](http://github.com/stephenway) is maintaining a Compass port of
|
316
|
+
inuit.css: check [the GitHub repo](https://github.com/stephenway/compass-inuit).
|
317
|
+
|
318
|
+
## Test-drive
|
319
|
+
|
320
|
+
If you would like to try inuit.css out before you download anything there is a
|
321
|
+
compiled version [on jsFiddle](http://jsfiddle.net/inuitcss/a6yS3/) that you
|
322
|
+
are encouraged to fork and play with. Refer back to
|
323
|
+
[the source here on GitHub](https://github.com/csswizardry/inuit.css/blob/master/inuit.css/_inuit.scss)
|
324
|
+
for documentation.
|
325
|
+
|
326
|
+
## As used by
|
327
|
+
|
328
|
+
* [BSkyB](http://en.wikipedia.org/wiki/BSkyB)
|
329
|
+
* [pr.ofile.me](http://pr.ofile.me)
|
330
|
+
* [Lukas Bestle](http://lu-x.me)
|
331
|
+
* [Matthew Tyas](http://matthewtyas.com/)
|
332
|
+
|
333
|
+
### Using inuit.css?
|
334
|
+
|
335
|
+
If you use inuit.css on a live project then [tweet at me](http://twitter.com/inuitcss)
|
336
|
+
and I’ll send you some inuit.css stickers!
|
337
|
+
|
338
|
+
## Support inuit.css
|
339
|
+
|
340
|
+
If you use and/or like inuit.css, perhaps you might consider [supporting it
|
341
|
+
through Gumroad](http://gum.co/nOoht).
|
342
|
+
|
343
|
+
## Credits
|
344
|
+
|
345
|
+
inuit.css, although produced and maintained by one developer, could not have
|
346
|
+
been possible without inspiration and work from an array of other people.
|
347
|
+
|
348
|
+
* **[Nicole Sullivan](https://twitter.com/stubbornella)** for her work on OOCSS
|
349
|
+
* **[Jonathan Snook](https://twitter.com/snookca)** for his work on SMACSS
|
350
|
+
* **[Nicolas Gallagher](https://twitter.com/necolas)** for his work on numerous
|
351
|
+
CSS things
|
352
|
+
* **[Bryan James](https://twitter.com/WengersToyBus)** for the inuit.css logo
|
353
|
+
* **[Nick Payne](https://twitter.com/makeusabrew)** for helping with v5.0’s
|
354
|
+
submodule architecture.
|
355
|
+
|
356
|
+
And probably more…
|
357
|
+
|
358
|
+
## License
|
359
|
+
|
360
|
+
Copyright 2013 Harry Roberts
|
361
|
+
|
362
|
+
Licensed under the Apache License, Version 2.0.
|
363
|
+
|
364
|
+
---
|
365
|
+
|
366
|
+
**inuit.css is the most powerful little framework out there, and it’s ready to
|
367
|
+
go!**
|