Client Specification
we find out what your requirements are, and discuss possible design ideas.
inuit.css is for you, so if there’s something wrong, something you want fixing, something you want adding, anything at all, please consider contributing to the project on GitHub. If you’re not on GitHub then feel free to Tweet at me; the project can only be as good as you guys want to make it!
In this, your inuit.css download bundle, you will find two directories; core and demo. In core there is the bare minimum you will need to install inuit.css on your site. If you are familiar with inuit.css and how it works that is as far as you need to look; just copy and paste that directory into your site’s CSS directory and link everything up. If you are new to inuit.css, or need some help setting things up, read on…
The demo directory shows you how an inuit.css project might look. It shows how to organise your inuit.css files, your igloos and your custom CSS. Either copy/paste the demo directory or replicate this kind of structure and start afresh. The files in demo are:
/css//css/igloos.css/css/style.css/humans.txt/icon.png/img//index.htmlIgloos are simply plugins for inuit.css. There are a range of igloos available and, if you’d like, you are encouraged to create and share your own!
There is an igloos.css file in which you import your various plugins, then simply include igloos.css in the head using a regular <link> element:
<head>
...
<link rel=stylesheet href=css/inuit.css>
<link rel=stylesheet href=css/igloos.css>
...
</head>inuit.css now contains a shared section in order to keep it nice and DRY. This section is intended to reuse common declarations as opposed to repeating them over and over. This keeps repeated CSS to a minimum and is like having quasi-variables in CSS.
Only share declarations if they are common, not coincidental! Treat them as you would any variable; float:left; may be used multiple times purely coincidentally, but color:#[your brand colour]; is probably used several times for consistency. The latter should appear in shared whereas the former probably shouldn’t.
inuit.css comes with some useful, predefined objects and abstractions. These are the media object, the island object and the nav abstraction.
Abstractions and OOCSS are all a part of powerful, DRY and pragmatic CSS, something inuit.css aims to promote.
Classes of .alpha, .beta, .gamma, .delta, .epsilon and .zeta correspond to headings h1–6. This means that we have a semantic hierarchy and visual hierarchy that can be combined in two strands. If something is semantically a h3 but visually is a h2 your markup would be <h3 class=beta>. Using abstracted classnames makes them less presentational and more about levels of importance.
By default inuit.css does not include a grid system, as you may not always need one. If you would like to use one you can create your own on the inuit.css website. Include this generated CSS file as an igloo and use its classes in your build to quickly construct grid layouts.
The grids all come with preset widths and therefore their box model properties should not be edited or overridden. If you would like a <div> with a yellow background and a padding of 10px then create a <div> inside a grid container and style that.
This may seem like bloated code at first, but you should think of grids as a set of shelves; they literally only hold things and are not styled themselves. This brings the benefit of fluidity to your builds; if your grid constrains the widths of objects then the objects themselves can be fluid, meaning you could move a promo from inside a .grid-4 parent into a .grid-6 parent and it will always occupy the available space.
<div class=grid-4>
<div class=promo>
<p>I am completely fluid.</p>
</div>
</div>
.grid-4{
[styles pertaining to floats and widths here]
}
.promo{
/* No widths applied here, so we can place this component in any grid item we wish and it will always fit. */
text-align:center;
padding:10px;
background-color:#ffc;
}test class grid 12
test class grid 11 link
test class grid 6
test 4
test 4
test 4
test 8 (1)
test 8 (2)
We provide a range of services to give you a greater online presence, ranging from initial design and setup, to configuration and management.
There is nothing we like more than happy customers - and we believe communication is the key, therefore we keep in touch regularly during all stages of the development (and often after final handover) to ensure everything is going to be just the way you want it to be!
Most of our sites are built around tried and tested templates - this not only ensures you have a site that is reliable, but also helps keep the costs as low as possible.
We cater to all budgets -if you have something in mind, why not find out if we can help?
For more information contact us
