polar-express 0.0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (60) hide show
  1. data/MIT-LICENSE +19 -0
  2. data/README.md +37 -0
  3. data/lib/generators/inuitcss/install/USAGE +9 -0
  4. data/lib/generators/inuitcss/install/install_generator.rb +9 -0
  5. data/lib/generators/inuitcss/install/templates/inuit.css.scss +99 -0
  6. data/lib/polar-express.rb +6 -0
  7. data/vendor/assets/stylesheets/CHANGELOG.md +26 -0
  8. data/vendor/assets/stylesheets/CONTRIBUTING.md +42 -0
  9. data/vendor/assets/stylesheets/LICENSE +13 -0
  10. data/vendor/assets/stylesheets/README.md +367 -0
  11. data/vendor/assets/stylesheets/_defaults.scss +225 -0
  12. data/vendor/assets/stylesheets/_inuit.scss +213 -0
  13. data/vendor/assets/stylesheets/base/_code.scss +63 -0
  14. data/vendor/assets/stylesheets/base/_forms.scss +174 -0
  15. data/vendor/assets/stylesheets/base/_headings.scss +60 -0
  16. data/vendor/assets/stylesheets/base/_images.scss +73 -0
  17. data/vendor/assets/stylesheets/base/_lists.scss +19 -0
  18. data/vendor/assets/stylesheets/base/_main.scss +8 -0
  19. data/vendor/assets/stylesheets/base/_paragraphs.scss +11 -0
  20. data/vendor/assets/stylesheets/base/_quotes.scss +96 -0
  21. data/vendor/assets/stylesheets/base/_smallprint.scss +13 -0
  22. data/vendor/assets/stylesheets/base/_tables.scss +163 -0
  23. data/vendor/assets/stylesheets/component.json +5 -0
  24. data/vendor/assets/stylesheets/generic/_brand.scss +18 -0
  25. data/vendor/assets/stylesheets/generic/_clearfix.scss +15 -0
  26. data/vendor/assets/stylesheets/generic/_debug.scss +168 -0
  27. data/vendor/assets/stylesheets/generic/_helper.scss +184 -0
  28. data/vendor/assets/stylesheets/generic/_mixins.scss +328 -0
  29. data/vendor/assets/stylesheets/generic/_normalize.scss +396 -0
  30. data/vendor/assets/stylesheets/generic/_pull.scss +147 -0
  31. data/vendor/assets/stylesheets/generic/_push.scss +147 -0
  32. data/vendor/assets/stylesheets/generic/_reset.scss +80 -0
  33. data/vendor/assets/stylesheets/generic/_shared.scss +61 -0
  34. data/vendor/assets/stylesheets/generic/_widths.scss +158 -0
  35. data/vendor/assets/stylesheets/objects/_arrows.scss +147 -0
  36. data/vendor/assets/stylesheets/objects/_beautons.scss +226 -0
  37. data/vendor/assets/stylesheets/objects/_block-list.scss +44 -0
  38. data/vendor/assets/stylesheets/objects/_breadcrumb.scss +63 -0
  39. data/vendor/assets/stylesheets/objects/_columns.scss +22 -0
  40. data/vendor/assets/stylesheets/objects/_flexbox.scss +55 -0
  41. data/vendor/assets/stylesheets/objects/_flyout.scss +63 -0
  42. data/vendor/assets/stylesheets/objects/_greybox.scss +58 -0
  43. data/vendor/assets/stylesheets/objects/_grids.scss +69 -0
  44. data/vendor/assets/stylesheets/objects/_icon-text.scss +40 -0
  45. data/vendor/assets/stylesheets/objects/_island.scss +38 -0
  46. data/vendor/assets/stylesheets/objects/_link-complex.scss +32 -0
  47. data/vendor/assets/stylesheets/objects/_lozenges.scss +46 -0
  48. data/vendor/assets/stylesheets/objects/_marginalia.scss +52 -0
  49. data/vendor/assets/stylesheets/objects/_matrix.scss +89 -0
  50. data/vendor/assets/stylesheets/objects/_media.scss +60 -0
  51. data/vendor/assets/stylesheets/objects/_nav.scss +155 -0
  52. data/vendor/assets/stylesheets/objects/_options.scss +45 -0
  53. data/vendor/assets/stylesheets/objects/_pagination.scss +50 -0
  54. data/vendor/assets/stylesheets/objects/_rules.scss +65 -0
  55. data/vendor/assets/stylesheets/objects/_split.scss +39 -0
  56. data/vendor/assets/stylesheets/objects/_sprite.scss +98 -0
  57. data/vendor/assets/stylesheets/objects/_stats.scss +52 -0
  58. data/vendor/assets/stylesheets/objects/_this-or-this.scss +38 -0
  59. data/vendor/assets/stylesheets/style.scss +26 -0
  60. 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
+ Description:
2
+ Sets up inuit.css in your Rails project.
3
+
4
+ This generates the necessary files in the assets/stylesheets directory.
5
+
6
+ Examples:
7
+ `rails g inuitcss:install`
8
+
9
+ `rails g inuitcss:install --help`
@@ -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,6 @@
1
+ module Polarexpress
2
+ module Rails
3
+ class Engine < ::Rails::Engine
4
+ end
5
+ end
6
+ end
@@ -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!**