rapido-css 0.0.3 → 0.0.4

data/stylesheets/components/_grids.scss

@@ -0,0 +1,86 @@
+/* ====================================================================================================================
+
+Grids
+
+Grids usually are defined directly in the scss/sass files using the `columns` mixin.
+This is the best solution and keep the html free of classes that one day may be changed requiring more work
+that editing the stylesheet file and recompiling.
+
+Sometimes is easier to add a class to the html for quick prototiping, in this case there are available several classes
+just for that.
+
+In this example the columns width is 3 on desktop, 6 on tablet and 12 on smartphone.
+
+Markup:
+<div class="desk-3 lap-6 palm-12">1</div>
+<div class="desk-3 lap-6 palm-12">2</div>
+<div class="desk-3 lap-6 palm-12">3</div>
+<div class="desk-3 lap-6 palm-12">4</div>
+<div class="desk-3 lap-6 palm-12">5</div>
+<div class="desk-3 lap-6 palm-12">6</div>
+<div class="desk-3 lap-6 palm-12">7</div>
+<div class="desk-3 lap-6 palm-12">8</div>
+
+Styleguide 9
+
+==================================================================================================================== */
+
+$media-queries: palm, lap, portable, lap-and-up, desk;
+
+@if $grids {
+	@each $device in $media-queries {
+
+		$i: $total-columns + 1;
+
+		@include media($device) {
+
+			@while $i > 0 {
+
+				$nth: $total-columns / $i;
+
+				.#{$device}-#{$i} {
+					@include span-columns($i);
+				}
+
+				[class*="#{$device}-#{$i}"]:nth-child(#{$nth}n) {
+					@include omega()
+				}
+
+				$i: $i - 1;
+
+			}
+		}
+	}
+}
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Show and Hide
+
+There're also available some helper classes:
+
+* **Hide element**: Used to hide an element at a breackpoint
+	* `.palm-hide`
+	* `.lap-hide`
+	* `.portable-hide`
+	* `.lap-and-up-hide`
+	* `.desk-hide`
+* **Show element**: Used to show an element at a breackpoint
+	* `.palm-show`
+	* `.lap-show`
+	* `.portable-show`
+	* `.lap-and-up-show`
+	* `.desk-show`
+
+Styleguide 9.1
+
+-------------------------------------------------------------------------------------------------------------------- */
+
+@if $grids-helpers {
+	@each $device in $media-queries {
+		@include media($device) {
+			.#{$device}-hide { display: none !important; }
+			.#{$device}-show { display: block !important; }
+		}
+	}
+}

data/stylesheets/components/_labels.scss

@@ -1,6 +1,16 @@
-// ====================================================================================================================
-// BADGE & PILLS
-// ====================================================================================================================
+/* ====================================================================================================================
+
+Badge & Pills
+
+Lables are used to highlight a text; `badge` have small rounded corners and `pill` have full rounded corners.
+
+Markup:
+<span class="badge">Badge Label</span>
+<span class="pill">Pill label</span>
+
+Styleguide 10.
+
+==================================================================================================================== */
 
 @if $labels {
 
@@ -14,7 +24,7 @@
 	}
 
 	.badge { @include border-radius($base-border-radius); }
-	.pill { @include border-radius(20px); }
+	.pill { @include border-radius(500em); }
 
 	.badge, .pill {
 		&:empty { display: none; }
@@ -31,6 +41,18 @@
 		}
 	}
 
+/* --------------------------------------------------------------------------------------------------------------------
+
+Labels used in buttons.
+
+Markup:
+<button class="btn btn--default">Action <span class="badge">2</span></button>
+<button class="btn btn--default btn--pill">Action <span class="pill">2</span></button>
+
+Styleguide 10.1
+
+-------------------------------------------------------------------------------------------------------------------- */
+
 	.btn {
 		.badge,
 		.pill {

data/stylesheets/components/_modals.scss

@@ -1,14 +1,32 @@
-// ====================================================================================================================
-// MODALS
-// ====================================================================================================================
+/* ====================================================================================================================
+
+Modals
+
+For modals is used the excellent [**fancyBox**](http://fancyapps.com/fancybox/) jQuery plugin, see full documentation for more in depth examples.
+
+Markup:
+<a class="open__modal  btn btn--default" href="#modal">Open modal</a>
+<div id="modal" class="modal">
+  <h2>Lorem ipsum dolor sit amet</h2>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+</div>
+<script type="text/javascript">
+  $(document).ready(function() {
+    $(".open__modal").fancybox();
+  });
+</script>
+
+Styleguide 11.
+
+==================================================================================================================== */
 
 .modal { display: none; }
 
 @if $modal {
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Resets
 // --------------------------------------------------------------------------------------------------------------------
+
 	%modal-reset {
 		padding: 0;
 		margin: 0;
@@ -29,13 +47,12 @@
 		@extend %modal-reset;
 	}
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Container
 // --------------------------------------------------------------------------------------------------------------------
 
 	// Overlay | 1st level
 	.fancybox-overlay {
-		@extend %modal-overlay !optional;
+		@extend %modal__overlay !optional;
 		@include position(absolute, 0px 0 0 0px);
 		display: none;
 		overflow: hidden;
@@ -53,20 +70,23 @@
 			&.fancybox-opened { z-index: ($zindex-modal + 1); }
 
 			// for Iframes
-			&.fancybox-type-iframe .fancybox-inner { -webkit-overflow-scrolling: touch; }
+			&.fancybox-type-iframe .fancybox-inner {
+				-webkit-overflow-scrolling: touch;
+			}
 
 			// for Iframes, Inline and Ajax
 			&.fancybox-type-inline,
 			&.fancybox-type-iframe,
 			&.fancybox-type-ajax {
+
 				.fancybox-close {
-					@extend %modal-close-alt !optional;
+					@extend %modal__close--alt !optional;
 				}
 			}
 
 			// Skin | 3rd Level
 			.fancybox-skin {
-				@extend %modal-skin !optional;
+				@extend %modal__skin !optional;
 				position: relative;
 				padding: 0 !important;
 
@@ -79,13 +99,15 @@
 						position: relative;
 						overflow: hidden;
 
+						> div { padding: rhythm(1); }
+
 					} // 5thst
 				} // 4th
 			} // 3rd
 		} // 2nd
 	} // 1st
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+
 // Backtground temp
 // --------------------------------------------------------------------------------------------------------------------
 
@@ -97,7 +119,6 @@
 		overflow: visible !important;
 	}
 
-
 	.fancybox-lock { overflow: hidden; }
 
 	.fancybox-lock .fancybox-overlay {
@@ -105,7 +126,7 @@
 		overflow-y: scroll;
 	}
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+
 // Content
 // --------------------------------------------------------------------------------------------------------------------
 
@@ -124,25 +145,25 @@
 	.fancybox-image {
 		max-width: 100%;
 		max-height: 100%;
-		@include border-radius($base-border-radius);
+		// @include border-radius($base-border-radius);
 	}
 
 
 	#fancybox-loading {
 		@include position(fixed, 50% 0 0 50%);
-		@extend %modal-loading !optional;
+		@extend %modal__loading !optional;
 		cursor: pointer;
 		z-index: $zindex-modal +4;
 	}
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+
 // Buttons and Navigation
 // --------------------------------------------------------------------------------------------------------------------
 
 	.fancybox-close {
-		@extend %modal-btn !optional;
-		@extend %modal-close !optional;
-		@include border-radius($base-border-radius);
+		@extend %modal__btn !optional;
+		@extend %modal__close !optional;
+		// @include border-radius($base-border-radius);
 		z-index: ($zindex-modal + 3);
 	}
 
@@ -153,14 +174,14 @@
 		z-index: ($zindex-modal + 2);
 
 		span {
-			@extend %modal-btn !optional;
-			@extend %modal-nav !optional;
+			@extend %modal__btn !optional;
+			@extend %modal__nav !optional;
 			@include position(absolute, 50% 0 0 0);
-			visibility: hidden;
+			@include opacity(0);
 			z-index: ($zindex-modal + 2);
 		}
 
-		&:hover span { visibility: visible; }
+		&:hover span { @include opacity(1); }
 
 		&.fancybox-prev {
 			left: 0;
@@ -171,10 +192,9 @@
 			right: 0;
 			span { right: 0; }
 		}
-
 	}
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+
 // Titles
 // --------------------------------------------------------------------------------------------------------------------
 
@@ -215,15 +235,45 @@
 
 	.fancybox-title-over-wrap {
 		@include position(absolute, 0 0 0px 0px);
-		@extend %modal-caption !optional;
+		@extend %modal__caption !optional;
 	}
 
-}
+	}
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Modal Buttons
+
+Markup:
+<a class="fancybox-button" rel="fancybox-button" href="http://placehold.it/600x400/c7e843/fff.jpg">
+  <img src="http://placehold.it/60x60/c7e843/fff.jpg"/>
+</a>
+<a class="fancybox-button" rel="fancybox-button" href="http://placehold.it/600x400/f6ab48/fff.jpg">
+  <img src="http://placehold.it/60x60/f6ab48/fff.jpg"/>
+</a>
+<a class="fancybox-button" rel="fancybox-button" href="http://placehold.it/600x400/3dced4/fff.jpg">
+  <img src="http://placehold.it/60x60/3dced4/fff.jpg"/>
+</a>
+<script type="text/javascript">
+  $(document).ready(function() {
+    $(".fancybox-button").fancybox({
+      prevEffect : 'none',
+      nextEffect : 'none',
+      closeBtn   : false,
+      helpers    : {
+        title    : { type : 'inside' },
+        buttons  : {}
+      }
+    });
+  });
+</script>
+
+Styleguide 11.1
+
+-------------------------------------------------------------------------------------------------------------------- */
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Modal Buttons
-// --------------------------------------------------------------------------------------------------------------------
 @if $modal-buttons {
+
 	#fancybox-buttons {
 		@include position(fixed, 0 0 0 0px);
 		width: 100%;
@@ -232,7 +282,7 @@
 		&.bottom { bottom: em(10px); }
 
 		ul {
-			@extend %modal-btnbar-size !optional;
+			@extend %modal__btnbar-size !optional;
 			display: block;
 			list-style: none;
 			margin: 0 auto;
@@ -240,9 +290,9 @@
 				float: left;
 				margin: 0;
 				a {
-					@extend %modal-btn !optional;
+					@extend %modal__btn !optional;
 					position: relative;
-					&:hover { opacity: 1; }
+					&:hover { @include opacity(1); }
 					&:after { @include position(absolute, 0px 0px 0 0px); }
 				}
 			}
@@ -250,10 +300,44 @@
 	}
 }
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Modal Thumbs
-// --------------------------------------------------------------------------------------------------------------------
+/* --------------------------------------------------------------------------------------------------------------------
+
+Modal Thumbs
+
+Markup:
+<a class="fancybox-thumb" rel="fancybox-thumb" href="http://placehold.it/600x400/c7e843/fff.jpg">
+  <img src="http://placehold.it/60x60/c7e843/fff.jpg"/>
+</a>
+<a class="fancybox-thumb" rel="fancybox-thumb" href="http://placehold.it/600x400/f6ab48/fff.jpg">
+  <img src="http://placehold.it/60x60/f6ab48/fff.jpg"/>
+</a>
+<a class="fancybox-thumb" rel="fancybox-thumb" href="http://placehold.it/600x400/3dced4/fff.jpg">
+  <img src="http://placehold.it/60x60/3dced4/fff.jpg"/>
+</a>
+<script type="text/javascript">
+  $(document).ready(function() {
+    $(".fancybox-thumb").fancybox({
+      prevEffect : 'none',
+      nextEffect : 'none',
+      helpers    : {
+        title    : {
+          type: 'outside'
+        },
+        thumbs   : {
+          width  : 60,
+          height : 60
+        }
+      }
+    });
+  });
+</script>
+
+Styleguide 11.2
+
+-------------------------------------------------------------------------------------------------------------------- */
+
 @if $modal-thumbs {
+
 	#fancybox-thumbs {
 		@include position(fixed, 0 0 0 0px);
 		overflow: hidden;
@@ -270,10 +354,10 @@
 			li {
 				float: left;
 				margin-right: em(4px);
-				opacity: 0.5;
+				@include opacity(.5);
 
-				&:hover { opacity: 0.75; }
-				&.active { opacity: 1; }
+				&:hover { @include opacity(.75);  }
+				&.active { @include opacity(1); }
 
 				a {
 					display: block;

data/stylesheets/components/_navs.scss

@@ -1,12 +1,32 @@
-// ====================================================================================================================
-// NAVS
-// ====================================================================================================================
+/* ====================================================================================================================
 
-@if $navs {
+Navs
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Base
-// --------------------------------------------------------------------------------------------------------------------
+All nav components here share the same base markup and styles through the `.nav` class.
+
+* `.nav__title`: Nav titles
+* `.current`: Button for current page
+* `.disabled`: Disabled state style
+* `.divider`: Add horizontal line as a divider
+
+Markup:
+<ul class="nav {$modifiers}">
+  <li class="nav__title">Nav header</li>
+  <li class="current"><a href="#">Home</a></li>
+  <li><a href="#">Messages</a></li>
+  <li><a href="#">Friends</a></li>
+  <li class="disabled"><a href="#">Profile</a></li>
+</ul>
+
+.nav--inline.nav--btn - Horizontal and blocky links.
+.nav--inline.nav--btn.nav--pills -  Horizontal and blocky links with rounded corners.
+.nav--vertical.nav--btn - Vertical nav layout and blocky links
+
+Styleguide 12
+
+==================================================================================================================== */
+
+@if $navs {
 
 	.nav {
 		@extend .clearfix;
@@ -18,11 +38,13 @@
 			margin-bottom: rhythm();
 			margin-left: 0;
 			padding-left: 0;
+			@extend .clearfix;
 		}
 
 		li {
+
 			> a {
-				display: block;
+				display: inline-block;
 				line-height: 1em;
 
 				&:hover, &:focus {
@@ -41,6 +63,9 @@
 		}
 	}
 
+// Nav Title
+// --------------------------------------------------------------------------------------------------------------------
+
 	.nav__title {
 		@include adjust-font-size-to($milli-size);
 		color: $gray;
@@ -51,50 +76,55 @@
 		text-transform: uppercase;
 	}
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Horizontal nav
 // --------------------------------------------------------------------------------------------------------------------
+
 	.nav--inline {
 		& > li,
-		ul > li { float: left;}
+		> ul > li { float: left;}
 	}
 
-
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Vertical nav
 // --------------------------------------------------------------------------------------------------------------------
+
 	.nav--vertical {
 		width: 100%;
+
+		li > a {
+			display: block;
+		}
 	}
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+
 // Nav with blocky links
 // --------------------------------------------------------------------------------------------------------------------
+
 	.nav--btn {
 		li {
 			> a {
 				padding: $navs-padding;
-				@extend %nav-btn;
+				@extend %nav--btn;
 
 				&:hover, &:focus {
-					@extend %nav-btn_hover;
+					@extend %nav--btn__hover;
 				}
 			}
 
-			&.active > a,
-			&.active > a:hover,
-			&.active > a:focus {
-				@extend %nav-btn_active;
+			&.current > a,
+			&.current > a:hover,
+			&.current > a:focus {
+				@extend %nav--btn__current;
 			}
 
 			// Disabled
-			&.disabled > a { @extend %nav-btn_disabled; }
+			&.disabled > a { @extend %nav--btn__disabled; }
 		}
 	}
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+
 // Nav with pills as links
 // --------------------------------------------------------------------------------------------------------------------
+
 	.nav--pills {
 		> li > a {
 			@include border-radius($base-border-radius);

data/stylesheets/components/_pager.scss

@@ -1,12 +1,23 @@
-// ====================================================================================================================
-// PAGER PAGINATION
-// ====================================================================================================================
+/* ====================================================================================================================
+
+Pager
+
+Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.
+
+By default, the pager centers links.
+
+Markup:
+<ul class="pager">
+  <li><a href="#">Previous</a></li>
+  <li><a href="#">Next</a></li>
+</ul>
+
+Styleguide 13
+
+==================================================================================================================== */
 
 @if $pager {
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Base
-// --------------------------------------------------------------------------------------------------------------------
 
 	.pager {
 		@include clearfix();
@@ -25,18 +36,34 @@
 				display: inline-block;
 				line-height: 1em;
 				padding: $pager-padding;
-				@extend %pager-btn !optional;
+				@extend %pager--btn !optional;
 			}
 
 			a:hover,
 			a:focus {
-				@extend %pager-btn_hover !optional;
+				@extend %pager--btn__hover !optional;
 			}
 			a:active {
-				@extend %pager-btn_active !optional;
+				@extend %pager--btn__active !optional;
 			}
 		}
 
+/* --------------------------------------------------------------------------------------------------------------------
+
+Alignment
+
+Alternatively, you can align each link to the sides:
+
+Markup:
+<ul class="pager">
+  <li class="previous"><a href="#">Previous</a></li>
+  <li class="next"><a href="#">Next</a></li>
+</ul>
+
+Styleguide 13.1
+
+-------------------------------------------------------------------------------------------------------------------- */
+
 		[rel="next"],
 		.next > a,
 		.next > span {
@@ -49,13 +76,31 @@
 			float: left;
 		}
 
+/* --------------------------------------------------------------------------------------------------------------------
+
+Disabled state
+
+Pager links also use the general `.disabled` utility class from the pagination.
+
+Markup:
+<ul class="pager">
+  <li class="previous disabled"><a href="#">← Older</a></li>
+  <li class="next"><a href="#">Newer →</a></li>
+</ul>
+
+Styleguide 13.2
+
+-------------------------------------------------------------------------------------------------------------------- */
+
 		.disabled > a,
 		.disabled > a:hover,
 		.disabled > a:focus,
 		.disabled > span {
 			cursor: default;
-			@extend %pager-btn_disabled !optional;
+			@extend %pager--btn__disabled !optional;
 		}
 
 	}
+
+
 }