Permalink
Browse files

Initial public release

0 parents commit 252676b4eb4e26b9baf75fe6c071b38c50230391 @necolas necolas committed Oct 1, 2012
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
@@ -0,0 +1,5 @@
+=== HEAD
+
+=== 0.1.0 (30 September, 2012)
+
+* Public release.
@@ -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.
@@ -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+
@@ -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"
+ }]
+}
@@ -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;
+}
@@ -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;
+}
Oops, something went wrong.

0 comments on commit 252676b

Please sign in to comment.