The Angel Solutions Style Guide
A list of component examples put together by Dave Osborn for the Angel developers. Credit to Terabyte Interactive for the original kitchen sink
document and Harry Roberts, the creator of Inuit.css. Objects & mixins have been added and extended in the framework to benefit Angel and Angel Solutions' core products.
Arrows
AngelSolutions.Core.CustomControls/GlobalScss/objects/_arrows.scss
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
Top
@include arrow(top, {location}, $color)Left
Center
Right
Right
@include arrow(right, {location}, $color)Top
Center
Bottom
Bottom
@include arrow(bottom, {location}, $color)Left
Center
Right
Left
@include arrow(left, {location}, $color)Top
Center
Bottom
buttons
AngelSolutions.Core.CustomControls/GlobalScss/objects/_buttons.scss
Button Sizes
Button
Font Sizes
Button Functions
Button Actions
Button Styles
Block Link
AngelSolutions.Core.CustomControls/GlobalScss/objects/_block-link.scss
.block-link to just make a simple block like link.
See a Block LinkYou can use other brand classes here too:
- See a Block Link
- See a Block Link
- See a Block Link
- See a Block Link
- See a Block Link
- See a Block Link
- See a Block Link
- See a Block Link
Block List
AngelSolutions.Core.CustomControls/GlobalScss/objects/_block-list.scss
- Foo
- Bar
- Baz
- Foo
Condensed Block List
The same as above with half the padding.
- Foo
- Bar
- Baz
- Foo
Charting
AngelSolutions.Core.CustomControls/GlobalScss/objects/_charting.scss
Simple Bars
EAL Bar
FSM Bar
SEN Bar
OGRI Bar
Rounded OGRI Bar Chart
With Labels
Without Labels
Square & thicker
RAG Colours
Other Colours
Status Indicators
Simple circular blobs as indicators.
The font-size of the parent element dictates the size of the indicator & indicator labels.
With labels
No labels
With Icons
They can even be links…
RAG Specific
Breadcrumb
AngelSolutions.Core.CustomControls/GlobalScss/objects/_breadcrumb.scss
Default
Simple breadcrumb styling to apply to (ordered) lists. Extends `.nav`
Path
For denoting a path-like structure, GitHub style
Custom
Assign a delimiter on the fly through a data attribute
Columns
AngelSolutions.Core.CustomControls/GlobalScss/objects/_columns.scss
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet.
Fancy Check boxes
AngelSolutions.Core.CustomControls/GlobalScss/objects/_fancy-checkbox.scss
FlexBox
AngelSolutions.Core.CustomControls/GlobalScss/objects/_flexbox.scss
Until we can utilise flexbox natively we can kinda, sorta, attempt to emulate it
FlexBox Default
FlexBox with Grids
One Quarter
Three Quarters
Flyout
AngelSolutions.Core.CustomControls/GlobalScss/objects/_flyout.scss
Flyouts are pieces of content that fly out of a parent when said parent is hovered. They typically appear bottom-left of the parent.
Flyout Regular - From the top, flush left
Lorem
Ipsum
Flyout Alternative - Left, Flush Top
Lorem
Ipsum
GreyBox - For Prototyping
AngelSolutions.Core.CustomControls/GlobalScss/objects/_greybox.scss
Quickly throw together greybox wireframes. Use in conjunction with other inuit.css objects to create simple greybox prototypes
Generic
Greybox Sizes
Grids
AngelSolutions.Core.CustomControls/GlobalScss/objects/_grids.scss
AngelSolutions.Core.CustomControls/GlobalScss/generic/_widths.scss
Fluid and nestable grid system
WARNING!: As Inuit.css grids are positioned using display: inline-block; you must strip whitespace from between .grid__item elements to get the grids to properly line up. See here for more information. The recommended way to do this is to place comments between .grid__item elements.
Regular
1
2
3
4
5
6
7
q
q
q
q
Reversed
1
2
3
4
5
6
7
Full
1
2
3
4
5
6
7
q
q
q
q
Icon Fonts (Entypo)
AngelSolutions.Core.CustomControls/GlobalScss/fonts/_entypo.scss
AngelSolutions.Core.CustomControls/GlobalScss/fonts/_icon-fonts.scss
Icons for files
Often we want to include an icon — usually in a link — that indicates what file type we are referring to. We do this by giving the element a class of .file-icon, and we ensure that the element ends with the file extension in the files title attribute.
- pdf-Example-file.pdf
- doc-Example-file.doc (Also: .rtf, or .docx)
- txt-Example-file.txt
- xls-Example-file.xls (Also: .xlsx, or .csv)
- rss-Example-file.rss (Also: .atom)
- opml-Example-file.opml
- php-Example-file. (Also: .phps)
- torrent-Example-file.
- vcard-Example-file.
- exe-Example-file.
- app-Example-file. (Also: .dmg)
- pps-Example-file.
- xpi-Example-file.
- fla-Example-file. (Also: .swf)
- zip-Example-file. (Also: .rar, .gzip, .bzip, or .ace)
- ical-Example-file.
- css-Example-file.
- ttf-Example-file.
- xml-Example-file.
- jpg-Example-file. (Also: .gif, .png, .bmp, .jpeg, .svg, or .eps)
- mov-Example-file. (Also: .wmv, .mp4, .avi, .mpg)
- mp3-Example-file. (Also: .wav, .ogg, .wma, .m4a)
Icon Link
AngelSolutions.Core.CustomControls/GlobalScss/objects/_icon-link.scss
For links etc that have an icon with them. Sometimes whitespace would suffice in creating a gap between the icon and text, for example:
However we will sometimes want a larger, explicitly set gap:
And finally sometimes we want it to exist as a link on it's own:
Images
AngelSolutions.Core.CustomControls/GlobalScss/base/_images.scss
Non-fluid images if you specify width and/or height attributes.
Image Sizes
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
.img--medium
.img--tall
Image placement variations
.img--right
.img--left
.img--center
A Responsive Image Hack
Sometimes ASP.net spurts out an image with a specific height and width. With this class it will ignore the width and height when relevant.
Info List
AngelSolutions.Core.CustomControls/GlobalScss/objects/_info-list.scss
A simple list of information — it's a form without the form elements.
- Opened: 14/11/2012
- Type: Independent
- Sub type: Example Sub type
- Gender: Unknown
- LA Advisor: Mr LA Advisor
A lined info list
If it's particularly difficult to read which label is attributed to which data element.
- Opened: 14/11/2012
- Type: Independent
- Sub type: Example Sub type
- Gender: Unknown
- LA Advisor: Mr LA Advisor
Island
AngelSolutions.Core.CustomControls/GlobalScss/objects/_island.scss
Simple, boxed off content
Island
Primary
Secondary
Tertiary
Positive
Negative
Warning
Whisper
Islet
Just like `.island`, only smaller
Legend
AngelSolutions.Core.CustomControls/GlobalScss/objects/_legend.scss
Extends .nav & has helpers
Vertical Legend
Link Complex
AngelSolutions.Core.CustomControls/GlobalScss/objects/_link-complex.scss
Add hover behaviour to only selected items within links
Log in to your account.Lozenges
AngelSolutions.Core.CustomControls/GlobalScss/objects/_lozenges.scss
Create pill- and lozenge-like runs of text. Pills have fully rounded ends. lozenges have only their corners rounded
This here is a pill!
This here is also a lozenge!
Marginalia
AngelSolutions.Core.CustomControls/GlobalScss/objects/_marginalia.scss
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
This is some marginalia content.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit
Matrix
AngelSolutions.Core.CustomControls/GlobalScss/objects/_matrix.scss
Create a grid of items out of a single list
Media
AngelSolutions.Core.CustomControls/GlobalScss/objects/_media.scss
Place any image- and text-like content side-by-side
Regular
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Reversed
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Nav
AngelSolutions.Core.CustomControls/GlobalScss/objects/_nav.scss
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
Default
Stacked
`.nav--stacked` extends `.nav` and throws the list into vertical mode
Banner
`.nav--banner` extends `.nav` and centres the list
Block
Give nav links a big, blocky hit area. Extends `.nav`
Fit
Force a nav to occupy 100% of the available width of its parent. Extends `.nav`
Keywords
Make a list of keywords. Extends `.nav`
Icon Tabs
Make a nav that contains Icons… (Extends `.nav`)
Notes
AngelSolutions.Core.CustomControls/GlobalScss/objects/_notes.scss
A list of comments / quotes from specific people. This can often look like a conversation or just be a list of quotes
-
Frank Chimero in 2012Good design is all about making other designers feel like idiots because that idea wasn’t theirs.
-
Ben SchneidermanA picture is worth a thousand words. An interface is worth a thousand pictures
-
Wouter StokkelIt’s art if can’t be explained.
It’s fashion if no one asks for an explanation.
It’s design if it doesn’t need explanation -
Me, just nowThis style guide is pure awesomeness! Dave Osborn in a genius :)
They don't have to contain a delete…
Von R. GlitschkaThe client may be king but he’s not the art director
They can use other style classes too…
Frank ChimeroPeople ignore design that ignores people
Steve KrugExperts are rarely insulted by something that is clear enough for beginners. Everybody appreciates clarity
Options
AngelSolutions.Core.CustomControls/GlobalScss/objects/_options.scss
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.
Pagination
AngelSolutions.Core.CustomControls/GlobalScss/objects/_pagination.scss
Basic pagination object, extends `.nav`. Requires some funky commenting to collapse any white-space caused by the `display:inline-block;` rules.
Rule
AngelSolutions.Core.CustomControls/GlobalScss/objects/_rules.scss
Horizontal rules, extend `hr`.
Default
Dotted
Dashed
Ornamental Rules
Ornamental rules. Places a § over the rule.
Pass in an arbitrary ornament though a data attribute
Split
AngelSolutions.Core.CustomControls/GlobalScss/objects/_split.scss
Simple split item for creating two elements floated away from one another
- Burger and fries
- £5.99
- Fillet steak
- £19.99
- Ice cream
- £2.99
Star Rating
AngelSolutions.Core.CustomControls/GlobalScss/objects/_star-rating.scss
Be careful!
Annoyingly, these have a tendency to break on mobile devices so a media query manipulating the font size may be required. Look at this on a case by case basis.
This one has the class of .js-star-rating. It captures a user's rating rather than showing a % statistic.
You Could use something other than stars with a different scale too…
Stats
AngelSolutions.Core.CustomControls/GlobalScss/objects/_stats.scss
Simple object to display key-value statistic-like information
389
Pupils
11%
Boys
89%
Girls
Stat Badge
A simple badge designed to hold an icon a small statistic.
50.1%
50.1%
50.1%
50.1%
50.1%
50.1%
50.1%
50.1%
Alternative stats object
- Tweets
- 27,740
- Following
- 11,529
- Followers
- 12,105
Tables
AngelSolutions.Core.CustomControls/GlobalScss/base/_tables.scss
We have a lot at our disposal for making very complex table construct
- `.table--bordered` - bordered table
- `.table--striped` - striped table
- `.table--data` - make type smaller to read data
- `.table--responsive` - make it look awesome on a mobile
A Bordered Table
| Foo | Bar | ||
|---|---|---|---|
| Lorem | Ipsum | Dolor | Sit |
| Sit | Dolor | 03.788 | Lorem |
| Dolor | 32.210 | Lorem | |
| Dolor | 47.797 | Lorem | |
| Sit | Dolor | 09.640 | Lorem |
| Dolor | 12.117 | Lorem | |
A Data Table
| Foo | Bar | ||
|---|---|---|---|
| Lorem | Ipsum | Dolor | Sit |
| Sit | Dolor | 03.788 | Lorem |
| Dolor | 32.210 | Lorem | |
| Dolor | 47.797 | Lorem | |
| Sit | Dolor | 09.640 | Lorem |
| Dolor | 12.117 | Lorem | |
A Striped Table
| Foo | Bar | ||
|---|---|---|---|
| Lorem | Ipsum | Dolor | Sit |
| Sit | Dolor | 03.788 | Lorem |
| Dolor | 32.210 | Lorem | |
| Dolor | 47.797 | Lorem | |
| Sit | Dolor | 09.640 | Lorem |
| Dolor | 12.117 | Lorem | |
A Responsive Table
| Lorem | Ipsum | Dolor | Sit |
|---|---|---|---|
| Dolor | Lorem | 03.788 | Dolor |
| Dolor | Lorem | 32.210 | Dolor |
| Dolor | Lorem | 47.797 | Dolor |
| Dolor | Lorem | 09.640 | Dolor |
| Dolor | Lorem | 12.117 | Dolor |
Tabs
AngelSolutions.Core.CustomControls/GlobalScss/objects/_nav.scss
This or This
AngelSolutions.Core.CustomControls/GlobalScss/objects/_this-or-this.scss
Simple options object to provide multiple choices. The `.this-or-this__this` and `.this-or-this__or` objects can be sized using the grid-system classes
Free or Pro
User Messages
AngelSolutions.Core.CustomControls/GlobalScss/objects/_media.scss
AngelSolutions.Core.CustomControls/GlobalScss/objects/_island.scss
AngelSolutions.Core.CustomControls/GlobalScss/generic/_brand.scss
Simple, boxed off messages to alert the user
Primary Message
I am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded messageI am a primary branded message.
Secondary Message
I am a secondary branded message.
Tertiary Message
I am a tertiary branded message.
Positive Message
I am a positive message.
Negative Message
I am a negative message.
Warning Message
I am a warning message.
Information Message
I am an information message.
Whisper Message
I am a whisper message.
Waiting Message
Rag Messages
Red
I am a red rag message.
blue
I am a blue rag message.
Green
I am a green rag message.
Amber
I am an amber rag message.
Yellow
I am a yellow rag message.
Purple
I am a purple rag message.
Grey
I am a grey rag message.
Teal
I am a teal rag message.
Black
I am a black rag message.
Pink
I am a pink rag message.
White
I am a white rag message.
Vertical Scroll Wrapper
AngelSolutions.Core.CustomControls/GlobalScss/objects/_widgets.scss
| School Name |
|---|
| School 01 |
| School 02 |
| School 03 |
| School 04 |
| School 05 |
| School 06 |
| School 07 |
| School 08 |
| School 09 |
| School 10 |
| School 11 |
| School 12 |
| School 13 |
| School 14 |
| School 15 |
| School 16 |
| School 17 |
| School 18 |
| School 19 |
| School 20 |
| School 21 |
| School 22 |
| School 23 |
| School 24 |
| School 25 |
| School 26 |
| School 27 |
| School 28 |
| School 29 |
| School 30 |
| School 31 |
| School 32 |
| School 33 |
| School 34 |
| School 35 |
| School 36 |
| School 37 |
| School 38 |
| School 39 |
| School 40 |
| School 41 |
| School 42 |
| School 43 |
| School 44 |
| School 45 |
| School 46 |
| School 47 |
| School 48 |
| School 49 |
| School 50 |
Widgets
AngelSolutions.Core.CustomControls/GlobalScss/objects/_widgets.scss
Full Widget
Date Pickers
AngelSolutions.Core.CustomControls/GlobalScss/base/_forms.scss
App_Styles/Scss/objects/_jquery-ui-1.10.4-nexus.scss
Date Picker Input
Date Picker Input incl. Icon
Pop ups
AngelSolutions.Core.CustomControls/GlobalScss/objects/_pop-ups.scss
Brand & Colours
AngelSolutions.Core.CustomControls/GlobalScss/base/_brand.scss
Primary Brand
.brand-color
Secondary Brand
.brand-color--secondary
Tertiary Brand
.brand-color--tertiary
Quaternary Brand
.brand-color--quaternary
Outstanding
.color--outstanding
Good
.color--good
Requires Improvement
.color--requires-improvement
Inadequate
.color--inadequate
Not Graded
.color--not-graded
FSM
.color--fsm
EAL
.color--eal
SEN
.color--sen
Boys
.color--boys
Girls
.color--girls
Positive
.color--positive
Negative
.color--negative
Average
.color--average
Perspective Primary Brand
.color-psp
Perspective Secondary Brand
.color-psp--secondary
Perspective Tertiary Brand
.color-psp--tertiary
Angel Primary Brand
.color-angel
Angel Secondary Brand
.color-angel--secondary
Angel Tertiary Brand
.color-angel--tertiary
Angel Quaternary Brand
.color-angel--quaternary
Watchsted Brand
.color-watchsted
Forms
AngelSolutions.Core.CustomControls/GlobalScss/base/_forms.scss
Text Inputs
Instead of a `[type]` selector for each kind of form input, we just use a class to target any/every one
Groups of Form Fields
Group sets of form fields in a list with `.form-fields`
-
-
from:
to:
-
from:
to:
-
-
-
Email format is invalid.
Inlined Groups of Form Fields
Group sets of form fields in a list but with labels next to inputs `.form-fields--inline`
-
-
from: to:
-
Total time taken to prepare & write up the visit.
-
Visit start:
-
Email format is invalid.
Groups of Form Fields in a grid
Group sets of form fields in a list that is in the form of a grid.
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
-
Select an option below:
Label - Extra Help
Extra help text in `label`s
Groups of Checkboxes and Radios
-
How would you like to be contacted?
-
How often would you like to be contacted?
Spoken Forms
Spoken forms are for forms that read like spoken word
- Hello, my is . My home is
Focus Help
Extra help text displayed after a field when that field is in focus. 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.
Typography
AngelSolutions.Core.CustomControls/GlobalScss/base/_headings.scss
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
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
h2 - .beta
h3 - .gamma
h4 - .delta
h5 - .epsilon
h6 - .zeta
Mastheads
.giga
.mega
.kilo
Small Print
.smallprint
.milli
.micro
Paragraphs
Default
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Introductory Text
The `.lede` (or .lead) class is used to make the introductory text (usually a paragraph) of a document slightly larger.
Senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Quotes
Inline quotes
Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Blockquotes
Insanity: doing the same thing over and over again and expecting different results.
Albert Einstein
Lists
Ordered List
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
Have a numbered `ul` without the semantics implied by using an `ol`.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
Unordered List
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
Code
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
Helper
AngelSolutions.Core.CustomControls/GlobalScss/generic/_helper.scss
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--none, .float--right and .float--left
Float none
Float right
Float left
Text aligment
.text--left, .text--center and .text--right
Text left
Text center
Text right
Font weights
.weight--light, .weight--normal and .weight--semibold
Weight light
Weight normal
Weight semibold
Add/Remove margins
Add Full Margins
Adds `$base-spacing-unit` margins
- .push
- .push--top
- .push--right
- .push--bottom
- .push--left
- .push--ends
- .push--sides
Add Half Margins
Adds `$half-spacing-unit` margins
- .push-half
- .push-half--top
- .push-half--right
- .push-half--bottom
- .push-half--left
- .push-half--ends
- .push-half--sides
Remove Margins
Takes away margins
- .flush
- .flush--top
- .flush--right
- .flush--bottom
- .flush--left
- .flush--ends
- .flush--sides
Add/Remove paddings
Add Full Paddings
Adds `$base-spacing-unit` paddings
- .soft
- .soft--top
- .soft--right
- .soft--bottom
- .soft--left
- .soft--ends
- .soft--sides
Add Half Padding
Adds `$half-spacing-unit` padding
- .soft-half
- .soft-half--top
- .soft-half--right
- .soft-half--bottom
- .soft-half--left
- .soft-half--ends
- .soft-half--sides
Remove Padding
Takes away padding
- .hard
- .hard--top
- .hard--right
- .hard--bottom
- .hard--left
- .hard--ends
- .hard--sides
Full bleed
.full-bleed
Pull items full width of `.island` parents.
Pull items full width of `.islet` parents.
Informative
Add a help cursor to any element that gives the user extra information on `:hover`.
.informative
Help? (Hover me)Muted
Mute an object by reducing its opacity.
.muted
Without `.muted` With `.muted`Go
Add a right-angled quote to links that imply movement
.go
Read moreCaps
Apply capital case to an element (usually a `strong`).
.caps
CAPITALIZE
Accessibility
Hide content off-screen without resorting to `display:none;`, also provide breakpoint specific hidden elements. Classes include:
- .accessibility
- .visuallyhidden
- .accessibility--palm
- .visuallyhidden--palm
- .accessibility--lap
- .visuallyhidden--lap
- .accessibility--lap-and-up
- .visuallyhidden--lap-and-up
- .accessibility--portable
- .visuallyhidden--portable
- .accessibility--desk
- .visuallyhidden--desk
- .accessibility--desk-wide
- .visuallyhidden--desk-wide
Mixins
AngelSolutions.Core.CustomControls/GlobalScss/generic/_mixins.scss
Typography
Font Size
Create a fully formed type style (sizing and vertical rhythm) by passing in a single value.
css
@include font-size(10px);
@include font-size(10px, $line-height: false);
Headings
Style any number of headings in one fell swoop
@include headings(1, 3){
color:#BADA55;
}
### CSS3 #### Vendor Create vendor-prefixed CSS in one go
@include vendor(border-radius, 4px);
Keyframes
Create CSS keyframe animations for all vendors in one go
.foo{
@include vendor(animation, shrink 3s);
}
@include keyframe(shrink){
from{
font-size:5em;
}
}
Truncate
Force overly long spans of text to truncate
@include truncate(100%);
Retina
Media query for targetting retina devices
.foo{
background-image:url(1x.png);
@include retina(){
background-image:url(2x.png);
}
}
CSS Arrows
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);
}
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
- below-desk
Not using a media query will, naturally, serve styles to all devices.
@include media-query(palm){ [styles here] }