illusion 2.0.0 → 2.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: cca82603eaa91891f551258fac1dc87371750e78
-  data.tar.gz: f8451921806f3364d7599440aca4bf4064077651
+  metadata.gz: 56c1253b2bd38fff4237e79487644c7debf0493e
+  data.tar.gz: 0001b835d74e40d0d1eac0201f36f9e8a731902a
 SHA512:
-  metadata.gz: f2c1edd093916c3feaf59a9bbab38167183fff866b5c7dfa5ee9bb9ea6b5ab23f5efb9cfe06f4347b19f77bf7817d9623cf968bfbbb931b13559785b586f52d2
-  data.tar.gz: fbb8222884a0599d0ee38f78b06bff473465e473afcee28be25371115e0408c20082ab0d8e0abdcc0989b592a369b8e6a308761c37615a0cbfffdb7bf2771a3f
+  metadata.gz: be1c2973844c96c16248d30a60c52be2cb7a0d7c805d83290d5bcfd57fe0281dc6c3c4a434772c133ce4969478f373b2343489ec965d0d632c4ce80d1ff6c15e
+  data.tar.gz: c3bebb3bc449e5b00b39741ad53ebf3e73feb0c03b397e1f25127ca6e6b821b6b72bbd23405ad5794236452045beca5d81e126af55d50167c9641fd6af46899c

data/sass/_illusion.scss

@@ -4,6 +4,7 @@
 @import "illusion/placeholders/placeholders";
 
 @import "illusion/setup/boxsizing";
+@import "illusion/setup/image";
 
 @import "illusion/variables/variables";
 

data/sass/illusion/molecules/_media-object.scss

@@ -0,0 +1,57 @@
+/**
+ * Media object
+ *
+ * @group molecules
+ */
+.media,
+.media_responsive {
+  @extend %clearfix;
+}
+
+// Media behaviour
+@mixin media__visual {
+  float: left;
+  margin-right: 1em;
+
+  &--right {
+    float: right;
+    margin-right: 0;
+    margin-left: 1em;
+  }
+
+  img {
+    display: block;
+  }
+}
+
+.media {
+  .media__visual {
+    @include media__visual;
+  }
+
+  &_responsive {
+    .media__visual,
+    .media__visual--right {
+      margin-left: auto;
+      margin-right: auto;
+      margin-bottom: 1em;
+      text-align: center;
+
+      img {
+        display: inline-block;
+      }
+    }
+
+    @media screen and (min-width: $alpha) {
+      .media__visual {
+        @include media__visual;
+      }
+    }
+  }
+}
+
+.media__body {
+  overflow: hidden;
+  _overflow: visible;
+  zoom: 1;
+}

data/sass/illusion/placeholders/_placeholders.scss

@@ -14,4 +14,17 @@
   &:after {
     clear: both;
   }
+}
+
+/**
+ * Placeholder you can extend on for resetting elements
+ *
+ * @group placeholders
+ */
+%reset {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border: none;
+  background: transparent;
 }

data/sass/illusion/setup/_boxsizing.scss

@@ -3,7 +3,7 @@
  *
  * @group setup
  */
-* {
+*, *:before, *:after {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

data/sass/illusion/setup/_image.scss

@@ -0,0 +1,4 @@
+img {
+  max-width: 100%;
+  height: auto;
+}

data/sass/illusion/variables/_variables.scss

@@ -1,51 +1,100 @@
+/**
+ * represents 399px based on a 16px body font size
+ *
+ * @group Breakpoint
+ */
+$alpha--min: 24.9375em;
+
 /**
  * represents 400px based on a 16px body font size
  *
  * @group Breakpoint
  */
-$breakpoint-alpha:      25em;
+$alpha: 25em;
+
+/**
+ * represents 599px based on a 16px body font size
+ *
+ * @group Breakpoint
+ */
+$beta--min: 37.4375em;
 
 /**
  * represents 600px based on a 16px body font size
  *
  * @group Breakpoint
  */
-$breakpoint-beta:       37.5em;
+$beta: 37.5em;
+
+/**
+ * represents 767px based on a 16px body font size
+ *
+ * @group Breakpoint
+ */
+$charlie--min: 47.9375em;
 
 /**
  * represents 768px based on a 16px body font size
  *
  * @group Breakpoint
  */
-$breakpoint-charlie:    48em;
+$charlie: 48em;
+
+/**
+ * represents 1023px based on a 16px body font size
+ *
+ * @group Breakpoint
+ */
+$delta--min: 63.9375em;
 
 /**
  * represents 1024px based on a 16px body font size
  *
  * @group Breakpoint
  */
-$breakpoint-delta:      64em;
+$delta: 64em;
+
+/**
+ * represents 1199px based on a 16px body font size
+ *
+ * @group Breakpoint
+ */
+$echo--min: 74.9375em;
 
 /**
  * represents 1200px based on a 16px body font size
  *
  * @group Breakpoint
  */
-$breakpoint-echo:       75em;
+$echo: 75em;
+
+/**
+ * represents 1439px based on a 16px body font size
+ *
+ * @group Breakpoint
+ */
+$foxtrot--min: 89.9375em;
 
 /**
  * represents 1440px based on a 16px body font size
  *
  * @group Breakpoint
  */
-$breakpoint-foxtrot:    90em;
+$foxtrot: 90em;
+
+/**
+ * represents 1599px based on a 16px body font size
+ *
+ * @group Breakpoint
+ */
+$golf--min: 99.9375em;
 
 /**
  * represents 1600px based on a 16px body font size
  *
  * @group Breakpoint
  */
-$breakpoint-golf:       100em;
+$golf: 100em;
 
 /**
  * The base font size for your project
@@ -59,4 +108,12 @@ $base-font-size:        16px;
  *
  * @group setup
  */
-$base-line-height:      1.5em;
+$base-line-height:      1.5em;
+
+
+/**
+ * A standard 1.5em spacing
+ *
+ * @group setup
+ */
+$base-spacing:      1.5em;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: illusion
 version: !ruby/object:Gem::Version
-  version: 2.0.0
+  version: 2.1.0
 platform: ruby
 authors:
 - Tom Janssens
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-09-18 00:00:00.000000000 Z
+date: 2014-10-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -136,8 +136,10 @@ files:
 - sass/_illusion.scss
 - sass/illusion/mixins/_basics.scss
 - sass/illusion/mixins/_breakpoint.scss
+- sass/illusion/molecules/_media-object.scss
 - sass/illusion/placeholders/_placeholders.scss
 - sass/illusion/setup/_boxsizing.scss
+- sass/illusion/setup/_image.scss
 - sass/illusion/variables/_variables.scss
 - sass/illusion/vendor/_normalize.scss
 - sass/illusion/vendor/_responsivemenu.scss