Skip to content

Commit

Permalink
Merge branch 'v5.0-rc1'
Browse files Browse the repository at this point in the history
  • Loading branch information
@csswizardry
csswizardry committed Mar 11, 2013
2 parents a2e48f5 + f6394da commit b321594
Show file tree
Hide file tree
Showing 66 changed files with 1,285 additions and 5,154 deletions.
17 changes: 0 additions & 17 deletions .gitignore
View file

This file was deleted.

20 changes: 20 additions & 0 deletions CHANGELOG.md
View file
@@ -0,0 +1,20 @@
# Changelog

This changelog only exists as of v5.0 onward, for previous inuit.css versions’
history please browse the commit logs.

## v5.0

This major version bump saw the introduction of the
[inuit.css web template](https://github.com/csswizardry/inuit.css-web-template),
a means of including inuit.css as a submodule through which you can easily pull
updates from GitHub whilst avoiding having to touch any library code.

* Use [beautons](https://github.com/csswizardry/beautons) for button styling
* Use [csswizardry-grids](https://github.com/csswizardry/csswizardry-grids) for
inuit.css’ built-in grid system.
* Removed [Batch](http://adamwhitcroft.com/batch/)
* Moved over to [HTML5 Boilerplate](http://html5boilerplate.com/) style helper
classes.
* Added a few more helper classes and mixins.
* Introduced switches to turn objects and abstractions on/off.
42 changes: 42 additions & 0 deletions CONTRIBUTING.md
View file
@@ -0,0 +1,42 @@
# Contributing to inuit.css

So, you want to contribute to inuit.css? That’s awesome!

However, I do ask that you follow a few small rules…

## Bugs and issues

If you believe you have a bug or issue that needs investigating:

* Search existing issues to avoid opening a duplicate.
* Please open an issue and be as descriptive as possible.
* If you can, accompany the report with a reduced test case via
[jsFiddle](http://jsfiddle.net/) or similar.

## Pull requests

If submitting a pull request:

* Follow the predefined code style used in the framework (I’m afraid that means
no spaces before opening braces and after colons (I’m weird like that)).
* Read my [Git workflow for inuit.css](http://csswizardry.com/2012/12/my-git-workflow-for-inuit-css/)
and try and keep as close to that as possible.
* Carry out all your work in a topic branch with a suitable name, e.g.
`fix/grids`, `feature/new-object` etc.
* Commit sensibly and, if needs be, rebase your branch to tidy your commits up.
* Ensure inuit.css still compiles without error through both the standalone
library and the web template.
* Submit all pull requests against the `incoming` branch. Any pull requests
submitted against `master` **will** be declined.
* Advise on versioning if possible; if the changes require a version bump or
merely a patch bump, please let me know.

## Feature requests

I am open to requests for adding new features, but please bear in mind:

* Make sure it fits in the with ideals and scope of the project; inuit.css has a
very specific purpose and all features need tp tie in with this.
* Have a go at adding the new functionality yourself and opening a pull request.
* **Discuss any features before attempting to develop them yourself;** I would
hate for anyone to spend a tonne of time on something that I end up rejecting.
280 changes: 219 additions & 61 deletions README.md
View file
@@ -1,4 +1,6 @@
# ![inuit.css](http://inuitcss.com/img/content/logo.png)
![inuit.css](http://inuitcss.com/img/content/logo.png)

# inuit.css – v5.0

inuit.css is a powerful little framework designed for _serious_ developers.

Expand Down Expand Up @@ -66,69 +68,220 @@ condensed into one powerful little framework.

**Requires Sass 3.2**

[**Watch _An introduction to inuit.css_ screencast**](http://www.youtube.com/watch?v=IkaILVOgGRA&hd=1)

inuit.css is incredibly easy to get up and running (provided you’re all set for
Sass). Simply [download the latest version](https://github.com/csswizardry/inuit.css/zipball/master)
of inuit.css from right here on GitHub, unpack the zip file and watch the Sass.

You can watch the file by `cd`ing into the directory that houses the `.scss`
and running the following:

$ sass --watch style.scss:style.min.css --style compressed

Alternatively you can modify [`watch.sh`](https://github.com/csswizardry/inuit.css/blob/master/watch.sh)
to reflect the name of your project:

sass --watch style.scss:[set-your-desired-name-here].min.css --style compressed

and simply run:

$ sh watch.sh

…from the command line.

That’s it, your project is now set up on inuit.css.

To begin adding your styles on top of inuit.css just begin including things in
[`style.scss`](https://github.com/csswizardry/inuit.css/blob/master/style.scss#L22)
_after_ you’ve called in your variables and the inuit.css framework.

If there are any objects and abstractions you _don’t_ use in your project, it
is advisable that you comment out their inclusion in
[`inuit.scss`](https://github.com/csswizardry/inuit.css/blob/master/inuit.css/inuit.scss).
For example, if your project doesn’t require any pagination, text columns or
flyouts, you’d have:

@import "partials/objects/grids";
@import "partials/objects/flexbox";
// @import "partials/objects/columns";
@import "partials/objects/nav";
// @import "partials/objects/pagination";
@import "partials/objects/media";
@import "partials/objects/island";
@import "partials/objects/block-list";
@import "partials/objects/matrix";
@import "partials/objects/split";
@import "partials/objects/this-or-this";
@import "partials/objects/complex-link";
// @import "partials/objects/flyout";
@import "partials/objects/sprite";
@import "partials/objects/icon-text";
@import "partials/objects/buttons";
@import "partials/objects/lozenges";
@import "partials/objects/greybox";

This ensures that you aren’t packaging more than you need to.
inuit.css v5.0+ is designed to be even more advanced than previous versions of
your favourite CSS framework! inuit.css’ core library is now intended to be used
as a submodule which means you can always get inuit.css’ latest updates without
ever having to touch a line of library code.

This works by having this, the inuit.css core library, and the
[inuit.css-web-template](https://github.com/csswizardry/inuit.css-web-template).
The web template is very un-opinionated and simply houses your site, however
you wish to build it. It has a `css/` directory which contains your
project-specific variables and any stylesheets that extend inuit.css, as well as
housing inuit.css as an updatable submodule. Any of inuit.css’ default settings
can be simply overridden from the web template which means you no longer have to
edit a single line of the framework (which in turn means that incorporating
inuit.css updates is as simple as a `$ git pull`).

### Install via command line (recommended)

The command line install of inuit.css is _incredibly_ simple:

$ git clone --recursive git@github.com:csswizardry/inuit.css-web-template.git your-project-folder
$ cd your-project-folder
$ ./go

What we are doing here is cloning an instance of the inuit.css-web-template and
its submodules (that’s what the `--recursive` does) into a directory which you
specify. Next we `cd` into that directory and run [our `go` script](https://github.com/csswizardry/inuit.css-web-template/blob/master/go).
This script (courtesy of [Nick Payne](http://twitter.com/makeusabrew)) simply
removes the web template’s Git instance and replaces it with a fresh one for
your project, whilst also maintaining your inuit.css submodule.

### Install via zip

Though not tested, using inuit.css from its GitHub zip _should_ be fairly
simple. Using inuit.css from zipped source does mean that you can’t update
inuit.css as a submodule, but you may well be able to drop fresh zip files into
the `css/inuit.css/` directory provided you don’t edit any library code.

Firstly you need to download [the web template](https://github.com/csswizardry/inuit.css-web-template)
zip and unpack it to a location of your choosing. Next you need to download the
inuit.css core zip and unpack that into `css/inuit.css/` in your new project.

## Getting started

Once you have your project set up, you should be looking at a directory
structure a little like this:

your-project-folder/
css/
inuit.css/
_vars.scss
style.scss
watch
index.html

Your CSS directory holds everything you need to get building:

* Everything in `css/inuit.css/` is library code which **should not** be edited.
If you `cd` into here you should see that this submodule will initially be on
`(no branch)`, this is because the submodule points at a specific commit and
not a branch. You can treat this directory like any other Git project which
means you can `$ git checkout master` to get your submodule on the most
up-to-date stable version of inuit.css. To grab any new changes simply run
`$ git pull` on the `master` branch.
* `_vars.scss` contains any project variables you need, as well as any overrides
you wish to make to the inuit.css library. It also houses feature switches to
turn inuit.css’ objects and abstractions on and off as you need them.
* `style.scss` is your master Sass stylesheet which will concatenate any other
stylesheets from inuit.css and your extensions when it is compiled.
* `watch` is a handy little script which makes it easier for you to watch your
Sass from the command line; instead of the `$ sass --watch ...` command, you
now need only type `$ ./watch` and the script will do the rest. Running this
will compile your project into `style[.min].css`.

## How inuit.css works

inuit.css works in ‘layers’, not dissimilar to [SMACSS](http://smacss.com/). The
principle of inuit.css’ architecture is levels of extension; each layer of code
extends the layer below.

We start in `inuit.css/generic/`, with our most generic, low-level styling,
things like a clearfix, [normalize.css](http://necolas.github.com/normalize.css/),
our reset and any shared styling like margins (for vertical rythmn).

On top of that we lay our base styles, found in `inuit.css/base/`; these are
things like unclassed headings, what our basic forms look like, how simple
tables appear. These are all design-free HTML elements that you can extend with
your own styles later on.

Next up, in `inuit.css/objects/`, we have our objects and abstractions; these
are all scaffolding type constructs that hold no styling, but do heavy lifting.
In here we have things like
[the media object](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/),
[the nav abstraction](http://csswizardry.com/2011/09/the-nav-abstraction/) and
other unstyled objects that you can use to construct design patterns _without_
design (that bit is left up to you).

Finally we have our helper classes (though these live back in the `inuit.css/generic/`
directory); these are things like margin helper classes, width classes and other
‘style trumps’ which need to take precedence over any things that have gone
before them. These classes are used to modify your objects and abstractions on a
case-by-case basis.

## Overriding inuit.css’ defaults

inuit.css has a file called `_defaults.scss` which contains all the Sass
variables required for the library to compile without failing. These variables
are preset because Sass will error without them, however they are **not** set in
stone, and you are encouranged to override and experiment with them.

It is tempting to modify their vaules in the inuit.css submodule but this is
**not** the correct method for modifying inuit.css, and in doing so you will
prevent yourself from being able to update inuit.css’ core library. The correct
proceedure is to redefine that variable in `_vars.scss` found in the inuit.css
web template. Let’s take an example…

In inuit.css’ `_defaults.scss` we find the following:

$h1-size: 36px!default; // .alpha
$h2-size: 30px!default; // .beta
$h3-size: 24px!default; // .gamma
$h4-size: 20px!default; // .delta
$h5-size: 16px!default; // .epsilon
$h6-size: 14px!default; // .zeta

Let’s say we want our `h1`s to be `48px` and not `36px`; instead of modifying
the value of `$h1-size` here, pop open your `_vars.scss` file and add this in
the overrides section:

/*------------------------------------*\
$OVERRIDES
\*------------------------------------*/
/**
* Place any variables that should override inuit.css’ defaults here.
*/
$h1-size:48px;

Now when you compile your CSS, inuit.css will know to ignore its preset value
(that is what `!default` is for) in favour of your own. By doing things this way
you can change the values that inuit.css uses without having to modify inuit.css
itself, thus leaving it free to be updated.

In this file you will also see your feature switches needed to turn objects and
abstractions on and off. Feature switches are only preset for objects and
abstractions; you will **not** initially find switches for things like
`$debug-mode` in here, but they can be turned on and off by adding an override
as outlined above, e.g.:

/*------------------------------------*\
$OVERRIDES
\*------------------------------------*/
/**
* Place any variables that should override inuit.css’ defaults here.
*/
$h1-size:48px;
$push:true;
$palm-push:true;

This file can also house any custom variables that you wish to use in extending
inuit.css, as covered in the next section.

## Extending inuit.css

inuit.css is, by design, a very design-free framework. This means that the
style and design of your site is left entirely up to you (as it should be).
Because inuit.css gives you lots of customisable foundations, you need to add
the final layer: UI.

How you go about this step is largely left up to you, but it is common practice
to create another directory in `css/` called `ui/`, leaving you with:

your-project-folder/
css/
inuit.css/
ui/
_vars.scss
style.scss
watch
index.html

In here you can place your own Sass files which hold your UI’s CSS, for example:

ui/
_contact-form.scss
_footer.scss
_pricing-table.scss

You then include these from `style.scss`, like so:

/**
* She’s all yours, cap’n... Begin importing your stuff here.
*/
//@import "ui/example";
@import "ui/footer";
@import "ui/contact-form";
@import "ui/pricing-table";

Now, when you run `$ ./watch`, `style.scss` will be calling:

1. Your variables
2. The inuit.css core library (as outlined above)
3. Your custom/UI CSS

…and building a concatenated stylesheet out of it all. Neat, huh?!

## Footprint

**inuit.css is tiny.** The full framework – _including_ debug mode – once minified
and gzipped weighs **less than 5.6kB**
Out of the box, inuit.css is very small, however it is **imperative** that you
only ever deploy a minified version of your compiled stylesheet to your live
environment. inuit.css compiles stright to minified output by default, but you
can change this in `watch` if you have a build process in place.

It is essential to **compile to a minified file** because inuit.css is packed
full of comments and whitespace; so much so that it would be detrimental to
your website’s performance to serve the unminified version.
It is also **highly** recommended that you enable gzip compression on any text
assets being served from your site; doing so will further reduce the footprint
of inuit.css and greatly help your site’s performance.

## Documentation

Expand All @@ -138,6 +291,9 @@ struggle with anything please tweet at [@inuitcss](http://twitter.com/inuitcss)
and/or [open an issue](https://github.com/csswizardry/inuit.css/issues) and I’ll
try help out and use your feedback to improve the documentation.

It is strongly encouraged that you thoroughly read the source of inuit.css’
files, particularly `_inuit.scss`.

### Demos

Although there are no docs as such, there is [a dedicated inuit.css jsFiddle
Expand Down Expand Up @@ -194,12 +350,14 @@ been possible without inspiration and work from an array of other people.
* **[Nicolas Gallagher](https://twitter.com/necolas)** for his work on numerous
CSS things
* **[Bryan James](https://twitter.com/WengersToyBus)** for the inuit.css logo
* **[Nick Payne](https://twitter.com/makeusabrew)** for helping with v5.0’s
submodule architecture.

And probably more…

## License

Copyright 2012 Harry Roberts
Copyright 2013 Harry Roberts

Licensed under the Apache License, Version 2.0.

Expand Down

0 comments on commit b321594

Please sign in to comment.