NEW: Structure change

- Added light version, without selectors of any kind (to be imported on other files)
- Added a new folder, only with selectors.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "dryish.css",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "homepage": "https://github.com/josantana/dryish.css",
   "authors": [
     "Jo Santana <[email protected]>"

package.json

@@ -4,7 +4,7 @@
   "url": "http://josantana.github.io",
   "author": "Jo Santana",
   "copyright": "2015",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "license": "Released under the MIT license",
   "repository": {
     "type": "git",

source/dryish-light.scss

@@ -0,0 +1,19 @@
+// Dryish.css Light
+// Without selectors of any kind
+
+// Setup
+
+@import 'includes/setup';
+@import 'includes/color-palette';
+
+// Includes
+
+@import 'includes/align';
+@import 'includes/animation';
+@import 'includes/button';
+@import 'includes/loading';
+@import 'includes/media';
+@import 'includes/position';
+@import 'includes/shape';
+@import 'includes/state';
+@import 'includes/text';

source/dryish.scss

@@ -1,18 +1,33 @@
 // Dryish.css
 
+// Setup
+
 @import 'includes/setup';
 @import 'includes/color-palette';
-@import 'includes/normalize';
+@import 'selectors/normalize';
+
+// Includes
 
 @import 'includes/align';
 @import 'includes/animation';
 @import 'includes/button';
-@import 'includes/emojione';
-@import 'includes/layout';
 @import 'includes/loading';
 @import 'includes/media';
-@import 'includes/media-query';
 @import 'includes/position';
 @import 'includes/shape';
 @import 'includes/state';
 @import 'includes/text';
+
+// Selectors
+
+@import 'selectors/align';
+@import 'selectors/animation';
+@import 'selectors/button';
+@import 'selectors/emojione';
+@import 'selectors/layout';
+@import 'selectors/loading';
+@import 'selectors/media';
+@import 'selectors/media-query';
+@import 'selectors/position';
+@import 'selectors/state';
+@import 'selectors/text';

source/includes/_align.scss

@@ -1,15 +1,15 @@
 // HORIZONTAL ALIGN
 // ========================================================================== //
 
-.u-align-left {
+%align-left {
     text-align: left;
 }
 
-.u-align-center {
+%align-center {
     text-align: center;
 }
 
-.u-align-right {
+%align-right {
     text-align: right;
 }
 
@@ -19,18 +19,18 @@
 // Depends on an appropriate `display` value.
 // Utility classes for vertically aligning elements.
 
-.u-align-baseline {
+%align-baseline {
     vertical-align: baseline;
 }
 
-.u-align-bottom {
+%align-bottom {
     vertical-align: bottom;
 }
 
-.u-align-middle {
+%align-middle {
     vertical-align: middle;
 }
 
-.u-align-top {
+%align-top {
     vertical-align: top;
 }

source/includes/_animation.scss

@@ -1,33 +1,11 @@
 // SHAKE ERROR
 // ========================================================================== //
 
-@keyframes negative {
+@keyframes negative-shake {
     0% { transform: translateX(0); }
     12.5% { transform: translateX(-6px) rotateY(-5deg); }
     37.5% { transform: translateX(5px) rotateY(4deg); }
     62.5% { transform: translateX(-3px) rotateY(-2deg); }
     87.5% { transform: translateX(2px) rotateY(1deg); }
     100% { transform: translateX(0); }
 }
-
-.shake-error {
-    animation: negative 400ms ease-in-out;
-}
-
-// SMOOTH FADE IN/OUT
-// ========================================================================== //
-
-[class*="u-fade-"] {
-    transition: visibility 0s linear .25s, opacity .25s linear;
-}
-
-.u-fade-out {
-    opacity: 0;
-    visibility: hidden;
-}
-
-.u-fade-in {
-    opacity: 1;
-    transition-delay: 0;
-    visibility: visible;
-}

source/includes/_button.scss

@@ -46,7 +46,3 @@
         }
     }
 }
-
-.flat-button {
-    @extend %flat-button;
-}

source/includes/_loading.scss

@@ -1,27 +1,7 @@
 // Loading
 // ========================================================================== //
 
-@keyframes scale {
+@keyframes scale-in-out {
     0%, 50%, 100% { transform: scale(.35); }
     25% { transform: scale(.75); }
 }
-
-.loading-dots {
-    .dot {
-        animation: scale 1s ease-in-out infinite;
-        background-color: color($blue-grey, 50);
-        border-radius: 32px;
-        display: block;
-        height: 32px;
-        margin: 3px;
-        width: 32px;
-
-        &:nth-child(2) {
-            animation-delay: -.9s;
-        }
-
-        &:nth-child(3) {
-            animation-delay: -.8s;
-        }
-    }
-}

source/includes/_media.scss

@@ -9,8 +9,6 @@
     width: 100%;
 }
 
-.u-responsive-image { @extend %responsive-image; }
-
 // VIDEO
 // ========================================================================== //
 
@@ -49,5 +47,3 @@
         width: 100%;
     }
 }
-
-.u-responsive-video { @extend %responsive-video; }

source/includes/_position.scss

@@ -28,11 +28,7 @@
     top: 0;
 }
 
-.fit { @extend %fit; }
-
 %fullfill {
     height: 100vh;
     margin: 0;
 }
-
-.fullfill { @extend %fullfill; }

source/includes/_state.scss

@@ -15,10 +15,6 @@
     cursor: move;
 }
 
-.is-action { @extend %is-action; }
-.is-disabled { @extend %is-disabled; }
-.is-draggable { @extend %is-draggable; }
-
 // With this, the element will ignore user interaction
 
 %ignore-interaction {
@@ -33,48 +29,13 @@
     visibility: hidden !important;
 }
 
-.is-hidden { @extend %is-hidden; }
-
-// Completely remove from the flow but leave available to screen readers
-
-.is-hidden-visually {
-    border: 0;
-    clip: rect(1px, 1px, 1px, 1px);
-    height: 1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-}
-
 // Display a hidden-by-default element.
 
 %is-shown {
     display: block !important;
     visibility: visible !important;
 }
 
-.is-shown { @extend %is-shown; }
-
-table {
-    &.is-shown {
-        display: table !important;
-    }
-}
-
-tr {
-    &.is-shown {
-        display: table-row !important;
-    }
-}
-
-td,
-th {
-    &.is-shown {
-        display: table-cell !important;
-    }
-}
-
 // Control visibility without affecting flow.
 
 %is-visible {
@@ -84,6 +45,3 @@ th {
 %is-invisible {
     visibility: hidden;
 }
-
-.is-visible { @extend %is-visible; }
-.is-invisible { @extend %is-invisible; }

source/includes/_text.scss

@@ -28,8 +28,6 @@
     text-shadow: none;
 }
 
-.u-hidden-text { @extend %hidden-text; }
-
 // Smooth font rendering
 
 %smooth-font {
@@ -44,39 +42,6 @@
     font-family: Monaco, Andale Mono, Courier New, monospace;
 }
 
-pre,
-code,
-.code-font {
-    @extend %code-font;
-}
-
-// Word breaking
-// Break strings when their length exceeds the width of their container.
-
-.u-text-break {
-    word-wrap: break-word;
-}
-
-// Horizontal text alignment
-
-.u-text-center {
-    text-align: center;
-}
-
-.u-text-left {
-    text-align: left;
-}
-
-.u-text-right {
-    text-align: right;
-}
-
-// Inherit the ancestor's text color.
-
-.u-text-inherit-color {
-    color: inherit;
-}
-
 // Enables font kerning in all browsers.
 // http://blog.typekit.com/2014/02/05/kerning-on-the-web/
 // 1. Chrome (not Windows), Firefox, Safari 6+, iOS, Android
@@ -88,24 +53,3 @@ code,
     font-kerning: normal; // 3
     text-rendering: optimizeLegibility; // 1
 }
-
-.u-text-kern { @extend %text-kern; }
-
-// Prevent whitespace wrapping
-
-.u-text-nowrap {
-    white-space: nowrap;
-}
-
-// 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.
-
-.u-text-truncate {
-    max-width: 100%; // 1
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    word-wrap: normal; // 2
-}

source/selectors/_align.scss

@@ -0,0 +1,36 @@
+// HORIZONTAL ALIGN
+// ========================================================================== //
+
+.u-align-left {
+    @extend %align-left;
+}
+
+.u-align-center {
+    @extend %align-center;
+}
+
+.u-align-right {
+    @extend %align-right;
+}
+
+// VERTICAL ALIGN
+// ========================================================================== //
+
+// Depends on an appropriate `display` value.
+// Utility classes for vertically aligning elements.
+
+.u-align-baseline {
+    @extend %align-baseline;
+}
+
+.u-align-bottom {
+    @extend %align-bottom;
+}
+
+.u-align-middle {
+    @extend %align-middle;
+}
+
+.u-align-top {
+    @extend %align-top;
+}