compass-inuit 4.3.2 → 4.3.3

data/stylesheets/_compass-inuit.scss

@@ -2,50 +2,50 @@
     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 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.
- *
+ * 
  * Thank you for choosing inuit.css. May your floats remain cleared.
  */
 
@@ -60,13 +60,13 @@
  * 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..........
@@ -78,7 +78,7 @@
  * IMAGES..............
  * TABLES..............
  * FORMS...............
- *
+ * 
  * GRIDS...............Fluid, proportional and nestable grids
  * FLEXBOX.............Crudely emulate flexbox
  * COLUMNS.............CSS3 columns
@@ -87,6 +87,7 @@
  * 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
@@ -102,7 +103,7 @@
  * 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
@@ -124,9 +125,9 @@
  * 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.
  */

data/stylesheets/partials/_objects.scss

@@ -14,6 +14,7 @@
 @import "partials/objects/island";
 @import "partials/objects/link-complex";
 @import "partials/objects/lozenges";
+@import "partials/objects/marginalia";
 @import "partials/objects/matrix";
 @import "partials/objects/media";
 @import "partials/objects/nav";

data/stylesheets/partials/base/_images.scss

@@ -1,10 +1,53 @@
 /*------------------------------------*\
     $IMAGES
 \*------------------------------------*/
+/**
+ * Demo: jsfiddle.net/inuitcss/yMtur
+ */
 img{
     max-width:100%;
     height:auto;
 }
+
+
+/**
+ * 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.
+ */
+.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;
-}
+}

data/stylesheets/partials/objects/_marginalia.scss

@@ -0,0 +1,48 @@
+/*------------------------------------*\
+    $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;
+    }
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: compass-inuit
 version: !ruby/object:Gem::Version
-  version: 4.3.2
+  version: 4.3.3
   prerelease: 
 platform: ruby
 authors:
@@ -91,6 +91,7 @@ files:
 - stylesheets/partials/objects/_island.scss
 - stylesheets/partials/objects/_link-complex.scss
 - stylesheets/partials/objects/_lozenges.scss
+- stylesheets/partials/objects/_marginalia.scss
 - stylesheets/partials/objects/_matrix.scss
 - stylesheets/partials/objects/_media.scss
 - stylesheets/partials/objects/_nav.scss