rapido-css 0.1.4 → 0.1.5

data/README.md

@@ -1,10 +1,9 @@
 # Rapido Framework
 
-An easy and quick [**Sass**](http://sass-lang.com/) + [**Compass**](http://compass-style.org/) + [**Susy**](http://susy.oddbird.net/) + [**OOCSS**](http://oocss.org/) + [**BEM**](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) prototyping framework based on Bootstrap without all the default styles.
+An easy and quick [**Sass**](http://sass-lang.com/) + [**Compass**](http://compass-style.org/) + [**Susy**](http://susy.oddbird.net/) + [**OOCSS**](http://oocss.org/) + [**BEM**](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) prototyping framework.
 
 ## Features
 
-* Most of the modules from Boostrap (some heavily modified and streamlined)
 * **CSS architecture and styling completely separated**, creating and switching complex themes is much easier
 * **Every unused component can be disabled** to slim the final css
 * All sizes are in **em** and respect the **vertical rhythm** of the page
@@ -20,29 +19,12 @@ A complete documentation of what is currently available can be found here: [Rapi
 
 ## Credits
 
-* [Bootstrap](https://github.com/twitter/bootstrap)
-* [Twitter Bootstrap - For Compass](https://github.com/vwall/compass-twitter-bootstrap)
-* [Susy [a Compass plugin]](https://github.com/ericam/susy)
+* [Compass](https://github.com/chriseppstein/compass)
+* [Susy](https://github.com/ericam/susy)
 * [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate)
 * [Inuit.css](https://github.com/csswizardry/inuit.css)
 
 
 ## License
 
-This code is made available under the same license as Twitter Bootstrap.
-
---
-
-Copyright 2013 [Raffaele Rasini](http://twitter.com/raffaele)
-
-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://www.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.
+MIT License (MIT)

data/stylesheets/_functions.scss

@@ -4,7 +4,7 @@ Functions
 
 For 99% of the framework I used Compass' and Susy's functions but I've made some for covering edge cases.
 
-Styleguide 24
+Styleguide 25
 
 */
 
@@ -19,7 +19,7 @@ There are lots of easing options available, from the basic ``linear`` or ``ease-
 * **easeOut**: easeOutQuad, easeOutCubic, easeOutQuart, easeOutQuint, easeOutSine, easeOutExpo, easeOutCirc, easeOutBack
 * **easeInOut**: easeInOutQuad, easeInOutCubic, easeInOutQuart, easeInOutQuint, easeInOutSine, easeInOutExpo, easeInOutCirc, easeInOutBack
 
-Styleguide 20.2
+Styleguide 21.2
 
 */
 
@@ -76,7 +76,7 @@ Become:
 
     left: -10em
 
-Styleguide 24.2
+Styleguide 25.2
 
 */
 
@@ -99,7 +99,7 @@ Become:
 
     margin-left: -1.42857em;
 
-Styleguide 24.3
+Styleguide 25.3
 
 */
 
@@ -115,7 +115,7 @@ space_neg()
 Similar to `rhythm_neg()` but for Susy's `space()` function, more info:
 [Susy Reference](http://susy.oddbird.net/guides/reference/#ref-space).
 
-Styleguide 24.4
+Styleguide 25.4
 
 */
 
@@ -130,7 +130,7 @@ strip_units()
 Remove eny type of unit from a number, more info:
 [StackOverflow](http://stackoverflow.com/questions/12328259/how-do-you-strip-the-unit-from-any-number-in-sass).
 
-Styleguide 24.5
+Styleguide 25.5
 
 */
 

data/stylesheets/components/_captions.scss

@@ -44,11 +44,13 @@ Styleguide 5
     position: relative;
     float: left;
     overflow: hidden;
+    @include perspective(1000);
 
     &:nth-child(2n) {
       margin-right: 0;
     }
     img {
+      display: block;
       transition: $caption-animations-duration;
     }
     figcaption {
@@ -56,6 +58,7 @@ Styleguide 5
       position: absolute;
       transition: $caption-animations-duration;
       width: 100%;
+      @include backface-visibility(hidden);
 
       * {
         margin-bottom: 0;
@@ -250,21 +253,17 @@ Styleguide 5
         left: 0;
         width: 100%;
         height: 100%;
-        @include perspective(1300) ;
         @include rotateY(180deg);
-        @include backface-visibility(hidden);
       }
       img {
-        @include perspective(1300);
+
         transition: $caption-animations-duration;
       }
       &:hover, &:active {
         figcaption {
-          @include perspective(1300) ;
           @include rotateY(0deg);
         }
         img {
-          @include perspective(1300) ;
           @include rotateY(-180deg);
         }
       }
@@ -277,21 +276,17 @@ Styleguide 5
         left: 0;
         width: 100%;
         height: 100%;
-        @include perspective(1300) ;
         @include rotateY(180deg);
-        @include backface-visibility(hidden);
       }
       img {
-        @include perspective(1300);
         transition: $caption-animations-duration;
       }
       &:hover, &:active {
         figcaption {
-          @include perspective(1300) ;
+
           @include rotateY(360deg);
         }
         img {
-          @include perspective(1300) ;
           @include rotateY(180deg);
         }
       }
@@ -304,21 +299,17 @@ Styleguide 5
         left: 0;
         width: 100%;
         height: 100%;
-        @include perspective(1300);
         @include rotateX(180deg);
-        @include backface-visibility(hidden);
       }
       img {
-        @include perspective(1300);
+
         transition: $caption-animations-duration;
       }
       &:hover, &:active {
         figcaption {
-          @include perspective(1300);
           @include rotateX(360deg);
         }
         img {
-          @include perspective(1300) ;
           @include rotateX(180deg);
         }
       }
@@ -331,21 +322,17 @@ Styleguide 5
         left: 0;
         width: 100%;
         height: 100%;
-        @include perspective(1300);
         @include rotateX(180deg);
-        @include backface-visibility(hidden);
       }
       img {
-        @include perspective(1300);
+
         transition: $caption-animations-duration;
       }
       &:hover, &:active {
         figcaption {
-          @include perspective(1300);
           @include rotateX(0deg);
         }
         img {
-          @include perspective(1300);
           @include rotateX(-180deg);;
         }
       }

data/stylesheets/components/_dropdowns.scss

@@ -6,9 +6,7 @@ Toggleable, contextual menu for displaying lists of links. Made interactive with
 
 Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within `.dropdown`. Then just create the menu.
 
-Script required:
-
-    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap-dropdown.min.js"></script>
+Script required: *rapido.js*.
 
 Markup:
 <div class="dropdown">
@@ -37,8 +35,15 @@ Markup:
     <li><a tabindex="-1" href="#">Separated link</a></li>
   </ul>
 </div>
+<script>$('.dropdown').rapido_Dropdown();</script>
+
+Include this js after including rapido.js.
+
+    $('.dropdown').rapido_Dropdown();
 
+**Options** (with defaul values):
 
+    event: click (click, hover)
 
 Styleguide 7
 

data/stylesheets/components/_forms.scss

@@ -60,16 +60,19 @@ legend {
     }
 }
 
-label,
 input,
 button,
 select,
 textarea {
-    line-height: 1em;
     font-family: $base-font-family;
     @include border-radius($base-border-radius);
 }
 
+label {
+    line-height: $input-height/2;
+    display: block;
+}
+
 .input-text,
 textarea,
 input[type="text"],
@@ -103,8 +106,6 @@ select {
     display: inline-block;
 }
 
-label { display: block; }
-
 input,
 textarea {
     width: 240px;
@@ -142,10 +143,7 @@ select[size] {
     height: auto;
 }
 
-input,
-textarea {
-    @include placeholder($placeholder-color);
-}
+@include placeholder($placeholder-color);
 
 input[readonly],
 select[readonly],
@@ -263,11 +261,12 @@ with class `.form__select`.
 Markup:
 <span class="form__select">
   <select>
-    <option>1</option>
-    <option>2</option>
-    <option>3</option>
-    <option>4</option>
-    <option>5</option>
+    <option selected="selected">Select Country</option>
+    <option>United States</option>
+    <option>United Kingdom</option>
+    <option>Italy</option>
+    <option>France</option>
+    <option>Germany</option>
   </select>
 </span>
 
@@ -278,6 +277,7 @@ Styleguide 8.3
 .form__select {
     @extend %caret !optional;
     @include border-radius(3px);
+    @include translateY($input-border);
     border-style: solid;
     border-width: $input-border;
     cursor: pointer;
@@ -299,6 +299,9 @@ Styleguide 8.3
         width:100%;
         z-index: 3;
         line-height: 1em;
+        text-indent: 1px;
+        text-overflow: '';
+
     }
 
     &:after {
@@ -394,6 +397,11 @@ Markup:
   <input type="text">
   <span class="form__addon">.00</span>
 </div>
+<div class="form__controls form__controls--multi">
+  <span class="form__addon"><input type="checkbox" value=""></span>
+  <input type="text">
+  <button type="submit" class="btn btn--default form__addon">Search</button>
+</div>
 
 Styleguide 8.6
 
@@ -481,13 +489,27 @@ Markup:
   <div class="form__group">
     <label class="form__label">Label</label>
     <div class="form__controls">
-      <input type="text" placeholder="Type something…">
+      <label class="form__radio inline">
+        <input type="radio" value="option1" checked> Option one
+      </label>
+      <label class="form__radio inline">
+        <input type="radio" value="option1" checked> Option two
+      </label>
     </div>
   </div>
   <div class="form__group">
     <label class="form__label">Label</label>
     <div class="form__controls">
-      <input type="text" placeholder="Type something…">
+      <span class="form__select">
+        <select>
+          <option selected="selected">Select Country</option>
+          <option>United States</option>
+          <option>United Kingdom</option>
+          <option>Italy</option>
+          <option>France</option>
+          <option>Germany</option>
+        </select>
+      </span>
     </div>
   </div>
   <div class="form__actions">
@@ -573,14 +595,30 @@ The inline layout can also be used width a samplified markup.
 Markup:
 <form class="form--inline">
   <label class="form__label">Label</label>
-  <input type="text" placeholder="Type something…">
+    <input type="text" placeholder="Type something…">
   <label class="form__label">Label</label>
-  <input type="text" placeholder="Type something…">
+    <label class="form__radio inline">
+      <input type="radio" value="option1" checked> Option one
+    </label>
+    <label class="form__radio inline">
+      <input type="radio" value="option1" checked> Option two
+    </label>
   <label class="form__label">Label</label>
-  <input type="text" placeholder="Type something…">
+    <span class="form__select">
+      <select>
+        <option selected="selected">Select Country</option>
+        <option>United States</option>
+        <option>United Kingdom</option>
+        <option>Italy</option>
+        <option>France</option>
+        <option>Germany</option>
+      </select>
+    </span>
   <button type="submit" class="btn btn--default ">Save changes</button>
 </form>
 
+</form>
+
 Styleguide 8.8.1
 
 */
@@ -591,23 +629,49 @@ Styleguide 8.8.1
 
     .form--inline {
 
-        * {
-            float: none;
-            display: inline-block;
-            vertical-align: middle;
-            margin: 0;
-            padding: 0;
-            width: auto;
+        > * {
+          margin: 0 0 0 em(10px);
+        }
+
+        .form__label {
+          display: inline-block;
+          padding-right: 1em
+        }
+
+        .input-text,
+        .form__select,
+        textarea,
+        input[type="text"],
+        input[type="password"],
+        input[type="datetime"],
+        input[type="datetime-local"],
+        input[type="date"],
+        input[type="month"],
+        input[type="time"],
+        input[type="week"],
+        input[type="number"],
+        input[type="email"],
+        input[type="url"],
+        input[type="search"],
+        input[type="tel"],
+        input[type="color"] {
+          width: auto;
+        }
+
+        .form__select {
+          padding-right: 1.5em;
         }
 
-        > * + *,
-        > * > * + *,
         .form__group {
-            margin: 0 0 0 em(10px);
+            padding: 0;
+            display: inline-block;
         }
 
         .form__actions {
             border: 0;
+            padding: 0;
+            margin: 0;
+            display: inline-block;
         }
 
     }