Skip to content
Browse files

Initial public release

0 parents commit 252676b4eb4e26b9baf75fe6c071b38c50230391 @necolas necolas committed
Showing with 599 additions and 0 deletions.
  1. +5 −0 CHANGELOG.md
  2. +19 −0 LICENSE.md
  3. +99 −0 README.md
  4. +25 −0 component.json
  5. +56 −0 display.css
  6. +126 −0 layout.css
  7. +88 −0 link.css
  8. +107 −0 space.css
  9. +21 −0 state.css
  10. +53 −0 text.css
5 CHANGELOG.md
@@ -0,0 +1,5 @@
+=== HEAD
+
+=== 0.1.0 (30 September, 2012)
+
+* Public release.
19 LICENSE.md
@@ -0,0 +1,19 @@
+Copyright (c) Nicolas Gallagher
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
99 README.md
@@ -0,0 +1,99 @@
+# SUIT utilities
+
+A SUIT collection of utility classes for common, reusable, low-level CSS traits.
+The collection includes text, link, display, layout, space, and state utilities.
+
+Read more about [SUIT's design principles](https://github.com/necolas/suit/).
+
+## Installation
+
+* Download: [zip](https://github.com/necolas/suit-utils/zipball/master)
+* [Bower](https://github.com/twitter/bower/): `bower install suit-utils`
+* Git: `git clone https://github.com/necolas/suit-utils.git`
+
+## Usage
+
+### Referencing
+
+During development, you can include the utilities you need using the `@import`
+directive in your main stylesheet. Your build step should take care of inlining
+these imports for production.
+
+Example:
+
+```css
+@import "/components/normalize-css/normalize.css";
+
+/* Utilities */
+
+@import "/components/suit-utils/display.css";
+@import "/components/suit-utils/layout.css";
+@import "/components/suit-utils/space.css";
+@import "/components/suit-utils/state.css";
+@import "/components/suit-utils/text.css";
+@import "/components/suit-utils/link.css";
+
+@import "/components/app-css-utils/mycustom-util.css";
+...
+```
+
+### Templating
+
+Apply the desired trait, or combination of traits, directly to the HTML element
+in a component's template.
+
+These simple utilities can be used to create a wide variety of UI patterns that
+can form the basis for virtual and specific components.
+
+The following contrived example would be a structural template for a simple
+tweet-like component. You would then create a new component CSS file to house
+any additional, specific styles that are needed to fully realise this
+component.
+
+```html
+<article class="tweet">
+ <a class="obj-end" href="[permalink]">
+ [timestamp]
+ </a>
+ <a class="obj-start" href="[href]">
+ <img src="[src]" alt="[username]'s avatar">
+ </a>
+ <div class="nbfc">
+ <a class="link-complex" href="[url]">
+ <span class="link-complex__target">[full-name]</span>
+ <span>@username</span>
+ </a>
+
+ <p>
+ <a class="link-complex" href="#">
+ @<span class="link-complex__target">username</span>
+ </a>
+ [tweet-text]
+ </p>
+
+ <div>
+ <a href="#">
+ <span>Expand</span>
+ <span class="is-hidden">Collapse</span>
+ </a>
+ <a class="link-complex" href="#">
+ <i class="icon icon--reply"></i>
+ <span class="link-complex__target">Reply</span>
+ </a>
+ <a href="#">
+ <i class="icon icon--favorite"></i>
+ <span class="is-vishidden">Favorite</span>
+ </a>
+ ...
+ </div>
+ </div>
+</article>
+```
+
+## Browser support
+
+* Google Chrome (latest)
+* Opera (latest)
+* Firefox 4+
+* Safari 5+
+* Internet Explorer 8+
25 component.json
@@ -0,0 +1,25 @@
+{
+ "name": "suit-utils",
+ "version": "0.1.0",
+ "author": "Nicolas Gallagher",
+ "styles": [
+ "display.css",
+ "layout.css",
+ "link.css",
+ "space.css",
+ "state.css",
+ "text.css"
+ ],
+ "keywords": ["css", "utilities"],
+ "dependencies": {
+ "normalize-css": "*"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/necolas/suit-utils.git"
+ },
+ "licenses": [{
+ "type": "MIT",
+ "url": "http://opensource.org/licenses/MIT"
+ }]
+}
56 display.css
@@ -0,0 +1,56 @@
+/* ==========================================================================
+ Display utilities
+ ========================================================================== */
+
+/**
+ * Display-type utilities
+ */
+
+.inline {
+ display: inline !important;
+}
+
+.inline-block {
+ display: inline-block !important;
+}
+
+.block {
+ display: block !important;
+}
+
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Completely remove from the flow and screen readers.
+ */
+
+.is-hidden {
+ display: none !important;
+ visibility: hidden !important;
+}
+
+/**
+ * Completely remove from the flow but leave available to screen readers.
+ */
+
+.is-vishidden {
+ position: absolute !important;
+ overflow: hidden;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ border: 0;
+ clip: rect(1px, 1px, 1px, 1px);
+}
+
+/**
+ * Control visibility without affecting flow.
+ */
+
+.is-visible {
+ visibility: visible;
+}
+
+.is-invisible {
+ visibility: hidden;
+}
126 layout.css
@@ -0,0 +1,126 @@
+/* ==========================================================================
+ Layout utilities
+ ========================================================================== */
+
+/**
+ * Contain floats
+ *
+ * Make an element expand to contain floated children.
+ * Uses pseudo-elements (micro clearfix).
+ *
+ * 1. The space content is one way to avoid an Opera bug when the
+ * `contenteditable` attribute is included anywhere else in the document.
+ * Otherwise it causes space to appear at the top and bottom of the
+ * element.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ * `:before` to contain the top-margins of child elements.
+ */
+
+.cf:before,
+.cf:after {
+ content: " "; /* 1 */
+ display: table; /* 2 */
+}
+
+.cf:after {
+ clear: both;
+}
+
+/**
+ * New block formatting context
+ *
+ * This affords some useful properties to the element. It won't wrap under
+ * floats. Will also contain any floated children.
+
+ * N.B. This will clip overflow. Use the alternative method below if this is
+ * problematic.
+ */
+
+.nbfc {
+ overflow: hidden;
+}
+
+/**
+ * New block formatting context (alternative)
+ *
+ * Alternative method when overflow must not be clipped.
+ *
+ * 1. Create a new block formatting context (NBFC).
+ * 2. Avoid shrink-wrap behaviour of table-cell.
+ *
+ * N.B. This breaks down in some browsers when elements within this element
+ * exceed its width.
+ */
+
+.nbfc-alt {
+ display: table-cell; /* 1 */
+ width: 10000px; /* 2 */
+}
+
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Floats
+ */
+
+.pull-start {
+ float: left;
+}
+
+.pull-end {
+ float: right;
+}
+
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Object position helpers.
+ *
+ * Float an object left or right, and include some space between the object and
+ * proceeding objects.
+ */
+
+.obj-start {
+ float: left;
+ margin-right: 10px;
+}
+
+.obj-end {
+ float: right;
+ margin-left: 10px;
+}
+
+/**
+ * 1. Remove excess space below images
+ * 2. Guard against `img {max-width:100%}` hiding this utility's images in
+ * IE 8.
+ */
+
+.obj-start img,
+.obj-end img {
+ display: block; /* 1 */
+ max-width: none; /* 2 */
+}
+
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Vertical alignment utilities
+ * Depends on an appropriate `display` value.
+ */
+
+.align-top {
+ vertical-align: top;
+}
+
+.align-middle {
+ vertical-align: middle;
+}
+
+.align-baseline {
+ vertical-align: baseline;
+}
+
+.align-bottom {
+ vertical-align: bottom;
+}
88 link.css
@@ -0,0 +1,88 @@
+/* ==========================================================================
+ Link-specific utilities
+ ========================================================================== */
+
+/**
+ * Clean link
+ *
+ * A link without any text-decoration at all.
+ */
+
+.link-clean,
+.link-clean:hover,
+.link-clean:focus,
+.link-clean:active {
+ text-decoration: none;
+}
+
+/**
+ * Link complex
+ *
+ * A common pattern is to have a link with several pieces of text and/or an
+ * icon, where only one piece of text should display the underline when the
+ * link is the subject of user interaction.
+ *
+ * Example HTML:
+ *
+ * <a class="link-complex" href="#">
+ * Link complex
+ * <span class="link-complex__target">target</span>
+ * </a>
+ */
+
+.link-complex:hover,
+.link-complex:focus,
+.link-complex:active {
+ text-decoration: none;
+}
+
+.link-complex:hover .link-complex__target,
+.link-complex:focus .link-complex__target,
+.link-complex:active .link-complex__target {
+ text-decoration: underline;
+}
+
+/**
+ * Block-level link
+ *
+ * Combination of traits commonly used in vertical navigation lists.
+ */
+
+.link-block,
+.link-block:hover,
+.link-block:focus,
+.link-block:active {
+ display: block;
+ text-decoration: none;
+}
+
+/**
+ * Pseudo-link
+ *
+ * Another interactive element, e.g., `button`, styled to look like an
+ * anchor. Relies on the use of a placeholder anchor.
+ *
+ * Example HTML:
+ *
+ * <button class="link-pseudo">
+ * <a>Button content</a>
+ * </button>
+ */
+
+.link-pseudo {
+ display: inline;
+ padding: 0;
+ border: 0;
+ margin: 0;
+ background: transparent;
+ color: inherit;
+ text-decoration: inherit;
+}
+
+.link-pseudo:hover,
+.link-pseudo:focus,
+.link-pseudo:active {
+ background: inherit;
+ color: inherit;
+ text-decoration: inherit;
+}
107 space.css
@@ -0,0 +1,107 @@
+/* ==========================================================================
+ Spacing-specific utilities
+ ========================================================================== */
+
+/**
+ * Used to adjust the default spacing between components
+ * Use with great care!
+ *
+ * <type>-<location><size>
+ *
+ * a = all
+ * t = top
+ * r = right
+ * b = bottom
+ * l = left
+ * h = horizontal
+ * v = vertical
+ *
+ * n = none
+ * s = small
+ * m = medium
+ * l = large
+ */
+
+/* All */
+
+.padding-an { padding: 0 !important; }
+.padding-as { padding: 5px !important; }
+.padding-am { padding: 10px !important; }
+.padding-al { padding: 20px !important; }
+
+.margin-an { margin: 0 !important; }
+.margin-as { margin: 5px !important; }
+.margin-am { margin: 10px !important; }
+.margin-al { margin: 20px !important; }
+
+/* Vertical */
+
+.padding-vn { padding-top: 0 !important; padding-bottom: 0 !important; }
+.padding-vs { padding-top: 5px !important; padding-bottom: 5px !important; }
+.padding-vm { padding-top: 10px !important; padding-bottom: 10px !important; }
+.padding-vl { padding-top: 20px !important; padding-bottom: 20px !important; }
+
+.margin-vn { margin-top: 0 !important; margin-bottom: 0 !important; }
+.margin-vs { margin-top: 5px !important; margin-bottom: 5px !important; }
+.margin-vm { margin-top: 10px !important; margin-bottom: 10px !important; }
+.margin-vl { margin-top: 20px !important; margin-bottom: 20px !important; }
+
+/* Horizontal */
+
+.padding-hn { padding-left: 0 !important; padding-right: 0 !important; }
+.padding-hs { padding-left: 5px !important; padding-right: 5px !important; }
+.padding-hm { padding-left: 10px !important; padding-right: 10px !important; }
+.padding-hl { padding-left: 20px !important; padding-right: 20px !important; }
+
+.margin-hn { margin-left: 0 !important; margin-right: 0 !important; }
+.margin-hs { margin-left: 5px !important; margin-right: 5px !important; }
+.margin-hm { margin-left: 10px !important; margin-right: 10px !important; }
+.margin-hl { margin-left: 20px !important; margin-right: 20px !important; }
+
+/* Top */
+
+.padding-tn { padding-top: 0 !important; }
+.padding-ts { padding-top: 5px !important; }
+.padding-tm { padding-top: 10px !important; }
+.padding-tl { padding-top: 20px !important; }
+
+.margin-tn { margin-top: 0 !important; }
+.margin-ts { margin-top: 5px !important; }
+.margin-tm { margin-top: 10px !important; }
+.margin-tl { margin-top: 20px !important; }
+
+/* Bottom */
+
+.padding-bn { padding-bottom: 0 !important; }
+.padding-bs { padding-bottom: 5px !important; }
+.padding-bm { padding-bottom: 10px !important; }
+.padding-bl { padding-bottom: 20px !important; }
+
+.margin-bn { margin-bottom: 0 !important; }
+.margin-bs { margin-bottom: 5px !important; }
+.margin-bm { margin-bottom: 10px !important; }
+.margin-bl { margin-bottom: 20px !important; }
+
+/* Left */
+
+.padding-ln { padding-left: 0 !important; }
+.padding-ls { padding-left: 5px !important; }
+.padding-lm { padding-left: 10px !important; }
+.padding-ll { padding-left: 20px !important; }
+
+.margin-ln { margin-left: 0 !important; }
+.margin-ls { margin-left: 5px !important; }
+.margin-lm { margin-left: 10px !important; }
+.margin-ll { margin-left: 20px !important; }
+
+/* Right */
+
+.padding-rn { padding-right: 0 !important; }
+.padding-rs { padding-right: 5px !important; }
+.padding-rm { padding-right: 10px !important; }
+.padding-rl { padding-right: 20px !important; }
+
+.margin-rn { margin-right: 0 !important; }
+.margin-rs { margin-right: 5px !important; }
+.margin-rm { margin-right: 10px !important; }
+.margin-rl { margin-right: 20px !important; }
21 state.css
@@ -0,0 +1,21 @@
+/* ==========================================================================
+ States utilities
+ ========================================================================== */
+
+/**
+ * Indicate that interaction will result in an action.
+ *
+ * Commonly toggled via JavaScript.
+ */
+
+.is-actionable {
+ cursor: pointer;
+}
+
+.is-draggable {
+ cursor: move;
+}
+
+.is-disabled {
+ cursor: default;
+}
53 text.css
@@ -0,0 +1,53 @@
+/* ==========================================================================
+ Text utilities
+ ========================================================================== */
+
+/**
+ * Text truncation
+ *
+ * Prevent text from wrapping onto multiple lines, and truncate with an
+ * ellipsis.
+ *
+ * 1. Ensure that the node has a maximum width after which truncation can
+ * occur.
+ * 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor
+ * nodes.
+ */
+
+.text-truncate {
+ max-width: 100%; /* 1 */
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ word-wrap: normal; /* 2 */
+}
+
+/**
+ * Word breaking
+ *
+ * Break strings when their length exceeds the width of their container.
+ */
+
+.text-break {
+ word-break: break-all;
+ word-break: break-word;
+ word-wrap: break-word;
+}
+
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Horizontal text alignment
+ */
+
+.text-center {
+ text-align: center;
+}
+
+.text-left {
+ text-align: left;
+}
+
+.text-right {
+ text-align: right;
+}

0 comments on commit 252676b

Please sign in to comment.
Something went wrong with that request. Please try again.