Update to site
This commit is contained in:
Paulus Schoutsen
parent
3345fa5897
commit
b0bdfe2fe9
244 changed files with 11618 additions and 12 deletions
26
sass/inuitcss/CHANGELOG.md
Normal file
26
sass/inuitcss/CHANGELOG.md
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
# Changelog
|
||||
|
||||
This changelog only exists as of v5.0 onward, for previous inuit.css versions’
|
||||
history please browse the commit logs.
|
||||
|
||||
## v5.0.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.
|
||||
|
||||
## v5.1.1
|
||||
|
||||
* Convert special character to unicode.
|
||||
* Fix/change the `headings` mixin.
|
||||
* Fix some typos pertaining to the renaming of the spriting object.
|
||||
42
sass/inuitcss/CONTRIBUTING.md
Normal file
42
sass/inuitcss/CONTRIBUTING.md
Normal 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.
|
||||
13
sass/inuitcss/LICENSE
Normal file
13
sass/inuitcss/LICENSE
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
Copyright 2012 Harry Roberts
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
368
sass/inuitcss/README.md
Normal file
368
sass/inuitcss/README.md
Normal file
|
|
@ -0,0 +1,368 @@
|
|||
|
||||
|
||||
# inuit.css – v5.0
|
||||
|
||||
inuit.css is a powerful little framework designed for _serious_ developers.
|
||||
|
||||
It is a Sass based, Object Oriented framework that is full of objects and
|
||||
abstractions. inuit.css provides little-to-no design which means no undoing
|
||||
things, no deleting CSS and no adhering to other peoples’ design decisions.
|
||||
|
||||
inuit.css is built on a [BEM](http://bem.info/)-style naming convention and
|
||||
honed based on [work done by Nicolas Gallagher](https://gist.github.com/1309546).
|
||||
|
||||
inuit.css is ideally suited to designers who want to focus on the creative and
|
||||
not code, and developers who understand the need for abstraction and an OO
|
||||
approach.
|
||||
|
||||
inuit.css gives you design patterns, not design decisions. It features nestable,
|
||||
fluid grids; a double-stranded heading hierarchy; sprites; buttons and a lot,
|
||||
_lot_ more.
|
||||
|
||||
|
||||
**Use inuit.css if:**
|
||||
|
||||
* You need a powerful library of objects and abstractions.
|
||||
* You understand/appreciate the value of OO code and the need for scalability
|
||||
and reuse.
|
||||
* You are a confident/competent developer comfortable with OOCSS and Sass, as
|
||||
well as familiarity with OO principles in general.
|
||||
|
||||
**Do not use inuit.css if:**
|
||||
|
||||
* You need a framework that supplies design (I’d recommend
|
||||
[Bootstrap](http://twitter.github.com/bootstrap/) for that).
|
||||
|
||||
## Browser support
|
||||
|
||||
inuit.css is a modern framework for modern browsers. It takes advantage of
|
||||
[normalize.css](http://necolas.github.com/normalize.css/) and global
|
||||
`box-sizing:border-box;` (optional). As such, inuit.css is intended for **IE8**
|
||||
and above only. The last release to support IE7 was
|
||||
[v4.1.5](https://github.com/csswizardry/inuit.css/archive/v4.1.5.zip).
|
||||
|
||||
## The developer
|
||||
|
||||
There are a million-and-one different CSS frameworks out there so this rather
|
||||
cringeworthy section is an attempt to validate inuit.css and give it some
|
||||
credibility…
|
||||
|
||||
I am [Harry Roberts](http://hry.rbrts.me), I am a 22 year old developer and
|
||||
front-end architect from the UK. I work as a Senior UI Developer for
|
||||
[BSkyB](http://en.wikipedia.org/wiki/BSkyB) where it is my job to build scalable
|
||||
front-ends, write internally used CSS frameworks and libraries, and to architect
|
||||
CSS and front-end builds.
|
||||
|
||||
I [write](http://csswizardry.com), [tweet](http://twitter.com/csswizardry) and
|
||||
[speak](http://speakerdeck.com/u/csswizardry/) about OOCSS, scalable CSS,
|
||||
maintainability, working in large teams, CSS performance, CSS architecture and a
|
||||
whole lot more.
|
||||
|
||||
inuit.css is the result of years of my specialism in CSS (as CSS is all I do).
|
||||
It is a collection of design patterns, objects, and abstractions that have been
|
||||
refined and bulletproofed over hours of development across an array of projects
|
||||
of varying sizes. inuit.css is the result of hundreds of hours of work all
|
||||
condensed into one powerful little framework.
|
||||
|
||||
## Installation
|
||||
|
||||
**Requires Sass 3.2**
|
||||
|
||||
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
|
||||
|
||||
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 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
|
||||
|
||||
There are no official docs for inuit.css because the code _is_ the
|
||||
documentation. Everything is heavily commented with example HTML. If you
|
||||
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
|
||||
account](http://jsfiddle.net/user/inuitcss/fiddles/) which houses plenty of
|
||||
demos of various aspects of the framework.
|
||||
|
||||
### Development
|
||||
|
||||
You can keep up-to-date with upcoming features, suggestions and fixes by looking
|
||||
at the [inuit.css Trello board](https://trello.com/board/inuit-css/50a16487543dea585502f3d2).
|
||||
|
||||
## Looking for a little LESS?
|
||||
|
||||
[Peter Wilson](http://twitter.com/pwcc) and
|
||||
[Nicolas Carlo](https://twitter.com/nicoespeon) are maintaining a LESS port of
|
||||
inuit.css: check [the GitHub repo](https://github.com/peterwilsoncc/inuit.css).
|
||||
|
||||
## Using Compass?
|
||||
|
||||
[Stephen Way](http://github.com/stephenway) is maintaining a Compass port of
|
||||
inuit.css: check [the GitHub repo](https://github.com/stephenway/compass-inuit).
|
||||
|
||||
## Test-drive
|
||||
|
||||
If you would like to try inuit.css out before you download anything there is a
|
||||
compiled version [on jsFiddle](http://jsfiddle.net/inuitcss/a6yS3/) that you
|
||||
are encouraged to fork and play with. Refer back to
|
||||
[the source here on GitHub](https://github.com/csswizardry/inuit.css/blob/master/inuit.css/_inuit.scss)
|
||||
for documentation.
|
||||
|
||||
## As used by
|
||||
|
||||
* [BSkyB](http://en.wikipedia.org/wiki/BSkyB)
|
||||
* [pr.ofile.me](http://pr.ofile.me)
|
||||
* [Lukas Bestle](http://lu-x.me)
|
||||
* [Matthew Tyas](http://matthewtyas.com/)
|
||||
|
||||
### Using inuit.css?
|
||||
|
||||
If you use inuit.css on a live project then [tweet at me](http://twitter.com/inuitcss)
|
||||
and I’ll send you some inuit.css stickers!
|
||||
|
||||
## Support inuit.css
|
||||
|
||||
If you use and/or like inuit.css, perhaps you might consider [supporting it
|
||||
through Gumroad](http://gum.co/nOoht).
|
||||
|
||||
## Credits
|
||||
|
||||
inuit.css, although produced and maintained by one developer, could not have
|
||||
been possible without inspiration and work from an array of other people.
|
||||
|
||||
* **[Nicole Sullivan](https://twitter.com/stubbornella)** for her work on OOCSS
|
||||
* **[Jonathan Snook](https://twitter.com/snookca)** for his work on SMACSS
|
||||
* **[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 2013 Harry Roberts
|
||||
|
||||
Licensed under the Apache License, Version 2.0.
|
||||
|
||||
---
|
||||
|
||||
**inuit.css is the most powerful little framework out there, and it’s ready to
|
||||
go!**
|
||||
226
sass/inuitcss/_defaults.scss
Normal file
226
sass/inuitcss/_defaults.scss
Normal file
|
|
@ -0,0 +1,226 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$DEFAULTS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* inuit.css’ default variables. Redefine these in your `_vars.scss` file (found
|
||||
* in the inuit.css-web-template) to override them.
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*------------------------------------*\
|
||||
$DEBUG
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Debug mode will visually highlight any potential markup/accessibility quirks
|
||||
* in the browser. Set to `true` or `false`.
|
||||
*/
|
||||
$debug-mode: false!default;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*------------------------------------*\
|
||||
$BORDER-BOX
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Do you want all elements to adopt `box-sizing:border-box;` as per
|
||||
* paulirish.com/2012/box-sizing-border-box-ftw ?
|
||||
*/
|
||||
$global-border-box: true!default;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*------------------------------------*\
|
||||
$BASE
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Base stuff
|
||||
*/
|
||||
$base-font-size: 16px!default;
|
||||
$base-line-height: 24px!default;
|
||||
|
||||
/**
|
||||
* Base font-family.
|
||||
*/
|
||||
$base-font-family: sans-serif!default;
|
||||
|
||||
/**
|
||||
* Default colour for objects’ borders etc.
|
||||
*/
|
||||
$base-ui-color: #ccc!default;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*------------------------------------*\
|
||||
$RESPONSIVE
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Responsiveness?
|
||||
*/
|
||||
$responsive: true!default;
|
||||
|
||||
/**
|
||||
* Responsiveness for widescreen/high resolution desktop monitors and beyond?
|
||||
* Note: `$responsive` variable above must be set to true before enabling this.
|
||||
*/
|
||||
$responsive-extra: false!default;
|
||||
|
||||
/**
|
||||
* Responsive push and pull produce a LOT of code, only turn them on if you
|
||||
* definitely need them.
|
||||
*/
|
||||
$push: false!default;
|
||||
/**
|
||||
* Note: `$push` variable above must be set to true before enabling these.
|
||||
*/
|
||||
$palm-push: false!default;
|
||||
$lap-push: false!default;
|
||||
$lap-and-up-push: false!default;
|
||||
$portable-push: false!default;
|
||||
$desk-push: false!default;
|
||||
|
||||
$pull: false!default;
|
||||
/**
|
||||
* Note: `$pull` variable above must be set to true before enabling these.
|
||||
*/
|
||||
$palm-pull: false!default;
|
||||
$lap-pull: false!default;
|
||||
$lap-and-up-pull: false!default;
|
||||
$portable-pull: false!default;
|
||||
$desk-pull: false!default;
|
||||
|
||||
/**
|
||||
* Tell inuit.css when breakpoints start.
|
||||
*/
|
||||
$lap-start: 481px!default;
|
||||
$desk-start: 1024px!default;
|
||||
$desk-wide-start: 1200px!default;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*------------------------------------*\
|
||||
$FONT-SIZES
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Font-sizes (in pixels). Refer to relevant sections for their implementations.
|
||||
*/
|
||||
$giga-size: 96px!default;
|
||||
$mega-size: 72px!default;
|
||||
$kilo-size: 48px!default;
|
||||
|
||||
$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
|
||||
|
||||
$milli-size: 12px!default;
|
||||
$micro-size: 10px!default;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*------------------------------------*\
|
||||
$QUOTES
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* English quote marks?
|
||||
*/
|
||||
$english-quotes: true!default;
|
||||
|
||||
/**
|
||||
* If you want English quotes then please do not edit these; they’re only here
|
||||
* because Sass needs them.
|
||||
*/
|
||||
$open-quote: null;
|
||||
$close-quote: null;
|
||||
|
||||
/**
|
||||
* If you need non-English quotes, please alter the following values accordingly:
|
||||
*/
|
||||
@if $english-quotes != true{
|
||||
$open-quote: \00AB;
|
||||
$close-quote: \00BB;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*------------------------------------*\
|
||||
$BRAND
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Brand stuff
|
||||
*/
|
||||
$brand-color: #4a8ec2!default;
|
||||
$brand-face: "Helvetica Neue", sans-serif!default;
|
||||
|
||||
/**
|
||||
* How big would you like round corners to be by default?
|
||||
*/
|
||||
$brand-round: 4px!default;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*------------------------------------*\
|
||||
$OBJECTS AND ABSTRACTIONS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Which objects and abstractions would you like to use?
|
||||
*/
|
||||
$use-grids: false!default;
|
||||
$use-flexbox: false!default;
|
||||
$use-columns: false!default;
|
||||
$use-nav: false!default;
|
||||
$use-options: false!default;
|
||||
$use-pagination: false!default;
|
||||
$use-breadcrumb: false!default;
|
||||
$use-media: false!default;
|
||||
$use-marginalia: false!default;
|
||||
$use-island: false!default;
|
||||
$use-block-list: false!default;
|
||||
$use-matrix: false!default;
|
||||
$use-split: false!default;
|
||||
$use-this-or-this: false!default;
|
||||
$use-link-complex: false!default;
|
||||
$use-flyout: false!default;
|
||||
$use-arrows: false!default;
|
||||
$use-sprite: false!default;
|
||||
$use-icon-text: false!default;
|
||||
$use-beautons: false!default;
|
||||
$use-lozenges: false!default;
|
||||
$use-rules: false!default;
|
||||
$use-stats: false!default;
|
||||
$use-greybox: false!default;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*------------------------------------*\
|
||||
$FRAMEWORK
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* inuit.css will work these next ones out for use within the framework.
|
||||
*
|
||||
* Assign our `$base-line-height` to a new spacing var for more transparency.
|
||||
*/
|
||||
$base-spacing-unit: $base-line-height!default;
|
||||
$half-spacing-unit: $base-spacing-unit / 2!default;
|
||||
$line-height-ratio: $base-line-height / $base-font-size;
|
||||
214
sass/inuitcss/_inuit.scss
Normal file
214
sass/inuitcss/_inuit.scss
Normal file
|
|
@ -0,0 +1,214 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
INUIT.CSS
|
||||
\*------------------------------------*/
|
||||
/*!*
|
||||
*
|
||||
* inuitcss.com -- @inuitcss -- @csswizardry
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* inuit.css acts as a base stylesheet which you should extend with your own
|
||||
* theme stylesheet.
|
||||
*
|
||||
* inuit.css aims to do the heavy lifting; sorting objects and abstractions,
|
||||
* design patterns and fiddly bits of CSS, whilst leaving as much design as
|
||||
* possible to you. inuit.css is the scaffolding to your decorator.
|
||||
*
|
||||
* This stylesheet is heavily documented and contains lots of comments, please
|
||||
* take care to read and refer to them as you build. For further support please
|
||||
* tweet at @inuitcss.
|
||||
*
|
||||
* Owing to the amount of comments please only ever use minified CSS in
|
||||
* production. This file is purely a dev document.
|
||||
*
|
||||
* The table of contents below maps to section titles of the same name, to jump
|
||||
* to any section simply run a find for $[SECTION-TITLE].
|
||||
*
|
||||
* Most objects and abstractions come with a chunk of markup that you should be
|
||||
* able to paste into any view to quickly see how the CSS works in conjunction
|
||||
* with the correct HTML.
|
||||
*
|
||||
* inuit.css is written to this standard: github.com/csswizardry/CSS-Guidelines
|
||||
*
|
||||
* LICENSE
|
||||
*
|
||||
* Copyright 2013 Harry Roberts
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*
|
||||
* Thank you for choosing inuit.css. May your web fonts render perfectly.
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*------------------------------------*\
|
||||
$CONTENTS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* CONTENTS............You’re reading it!
|
||||
* WARNING.............Here be dragons!
|
||||
* IMPORTS.............Begin importing the sections below
|
||||
*
|
||||
* MIXINS..............Super-simple Sass stuff
|
||||
* NORMALIZE...........normalize.css
|
||||
* RESET...............Set some defaults
|
||||
* CLEARFIX............
|
||||
* SHARED..............Shared declarations
|
||||
*
|
||||
* MAIN................High-level elements like `html`, `body`, etc.
|
||||
* HEADINGS............Double-stranded heading hierarchy
|
||||
* PARAGRAPHS..........
|
||||
* SMALLPRINT..........Smaller text elements like `small`
|
||||
* QUOTES..............
|
||||
* CODE................
|
||||
* LISTS...............
|
||||
* IMAGES..............
|
||||
* TABLES..............
|
||||
* FORMS...............
|
||||
*
|
||||
* GRIDS...............Fluid, proportional and nestable grids
|
||||
* FLEXBOX.............Crudely emulate flexbox
|
||||
* COLUMNS.............CSS3 columns
|
||||
* NAV.................A simple abstraction to put a list in horizontal nav mode
|
||||
* OPTIONS.............Grouped nav items
|
||||
* PAGINATION..........Very stripped back, basic paginator
|
||||
* BREADCRUMB..........Simple breadcrumb trail object
|
||||
* MEDIA...............Media object
|
||||
* MARGINALIA..........Simple marginalia content
|
||||
* ISLAND..............Boxed off content
|
||||
* BLOCK-LIST..........Blocky lists of content
|
||||
* MATRIX..............Gridded lists
|
||||
* SPLIT...............A simple split-in-two object
|
||||
* THIS-OR-THIS........Options object
|
||||
* LINK-COMPLEX........
|
||||
* FLYOUT..............Flyout-on-hover object
|
||||
* ARROWS..............CSS arrows
|
||||
* SPRITE..............Generic spriting element
|
||||
* ICON-TEXT...........Icon and text couplings
|
||||
* BEAUTONS............Use the beautons micro library
|
||||
* LOZENGES............Basic lozenge styles
|
||||
* RULES...............Horizontal rules
|
||||
* STATS...............Simple stats object
|
||||
* GREYBOX.............Wireframing styles
|
||||
*
|
||||
* WIDTHS..............Width classes for use alongside the grid system etc.
|
||||
* PUSH................Push classes for manipulating grids
|
||||
* PULL................Pull classes for manipulating grids
|
||||
* BRAND...............Helper class to apply brand treatment to elements
|
||||
* HELPER..............A series of helper classes to use arbitrarily
|
||||
* DEBUG...............Enable to add visual flags for debugging purposes
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*------------------------------------*\
|
||||
$WARNING
|
||||
\*------------------------------------*/
|
||||
/*
|
||||
* inuit.css, being an OO framework, works in keeping with the open/closed
|
||||
* principle. The variables you set previously are now being used throughout
|
||||
* inuit.css to style everything we need for a base. Any custom styles SHOULD
|
||||
* NOT be added or modified in inuit.css directly, but added via your theme
|
||||
* stylesheet as per the open/closed principle:
|
||||
*
|
||||
* csswizardry.com/2012/06/the-open-closed-principle-applied-to-css
|
||||
*
|
||||
* Try not to edit any CSS beyond this point; if you find you need to do so
|
||||
* it is a failing of the framework so please tweet at @inuitcss.
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*------------------------------------*\
|
||||
$IMPORTS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Generic utility styles etc.
|
||||
*/
|
||||
@import "defaults";
|
||||
@import "generic/mixins";
|
||||
@import "generic/normalize";
|
||||
@import "generic/reset";
|
||||
@import "generic/clearfix";
|
||||
@import "generic/shared";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Base styles; unclassed HTML elements etc.
|
||||
*/
|
||||
@import "base/main";
|
||||
@import "base/headings";
|
||||
@import "base/paragraphs";
|
||||
@import "base/smallprint";
|
||||
@import "base/quotes";
|
||||
@import "base/code";
|
||||
@import "base/images";
|
||||
@import "base/lists";
|
||||
@import "base/tables";
|
||||
@import "base/forms";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Objects and abstractions
|
||||
*/
|
||||
@import "objects/grids";
|
||||
@import "objects/flexbox";
|
||||
@import "objects/columns";
|
||||
@import "objects/nav";
|
||||
@import "objects/options";
|
||||
@import "objects/pagination";
|
||||
@import "objects/breadcrumb";
|
||||
@import "objects/media";
|
||||
@import "objects/marginalia";
|
||||
@import "objects/island";
|
||||
@import "objects/block-list";
|
||||
@import "objects/matrix";
|
||||
@import "objects/split";
|
||||
@import "objects/this-or-this";
|
||||
@import "objects/link-complex";
|
||||
@import "objects/flyout";
|
||||
@import "objects/arrows";
|
||||
@import "objects/sprite";
|
||||
@import "objects/icon-text";
|
||||
@import "objects/beautons";
|
||||
@import "objects/lozenges";
|
||||
@import "objects/rules";
|
||||
@import "objects/stats";
|
||||
@import "objects/greybox";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Style trumps; helper and brand classes
|
||||
*/
|
||||
@import "generic/widths";
|
||||
@import "generic/push";
|
||||
@import "generic/pull";
|
||||
@import "generic/brand";
|
||||
@import "generic/helper";
|
||||
@import "generic/debug";
|
||||
64
sass/inuitcss/base/_code.scss
Normal file
64
sass/inuitcss/base/_code.scss
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$CODE
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Use an explicit font stack to ensure browsers render correct `line-height`.
|
||||
*/
|
||||
pre{
|
||||
overflow:auto;
|
||||
}
|
||||
pre mark{
|
||||
background:none;
|
||||
border-bottom:1px solid;
|
||||
color:inherit;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Add comments to your code examples, e.g.:
|
||||
*
|
||||
<code></div><span class=code-comment><!-- /wrapper --></span></code>
|
||||
*
|
||||
*/
|
||||
.code-comment{
|
||||
/**
|
||||
* Override this setting in your theme stylesheet
|
||||
*/
|
||||
opacity:0.75;
|
||||
filter:alpha(opacity=75);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* You can add line numbers to your code examples but be warned, it requires
|
||||
* some pretty funky looking markup, e.g.:
|
||||
*
|
||||
<ol class=line-numbers>
|
||||
<li><code>.nav{</code></li>
|
||||
<li><code> list-style:none;</code></li>
|
||||
<li><code> margin-left:0;</code></li>
|
||||
<li><code>}</code></li>
|
||||
<li><code> .nav > li,</code></li>
|
||||
<li><code> .nav > li > a{</code></li>
|
||||
<li><code> display:inline-block;</code></li>
|
||||
<li><code> *display:inline-block;</code></li>
|
||||
<li><code> zoom:1;</code></li>
|
||||
<li><code> }</code></li>
|
||||
</ol>
|
||||
*
|
||||
* 1. Make the list look like code.
|
||||
* 2. Give the list flush numbers with a leading zero.
|
||||
* 3. Make sure lines of code don’t wrap.
|
||||
* 4. Give the code form by forcing the `code` to honour white-space.
|
||||
*/
|
||||
.line-numbers{
|
||||
font-family:monospace, serif; /* [1] */
|
||||
list-style:decimal-leading-zero inside; /* [2] */
|
||||
white-space:nowrap; /* [3] */
|
||||
overflow:auto; /* [3] */
|
||||
margin-left:0;
|
||||
}
|
||||
.line-numbers code{
|
||||
white-space:pre; /* [4] */
|
||||
}
|
||||
175
sass/inuitcss/base/_forms.scss
Normal file
175
sass/inuitcss/base/_forms.scss
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$FORMS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/MhHHU
|
||||
*
|
||||
*/
|
||||
fieldset{
|
||||
padding:$base-spacing-unit;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Text inputs
|
||||
*
|
||||
* Instead of a `[type]` selector for each kind of form input, we just use a
|
||||
* class to target any/every one, e.g.:
|
||||
<input type=text class=text-input>
|
||||
<input type=email class=text-input>
|
||||
<input type=password class=text-input>
|
||||
*
|
||||
*/
|
||||
.text-input,
|
||||
textarea{
|
||||
/**
|
||||
* Style these via your theme stylesheet.
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Group sets of form fields in a list, e.g.:
|
||||
*
|
||||
<ul class=form-fields>
|
||||
<li>
|
||||
<label />
|
||||
<input />
|
||||
</li>
|
||||
<li>
|
||||
<label />
|
||||
<select />
|
||||
</li>
|
||||
<li>
|
||||
<label />
|
||||
<input />
|
||||
</li>
|
||||
</ul>
|
||||
*
|
||||
*/
|
||||
.form-fields{
|
||||
list-style:none;
|
||||
margin:0;
|
||||
}
|
||||
.form-fields > li{
|
||||
@extend %sass-margin-bottom;
|
||||
}
|
||||
.form-fields > li:last-child{
|
||||
margin-bottom:0;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Labels
|
||||
*
|
||||
* Define a `.label` class as well as a `label` element. This means we can apply
|
||||
* label-like styling to meta-labels for groups of options where a `label`
|
||||
* element is not suitable, e.g.:
|
||||
*
|
||||
<li>
|
||||
<span class=label>Select an option below:</span>
|
||||
<ul class="multi-list four-cols">
|
||||
<li>
|
||||
<input /> <label />
|
||||
</li>
|
||||
<li>
|
||||
<input /> <label />
|
||||
</li>
|
||||
<li>
|
||||
<input /> <label />
|
||||
</li>
|
||||
<li>
|
||||
<input /> <label />
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
*
|
||||
*/
|
||||
label,
|
||||
.label{
|
||||
display:block;
|
||||
}
|
||||
/**
|
||||
* Extra help text in `label`s, e.g.:
|
||||
*
|
||||
<label>Card number <small class=additional>No spaces</small></label>
|
||||
*
|
||||
*/
|
||||
.additional{
|
||||
display:block;
|
||||
font-weight:normal;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Groups of checkboxes and radios, e.g.:
|
||||
*
|
||||
<li>
|
||||
<ul class=check-list>
|
||||
<li>
|
||||
<input /> <label />
|
||||
</li>
|
||||
<li>
|
||||
<input /> <label />
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
*
|
||||
*/
|
||||
.check-list{
|
||||
list-style:none;
|
||||
margin:0;
|
||||
}
|
||||
/*
|
||||
* Labels in check-lists
|
||||
*/
|
||||
.check-label,
|
||||
.check-list label,
|
||||
.check-list .label{
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Spoken forms are for forms that read like spoken word, e.g.:
|
||||
*
|
||||
<li class=spoken-form>
|
||||
Hello, my <label for=spoken-name>name</label> is
|
||||
<input type=text class=text-input id=spoken-name>. My home
|
||||
<label for=country>country</label> is
|
||||
<select id=country>
|
||||
<option>UK</option>
|
||||
<option>US</option>
|
||||
<option>Other</option>
|
||||
</select>
|
||||
</li>
|
||||
*
|
||||
*/
|
||||
.spoken-form label{
|
||||
display:inline-block;
|
||||
font:inherit;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Extra help text displayed after a field when that field is in focus, e.g.:
|
||||
*
|
||||
<label for=email>Email:</label>
|
||||
<input type=email class=text-input id=email>
|
||||
<small class=extra-help>.edu emails only</small>
|
||||
*
|
||||
* We leave the help text in the document flow and merely set it to
|
||||
* `visibility:hidden;`. This means that it won’t interfere with anything once
|
||||
* it reappears.
|
||||
*
|
||||
*/
|
||||
/*small*/.extra-help{
|
||||
display:inline-block;
|
||||
visibility:hidden;
|
||||
}
|
||||
.text-input:active + .extra-help,
|
||||
.text-input:focus + .extra-help{
|
||||
visibility:visible;
|
||||
}
|
||||
61
sass/inuitcss/base/_headings.scss
Normal file
61
sass/inuitcss/base/_headings.scss
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$HEADINGS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* As per: csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css
|
||||
*
|
||||
* When we define a heading we also define a corresponding class to go with it.
|
||||
* This allows us to apply, say, `class=alpha` to a `h3`; a double-stranded
|
||||
* heading hierarchy.
|
||||
*/
|
||||
h1,.alpha{
|
||||
@include font-size($h1-size);
|
||||
}
|
||||
h2,.beta{
|
||||
@include font-size($h2-size);
|
||||
}
|
||||
h3,.gamma{
|
||||
@include font-size($h3-size);
|
||||
}
|
||||
h4,.delta{
|
||||
@include font-size($h4-size);
|
||||
}
|
||||
h5,.epsilon{
|
||||
@include font-size($h5-size);
|
||||
}
|
||||
h6,.zeta{
|
||||
@include font-size($h6-size);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Heading groups and generic any-heading class.
|
||||
* To target any heading of any level simply apply a class of `.hN`, e.g.:
|
||||
*
|
||||
<hgroup>
|
||||
<h1 class=hN>inuit.css</h1>
|
||||
<h2 class=hN>Best. Framework. Ever!</h2>
|
||||
</hgroup>
|
||||
*
|
||||
*/
|
||||
.hN{
|
||||
}
|
||||
hgroup .hN{
|
||||
margin-bottom:0;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* A series of classes for setting massive type; for use in heroes, mastheads,
|
||||
* promos, etc.
|
||||
*/
|
||||
.giga{
|
||||
@include font-size($giga-size);
|
||||
}
|
||||
.mega{
|
||||
@include font-size($mega-size);
|
||||
}
|
||||
.kilo{
|
||||
@include font-size($kilo-size);
|
||||
}
|
||||
74
sass/inuitcss/base/_images.scss
Normal file
74
sass/inuitcss/base/_images.scss
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$IMAGES
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Demo: jsfiddle.net/inuitcss/yMtur
|
||||
*/
|
||||
/**
|
||||
* Fluid images.
|
||||
*/
|
||||
img{
|
||||
max-width:100%;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Non-fluid images if you specify `width` and/or `height` attributes.
|
||||
*/
|
||||
img[width],
|
||||
img[height]{
|
||||
max-width:none;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Rounded images.
|
||||
*/
|
||||
.img--round { border-radius:$brand-round; }
|
||||
|
||||
|
||||
/**
|
||||
* Image placement variations.
|
||||
*/
|
||||
.img--right{
|
||||
float:right;
|
||||
margin-bottom:$base-spacing-unit;
|
||||
margin-left:$base-spacing-unit;
|
||||
}
|
||||
.img--left{
|
||||
float:left;
|
||||
margin-right:$base-spacing-unit;
|
||||
margin-bottom:$base-spacing-unit;
|
||||
}
|
||||
.img--center{
|
||||
display:block;
|
||||
margin-right:auto;
|
||||
margin-bottom:$base-spacing-unit;
|
||||
margin-left:auto;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Keep your images on your baseline.
|
||||
*
|
||||
* Please note, these will not work too nicely with fluid images and will
|
||||
* distort when resized below a certain width. Use with caution.
|
||||
*/
|
||||
.img--short{
|
||||
height:5 * $base-spacing-unit;
|
||||
}
|
||||
.img--medium{
|
||||
height:10 * $base-spacing-unit;
|
||||
}
|
||||
.img--tall{
|
||||
height:15 * $base-spacing-unit;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Images in `figure` elements.
|
||||
*/
|
||||
figure > img{
|
||||
display:block;
|
||||
}
|
||||
20
sass/inuitcss/base/_lists.scss
Normal file
20
sass/inuitcss/base/_lists.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$LISTS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Remove vertical spacing from nested lists.
|
||||
*/
|
||||
li{
|
||||
> ul,
|
||||
> ol{
|
||||
margin-bottom:0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Have a numbered `ul` without the semantics implied by using an `ol`.
|
||||
*/
|
||||
/*ul*/.numbered-list{
|
||||
list-style-type:decimal;
|
||||
}
|
||||
9
sass/inuitcss/base/_main.scss
Normal file
9
sass/inuitcss/base/_main.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$MAIN
|
||||
\*------------------------------------*/
|
||||
html{
|
||||
font:#{($base-font-size/16px)*1em}/#{$line-height-ratio} $base-font-family;
|
||||
overflow-y:scroll;
|
||||
min-height:100%;
|
||||
}
|
||||
12
sass/inuitcss/base/_paragraphs.scss
Normal file
12
sass/inuitcss/base/_paragraphs.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$PARAGRAPHS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* The `.lede` class is used to make the introductory text (usually a paragraph)
|
||||
* of a document slightly larger.
|
||||
*/
|
||||
.lede,
|
||||
.lead{
|
||||
@include font-size($base-font-size * 1.125);
|
||||
}
|
||||
97
sass/inuitcss/base/_quotes.scss
Normal file
97
sass/inuitcss/base/_quotes.scss
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$QUOTES
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* If English quotes are set in `_vars.scss`, define them here.
|
||||
*/
|
||||
@if $english-quotes == true{
|
||||
$open-quote: \201C;
|
||||
$close-quote: \201D;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Big up @boblet: html5doctor.com/blockquote-q-cite
|
||||
*/
|
||||
|
||||
/**
|
||||
* Inline quotes.
|
||||
*/
|
||||
q{
|
||||
quotes:"\2018" "\2019" "#{$open-quote}" "#{$close-quote}";
|
||||
|
||||
&:before{
|
||||
content:"\2018";
|
||||
content:open-quote;
|
||||
}
|
||||
&:after{
|
||||
content:"\2019";
|
||||
content:close-quote;
|
||||
}
|
||||
|
||||
q:before{
|
||||
content:"\201C";
|
||||
content:open-quote;
|
||||
}
|
||||
q:after{
|
||||
content:"\201D";
|
||||
content:close-quote;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote{
|
||||
quotes:"#{$open-quote}" "#{$close-quote}";
|
||||
|
||||
p:before{
|
||||
content:"#{$open-quote}";
|
||||
content:open-quote;
|
||||
}
|
||||
p:after{
|
||||
content:"";
|
||||
content:no-close-quote;
|
||||
}
|
||||
p:last-of-type:after{
|
||||
content:"#{$close-quote}";
|
||||
content:close-quote;
|
||||
}
|
||||
|
||||
q:before{
|
||||
content:"\2018";
|
||||
content:open-quote;
|
||||
}
|
||||
q:after{
|
||||
content:"\2019";
|
||||
content:close-quote;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
<blockquote>
|
||||
<p>Insanity: doing the same thing over and over again and expecting
|
||||
different results.</p>
|
||||
<b class=source>Albert Einstein</b>
|
||||
</blockquote>
|
||||
*
|
||||
*/
|
||||
blockquote{
|
||||
/**
|
||||
* .4em is roughly equal to the width of the opening “ that we wish to hang.
|
||||
*/
|
||||
text-indent:-0.41em;
|
||||
|
||||
p:last-of-type{
|
||||
margin-bottom:0;
|
||||
}
|
||||
}
|
||||
|
||||
.source{
|
||||
display:block;
|
||||
text-indent:0;
|
||||
|
||||
&:before{
|
||||
content:"\2014";
|
||||
}
|
||||
}
|
||||
14
sass/inuitcss/base/_smallprint.scss
Normal file
14
sass/inuitcss/base/_smallprint.scss
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$SMALLPRINT
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* A series of classes for setting tiny type; for use in smallprint etc.
|
||||
*/
|
||||
.smallprint,
|
||||
.milli{
|
||||
@include font-size($milli-size);
|
||||
}
|
||||
.micro{
|
||||
@include font-size($micro-size);
|
||||
}
|
||||
164
sass/inuitcss/base/_tables.scss
Normal file
164
sass/inuitcss/base/_tables.scss
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$TABLES
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* We have a lot at our disposal for making very complex table constructs, e.g.:
|
||||
*
|
||||
<table class="table--bordered table--striped table--data">
|
||||
<colgroup>
|
||||
<col class=t10>
|
||||
<col class=t10>
|
||||
<col class=t10>
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan=3>Foo</th>
|
||||
<th>Bar</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Lorem</th>
|
||||
<th>Ipsum</th>
|
||||
<th class=numerical>Dolor</th>
|
||||
<th>Sit</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th rowspan=3>Sit</th>
|
||||
<td>Dolor</td>
|
||||
<td class=numerical>03.788</td>
|
||||
<td>Lorem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dolor</td>
|
||||
<td class=numerical>32.210</td>
|
||||
<td>Lorem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dolor</td>
|
||||
<td class=numerical>47.797</td>
|
||||
<td>Lorem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th rowspan=2>Sit</th>
|
||||
<td>Dolor</td>
|
||||
<td class=numerical>09.640</td>
|
||||
<td>Lorem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dolor</td>
|
||||
<td class=numerical>12.117</td>
|
||||
<td>Lorem</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
*
|
||||
*/
|
||||
table{
|
||||
width:100%;
|
||||
}
|
||||
th,
|
||||
td{
|
||||
padding:$base-spacing-unit / 4;
|
||||
@media screen and (min-width:480px){
|
||||
padding:$half-spacing-unit;
|
||||
}
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Cell alignments
|
||||
*/
|
||||
[colspan]{
|
||||
text-align:center;
|
||||
}
|
||||
[colspan="1"]{
|
||||
text-align:left;
|
||||
}
|
||||
[rowspan]{
|
||||
vertical-align:middle;
|
||||
}
|
||||
[rowspan="1"]{
|
||||
vertical-align:top;
|
||||
}
|
||||
.numerical{
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
/**
|
||||
* In the HTML above we see several `col` elements with classes whose numbers
|
||||
* represent a percentage width for that column. We leave one column free of a
|
||||
* class so that column can soak up the effects of any accidental breakage in
|
||||
* the table.
|
||||
*/
|
||||
.t5 { width: 5% }
|
||||
.t10 { width:10% }
|
||||
.t12 { width:12.5% } /* 1/8 */
|
||||
.t15 { width:15% }
|
||||
.t20 { width:20% }
|
||||
.t25 { width:25% } /* 1/4 */
|
||||
.t30 { width:30% }
|
||||
.t33 { width:33.333% } /* 1/3 */
|
||||
.t35 { width:35% }
|
||||
.t37 { width:37.5% } /* 3/8 */
|
||||
.t40 { width:40% }
|
||||
.t45 { width:45% }
|
||||
.t50 { width:50% } /* 1/2 */
|
||||
.t55 { width:55% }
|
||||
.t60 { width:60% }
|
||||
.t62 { width:62.5% } /* 5/8 */
|
||||
.t65 { width:65% }
|
||||
.t66 { width:66.666% } /* 2/3 */
|
||||
.t70 { width:70% }
|
||||
.t75 { width:75% } /* 3/4*/
|
||||
.t80 { width:80% }
|
||||
.t85 { width:85% }
|
||||
.t87 { width:87.5% } /* 7/8 */
|
||||
.t90 { width:90% }
|
||||
.t95 { width:95% }
|
||||
|
||||
|
||||
/**
|
||||
* Bordered tables
|
||||
*/
|
||||
.table--bordered{
|
||||
|
||||
th,
|
||||
td{
|
||||
border:1px solid $base-ui-color;
|
||||
|
||||
&:empty{
|
||||
border:none;
|
||||
}
|
||||
}
|
||||
|
||||
thead tr:last-child th{
|
||||
border-bottom-width:2px;
|
||||
}
|
||||
|
||||
tbody tr th:last-of-type{
|
||||
border-right-width:2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Striped tables
|
||||
*/
|
||||
.table--striped{
|
||||
|
||||
tbody tr:nth-of-type(odd){
|
||||
background-color:#ffc; /* Override this color in your theme stylesheet */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Data table
|
||||
*/
|
||||
.table--data{
|
||||
font:12px/1.5 sans-serif;
|
||||
}
|
||||
5
sass/inuitcss/component.json
Normal file
5
sass/inuitcss/component.json
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"name": "inuit.css",
|
||||
"version": "5.0.1",
|
||||
"dependencies": {}
|
||||
}
|
||||
19
sass/inuitcss/generic/_brand.scss
Normal file
19
sass/inuitcss/generic/_brand.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$BRAND
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* `.brand` is a quick and simple way to apply your brand face and/or color to
|
||||
* any element using a handy helper class.
|
||||
*/
|
||||
.brand{
|
||||
font-family:$brand-face +!important;
|
||||
color:$brand-color +!important;
|
||||
}
|
||||
.brand-face{
|
||||
font-family:$brand-face +!important;
|
||||
}
|
||||
.brand-color,
|
||||
.brand-colour{
|
||||
color:$brand-color +!important;
|
||||
}
|
||||
16
sass/inuitcss/generic/_clearfix.scss
Normal file
16
sass/inuitcss/generic/_clearfix.scss
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$CLEARFIX
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
|
||||
* Extend the clearfix class with Sass to avoid the `.cf` class appearing over
|
||||
* and over in your markup.
|
||||
*/
|
||||
.cf{
|
||||
&:after{
|
||||
content:"";
|
||||
display:table;
|
||||
clear:both;
|
||||
}
|
||||
}
|
||||
169
sass/inuitcss/generic/_debug.scss
Normal file
169
sass/inuitcss/generic/_debug.scss
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
@charset "UTF-8";
|
||||
@if $debug-mode == true{
|
||||
/*------------------------------------*\
|
||||
$DEBUG
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Enable this stylesheet to visually detect any improperly nested or
|
||||
* potentially invalid markup, or any potentially inaccessible code.
|
||||
*
|
||||
* Red == definite error
|
||||
* Yellow == double-check
|
||||
* None == should be fine
|
||||
*
|
||||
* Please note that this method of checking markup quality should not be relied
|
||||
* upon entirely. Validate your markup!
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Are there any empty elements in your page?
|
||||
*/
|
||||
:empty{
|
||||
outline:5px solid yellow;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Images require `alt` attributes, empty `alt`s are fine but should be
|
||||
* double-checked, no `alt` is bad and is flagged red.
|
||||
*/
|
||||
img{
|
||||
outline:5px solid red;
|
||||
}
|
||||
img[alt]{
|
||||
outline:none;
|
||||
}
|
||||
img[alt=""]{
|
||||
outline:5px solid yellow;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Links sometimes, though not always, benefit from `title` attributes. Links
|
||||
* without are never invalid but it’s a good idea to check.
|
||||
*/
|
||||
a{
|
||||
outline:5px solid yellow;
|
||||
}
|
||||
a[title]{
|
||||
outline:none;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Double-check any links whose `href` is something questionable.
|
||||
*/
|
||||
a[href="#"],
|
||||
a[href*="javascript"]{
|
||||
outline:5px solid yellow;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* The `target` attribute ain’t too nice...
|
||||
*/
|
||||
a[target]{
|
||||
outline:5px solid yellow;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Ensure any lists only contain `li`s as children.
|
||||
*/
|
||||
ul,
|
||||
ol{
|
||||
> *:not(li){
|
||||
outline:5px solid red;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* It’s always nice to give `th`s `scope` attributes.
|
||||
*/
|
||||
th{
|
||||
outline:5px solid yellow;
|
||||
}
|
||||
th[scope]{
|
||||
outline:none;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* `tr`s as children of `table`s ain’t great, did you need a `thead`/`tbody`?
|
||||
*/
|
||||
table > tr{
|
||||
outline:5px solid yellow;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* `tfoot` needs to come *before* `tbody`.
|
||||
*/
|
||||
tbody + tfoot{
|
||||
outline:5px solid yellow;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Forms require `action` attributes
|
||||
*/
|
||||
form{
|
||||
outline:5px solid red;
|
||||
}
|
||||
form[action]{
|
||||
outline:none;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Various form-field types have required attributes. `input`s need `type`
|
||||
* attributes, `textarea`s need `rows` and `cols` attributes and submit buttons
|
||||
* need a `value` attribute.
|
||||
*/
|
||||
textarea,
|
||||
input{
|
||||
outline:5px solid red;
|
||||
}
|
||||
input[type]{
|
||||
outline:none;
|
||||
}
|
||||
textarea[rows][cols]{
|
||||
outline:none;
|
||||
}
|
||||
input[type=submit]{
|
||||
outline:5px solid red;
|
||||
}
|
||||
input[type=submit][value]{
|
||||
outline:none;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Avoid inline styles where possible.
|
||||
*/
|
||||
[style]{
|
||||
outline:5px solid yellow;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* You should avoid using IDs for CSS, is this doing any styling?
|
||||
*/
|
||||
[id]{
|
||||
outline:5px solid yellow;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Are you using the grid system correctly?
|
||||
*/
|
||||
.gw > :not(.g),
|
||||
.grid-wrapper > :not(.grid),
|
||||
.gw--rev > :not(.g),
|
||||
.grid-wrapper--rev > :not(.grid){
|
||||
outline:5px solid red;
|
||||
}
|
||||
|
||||
}/* endif */
|
||||
185
sass/inuitcss/generic/_helper.scss
Normal file
185
sass/inuitcss/generic/_helper.scss
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$HELPER
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* A series of helper classes to use arbitrarily. Only use a helper class if an
|
||||
* element/component doesn’t already have a class to which you could apply this
|
||||
* styling, e.g. if you need to float `.main-nav` left then add `float:left;` to
|
||||
* that ruleset as opposed to adding the `.float--left` class to the markup.
|
||||
*
|
||||
* A lot of these classes carry `!important` as you will always want them to win
|
||||
* out over other selectors.
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Add/remove floats
|
||||
*/
|
||||
.float--right { float:right!important; }
|
||||
.float--left { float:left !important; }
|
||||
.float--none { float:none !important; }
|
||||
|
||||
|
||||
/**
|
||||
* Text alignment
|
||||
*/
|
||||
.text--left { text-align:left !important; }
|
||||
.text--center { text-align:center!important; }
|
||||
.text--right { text-align:right !important; }
|
||||
|
||||
|
||||
/**
|
||||
* Font weights
|
||||
*/
|
||||
.weight--light { font-weight:300!important; }
|
||||
.weight--normal { font-weight:400!important; }
|
||||
.weight--semibold { font-weight:600!important; }
|
||||
|
||||
|
||||
/**
|
||||
* Add/remove margins
|
||||
*/
|
||||
.push { margin: $base-spacing-unit!important; }
|
||||
.push--top { margin-top: $base-spacing-unit!important; }
|
||||
.push--right { margin-right: $base-spacing-unit!important; }
|
||||
.push--bottom { margin-bottom:$base-spacing-unit!important; }
|
||||
.push--left { margin-left: $base-spacing-unit!important; }
|
||||
.push--ends { margin-top: $base-spacing-unit!important; margin-bottom:$base-spacing-unit!important; }
|
||||
.push--sides { margin-right: $base-spacing-unit!important; margin-left: $base-spacing-unit!important; }
|
||||
|
||||
.push-half { margin: $half-spacing-unit!important; }
|
||||
.push-half--top { margin-top: $half-spacing-unit!important; }
|
||||
.push-half--right { margin-right: $half-spacing-unit!important; }
|
||||
.push-half--bottom { margin-bottom:$half-spacing-unit!important; }
|
||||
.push-half--left { margin-left: $half-spacing-unit!important; }
|
||||
.push-half--ends { margin-top: $half-spacing-unit!important; margin-bottom:$half-spacing-unit!important; }
|
||||
.push-half--sides { margin-right: $half-spacing-unit!important; margin-left: $half-spacing-unit!important; }
|
||||
|
||||
.flush { margin: 0!important; }
|
||||
.flush--top { margin-top: 0!important; }
|
||||
.flush--right { margin-right: 0!important; }
|
||||
.flush--bottom { margin-bottom:0!important; }
|
||||
.flush--left { margin-left: 0!important; }
|
||||
.flush--ends { margin-top: 0!important; margin-bottom:0!important; }
|
||||
.flush--sides { margin-right: 0!important; margin-left: 0!important; }
|
||||
|
||||
|
||||
/**
|
||||
* Add/remove paddings
|
||||
*/
|
||||
.soft { padding: $base-spacing-unit!important; }
|
||||
.soft--top { padding-top: $base-spacing-unit!important; }
|
||||
.soft--right { padding-right: $base-spacing-unit!important; }
|
||||
.soft--bottom { padding-bottom:$base-spacing-unit!important; }
|
||||
.soft--left { padding-left: $base-spacing-unit!important; }
|
||||
.soft--ends { padding-top: $base-spacing-unit!important; padding-bottom:$base-spacing-unit!important; }
|
||||
.soft--sides { padding-right: $base-spacing-unit!important; padding-left: $base-spacing-unit!important; }
|
||||
|
||||
.soft-half { padding: $half-spacing-unit!important; }
|
||||
.soft-half--top { padding-top: $half-spacing-unit!important; }
|
||||
.soft-half--right { padding-right: $half-spacing-unit!important; }
|
||||
.soft-half--bottom { padding-bottom:$half-spacing-unit!important; }
|
||||
.soft-half--left { padding-left: $half-spacing-unit!important; }
|
||||
.soft-half--ends { padding-top: $half-spacing-unit!important; padding-bottom:$half-spacing-unit!important; }
|
||||
.soft-half--sides { padding-right: $half-spacing-unit!important; padding-left: $half-spacing-unit!important; }
|
||||
|
||||
.hard { padding: 0!important; }
|
||||
.hard--top { padding-top: 0!important; }
|
||||
.hard--right { padding-right: 0!important; }
|
||||
.hard--bottom { padding-bottom:0!important; }
|
||||
.hard--left { padding-left: 0!important; }
|
||||
.hard--ends { padding-top: 0!important; padding-bottom:0!important; }
|
||||
.hard--sides { padding-right: 0!important; padding-left: 0!important; }
|
||||
|
||||
|
||||
/**
|
||||
* Pull items full width of `.island` parents.
|
||||
*/
|
||||
.full-bleed{
|
||||
margin-right:-$base-spacing-unit!important;
|
||||
margin-left: -$base-spacing-unit!important;
|
||||
|
||||
.islet &{
|
||||
margin-right:-($half-spacing-unit)!important;
|
||||
margin-left: -($half-spacing-unit)!important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Add a help cursor to any element that gives the user extra information on
|
||||
* `:hover`.
|
||||
*/
|
||||
.informative{
|
||||
cursor:help!important;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Mute an object by reducing its opacity.
|
||||
*/
|
||||
.muted{
|
||||
opacity:0.5!important;
|
||||
filter:alpha(opacity = 50)!important;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Align items to the right where they imply progression/movement forward, e.g.:
|
||||
*
|
||||
<p class=proceed><a href=#>Read more...</a></p>
|
||||
*
|
||||
*/
|
||||
.proceed{
|
||||
text-align:right!important;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Add a right-angled quote to links that imply movement, e.g.:
|
||||
*
|
||||
<a href=# class=go>Read more</a>
|
||||
*
|
||||
*/
|
||||
.go:after{
|
||||
content:"\00A0" "\00BB"!important;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Apply capital case to an element (usually a `strong`).
|
||||
*/
|
||||
.caps{
|
||||
text-transform:uppercase!important;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Hide content off-screen without resorting to `display:none;`, also provide
|
||||
* breakpoint specific hidden elements.
|
||||
*/
|
||||
@mixin accessibility{
|
||||
border:0!important;
|
||||
clip:rect(0 0 0 0)!important;
|
||||
height:1px!important;
|
||||
margin:-1px!important;
|
||||
overflow:hidden!important;
|
||||
padding:0!important;
|
||||
position: absolute!important;
|
||||
width:1px!important;
|
||||
}
|
||||
.accessibility,
|
||||
.visuallyhidden{
|
||||
@include accessibility;
|
||||
}
|
||||
@if $responsive{
|
||||
@each $state in palm, lap, lap-and-up, portable, desk, desk-wide{
|
||||
@include media-query(#{$state}){
|
||||
.accessibility--#{$state},
|
||||
.visuallyhidden--#{$state}{
|
||||
@include accessibility;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
329
sass/inuitcss/generic/_mixins.scss
Normal file
329
sass/inuitcss/generic/_mixins.scss
Normal file
|
|
@ -0,0 +1,329 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$MIXINS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Create a fully formed type style (sizing and vertical rhythm) by passing in a
|
||||
* single value, e.g.:
|
||||
*
|
||||
`@include font-size(10px);`
|
||||
*
|
||||
* Thanks to @redclov3r for the `line-height` Sass:
|
||||
* twitter.com/redclov3r/status/250301539321798657
|
||||
*/
|
||||
@mixin font-size($font-size, $line-height:true){
|
||||
font-size:$font-size;
|
||||
font-size:($font-size / $base-font-size)*1rem;
|
||||
@if $line-height == true{
|
||||
line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Style any number of headings in one fell swoop, e.g.:
|
||||
*
|
||||
.foo{
|
||||
@include headings(1, 3){
|
||||
color:#BADA55;
|
||||
}
|
||||
}
|
||||
*
|
||||
* With thanks to @lar_zzz, @paranoida, @rowanmanning and ultimately
|
||||
* @thierrylemoulec for refining and improving my initial mixin.
|
||||
*/
|
||||
@mixin headings($from: 1, $to: 6){
|
||||
%base-heading {
|
||||
@content
|
||||
}
|
||||
|
||||
@if $from >= 1 and $to <= 6{
|
||||
@for $i from $from through $to{
|
||||
h#{$i}{
|
||||
@extend %base-heading;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Create vendor-prefixed CSS in one go, e.g.
|
||||
*
|
||||
`@include vendor(border-radius, 4px);`
|
||||
*
|
||||
*/
|
||||
@mixin vendor($property, $value...){
|
||||
-webkit-#{$property}:$value;
|
||||
-moz-#{$property}:$value;
|
||||
-ms-#{$property}:$value;
|
||||
-o-#{$property}:$value;
|
||||
#{$property}:$value;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Create CSS keyframe animations for all vendors in one go, e.g.:
|
||||
*
|
||||
.foo{
|
||||
@include vendor(animation, shrink 3s);
|
||||
}
|
||||
|
||||
@include keyframe(shrink){
|
||||
from{
|
||||
font-size:5em;
|
||||
}
|
||||
}
|
||||
*
|
||||
* Courtesy of @integralist: twitter.com/integralist/status/260484115315437569
|
||||
*/
|
||||
@mixin keyframe ($animation-name){
|
||||
@-webkit-keyframes $animation-name{
|
||||
@content;
|
||||
}
|
||||
|
||||
@-moz-keyframes $animation-name{
|
||||
@content;
|
||||
}
|
||||
|
||||
@-ms-keyframes $animation-name{
|
||||
@content;
|
||||
}
|
||||
|
||||
@-o-keyframes $animation-name{
|
||||
@content;
|
||||
}
|
||||
|
||||
@keyframes $animation-name{
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Force overly long spans of text to truncate, e.g.:
|
||||
*
|
||||
`@include truncate(100%);`
|
||||
*
|
||||
* Where `$truncation-boundary` is a united measurement.
|
||||
*/
|
||||
@mixin truncate($truncation-boundary){
|
||||
max-width:$truncation-boundary;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* CSS arrows!!! But... before you read on, you might want to grab a coffee...
|
||||
*
|
||||
* This mixin creates a CSS arrow on a given element. We can have the arrow
|
||||
* appear in one of 12 locations, thus:
|
||||
*
|
||||
* 01 02 03
|
||||
* +------------------+
|
||||
* 12 | | 04
|
||||
* | |
|
||||
* 11 | | 05
|
||||
* | |
|
||||
* 10 | | 06
|
||||
* +------------------+
|
||||
* 09 08 07
|
||||
*
|
||||
* You pass this position in along with a desired arrow color and optional
|
||||
* border color, for example:
|
||||
*
|
||||
* `@include arrow(top, left, red)`
|
||||
*
|
||||
* for just a single, red arrow, or:
|
||||
*
|
||||
* `@include arrow(bottom, center, red, black)`
|
||||
*
|
||||
* which will create a red triangle with a black border which sits at the bottom
|
||||
* center of the element. Call the mixin thus:
|
||||
*
|
||||
.foo{
|
||||
background-color:#BADA55;
|
||||
border:1px solid #ACE;
|
||||
@include arrow(top, left, #BADA55, #ACE);
|
||||
}
|
||||
*
|
||||
*/
|
||||
@mixin arrow($arrow-edge, $arrow-location, $arrow-color, $border-color: $arrow-color){
|
||||
|
||||
@if $arrow-edge == top{
|
||||
|
||||
@extend %arrow--top;
|
||||
|
||||
&:before{
|
||||
border-bottom-color:$border-color!important;
|
||||
}
|
||||
|
||||
&:after{
|
||||
border-bottom-color:$arrow-color!important;
|
||||
}
|
||||
|
||||
@if $arrow-location == left{
|
||||
@extend %arrow--left;
|
||||
}
|
||||
|
||||
@if $arrow-location == center{
|
||||
@extend %arrow--center;
|
||||
}
|
||||
|
||||
@if $arrow-location == right{
|
||||
@extend %arrow--right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@if $arrow-edge == right{
|
||||
|
||||
@extend %arrow--far;
|
||||
|
||||
&:before{
|
||||
border-left-color:$border-color!important;
|
||||
}
|
||||
|
||||
&:after{
|
||||
border-left-color:$arrow-color!important;
|
||||
}
|
||||
|
||||
@if $arrow-location == top{
|
||||
@extend %arrow--upper;
|
||||
}
|
||||
|
||||
@if $arrow-location == center{
|
||||
@extend %arrow--middle;
|
||||
}
|
||||
|
||||
@if $arrow-location == bottom{
|
||||
@extend %arrow--lower;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@if $arrow-edge == bottom{
|
||||
|
||||
@extend %arrow--bottom;
|
||||
|
||||
&:before{
|
||||
border-top-color:$border-color!important;
|
||||
}
|
||||
|
||||
&:after{
|
||||
border-top-color:$arrow-color!important;
|
||||
}
|
||||
|
||||
@if $arrow-location == left{
|
||||
@extend %arrow--left;
|
||||
}
|
||||
|
||||
@if $arrow-location == center{
|
||||
@extend %arrow--center;
|
||||
}
|
||||
|
||||
@if $arrow-location == right{
|
||||
@extend %arrow--right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@if $arrow-edge == left{
|
||||
|
||||
@extend %arrow--near;
|
||||
|
||||
&:before{
|
||||
border-right-color:$border-color!important;
|
||||
}
|
||||
|
||||
&:after{
|
||||
border-right-color:$arrow-color!important;
|
||||
}
|
||||
|
||||
@if $arrow-location == top{
|
||||
@extend %arrow--upper;
|
||||
}
|
||||
|
||||
@if $arrow-location == center{
|
||||
@extend %arrow--middle;
|
||||
}
|
||||
|
||||
@if $arrow-location == bottom{
|
||||
@extend %arrow--lower;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Media query mixin.
|
||||
*
|
||||
* It’s not great practice to define solid breakpoints up-front, preferring to
|
||||
* modify your design when it needs it, rather than assuming you’ll want a
|
||||
* change at ‘mobile’. However, as inuit.css is required to take a hands off
|
||||
* approach to design decisions, this is the closest we can get to baked-in
|
||||
* responsiveness. It’s flexible enough to allow you to set your own breakpoints
|
||||
* but solid enough to be frameworkified.
|
||||
*
|
||||
* We define some broad breakpoints in our vars file that are picked up here
|
||||
* for use in a simple media query mixin. Our options are:
|
||||
*
|
||||
* palm
|
||||
* lap
|
||||
* lap-and-up
|
||||
* portable
|
||||
* desk
|
||||
* desk-wide
|
||||
*
|
||||
* Not using a media query will, naturally, serve styles to all devices.
|
||||
*
|
||||
* `@include media-query(palm){ [styles here] }`
|
||||
*
|
||||
* We work out your end points for you:
|
||||
*/
|
||||
$palm-end: $lap-start - 1px;
|
||||
$lap-end: $desk-start - 1px;
|
||||
|
||||
@mixin media-query($media-query){
|
||||
|
||||
@if $media-query == palm{
|
||||
|
||||
@media only screen and (max-width:$palm-end) { @content; }
|
||||
|
||||
}
|
||||
|
||||
@if $media-query == lap{
|
||||
|
||||
@media only screen and (min-width:$lap-start) and (max-width:$lap-end) { @content; }
|
||||
|
||||
}
|
||||
|
||||
@if $media-query == lap-and-up{
|
||||
|
||||
@media only screen and (min-width:$lap-start) { @content; }
|
||||
|
||||
}
|
||||
|
||||
@if $media-query == portable{
|
||||
|
||||
@media only screen and (max-width:$lap-end) { @content; }
|
||||
|
||||
}
|
||||
|
||||
@if $media-query == desk{
|
||||
|
||||
@media only screen and (min-width:$desk-start) { @content; }
|
||||
|
||||
}
|
||||
|
||||
@if $media-query == desk-wide{
|
||||
|
||||
@media only screen and (min-width: $desk-wide-start) { @content; }
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
397
sass/inuitcss/generic/_normalize.scss
Normal file
397
sass/inuitcss/generic/_normalize.scss
Normal file
|
|
@ -0,0 +1,397 @@
|
|||
@charset "UTF-8";
|
||||
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
|
||||
|
||||
/* ==========================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Correct `block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Correct `inline-block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Set default font family to sans-serif.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Address `outline` inconsistency between Chrome and other browsers.
|
||||
*/
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/*
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Address variable `h1` font-size and margin within `section` and `article`
|
||||
* contexts in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Address styling not present in IE 8/9, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/*
|
||||
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*
|
||||
* Address styling not present in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/*
|
||||
* Address differences between Firefox and other browsers.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/*
|
||||
* Correct font family set oddly in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
* Improve readability of pre-formatted text in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/*
|
||||
* Set consistent quote types.
|
||||
*/
|
||||
|
||||
q {
|
||||
quotes: "\201C" "\201D" "\2018" "\2019";
|
||||
}
|
||||
|
||||
/*
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/*
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Remove border when inside `a` element in IE 8/9.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Correct overflow displayed oddly in IE 9.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Address margin not present in IE 8/9 and Safari 5.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Correct `color` not being inherited in IE 8/9.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Correct font family not being inherited in all browsers.
|
||||
* 2. Correct font size not being inherited in all browsers.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/*
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
|
||||
* Correct `select` style inheritance in Firefox 4+ and Opera.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9.
|
||||
* 2. Remove excess padding in IE 8/9.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove inner padding and search cancel button in Safari 5 and Chrome
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Remove default vertical scrollbar in IE 8/9.
|
||||
* 2. Improve readability and alignment in all browsers.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
148
sass/inuitcss/generic/_pull.scss
Normal file
148
sass/inuitcss/generic/_pull.scss
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$PULL
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Pull classes, to move grid items over to the right by certain amounts.
|
||||
*/
|
||||
|
||||
@mixin pull-setup($namespace: "") {
|
||||
|
||||
/**
|
||||
* Whole
|
||||
*/
|
||||
.pull--#{$namespace}one-whole { right:100%; }
|
||||
|
||||
|
||||
/**
|
||||
* Halves
|
||||
*/
|
||||
.pull--#{$namespace}one-half { right:50%; }
|
||||
|
||||
|
||||
/**
|
||||
* Thirds
|
||||
*/
|
||||
.pull--#{$namespace}one-third { right:33.333%; }
|
||||
.pull--#{$namespace}two-thirds { right:66.666%; }
|
||||
|
||||
|
||||
/**
|
||||
* Quarters
|
||||
*/
|
||||
.pull--#{$namespace}one-quarter { right:25%; }
|
||||
.pull--#{$namespace}two-quarters { @extend .pull--#{$namespace}one-half; }
|
||||
.pull--#{$namespace}three-quarters { right:75%; }
|
||||
|
||||
|
||||
/**
|
||||
* Fifths
|
||||
*/
|
||||
.pull--#{$namespace}one-fifth { right:20%; }
|
||||
.pull--#{$namespace}two-fifths { right:40%; }
|
||||
.pull--#{$namespace}three-fifths { right:60%; }
|
||||
.pull--#{$namespace}four-fifths { right:80%; }
|
||||
|
||||
|
||||
/**
|
||||
* Sixths
|
||||
*/
|
||||
.pull--#{$namespace}one-sixth { right:16.666%; }
|
||||
.pull--#{$namespace}two-sixths { @extend .pull--#{$namespace}one-third; }
|
||||
.pull--#{$namespace}three-sixths { @extend .pull--#{$namespace}one-half; }
|
||||
.pull--#{$namespace}four-sixths { @extend .pull--#{$namespace}two-thirds; }
|
||||
.pull--#{$namespace}five-sixths { right:83.333%; }
|
||||
|
||||
|
||||
/**
|
||||
* Eighths
|
||||
*/
|
||||
.pull--#{$namespace}one-eighth { right:12.5%; }
|
||||
.pull--#{$namespace}two-eighths { @extend .pull--#{$namespace}one-quarter; }
|
||||
.pull--#{$namespace}three-eighths { right:37.5%; }
|
||||
.pull--#{$namespace}four-eighths { @extend .pull--#{$namespace}one-half; }
|
||||
.pull--#{$namespace}five-eighths { right:62.5%; }
|
||||
.pull--#{$namespace}six-eighths { @extend .pull--#{$namespace}three-quarters; }
|
||||
.pull--#{$namespace}seven-eighths { right:87.5%; }
|
||||
|
||||
|
||||
/**
|
||||
* Tenths
|
||||
*/
|
||||
.pull--#{$namespace}one-tenth { right:10%; }
|
||||
.pull--#{$namespace}two-tenths { @extend .pull--#{$namespace}one-fifth; }
|
||||
.pull--#{$namespace}three-tenths { right:30%; }
|
||||
.pull--#{$namespace}four-tenths { @extend .pull--#{$namespace}two-fifths; }
|
||||
.pull--#{$namespace}five-tenths { @extend .pull--#{$namespace}one-half; }
|
||||
.pull--#{$namespace}six-tenths { @extend .pull--#{$namespace}three-fifths; }
|
||||
.pull--#{$namespace}seven-tenths { right:70%; }
|
||||
.pull--#{$namespace}eight-tenths { @extend .pull--#{$namespace}four-fifths; }
|
||||
.pull--#{$namespace}nine-tenths { right:90%; }
|
||||
|
||||
|
||||
/**
|
||||
* Twelfths
|
||||
*/
|
||||
.pull--#{$namespace}one-twelfth { right:8.333%; }
|
||||
.pull--#{$namespace}two-twelfths { @extend .pull--#{$namespace}one-sixth; }
|
||||
.pull--#{$namespace}three-twelfths { @extend .pull--#{$namespace}one-quarter; }
|
||||
.pull--#{$namespace}four-twelfths { @extend .pull--#{$namespace}one-third; }
|
||||
.pull--#{$namespace}five-twelfths { right:41.666% }
|
||||
.pull--#{$namespace}six-twelfths { @extend .pull--#{$namespace}one-half; }
|
||||
.pull--#{$namespace}seven-twelfths { right:58.333%; }
|
||||
.pull--#{$namespace}eight-twelfths { @extend .pull--#{$namespace}two-thirds; }
|
||||
.pull--#{$namespace}nine-twelfths { @extend .pull--#{$namespace}three-quarters; }
|
||||
.pull--#{$namespace}ten-twelfths { @extend .pull--#{$namespace}five-sixths; }
|
||||
.pull--#{$namespace}eleven-twelfths { right:91.666%; }
|
||||
}
|
||||
|
||||
@if $pull == true{
|
||||
|
||||
/**
|
||||
* Not a particularly great selector, but the DRYest way to do things.
|
||||
*/
|
||||
[class*="pull--"]{ position:relative; }
|
||||
|
||||
@include pull-setup();
|
||||
|
||||
@if $palm-pull == true{
|
||||
|
||||
@include media-query(palm){
|
||||
@include pull-setup("palm-");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@if $lap-pull == true{
|
||||
|
||||
@include media-query(lap){
|
||||
@include pull-setup("lap-");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@if $lap-and-up-pull == true{
|
||||
|
||||
@include media-query(lap-and-up){
|
||||
@include pull-setup("lap-and-up-");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@if $portable-pull == true{
|
||||
|
||||
@include media-query(portable){
|
||||
@include pull-setup("portable-");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@if $desk-pull == true{
|
||||
|
||||
@include media-query(desk){
|
||||
@include pull-setup("desk-");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}//endif
|
||||
148
sass/inuitcss/generic/_push.scss
Normal file
148
sass/inuitcss/generic/_push.scss
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$PUSH
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Push classes, to move grid items over to the right by certain amounts.
|
||||
*/
|
||||
|
||||
@mixin push-setup($namespace: "") {
|
||||
|
||||
/**
|
||||
* Whole
|
||||
*/
|
||||
.push--#{$namespace}one-whole { left:100%; }
|
||||
|
||||
|
||||
/**
|
||||
* Halves
|
||||
*/
|
||||
.push--#{$namespace}one-half { left:50%; }
|
||||
|
||||
|
||||
/**
|
||||
* Thirds
|
||||
*/
|
||||
.push--#{$namespace}one-third { left:33.333%; }
|
||||
.push--#{$namespace}two-thirds { left:66.666%; }
|
||||
|
||||
|
||||
/**
|
||||
* Quarters
|
||||
*/
|
||||
.push--#{$namespace}one-quarter { left:25%; }
|
||||
.push--#{$namespace}two-quarters { @extend .push--#{$namespace}one-half; }
|
||||
.push--#{$namespace}three-quarters { left:75%; }
|
||||
|
||||
|
||||
/**
|
||||
* Fifths
|
||||
*/
|
||||
.push--#{$namespace}one-fifth { left:20%; }
|
||||
.push--#{$namespace}two-fifths { left:40%; }
|
||||
.push--#{$namespace}three-fifths { left:60%; }
|
||||
.push--#{$namespace}four-fifths { left:80%; }
|
||||
|
||||
|
||||
/**
|
||||
* Sixths
|
||||
*/
|
||||
.push--#{$namespace}one-sixth { left:16.666%; }
|
||||
.push--#{$namespace}two-sixths { @extend .push--#{$namespace}one-third; }
|
||||
.push--#{$namespace}three-sixths { @extend .push--#{$namespace}one-half; }
|
||||
.push--#{$namespace}four-sixths { @extend .push--#{$namespace}two-thirds; }
|
||||
.push--#{$namespace}five-sixths { left:83.333%; }
|
||||
|
||||
|
||||
/**
|
||||
* Eighths
|
||||
*/
|
||||
.push--#{$namespace}one-eighth { left:12.5%; }
|
||||
.push--#{$namespace}two-eighths { @extend .push--#{$namespace}one-quarter; }
|
||||
.push--#{$namespace}three-eighths { left:37.5%; }
|
||||
.push--#{$namespace}four-eighths { @extend .push--#{$namespace}one-half; }
|
||||
.push--#{$namespace}five-eighths { left:62.5%; }
|
||||
.push--#{$namespace}six-eighths { @extend .push--#{$namespace}three-quarters; }
|
||||
.push--#{$namespace}seven-eighths { left:87.5%; }
|
||||
|
||||
|
||||
/**
|
||||
* Tenths
|
||||
*/
|
||||
.push--#{$namespace}one-tenth { left:10%; }
|
||||
.push--#{$namespace}two-tenths { @extend .push--#{$namespace}one-fifth; }
|
||||
.push--#{$namespace}three-tenths { left:30%; }
|
||||
.push--#{$namespace}four-tenths { @extend .push--#{$namespace}two-fifths; }
|
||||
.push--#{$namespace}five-tenths { @extend .push--#{$namespace}one-half; }
|
||||
.push--#{$namespace}six-tenths { @extend .push--#{$namespace}three-fifths; }
|
||||
.push--#{$namespace}seven-tenths { left:70%; }
|
||||
.push--#{$namespace}eight-tenths { @extend .push--#{$namespace}four-fifths; }
|
||||
.push--#{$namespace}nine-tenths { left:90%; }
|
||||
|
||||
|
||||
/**
|
||||
* Twelfths
|
||||
*/
|
||||
.push--#{$namespace}one-twelfth { left:8.333%; }
|
||||
.push--#{$namespace}two-twelfths { @extend .push--#{$namespace}one-sixth; }
|
||||
.push--#{$namespace}three-twelfths { @extend .push--#{$namespace}one-quarter; }
|
||||
.push--#{$namespace}four-twelfths { @extend .push--#{$namespace}one-third; }
|
||||
.push--#{$namespace}five-twelfths { left:41.666% }
|
||||
.push--#{$namespace}six-twelfths { @extend .push--#{$namespace}one-half; }
|
||||
.push--#{$namespace}seven-twelfths { left:58.333%; }
|
||||
.push--#{$namespace}eight-twelfths { @extend .push--#{$namespace}two-thirds; }
|
||||
.push--#{$namespace}nine-twelfths { @extend .push--#{$namespace}three-quarters; }
|
||||
.push--#{$namespace}ten-twelfths { @extend .push--#{$namespace}five-sixths; }
|
||||
.push--#{$namespace}eleven-twelfths { left:91.666%; }
|
||||
}
|
||||
|
||||
@if $push == true{
|
||||
|
||||
@include push-setup();
|
||||
|
||||
/**
|
||||
* Not a particularly great selector, but the DRYest way to do things.
|
||||
*/
|
||||
[class*="push--"]{ position:relative; }
|
||||
|
||||
@if $palm-push == true{
|
||||
|
||||
@include media-query(palm){
|
||||
@include push-setup("palm-");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@if $lap-push == true{
|
||||
|
||||
@include media-query(lap){
|
||||
@include push-setup("lap-");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@if $lap-and-up-push == true{
|
||||
|
||||
@include media-query(lap-and-up){
|
||||
@include push-setup("lap-and-up-");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@if $portable-push == true{
|
||||
|
||||
@include media-query(portable){
|
||||
@include push-setup("portable-");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@if $desk-push == true{
|
||||
|
||||
@include media-query(desk){
|
||||
@include push-setup("desk-");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}//endif
|
||||
81
sass/inuitcss/generic/_reset.scss
Normal file
81
sass/inuitcss/generic/_reset.scss
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$RESET
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* A more considered reset; more of a restart...
|
||||
* As per: csswizardry.com/2011/10/reset-restarted
|
||||
*/
|
||||
|
||||
@if $global-border-box == true{
|
||||
/**
|
||||
* Let’s make the box model all nice, shall we...?
|
||||
*/
|
||||
*{
|
||||
&,
|
||||
&:before,
|
||||
&:after{
|
||||
@include vendor(box-sizing, border-box);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The usual...
|
||||
*/
|
||||
h1,h2,h3,h4,h5,h6,
|
||||
p,blockquote,pre,
|
||||
dl,dd,ol,ul,
|
||||
form,fieldset,legend,
|
||||
table,th,td,caption,
|
||||
hr{
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Give a help cursor to elements that give extra info on `:hover`.
|
||||
*/
|
||||
abbr[title],dfn[title]{
|
||||
cursor:help;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove underlines from potentially troublesome elements.
|
||||
*/
|
||||
u,ins{
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply faux underline via `border-bottom`.
|
||||
*/
|
||||
ins{
|
||||
border-bottom:1px solid;
|
||||
}
|
||||
|
||||
/**
|
||||
* So that `alt` text is visually offset if images don’t load.
|
||||
*/
|
||||
img{
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Give form elements some cursor interactions...
|
||||
*/
|
||||
label,
|
||||
input,
|
||||
textarea,
|
||||
button,
|
||||
select,
|
||||
option{
|
||||
cursor:pointer;
|
||||
}
|
||||
.text-input:active,
|
||||
.text-input:focus,
|
||||
textarea:active,
|
||||
textarea:focus{
|
||||
cursor:text;
|
||||
outline:none;
|
||||
}
|
||||
62
sass/inuitcss/generic/_shared.scss
Normal file
62
sass/inuitcss/generic/_shared.scss
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$SHARED
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Where `margin-bottom` is concerned, this value will be the same as the
|
||||
* base line-height. This allows us to keep a consistent vertical rhythm.
|
||||
* As per: csswizardry.com/2012/06/single-direction-margin-declarations
|
||||
*/
|
||||
/**
|
||||
* Base elements
|
||||
*/
|
||||
h1,h2,h3,h4,h5,h6,hgroup,
|
||||
ul,ol,dl,
|
||||
blockquote,p,address,
|
||||
table,
|
||||
fieldset,figure,
|
||||
pre,
|
||||
/**
|
||||
* Objects and abstractions
|
||||
*/
|
||||
%sass-margin-bottom,
|
||||
.media,
|
||||
.island,
|
||||
.islet{
|
||||
margin-bottom:$base-spacing-unit;
|
||||
margin-bottom:($base-spacing-unit / $base-font-size)*1rem;
|
||||
|
||||
.islet &{
|
||||
margin-bottom:$base-spacing-unit / 2;
|
||||
margin-bottom:(($base-spacing-unit / $base-font-size) / 2)*1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Doubled up `margin-bottom` helper class.
|
||||
*/
|
||||
.landmark{
|
||||
margin-bottom:2 * $base-spacing-unit;
|
||||
margin-bottom:(2 * $base-spacing-unit / $base-font-size)*1rem;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* `hr` elements only take up a few pixels, so we need to give them special
|
||||
* treatment regarding vertical rhythm.
|
||||
*/
|
||||
hr{
|
||||
margin-bottom:$base-spacing-unit - 2px;
|
||||
margin-bottom:(($base-spacing-unit - 2px) / $base-font-size)*1rem;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Where `margin-left` is concerned we want to try and indent certain elements
|
||||
* by a consistent amount. Define that amount once, here.
|
||||
*/
|
||||
ul,ol,dd{
|
||||
margin-left:2 * $base-spacing-unit;
|
||||
margin-left:(2 * $base-spacing-unit / $base-font-size)*1rem;
|
||||
}
|
||||
159
sass/inuitcss/generic/_widths.scss
Normal file
159
sass/inuitcss/generic/_widths.scss
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$WIDTHS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Sizes in human readable format. These are used in conjunction with other
|
||||
* objects and abstractions found in inuit.css, most commonly the grid system
|
||||
* and faux flexbox.
|
||||
*
|
||||
* We have a mixin to generate our widths and their breakpoint-specific
|
||||
* variations.
|
||||
*/
|
||||
|
||||
@mixin grid-setup($namespace: "") {
|
||||
/**
|
||||
* Whole
|
||||
*/
|
||||
.#{$namespace}one-whole { width:100%; }
|
||||
|
||||
|
||||
/**
|
||||
* Halves
|
||||
*/
|
||||
.#{$namespace}one-half { width:50%; }
|
||||
|
||||
|
||||
/**
|
||||
* Thirds
|
||||
*/
|
||||
.#{$namespace}one-third { width:33.333%; }
|
||||
.#{$namespace}two-thirds { width:66.666%; }
|
||||
|
||||
|
||||
/**
|
||||
* Quarters
|
||||
*/
|
||||
.#{$namespace}one-quarter { width:25%; }
|
||||
.#{$namespace}two-quarters { @extend .#{$namespace}one-half; }
|
||||
.#{$namespace}three-quarters { width:75%; }
|
||||
|
||||
|
||||
/**
|
||||
* Fifths
|
||||
*/
|
||||
.#{$namespace}one-fifth { width:20%; }
|
||||
.#{$namespace}two-fifths { width:40%; }
|
||||
.#{$namespace}three-fifths { width:60%; }
|
||||
.#{$namespace}four-fifths { width:80%; }
|
||||
|
||||
|
||||
/**
|
||||
* Sixths
|
||||
*/
|
||||
.#{$namespace}one-sixth { width:16.666%; }
|
||||
.#{$namespace}two-sixths { @extend .#{$namespace}one-third; }
|
||||
.#{$namespace}three-sixths { @extend .#{$namespace}one-half; }
|
||||
.#{$namespace}four-sixths { @extend .#{$namespace}two-thirds; }
|
||||
.#{$namespace}five-sixths { width:83.333%; }
|
||||
|
||||
|
||||
/**
|
||||
* Eighths
|
||||
*/
|
||||
.#{$namespace}one-eighth { width:12.5%; }
|
||||
.#{$namespace}two-eighths { @extend .#{$namespace}one-quarter; }
|
||||
.#{$namespace}three-eighths { width:37.5%; }
|
||||
.#{$namespace}four-eighths { @extend .#{$namespace}one-half; }
|
||||
.#{$namespace}five-eighths { width:62.5%; }
|
||||
.#{$namespace}six-eighths { @extend .#{$namespace}three-quarters; }
|
||||
.#{$namespace}seven-eighths { width:87.5%; }
|
||||
|
||||
|
||||
/**
|
||||
* Tenths
|
||||
*/
|
||||
.#{$namespace}one-tenth { width:10%; }
|
||||
.#{$namespace}two-tenths { @extend .#{$namespace}one-fifth; }
|
||||
.#{$namespace}three-tenths { width:30%; }
|
||||
.#{$namespace}four-tenths { @extend .#{$namespace}two-fifths; }
|
||||
.#{$namespace}five-tenths { @extend .#{$namespace}one-half; }
|
||||
.#{$namespace}six-tenths { @extend .#{$namespace}three-fifths; }
|
||||
.#{$namespace}seven-tenths { width:70%; }
|
||||
.#{$namespace}eight-tenths { @extend .#{$namespace}four-fifths; }
|
||||
.#{$namespace}nine-tenths { width:90%; }
|
||||
|
||||
|
||||
/**
|
||||
* Twelfths
|
||||
*/
|
||||
.#{$namespace}one-twelfth { width:8.333%; }
|
||||
.#{$namespace}two-twelfths { @extend .#{$namespace}one-sixth; }
|
||||
.#{$namespace}three-twelfths { @extend .#{$namespace}one-quarter; }
|
||||
.#{$namespace}four-twelfths { @extend .#{$namespace}one-third; }
|
||||
.#{$namespace}five-twelfths { width:41.666% }
|
||||
.#{$namespace}six-twelfths { @extend .#{$namespace}one-half; }
|
||||
.#{$namespace}seven-twelfths { width:58.333%; }
|
||||
.#{$namespace}eight-twelfths { @extend .#{$namespace}two-thirds; }
|
||||
.#{$namespace}nine-twelfths { @extend .#{$namespace}three-quarters; }
|
||||
.#{$namespace}ten-twelfths { @extend .#{$namespace}five-sixths; }
|
||||
.#{$namespace}eleven-twelfths { width:91.666%; }
|
||||
}
|
||||
|
||||
@include grid-setup();
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* If you have set `$responsive` to ‘true’ in `_vars.scss` then you now have
|
||||
* access to these classes. You can define at which breakpoint you’d like an
|
||||
* element to be a certain size, e.g.:
|
||||
*
|
||||
* `<div class="g one-quarter lap-one-half palm-one-whole"> ... </div>`
|
||||
*
|
||||
* This would create a `div` that, at ‘desktop’ sizes, takes up a quarter of the
|
||||
* horizontal space, a half of that space at ‘tablet’ sizes, and goes full width
|
||||
* at ‘mobile’ sizes.
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/WS4Ge
|
||||
*
|
||||
*/
|
||||
|
||||
@if $responsive == true{
|
||||
|
||||
@include media-query(palm){
|
||||
@include grid-setup("palm-");
|
||||
}
|
||||
|
||||
@include media-query(lap){
|
||||
@include grid-setup("lap-");
|
||||
}
|
||||
|
||||
@include media-query(lap-and-up){
|
||||
@include grid-setup("lap-and-up-");
|
||||
}
|
||||
|
||||
@include media-query(portable){
|
||||
@include grid-setup("portable-");
|
||||
}
|
||||
|
||||
@include media-query(desk){
|
||||
@include grid-setup("desk-");
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* If you have set the additional `$responsive-extra` variable to ‘true’ in
|
||||
* `_vars.scss` then you now have access to the following class available to
|
||||
* accomodate much larger screen resolutions.
|
||||
*/
|
||||
|
||||
@if $responsive-extra == true{
|
||||
|
||||
@include media-query(desk-wide){
|
||||
@include grid-setup("desk-wide-");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
} /* endif */
|
||||
148
sass/inuitcss/objects/_arrows.scss
Normal file
148
sass/inuitcss/objects/_arrows.scss
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
@charset "UTF-8";
|
||||
@if $use-arrows == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$ARROWS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* It is a common design treatment to give an element a triangular points-out
|
||||
* arrow, we typically build these with CSS. These following classes allow us to
|
||||
* generate these arbitrarily with a mixin, `@arrow()`.
|
||||
*/
|
||||
|
||||
$arrow-size: $half-spacing-unit!default;
|
||||
$arrow-border: 1!default;
|
||||
$border: $arrow-size;
|
||||
$arrow: $arrow-size - $arrow-border;
|
||||
|
||||
/**
|
||||
* Forms the basis for any/all CSS arrows.
|
||||
*/
|
||||
%arrow{
|
||||
position:relative;
|
||||
|
||||
&:before,
|
||||
&:after{
|
||||
content:"";
|
||||
position:absolute;
|
||||
border-collapse:separate;
|
||||
}
|
||||
&:before{
|
||||
border:$border solid transparent;
|
||||
}
|
||||
&:after{
|
||||
border:$arrow solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Define individual edges so we can combine what we need, when we need.
|
||||
*/
|
||||
%arrow--top{
|
||||
@extend %arrow;
|
||||
|
||||
&:before,
|
||||
&:after{
|
||||
bottom:100%;
|
||||
}
|
||||
}
|
||||
|
||||
%arrow--upper{
|
||||
@extend %arrow;
|
||||
|
||||
&:before{
|
||||
top:$arrow;
|
||||
}
|
||||
&:after{
|
||||
top:$border;
|
||||
}
|
||||
}
|
||||
|
||||
%arrow--middle{
|
||||
@extend %arrow;
|
||||
|
||||
&:before,
|
||||
&:after{
|
||||
top:50%;
|
||||
margin-top:-$border;
|
||||
}
|
||||
&:after{
|
||||
margin-top:-$arrow;
|
||||
}
|
||||
}
|
||||
|
||||
%arrow--lower{
|
||||
@extend %arrow;
|
||||
|
||||
&:before{
|
||||
bottom:$arrow;
|
||||
}
|
||||
&:after{
|
||||
bottom:$border;
|
||||
}
|
||||
}
|
||||
|
||||
%arrow--bottom{
|
||||
@extend %arrow;
|
||||
|
||||
&:before,
|
||||
&:after{
|
||||
top:100%;
|
||||
}
|
||||
}
|
||||
|
||||
%arrow--near{
|
||||
@extend %arrow;
|
||||
|
||||
&:before,
|
||||
&:after{
|
||||
right:100%;
|
||||
}
|
||||
}
|
||||
|
||||
%arrow--left{
|
||||
@extend %arrow;
|
||||
|
||||
&:before{
|
||||
left:$arrow;
|
||||
}
|
||||
&:after{
|
||||
left:$border;
|
||||
}
|
||||
}
|
||||
|
||||
%arrow--center{
|
||||
@extend %arrow;
|
||||
|
||||
&:before,
|
||||
&:after{
|
||||
left:50%;
|
||||
margin-left:-$border;
|
||||
}
|
||||
&:after{
|
||||
margin-left:-$arrow;
|
||||
}
|
||||
}
|
||||
|
||||
%arrow--right{
|
||||
@extend %arrow;
|
||||
|
||||
&:before{
|
||||
right:$arrow;
|
||||
}
|
||||
&:after{
|
||||
right:$border;
|
||||
}
|
||||
}
|
||||
|
||||
%arrow--far{
|
||||
@extend %arrow;
|
||||
|
||||
&:before,
|
||||
&:after{
|
||||
left:100%;
|
||||
}
|
||||
}
|
||||
|
||||
}//endif
|
||||
227
sass/inuitcss/objects/_beautons.scss
Normal file
227
sass/inuitcss/objects/_beautons.scss
Normal file
|
|
@ -0,0 +1,227 @@
|
|||
@charset "UTF-8";
|
||||
@if $use-beautons == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$BEAUTONS.CSS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* beautons is a beautifully simple button toolkit.
|
||||
*
|
||||
* LICENSE
|
||||
*
|
||||
* Copyright 2013 Harry Roberts
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*!*
|
||||
*
|
||||
* @csswizardry -- csswizardry.com/beautons
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*------------------------------------*\
|
||||
$BASE
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Base button styles.
|
||||
*
|
||||
* 1. Allow us to better style box model properties.
|
||||
* 2. Line different sized buttons up a little nicer.
|
||||
* 3. Stop buttons wrapping and looking broken.
|
||||
* 4. Make buttons inherit font styles.
|
||||
* 5. Force all elements using beautons to appear clickable.
|
||||
* 6. Normalise box model styles.
|
||||
* 7. If the button’s text is 1em, and the button is (3 * font-size) tall, then
|
||||
* there is 1em of space above and below that text. We therefore apply 1em
|
||||
* of space to the left and right, as padding, to keep consistent spacing.
|
||||
* 8. Basic cosmetics for default buttons. Change or override at will.
|
||||
* 9. Don’t allow buttons to have underlines; it kinda ruins the illusion.
|
||||
*/
|
||||
.btn{
|
||||
display:inline-block; /* [1] */
|
||||
vertical-align:middle; /* [2] */
|
||||
white-space:nowrap; /* [3] */
|
||||
font-family:inherit; /* [4] */
|
||||
font-size:100%; /* [4] */
|
||||
cursor:pointer; /* [5] */
|
||||
border:none; /* [6] */
|
||||
margin:0; /* [6] */
|
||||
padding-top: 0; /* [6] */
|
||||
padding-bottom:0; /* [6] */
|
||||
line-height:3; /* [7] */
|
||||
padding-right:1em; /* [7] */
|
||||
padding-left: 1em; /* [7] */
|
||||
border-radius:$brand-round; /* [8] */
|
||||
}
|
||||
|
||||
.btn{
|
||||
|
||||
&,
|
||||
&:hover{
|
||||
text-decoration:none; /* [9] */
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus{
|
||||
outline:none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*------------------------------------*\
|
||||
$SIZES
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Button size modifiers.
|
||||
*
|
||||
* These all follow the same sizing rules as above; text is 1em, space around it
|
||||
* remains uniform.
|
||||
*/
|
||||
.btn--small{
|
||||
padding-right:0.5em;
|
||||
padding-left: 0.5em;
|
||||
line-height:2;
|
||||
}
|
||||
|
||||
.btn--large{
|
||||
padding-right:1.5em;
|
||||
padding-left: 1.5em;
|
||||
line-height:4;
|
||||
}
|
||||
|
||||
.btn--huge{
|
||||
padding-right:2em;
|
||||
padding-left: 2em;
|
||||
line-height:5;
|
||||
}
|
||||
|
||||
/**
|
||||
* These buttons will fill the entirety of their container.
|
||||
*
|
||||
* 1. Remove padding so that widths and paddings don’t conflict.
|
||||
*/
|
||||
.btn--full{
|
||||
width:100%;
|
||||
padding-right:0; /* [1] */
|
||||
padding-left: 0; /* [1] */
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*------------------------------------*\
|
||||
$FONT-SIZES
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Button font-size modifiers.
|
||||
*/
|
||||
.btn--alpha{
|
||||
font-size:3rem;
|
||||
}
|
||||
|
||||
.btn--beta{
|
||||
font-size:2rem;
|
||||
}
|
||||
|
||||
.btn--gamma{
|
||||
font-size:1rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Make the button inherit sizing from its parent.
|
||||
*/
|
||||
.btn--natural{
|
||||
vertical-align:baseline;
|
||||
font-size:inherit;
|
||||
line-height:inherit;
|
||||
padding-right:0.5em;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*------------------------------------*\
|
||||
$FUNCTIONS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Button function modifiers.
|
||||
*/
|
||||
.btn--primary{}
|
||||
.btn--secondary{}
|
||||
.btn--tertiary{}
|
||||
|
||||
/**
|
||||
* Positive actions; e.g. sign in, purchase, submit, etc.
|
||||
*/
|
||||
.btn--positive{
|
||||
background-color:#4A993E;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
/**
|
||||
* Negative actions; e.g. close account, delete photo, remove friend, etc.
|
||||
*/
|
||||
.btn--negative{
|
||||
background-color:#b33630;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
/**
|
||||
* Inactive, disabled buttons.
|
||||
*
|
||||
* 1. Make the button look like normal text when hovered.
|
||||
*/
|
||||
.btn--inactive,
|
||||
.btn--inactive:hover,
|
||||
.btn--inactive:active,
|
||||
.btn--inactive:focus{
|
||||
background-color:#ddd;
|
||||
color:#777;
|
||||
cursor:text; /* [1] */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*------------------------------------*\
|
||||
$STYLES
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Button style modifiers.
|
||||
*
|
||||
* 1. Use an overly-large number to ensure completely rounded, pill-like ends.
|
||||
*/
|
||||
.btn--soft{
|
||||
border-radius:200px; /* [1] */
|
||||
}
|
||||
|
||||
.btn--hard{
|
||||
border-radius:0;
|
||||
}
|
||||
|
||||
}//endif
|
||||
45
sass/inuitcss/objects/_block-list.scss
Normal file
45
sass/inuitcss/objects/_block-list.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
@charset "UTF-8";
|
||||
@if $use-block-list == true or $use-matrix == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$BLOCK-LIST
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Create big blocky lists of content, e.g.:
|
||||
*
|
||||
<ul class=block-list>
|
||||
<li>Foo</li>
|
||||
<li>Bar</li>
|
||||
<li>Baz</li>
|
||||
<li><a href=# class=block-list__link>Foo Bar Baz</a></li>
|
||||
</ul>
|
||||
*
|
||||
* Extend this object in your theme stylesheet.
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/hR57q
|
||||
*
|
||||
*/
|
||||
.block-list{
|
||||
|
||||
&,
|
||||
> li{
|
||||
border:0 solid $base-ui-color;
|
||||
}
|
||||
}
|
||||
.block-list{
|
||||
list-style:none;
|
||||
margin-left:0;
|
||||
border-top-width:1px;
|
||||
|
||||
> li{
|
||||
border-bottom-width:1px;
|
||||
padding:$half-spacing-unit;
|
||||
}
|
||||
}
|
||||
.block-list__link{
|
||||
display:block;
|
||||
padding:$half-spacing-unit;
|
||||
margin:-$half-spacing-unit;
|
||||
}
|
||||
|
||||
}//endif
|
||||
64
sass/inuitcss/objects/_breadcrumb.scss
Normal file
64
sass/inuitcss/objects/_breadcrumb.scss
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
@charset "UTF-8";
|
||||
@if $use-breadcrumb == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$BREADCRUMB
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Simple breadcrumb styling to apply to (ordered) lists. Extends `.nav`, e.g.:
|
||||
*
|
||||
<ol class="nav breadcrumb">
|
||||
<li><a href=#>Home</a></li>
|
||||
<li><a href=#>About</a></li>
|
||||
<li><a href=#>The Board</a></li>
|
||||
<li class=current><a href=#>Directors</a></li>
|
||||
</ol>
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/rkAY9
|
||||
*
|
||||
*/
|
||||
.breadcrumb > li + li:before{
|
||||
content:"\00BB" "\00A0";
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* For denoting a path-like structure, GitHub style, e.g.:
|
||||
*
|
||||
<ol class="nav breadcrumb--path">
|
||||
<li class=breadcrumb__root><a href=#>inuit.css</a></li>
|
||||
<li><a href=#>inuit.css</a></li>
|
||||
<li><a href=#>partials</a></li>
|
||||
<li class=current><a href=#>objects</a></li>
|
||||
</ol>
|
||||
*
|
||||
*/
|
||||
.breadcrumb--path > li + li:before{
|
||||
content:"\002F" "\00A0";
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Assign a delimiter on the fly through a data attribute, e.g.:
|
||||
*
|
||||
<ol class="nav breadcrumb">
|
||||
<li><a href=#>Home</a></li>
|
||||
<li data-breadcrumb="|"><a href=#>About</a></li>
|
||||
<li data-breadcrumb="|"><a href=#>The Board</a></li>
|
||||
<li data-breadcrumb="|" class=current><a href=#>Directors</a></li>
|
||||
</ol>
|
||||
*
|
||||
*/
|
||||
.breadcrumb > li + li[data-breadcrumb]:before{
|
||||
content:attr(data-breadcrumb) "\00A0";
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Denote the root of the tree.
|
||||
*/
|
||||
.breadcrumb__root{
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
}//endif
|
||||
23
sass/inuitcss/objects/_columns.scss
Normal file
23
sass/inuitcss/objects/_columns.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
@charset "UTF-8";
|
||||
@if $use-columns == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$COLUMNS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Here we can set elements in columns of text using CSS3, e.g.:
|
||||
*
|
||||
<p class=text-cols--2>
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/E26Yd
|
||||
*
|
||||
*/
|
||||
%text-cols{
|
||||
@include vendor(column-gap, $base-spacing-unit);
|
||||
}
|
||||
.text-cols--2 { @extend %text-cols; @include vendor(column-count, 2); }
|
||||
.text-cols--3 { @extend %text-cols; @include vendor(column-count, 3); }
|
||||
.text-cols--4 { @extend %text-cols; @include vendor(column-count, 4); }
|
||||
.text-cols--5 { @extend %text-cols; @include vendor(column-count, 5); }
|
||||
|
||||
}//endif
|
||||
56
sass/inuitcss/objects/_flexbox.scss
Normal file
56
sass/inuitcss/objects/_flexbox.scss
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
@charset "UTF-8";
|
||||
@if $use-flexbox == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$FLEXBOX
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Until we can utilise flexbox natively we can kinda, sorta, attempt to emulate
|
||||
* it, in a way... e.g.:
|
||||
*
|
||||
<header class=flexbox>
|
||||
|
||||
<div class=flexbox__item>
|
||||
<b>Welcome to</b>
|
||||
</div>
|
||||
|
||||
<div class=flexbox__item>
|
||||
<img src="//csswizardry.com/inuitcss/img/logo.jpg" alt="inuit.css">
|
||||
</div>
|
||||
|
||||
</header>
|
||||
*
|
||||
* We can also combine our grid system classes with `.flexbox__item` classes,
|
||||
* e.g.:
|
||||
*
|
||||
<div class=flexbox>
|
||||
<div class="flexbox__item one-quarter">
|
||||
</div>
|
||||
<div class="flexbox__item three-quarters">
|
||||
</div>
|
||||
</div>
|
||||
*
|
||||
* It’s pretty poorly named I’m afraid, but it works...
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/ufUh2
|
||||
*
|
||||
*/
|
||||
.flexbox{
|
||||
display:table;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Nasty hack to circumvent Modernizr conflicts.
|
||||
*/
|
||||
html.flexbox{
|
||||
display:block;
|
||||
width:auto;
|
||||
}
|
||||
|
||||
.flexbox__item{
|
||||
display:table-cell;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
}//endif
|
||||
64
sass/inuitcss/objects/_flyout.scss
Normal file
64
sass/inuitcss/objects/_flyout.scss
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
@charset "UTF-8";
|
||||
@if $use-flyout == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$FLYOUT
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Flyouts are pieces of content that fly out of a parent when said parent is
|
||||
* hovered. They typically appear bottom-left of the parent.
|
||||
*
|
||||
<div class=flyout>
|
||||
Foo
|
||||
<div class=flyout__content>
|
||||
<h1>Lorem</h1>
|
||||
<p>Ipsum</p>
|
||||
</div>
|
||||
</div>
|
||||
*
|
||||
* Extend these objects in your theme stylesheet.
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/B52HG
|
||||
*
|
||||
*/
|
||||
.flyout,
|
||||
.flyout--alt{
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
}
|
||||
.flyout__content{
|
||||
/**
|
||||
* Position the flyouts off-screen. This is typically better than
|
||||
* `display:none;`.
|
||||
*/
|
||||
position:absolute;
|
||||
top:100%;
|
||||
left:-99999px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Bring the flyouts into view when you hover their parents.
|
||||
* Two different types of flyout; ‘regular’ (`.flyout`) and ‘alternative’
|
||||
* (`.flyout--alt`).
|
||||
*/
|
||||
.flyout:hover,
|
||||
.flyout--alt:hover{
|
||||
overflow:visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Regular flyouts sit all the way from the top, flush left.
|
||||
*/
|
||||
.flyout:hover > .flyout__content{
|
||||
left:0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Alternative flyouts sit all the way from the left, flush top.
|
||||
*/
|
||||
.flyout--alt:hover > .flyout__content{
|
||||
top:0;
|
||||
left:100%;
|
||||
}
|
||||
|
||||
}//endif
|
||||
59
sass/inuitcss/objects/_greybox.scss
Normal file
59
sass/inuitcss/objects/_greybox.scss
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
@charset "UTF-8";
|
||||
@if $use-greybox == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$GREYBOX
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Quickly throw together greybox wireframes. Use in conjunction with other
|
||||
* inuit.css objects to create simple greybox prototypes, e.g.:
|
||||
*
|
||||
<div class="island greybox greybox--medium">Header</div>
|
||||
|
||||
<ul class="nav nav--fit nav--block greybox">
|
||||
<li><a href=#>Home</a></li>
|
||||
<li><a href=#>About</a></li>
|
||||
<li><a href=#>Portfolio</a></li>
|
||||
<li><a href=#>Contact</a></li>
|
||||
</ul>
|
||||
*
|
||||
* The beauty of combining the greyboxing with inuit.css objects is that any
|
||||
* prototyping can quickly be converted into/used as production code.
|
||||
*
|
||||
* For a more complete prototyping framework, consider Adam Whitcroft’s Proto:
|
||||
* adamwhitcroft.com/proto
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/qCXfh/
|
||||
*
|
||||
*/
|
||||
.greybox,
|
||||
.graybox{
|
||||
@include font-size(12px);
|
||||
font-family:sans-serif;
|
||||
text-align:center;
|
||||
background-color:rgba(0,0,0,0.2);
|
||||
color:#fff;
|
||||
}
|
||||
.greybox a,
|
||||
.graybox a{
|
||||
color:#fff;
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* All greyboxes will occupy 100% of their parent’s width, but to alter their
|
||||
* heights we apply incrementally larger line-heights:
|
||||
*/
|
||||
.greybox--small,
|
||||
.graybox--small { line-height: 2 * $base-line-height; }
|
||||
.greybox--medium,
|
||||
.graybox--medium { line-height: 4 * $base-line-height; }
|
||||
.greybox--large,
|
||||
.graybox--large { line-height: 8 * $base-line-height; }
|
||||
.greybox--huge,
|
||||
.graybox--huge { line-height:16 * $base-line-height; }
|
||||
.greybox--gigantic,
|
||||
.graybox--gigantic { line-height:32 * $base-line-height; }
|
||||
|
||||
}//endif
|
||||
69
sass/inuitcss/objects/_grids.scss
Normal file
69
sass/inuitcss/objects/_grids.scss
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
@if $use-grids == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$GRIDS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Fluid and nestable grid system, e.g.:
|
||||
*
|
||||
<div class="grid">
|
||||
|
||||
<div class="grid__item one-third">
|
||||
<p>One third grid</p>
|
||||
</div><!--
|
||||
|
||||
--><div class="grid__item two-thirds">
|
||||
<p>Two thirds grid</p>
|
||||
</div><!--
|
||||
|
||||
--><div class="grid__item one-half">
|
||||
<p>One half grid</p>
|
||||
</div><!--
|
||||
|
||||
--><div class="grid__item one-quarter">
|
||||
<p>One quarter grid</p>
|
||||
</div><!--
|
||||
|
||||
--><div class="grid__item one-quarter">
|
||||
<p>One quarter grid</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/CLYUC
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Grid wrapper
|
||||
*/
|
||||
.grid{
|
||||
margin-left:-$base-spacing-unit;
|
||||
list-style:none;
|
||||
margin-bottom:0;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Very infrequently occuring grid wrappers as children of grid wrappers.
|
||||
*/
|
||||
.grid > .grid{
|
||||
margin-left:0;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Grid
|
||||
*/
|
||||
.grid__item{
|
||||
display:inline-block;
|
||||
width:100%;
|
||||
padding-left:$base-spacing-unit;
|
||||
vertical-align:top;
|
||||
@if $global-border-box == false{
|
||||
@include vendor(box-sizing, border-box);
|
||||
}
|
||||
}
|
||||
|
||||
}//endif
|
||||
40
sass/inuitcss/objects/_icon-text.scss
Normal file
40
sass/inuitcss/objects/_icon-text.scss
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
@if $use-icon-text == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$ICON-TEXT
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* For text-links etc that have an icon with them. Sometimes whitespace would
|
||||
* suffice in creating a gap between the icon and text, for example:
|
||||
*
|
||||
<a href=#>
|
||||
<i class="s s--help"></i> Help & support
|
||||
</a>
|
||||
*
|
||||
* However we will sometimes want a larger, explicity set gap:
|
||||
<a href=# class=icon-text>
|
||||
<i class="icon-text__icon s s--help"></i>Help & support
|
||||
</a>
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/Q6Lbf
|
||||
*
|
||||
*/
|
||||
.icon-text > .icon-text__icon{
|
||||
margin-right:$half-spacing-unit / 2;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* We can also reverse the direction of the margin for icons that appear to the
|
||||
* right of the text content, thus:
|
||||
*
|
||||
<a href=# class=icon-text--rev>
|
||||
Help & support<i class="icon-text__icon s s--help"></i>
|
||||
</a>
|
||||
*
|
||||
*/
|
||||
.icon-text--rev > .icon-text__icon{
|
||||
margin-left:$half-spacing-unit / 2;
|
||||
}
|
||||
|
||||
}//endif
|
||||
38
sass/inuitcss/objects/_island.scss
Normal file
38
sass/inuitcss/objects/_island.scss
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
@if $use-island == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$ISLAND
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Simple, boxed off content, as per: csswizardry.com/2011/10/the-island-object
|
||||
* E.g.:
|
||||
*
|
||||
<div class=island>
|
||||
I am boxed off.
|
||||
</div>
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/u8pV3
|
||||
*
|
||||
*/
|
||||
.island,
|
||||
.islet{
|
||||
display:block;
|
||||
@extend .cf;
|
||||
}
|
||||
.island{
|
||||
padding:$base-spacing-unit;
|
||||
}
|
||||
.island > :last-child,
|
||||
.islet > :last-child{
|
||||
margin-bottom:0;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Just like `.island`, only smaller.
|
||||
*/
|
||||
.islet{
|
||||
padding:$half-spacing-unit;
|
||||
}
|
||||
|
||||
}//endif
|
||||
32
sass/inuitcss/objects/_link-complex.scss
Normal file
32
sass/inuitcss/objects/_link-complex.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
@if $use-link-complex == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$LINK-COMPLEX
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* As inspired by @necolas:
|
||||
* github.com/necolas/suit-utils/blob/master/link.css#L18
|
||||
*
|
||||
* Add hover behaviour to only selected items within links, e.g.:
|
||||
*
|
||||
<a href=log-in class=link-complex>
|
||||
<i class="s s--user"></i>
|
||||
<span class=link-complex__target>Log in</span>
|
||||
</a>
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/rt9M3
|
||||
*
|
||||
*/
|
||||
.link-complex,
|
||||
.link-complex:hover,
|
||||
.link-complex:active,
|
||||
.link-complex:focus{
|
||||
text-decoration:none;
|
||||
}
|
||||
.link-complex:hover .link-complex__target,
|
||||
.link-complex:active .link-complex__target,
|
||||
.link-complex:focus .link-complex__target{
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
}//endif
|
||||
47
sass/inuitcss/objects/_lozenges.scss
Normal file
47
sass/inuitcss/objects/_lozenges.scss
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
@charset "UTF-8";
|
||||
@if $use-lozenges == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$LOZENGES
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Create pill- and lozenge-like runs of text, e.g.:
|
||||
*
|
||||
<p>This <span class=pill>here</span> is a pill!</p>
|
||||
*
|
||||
<p>This <span class=loz>here</span> is also a lozenge!</p>
|
||||
*
|
||||
* Pills have fully rounded ends, lozenges have only their corners rounded.
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/N3pGm
|
||||
*
|
||||
*/
|
||||
.pill{
|
||||
display:inline-block;
|
||||
/**
|
||||
* These numbers set in ems mean that, at its narrowest, a lozenge will be
|
||||
* the same width as the `line-height` set on the `html` element.
|
||||
* This allows us to use the `.loz` in almost any `font-size` we wish.
|
||||
*/
|
||||
min-width: ($line-height-ratio * 0.666667) * 1em;
|
||||
padding-right:($line-height-ratio * 0.166667) * 1em;
|
||||
padding-left: ($line-height-ratio * 0.166667) * 1em;
|
||||
/* =1.50em */
|
||||
text-align:center;
|
||||
background-color:$base-ui-color;
|
||||
color:#fff; /* Override this color in your theme stylesheet */
|
||||
|
||||
/**
|
||||
* Normally we’d use border-radius:100%; but instead here we just use an
|
||||
* overly large number; `border-radius:100%;` would create an oval on
|
||||
* non-square elements whereas we just want to round the ends of an element.
|
||||
*/
|
||||
border-radius:100px;
|
||||
}
|
||||
|
||||
.loz{
|
||||
@extend .pill;
|
||||
border-radius:$brand-round;
|
||||
}
|
||||
|
||||
}//endif
|
||||
53
sass/inuitcss/objects/_marginalia.scss
Normal file
53
sass/inuitcss/objects/_marginalia.scss
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
@charset "UTF-8";
|
||||
@if $use-marginalia == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$MARGINALIA
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Marginalia are, per definition, notes in the margin of a document. The
|
||||
* `marginalia__body` class can be applied to all kinds of content, like text or
|
||||
* images, and is joined by a width class:
|
||||
*
|
||||
<div class="marginalia">
|
||||
<div class="marginalia__body desk-one-fifth"></div>
|
||||
</div>
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/AemkH
|
||||
*
|
||||
*/
|
||||
.marginalia{
|
||||
@include font-size($milli-size);
|
||||
}
|
||||
|
||||
/**
|
||||
* Wait for a certain breakpoint to trigger ‘proper' marginalia. Up to this point,
|
||||
* marginalia are inline with the other text.
|
||||
*/
|
||||
@media (min-width: $desk-start){
|
||||
.marginalia{
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.marginalia__body,
|
||||
.marginalia__body--right{
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
.marginalia__body{
|
||||
right:100%;
|
||||
padding-right:$base-spacing-unit;
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
/**
|
||||
* Align marginalia to the right of the text.
|
||||
*/
|
||||
.marginalia__body--right{
|
||||
left:100%;
|
||||
padding-left:$base-spacing-unit;
|
||||
text-align:left;
|
||||
}
|
||||
}
|
||||
|
||||
}//endif
|
||||
89
sass/inuitcss/objects/_matrix.scss
Normal file
89
sass/inuitcss/objects/_matrix.scss
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
@if $use-matrix == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$MATRIX
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Create a grid of items out of a single list, e.g.:
|
||||
*
|
||||
<ul class="matrix three-cols">
|
||||
<li class=all-cols>Lorem</li>
|
||||
<li>Ipsum <a href=#>dolor</a></li>
|
||||
<li><a href=# class=matrix__link>Sit</a></li>
|
||||
<li>Amet</li>
|
||||
<li class=all-cols>Consectetuer</li>
|
||||
</ul>
|
||||
*
|
||||
* Extend this object in your theme stylesheet.
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/Y2zrU
|
||||
*
|
||||
*/
|
||||
.matrix{
|
||||
@extend .block-list;
|
||||
border-left-width:1px;
|
||||
@extend .cf;
|
||||
|
||||
> li{
|
||||
float:left;
|
||||
border-right-width:1px;
|
||||
@if $global-border-box == false{
|
||||
@include vendor(box-sizing, border-box);
|
||||
}
|
||||
}
|
||||
}
|
||||
.matrix__link{
|
||||
@extend .block-list__link;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* The `.multi-list` object is a lot like the `.matrix` object only without the
|
||||
* blocky borders and padding.
|
||||
*
|
||||
<ul class="multi-list four-cols">
|
||||
<li>Lorem</li>
|
||||
<li>Ipsum</li>
|
||||
<li>Dolor</li>
|
||||
<li>Sit</li>
|
||||
</ul>
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/Y2zrU
|
||||
*
|
||||
*/
|
||||
.multi-list{
|
||||
list-style:none;
|
||||
margin-left:0;
|
||||
@extend .cf;
|
||||
}
|
||||
.multi-list > li{
|
||||
float:left;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Apply these classes alongside the `.matrix` or `.multi-list` classes on
|
||||
* lists to determine how wide their columns are.
|
||||
*/
|
||||
.two-cols > li{
|
||||
width:50%;
|
||||
}
|
||||
.three-cols > li{
|
||||
width:33.333%;
|
||||
}
|
||||
.four-cols > li{
|
||||
width:25%;
|
||||
}
|
||||
.five-cols > li{
|
||||
width:20%;
|
||||
}
|
||||
/**
|
||||
* Unfortunately we have to qualify this selector in order to bring its
|
||||
* specificity above the `.[number]-cols > li` selectors above.
|
||||
*/
|
||||
.matrix > .all-cols,
|
||||
.multi-list > .all-cols{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
}//endif
|
||||
60
sass/inuitcss/objects/_media.scss
Normal file
60
sass/inuitcss/objects/_media.scss
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
@if $use-media == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$MEDIA
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Place any image- and text-like content side-by-side, as per:
|
||||
* stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
|
||||
* E.g.:
|
||||
*
|
||||
<div class=media>
|
||||
<img src=http://placekitten.com/200/300 alt="" class=media__img>
|
||||
<p class=media__body>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/cf4Qs
|
||||
*
|
||||
*/
|
||||
.media{
|
||||
display:block;
|
||||
@extend .cf;
|
||||
}
|
||||
.media__img{
|
||||
float:left;
|
||||
margin-right:$base-spacing-unit;
|
||||
}
|
||||
/**
|
||||
* Reversed image location (right instead of left).
|
||||
*/
|
||||
.media__img--rev{
|
||||
float:right;
|
||||
margin-left:$base-spacing-unit;
|
||||
}
|
||||
|
||||
.media__img img,
|
||||
.media__img--rev img{
|
||||
display:block;
|
||||
}
|
||||
|
||||
.media__body{
|
||||
overflow:hidden;
|
||||
}
|
||||
.media__body,
|
||||
.media__body > :last-child{
|
||||
margin-bottom:0;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* `.img`s in `.islet`s need an appropriately sized margin.
|
||||
*/
|
||||
.islet .media__img{
|
||||
margin-right:$half-spacing-unit;
|
||||
}
|
||||
.islet .media__img--rev{
|
||||
margin-left:$half-spacing-unit;
|
||||
}
|
||||
|
||||
}//endif
|
||||
155
sass/inuitcss/objects/_nav.scss
Normal file
155
sass/inuitcss/objects/_nav.scss
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
@if $use-nav == true or $use-options == true or $use-pagination == true or $use-breadcrumb == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$NAV
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Nav abstraction as per: csswizardry.com/2011/09/the-nav-abstraction
|
||||
* When used on an `ol` or `ul`, this class throws the list into horizontal mode
|
||||
* e.g.:
|
||||
*
|
||||
<ul class=nav>
|
||||
<li><a href=#>Home</a></li>
|
||||
<li><a href=#>About</a></li>
|
||||
<li><a href=#>Portfolio</a></li>
|
||||
<li><a href=#>Contact</a></li>
|
||||
</ul>
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/Vnph4
|
||||
*
|
||||
*/
|
||||
.nav{
|
||||
list-style:none;
|
||||
margin-left:0;
|
||||
@extend .cf;
|
||||
|
||||
> li{
|
||||
|
||||
&,
|
||||
> a{
|
||||
display:inline-block;
|
||||
*display:inline;
|
||||
zoom:1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* `.nav--stacked` extends `.nav` and throws the list into vertical mode, e.g.:
|
||||
*
|
||||
<ul class="nav nav--stacked">
|
||||
<li><a href=#>Home</a></li>
|
||||
<li><a href=#>About</a></li>
|
||||
<li><a href=#>Portfolio</a></li>
|
||||
<li><a href=#>Contact</a></li>
|
||||
</ul>
|
||||
*
|
||||
*/
|
||||
.nav--stacked{
|
||||
|
||||
> li{
|
||||
display:list-item;
|
||||
|
||||
> a{
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* `.nav--banner` extends `.nav` and centres the list, e.g.:
|
||||
*
|
||||
<ul class="nav nav--banner">
|
||||
<li><a href=#>Home</a></li>
|
||||
<li><a href=#>About</a></li>
|
||||
<li><a href=#>Portfolio</a></li>
|
||||
<li><a href=#>Contact</a></li>
|
||||
</ul>
|
||||
*
|
||||
*/
|
||||
.nav--banner{
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Give nav links a big, blocky hit area. Extends `.nav`, e.g.:
|
||||
*
|
||||
<ul class="nav nav--block">
|
||||
<li><a href=#>Home</a></li>
|
||||
<li><a href=#>About</a></li>
|
||||
<li><a href=#>Portfolio</a></li>
|
||||
<li><a href=#>Contact</a></li>
|
||||
</ul>
|
||||
*
|
||||
*/
|
||||
.nav--block{
|
||||
line-height:1;
|
||||
/**
|
||||
* Remove whitespace caused by `inline-block`.
|
||||
*/
|
||||
letter-spacing:-0.31em;
|
||||
word-spacing:-0.43em;
|
||||
white-space:nowrap;
|
||||
|
||||
> li{
|
||||
letter-spacing:normal;
|
||||
word-spacing:normal;
|
||||
|
||||
> a{
|
||||
padding:$half-spacing-unit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Force a nav to occupy 100% of the available width of its parent. Extends
|
||||
* `.nav`, e.g.:
|
||||
*
|
||||
<ul class="nav nav--fit">
|
||||
<li><a href=#>Home</a></li>
|
||||
<li><a href=#>About</a></li>
|
||||
<li><a href=#>Portfolio</a></li>
|
||||
<li><a href=#>Contact</a></li>
|
||||
</ul>
|
||||
*
|
||||
* Thanks to @pimpl for this idea!
|
||||
*/
|
||||
.nav--fit{
|
||||
display:table;
|
||||
width:100%;
|
||||
|
||||
> li{
|
||||
display:table-cell;
|
||||
|
||||
> a{
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Make a list of keywords. Extends `.nav`, e.g.:
|
||||
*
|
||||
`<ul class="nav nav--keywords>`
|
||||
*
|
||||
*/
|
||||
.nav--keywords{
|
||||
|
||||
> li{
|
||||
|
||||
&:after{
|
||||
content:"\002C" "\00A0";
|
||||
}
|
||||
|
||||
&:last-child:after{
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}//endif
|
||||
46
sass/inuitcss/objects/_options.scss
Normal file
46
sass/inuitcss/objects/_options.scss
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
@charset "UTF-8";
|
||||
@if $use-options == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$OPTIONS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Link-group nav, used for displaying related options. Extends `.nav--block`
|
||||
* but could also extend `.nav--fit`. Extend with colours and ‘current states’
|
||||
* in your theme stylesheet.
|
||||
*
|
||||
<ul class="nav options">
|
||||
<li><a></a></li>
|
||||
<li><a></a></li>
|
||||
<li><a></a></li>
|
||||
<li><a></a></li>
|
||||
</ul>
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/vwfaf
|
||||
*
|
||||
*/
|
||||
.options{
|
||||
@extend .nav--block;
|
||||
|
||||
> li{
|
||||
|
||||
> a{
|
||||
border:0 solid $base-ui-color;
|
||||
border-width:1px;
|
||||
border-left-width:0;
|
||||
}
|
||||
|
||||
&:first-child > a{
|
||||
border-left-width:1px;
|
||||
border-top-left-radius:$brand-round;
|
||||
border-bottom-left-radius:$brand-round;
|
||||
}
|
||||
|
||||
&:last-child > a{
|
||||
border-top-right-radius:$brand-round;
|
||||
border-bottom-right-radius:$brand-round;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}//endif
|
||||
50
sass/inuitcss/objects/_pagination.scss
Normal file
50
sass/inuitcss/objects/_pagination.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
@if $use-pagination == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$PAGINATION
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Basic pagination object, extends `.nav`.
|
||||
* Requires some funky commenting to collapse any white-space caused by the
|
||||
* `display:inline-block;` rules.
|
||||
*
|
||||
<ol class="nav pagination">
|
||||
<li class=pagination__first>First</li>
|
||||
<li class=pagination__prev>Previous</li>
|
||||
<li><a href=/page/1>1</a></li>
|
||||
<li><a href=/page/2>2</a></li>
|
||||
<li class=current><a href=/page/3>3</a></li>
|
||||
<li><a href=/page/4>4</a></li>
|
||||
<li><a href=/page/5>5</a></li>
|
||||
<li class=pagination__next><a href=/page/next>Next</a></li>
|
||||
<li class=pagination__last><a href=/page/last>Last</a></li>
|
||||
</ol>
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/9Y6PU
|
||||
*
|
||||
*/
|
||||
.pagination{
|
||||
text-align:center;
|
||||
/**
|
||||
* Remove whitespace caused by `inline-block`.
|
||||
*/
|
||||
letter-spacing:-0.31em;
|
||||
word-spacing:-0.43em;
|
||||
}
|
||||
.pagination > li{
|
||||
padding:$base-spacing-unit / 2;
|
||||
letter-spacing:normal;
|
||||
word-spacing:normal;
|
||||
}
|
||||
.pagination > li > a{
|
||||
padding:$base-spacing-unit / 2;
|
||||
margin:-$base-spacing-unit / 2;
|
||||
}
|
||||
.pagination__first a:before{
|
||||
content:"\00AB" "\00A0";
|
||||
}
|
||||
.pagination__last a:after{
|
||||
content:"\00A0" "\00BB";
|
||||
}
|
||||
|
||||
}//endif
|
||||
66
sass/inuitcss/objects/_rules.scss
Normal file
66
sass/inuitcss/objects/_rules.scss
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
@charset "UTF-8";
|
||||
@if $use-rules == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$RULES
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Horizontal rules, extend `hr`.
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/L6GuZ
|
||||
*
|
||||
*/
|
||||
.rule{
|
||||
color:$base-ui-color;
|
||||
border:none;
|
||||
border-bottom-width:1px;
|
||||
border-bottom-style:solid;
|
||||
margin-bottom:$base-spacing-unit - 1px;
|
||||
margin-bottom:(($base-spacing-unit - 1px) / $base-font-size)*1rem;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Dotted rules
|
||||
*/
|
||||
.rule--dotted{
|
||||
border-bottom-style:dotted;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Dashed rules
|
||||
*/
|
||||
.rule--dashed{
|
||||
border-bottom-style:dashed;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Ornamental rules. Places a § over the rule.
|
||||
*/
|
||||
.rule--ornament{
|
||||
position:relative;
|
||||
|
||||
&:after{
|
||||
content:"\00A7";
|
||||
position:absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
line-height:0;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
/**
|
||||
* Pass in an arbitrary ornament though a data attribute, e.g.:
|
||||
*
|
||||
<hr class="rule rule--ornament" data-ornament="!">
|
||||
*
|
||||
*/
|
||||
&[data-ornament]:after{
|
||||
content:attr(data-ornament);
|
||||
}
|
||||
}
|
||||
|
||||
}//endif
|
||||
40
sass/inuitcss/objects/_split.scss
Normal file
40
sass/inuitcss/objects/_split.scss
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
@charset "UTF-8";
|
||||
@if $use-split == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$SPLIT
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Simple split item for creating two elements floated away from one another,
|
||||
* e.g.:
|
||||
*
|
||||
<dl class=split>
|
||||
<dt class=split__title>Burger and fries</dt>
|
||||
<dd>£5.99</dd>
|
||||
<dt class=split__title>Fillet steak</dt>
|
||||
<dd>£19.99</dd>
|
||||
<dt class=split__title>Ice cream</dt>
|
||||
<dd>£2.99</dd>
|
||||
</dl>
|
||||
*
|
||||
<ol class="split results">
|
||||
<li class=first><b class=split__title>1st place</b> Bob</li>
|
||||
<li class=second><b class=split__title>2nd place</b> Lilly</li>
|
||||
<li class=third><b class=split__title>3rd place</b> Ted</li>
|
||||
</ol>
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/9gZW7
|
||||
*
|
||||
*/
|
||||
.split{
|
||||
text-align:right;
|
||||
list-style:none;
|
||||
margin-left:0;
|
||||
}
|
||||
.split__title{
|
||||
text-align:left;
|
||||
float:left;
|
||||
clear:left;
|
||||
}
|
||||
|
||||
}//endif
|
||||
99
sass/inuitcss/objects/_sprite.scss
Normal file
99
sass/inuitcss/objects/_sprite.scss
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
@charset "UTF-8";
|
||||
@if $use-sprite == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$SPRITE
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Giving an element a class of `.sprite` will throw it into ‘sprite’ mode and apply
|
||||
* a background image e.g.:
|
||||
*
|
||||
<a class="sprite sprite--question-mark">More info…</a>
|
||||
*
|
||||
* or
|
||||
*
|
||||
<a href=#><i class="sprite sprite--question-mark"></i> Help and FAQ</a>
|
||||
*
|
||||
* Giving an element a class of `.icon` will throw it into ‘icon’ mode and will
|
||||
* not add a background, but should be used for icon fonts and is populated
|
||||
* through a `data-icon` attribute and the `:after` pseudo-element, e.g.:
|
||||
*
|
||||
<a href=#><i class=icon data-icon=""></i> View your favourites</a>
|
||||
*
|
||||
* Where ‘’ might map to a star in your particular icon font.
|
||||
*
|
||||
* These all require extension in your theme stylesheet, e.g. in your own CSS:
|
||||
*
|
||||
.sprite{
|
||||
background-image:url(path/to/your/sprite.png);
|
||||
}
|
||||
.sprite--link{ background-position:0 0 ; }
|
||||
.sprite--star{ background-position:0 -16px; }
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/6TKuS
|
||||
*
|
||||
*/
|
||||
.sprite,
|
||||
.icon{
|
||||
display:inline-block;
|
||||
line-height:1;
|
||||
position:relative;
|
||||
vertical-align:middle;
|
||||
zoom:1;
|
||||
/**
|
||||
* So using `.icon` on certain elements doesn’t make a visual difference.
|
||||
*/
|
||||
font-style:normal;
|
||||
font-weight:normal;
|
||||
/**
|
||||
* So icons added using `.icon` sit in the centre of the element.
|
||||
*/
|
||||
text-align:center;
|
||||
}
|
||||
.sprite{
|
||||
/**
|
||||
* The typical size of most icons. Override in your theme stylesheet.
|
||||
*/
|
||||
width: 16px;
|
||||
height:16px;
|
||||
top:-1px;
|
||||
|
||||
/*
|
||||
* H5BP method image replacement:
|
||||
* github.com/h5bp/html5-boilerplate/commit/adecc5da035d6d76b77e3fa95c6abde841073da2
|
||||
*/
|
||||
overflow:hidden;
|
||||
*text-indent:-9999px;
|
||||
|
||||
&:before{
|
||||
content:"";
|
||||
display:block;
|
||||
width:0;
|
||||
height:100%;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up icon font
|
||||
*/
|
||||
.icon{
|
||||
font-size:16px;
|
||||
/**
|
||||
* Place the icon in a box the exact same dimensions as the icon itself.
|
||||
*/
|
||||
width:1em;
|
||||
height:1em;
|
||||
|
||||
&:before{
|
||||
content:attr(data-icon);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Icon size modifiers.
|
||||
*/
|
||||
.icon--large { font-size:32px; }
|
||||
.icon--huge { font-size:64px; }
|
||||
.icon--natural { font-size:inherit; }
|
||||
|
||||
}//endif
|
||||
53
sass/inuitcss/objects/_stats.scss
Normal file
53
sass/inuitcss/objects/_stats.scss
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
@charset "UTF-8";
|
||||
@if $use-stats == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$STATS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Simple object to display key–value statistic-like information, e.g.:
|
||||
*
|
||||
<div class=stat-group>
|
||||
<dl class=stat>
|
||||
<dt class=stat__title>Tweets</dt>
|
||||
<dd class=stat__value>27,740</dd>
|
||||
</dl>
|
||||
|
||||
<dl class=stat>
|
||||
<dt class=stat__title>Following</dt>
|
||||
<dd class=stat__value>11,529</dd>
|
||||
</dl>
|
||||
|
||||
<dl class=stat>
|
||||
<dt class=stat__title>Followers</dt>
|
||||
<dd class=stat__value>12,105</dd>
|
||||
</dl>
|
||||
</div>
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/Bpwu6
|
||||
*
|
||||
*/
|
||||
.stat-group{
|
||||
@extend .cf;
|
||||
margin-left:-$base-spacing-unit;
|
||||
}
|
||||
.stat{
|
||||
float:left;
|
||||
margin-left:$base-spacing-unit;
|
||||
display:-ms-flexbox;
|
||||
display:-webkit-flex;
|
||||
display: -moz-flex;
|
||||
display: flex;
|
||||
@include vendor(flex-direction, column);
|
||||
}
|
||||
.stat__title{
|
||||
@include vendor(order, 2);
|
||||
-ms-flex-order:2;
|
||||
}
|
||||
.stat__value{
|
||||
margin-left:0;
|
||||
@include vendor(order, 1);
|
||||
-ms-flex-order:1;
|
||||
}
|
||||
|
||||
}//endif
|
||||
38
sass/inuitcss/objects/_this-or-this.scss
Normal file
38
sass/inuitcss/objects/_this-or-this.scss
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
@if $use-this-or-this == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$THIS-OR-THIS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Simple options object to provide multiple choices, e.g.:
|
||||
*
|
||||
<h1 class=this-or-this>
|
||||
<a href=# class="this-or-this__this two-fifths">
|
||||
Free
|
||||
</a>
|
||||
<span class="this-or-this__or one-fifth">
|
||||
or
|
||||
</span>
|
||||
<a href=# class="this-or-this__this two-fifths">
|
||||
Pro
|
||||
</a>
|
||||
</h1>
|
||||
*
|
||||
* The `.this-or-this__this` and `.this-or-this__or` objects can be sized using
|
||||
* the grid-system classes.
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/R3sks
|
||||
*
|
||||
*/
|
||||
.this-or-this{
|
||||
display:table;
|
||||
width:100%;
|
||||
text-align:center;
|
||||
}
|
||||
.this-or-this__this,
|
||||
.this-or-this__or{
|
||||
display:table-cell;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
}//endif
|
||||
Loading…
Add table
Add a link
Reference in a new issue