8000 Initial public release · suitcss/utils@252676b · GitHub
Skip to content

Commit 252676b

Browse files
necolasnecolas
committed
Initial public release
0 parents  commit 252676b

10 files changed

Lines changed: 599 additions & 0 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
=== HEAD
2+
3+
=== 0.1.0 (30 September, 2012)
4+
5+
* Public release.

‎LICENSE.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Copyright (c) Nicolas Gallagher
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy of
4+
this software and associated documentation files (the "Software"), to deal in
5+
the Software without restriction, including without limitation the rights to
6+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
7+
of the Software, and to permit persons to whom the Software is furnished to do
8+
so, subject to the following conditions:
9+
10+
The above copyright notice and this permission notice shall be included in all
11+
copies or substantial portions of the Software.
12+
13+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19+
SOFTWARE.

‎README.md‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
# SUIT utilities
2+
3+
A SUIT collection of utility classes for common, reusable, low-level CSS traits.
4+
The collection includes text, link, display, layout, space, and state utilities.
5+
6+
Read more about [SUIT's design principles](https://github.com/necolas/suit/).
7+
8+
## Installation
9+
10+
* Download: [zip](https://github.com/necolas/suit-utils/zipball/master)
11+
* [Bower](https://github.com/twitter/bower/): `bower install suit-utils`
12+
* Git: `git clone https://github.com/necolas/suit-utils.git`
13+
14+
## Usage
15+
16+
### Referencing
17+
18+
During development, you can include the utilities you need using the `@import`
19+
directive in your main stylesheet. Your build step should take care of inlining
20+
these imports for production.
21+
22+
Example:
23+
24+
```css
25+
@import "/components/normalize-css/normalize.css";
26+
27+
/* Utilities */
28+
29+
@import "/components/suit-utils/display.css";
30+
@import "/components/suit-utils/layout.css";
31+
@import "/components/suit-utils/space.css";
32+
@import "/components/suit-utils/state.css";
33+
@import "/components/suit-utils/text.css";
34+
@import "/components/suit-utils/link.css";
35+
36+
@import "/components/app-css-utils/mycustom-util.css";
37+
...
38+
```
39+
40+
### Templating
41+
42+
Apply the desired trait, or combination of traits, directly to the HTML element
43+
in a component's template.
44+
45+
These simple utilities can be used to create a wide variety of UI patterns that
46+
can form the basis for virtual and specific components.
47+
48+
The following contrived example would be a structural template for a simple
49+
tweet-like component. You would then create a new component CSS file to house
50+
any additional, specific styles that are needed to fully realise this
51+
component.
52+
53+
```html
54+
<article class="tweet">
55+
<a class="obj-end" href="[permalink]">
56+
[timestamp]
57+
</a>
58+
<a class="obj-start" href="[href]">
59+
<img src="[src]" alt="[username]'s avatar">
60+
</a>
61+
<div class="nbfc">
62+
<a class="link-complex" href="[url]">
63+
<span class="link-complex__target">[full-name]</span>
64+
<span>@username</span>
65+
</a>
66+
67+
<p>
68+
<a class="link-complex" href="#">
69+
@<span class="link-complex__target">username</span>
70+
</a>
71+
[tweet-text]
72+
</p>
73+
74+
<div>
75+
<a href="#">
76+
<span>Expand</span>
77+
<span class="is-hidden">Collapse</span>
78+
</a>
79+
<a class="link-complex" href="#">
80+
<i class="icon icon--reply"></i>
81+
<span class="link-complex__target">Reply</span>
82+
</a>
83+
<a href="#">
84+
<i class="icon icon--favorite"></i>
85+
<span class="is-vishidden">Favorite</span>
86+
</a>
87+
...
88+
</div>
89+
</div>
90+
</article>
91+
```
92+
93+
## Browser support
94+
95+
* Google Chrome (latest)
96+
* Opera (latest)
97+
* Firefox 4+
98+
* Safari 5+
99+
* Internet Explorer 8+

‎component.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "suit-utils",
3+
"version": "0.1.0",
4+
"author": "Nicolas Gallagher",
5+
"styles": [
6+
"display.css",
7+
"layout.css",
8+
"link.css",
9+
"space.css",
10+
"state.css",
11+
"text.css"
12+
],
13+
"keywords": ["css", "utilities"],
14+
"dependencies": {
15+
"normalize-css": "*"
16+
},
17+
"repository": {
18+
"type": "git",
19+
"url": "https://github.com/necolas/suit-utils.git"
20+
},
21+
"licenses": [{
22+
"type": "MIT",
23+
"url": "http://opensource.org/licenses/MIT"
24+
}]
25+
}

‎display.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/* ==========================================================================
2+
Display utilities
3+
========================================================================== */
4+
5+
/**
6+
* Display-type utilities
7+
*/
8+
9+
.inline {
10+
display: inline !important;
11+
}
12+
13+
.inline-block {
14+
display: inline-block !important;
15+
}
16+
17+
.block {
18+
display: block !important;
19+
}
20+
21+
/* -------------------------------------------------------------------------- */
22+
23+
/**
24+
* Completely remove from the flow and screen readers.
25+
*/
26+
27+
.is-hidden {
28+
display: none !important;
29+
visibility: hidden !important;
30+
}
31+
32+
/**
33+
* Completely remove from the flow but leave available to screen readers.
34+
*/
35+
36+
.is-vishidden {
37+
position: absolute !important;
38+
overflow: hidden;
39+
width: 1px;
40+
height: 1px;
41+
padding: 0;
42+
border: 0;
43+
clip: rect(1px, 1px, 1px, 1px);
44+
}
45+
46+
/**
47+
* Control visibility without affecting flow.
48+
*/
49+
50+
.is-visible {
51+
visibility: visible;
52+
}
53+
54+
.is-invisible {
55+
visibility: hidden;
56+
}

‎layout.css‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
/* ==========================================================================
2+
Layout utilities
3+
========================================================================== */
4+
5+
/**
6+
* Contain floats
7+
*
8+
* Make an element expand to contain floated children.
9+
* Uses pseudo-elements (micro clearfix).
10+
*
11+
* 1. The space content is one way to avoid an Opera bug when the
12+
* `contenteditable` attribute is included anywhere else in the document.
13+
* Otherwise it causes space to appear at the top and bottom of the
14+
* element.
15+
* 2. The use of `table` rather than `block` is only necessary if using
16+
* `:before` to contain the top-margins of child elements.
17+
*/
18+
19+
.cf:before,
20+
.cf:after {
21+
content: " "; /* 1 */
22+
display: table; /* 2 */
23+
}
24+
25+
.cf:after {
26+
clear: both;
27+
}
28+
29+
/**
30+
* New block formatting context
31+
*
32+
* This affords some useful properties to the element. It won't wrap under
33+
* floats. Will also contain any floated children.
34+
35+
* N.B. This will clip overflow. Use the alternative method below if this is
36+
* problematic.
37+
*/
38+
39+
.nbfc {
40+
overflow: hidden;
41+
}
42+
43+
/**
44+
* New block formatting context (alternative)
45+
*
46+
* Alternative method when overflow must not be clipped.
47+
*
48+
* 1. Create a new block formatting context (NBFC).
49+
* 2. Avoid shrink-wrap behaviour of table-cell.
50+
*
51+
* N.B. This breaks down in some browsers when elements within this element
52+
* exceed its width.
53+
*/
54+
55+
.nbfc-alt {
56+
display: table-cell; /* 1 */
57+
width: 10000px; /* 2 */
58+
}
59+
60+
/* -------------------------------------------------------------------------- */
61+
62+
/**
63+
* Floats
64+
*/
65+
66+
.pull-start {
67+
float: left;
68+
}
69+
70+
.pull-end {
71+
float: right;
72+
}
73+
74+
/* -------------------------------------------------------------------------- */
75+
76+
/**
77+
* Object position helpers.
78+
*
79+
* Float an object left or right, and include some space between the object and
80+
* proceeding objects.
81+
*/
82+
83+
.obj-start {
84+
float: left;
85+
margin-right: 10px;
86+
}
87+
88+
.obj-end {
89+
float: right;
90+
margin-left: 10px;
91+
}
92+
93+
/**
94+
* 1. Remove excess space below images
95+
* 2. Guard against `img {max-width:100%}` hiding this utility's images in
96+
* IE 8.
97+
*/
98+
99+
.obj-start img,
100+
.obj-end img {
101+
display: block; /* 1 */
102+
max-width: none; /* 2 */
103+
}
104+
105+
/* -------------------------------------------------------------------------- */
106+
107+
/**
108+
* Vertical alignment utilities
109+
* Depends on an appropriate `display` value.
110+
*/
111+
112+
.align-top {
113+
vertical-align: top;
114+
}
115+
116+
.align-middle {
117+
vertical-align: middle;
118+
}
119+
120+
.align-baseline {
121+
vertical-align: baseline;
122+
}
123+
124+
.align-bottom {
125+
vertical-align: bottom;
126+
}

0 commit comments

Comments
 (0)