rapido-css 0.0.3 → 0.0.4

data/stylesheets/components/_type.scss

@@ -1,12 +1,18 @@
-// ====================================================================================================================
-// SCAFFOLDING
-// ====================================================================================================================
+/* ====================================================================================================================
+
+Type
+
+Styleguide 19
+
+==================================================================================================================== */
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Base
 // --------------------------------------------------------------------------------------------------------------------
 
-*, *:before, *:after {@include box-sizing(border-box); outline: none;}
+*, *:before, *:after {
+	@include box-sizing(border-box);
+	outline: none;
+}
 
 html {
 	@if $responsive-font-size {
@@ -27,67 +33,70 @@ body {
 	margin: 0;
 	font-family: $base-font-family;
 	color: $text-color;
-
 }
 
 img {max-width: 100%;}
 
 a, button, textarea, input { outline: none; }
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Links
 // --------------------------------------------------------------------------------------------------------------------
+
 a {
 	color: $link-color;
 	text-decoration: none;
-}
-a:hover,
-a:focus {
-	color: $link-color-hover;
-	text-decoration: none;
+
+	&:hover,
+	&:focus {
+		color: $link-color-hover;
+		text-decoration: none;
+	}
+
 }
 
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Body text
-// --------------------------------------------------------------------------------------------------------------------
+/* --------------------------------------------------------------------------------------------------------------------
+
+Body text
 
-p 					{ margin: 0 0 rhythm(1);}
+Markup:
+<p class="lead">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus.</p>
+<small><p>Tight pants next level keffiyeh. Photo booth beard raw denim letterpress vegan messenger bag stumptown.</small>
 
-.lead 				{ @include adjust-font-size-to($h4-size); }
+Styleguide 19.1
 
-.muted 				{ color: $gray; }
+-------------------------------------------------------------------------------------------------------------------- */
 
-.pull-left 			{ float: left; }
-.pull-right 		{ float: right; }
-.clearfix 			{ @include clearfix; }
 
+p           { margin: 0 0 rhythm(1);}
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Emphasis & misc
 // --------------------------------------------------------------------------------------------------------------------
 
-small   			{ @include adjust-font-size-to($milli-size); }
+small         { @include adjust-font-size-to($milli-size); }
 
-strong  			{ font-weight: bold; }
-em      			{ font-style: italic; }
-cite    			{ font-style: normal; }
+strong        { font-weight: bold; }
+em            { font-style: italic; }
+cite          { font-style: normal; }
 
-.text-left          { text-align: left; }
-.text-right         { text-align: right; }
-.text-center        { text-align: center; }
+/* --------------------------------------------------------------------------------------------------------------------
 
+Headings
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Headings
-// --------------------------------------------------------------------------------------------------------------------
+Markup:
+<h1>h1. This is a very large header.</h1>
+<h2>h2. This is a large header.</h2>
+<h3>h3. This is a medium header.</h3>
+<h4>h4. This is a moderate header.</h4>
+<h5>h5. This is a small header. h1.</h5>
+<h6>h6. This is a tiny header. h1.</h6>
+
+Styleguide 19.2
+
+-------------------------------------------------------------------------------------------------------------------- */
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+h1, h2, h3, h4, h5, h6 {
 	margin: 0 0 rhythm();
 	text-rendering: optimizelegibility;
 	font-family: $titles-font-family;
@@ -100,46 +109,59 @@ h6 {
 }
 
 h1, .h1 {
-	@include adjust-font-size-to($h1-size);
+	@include adjust-font-size-to($h1-size, $h1-line-height);
 	@extend %h1 !optional;
 }
 
 h2, .h2 {
-	@include adjust-font-size-to($h2-size);
+	@include adjust-font-size-to($h2-size, $h2-line-height);
 	@extend %h2 !optional;
 }
 
 h3, .h3 {
-	@include adjust-font-size-to($h3-size);
+	@include adjust-font-size-to($h3-size, $h3-line-height);
 	@extend %h3 !optional;
 }
 
 h4, .h4 {
-	@include adjust-font-size-to($h4-size);
+	@include adjust-font-size-to($h4-size, $h4-line-height);
 	@extend %h4 !optional;
 }
 
 h5, .h5 {
-	@include adjust-font-size-to($h5-size);
+	@include adjust-font-size-to($h5-size, $h5-line-height);
 	@extend %h5 !optional;
 }
 
 h6, .h6 {
-	@include adjust-font-size-to($h6-size);
+	@include adjust-font-size-to($h6-size, $h6-line-height);
 	@extend %h6 !optional;
 }
 
-
-
 h1 small { @include adjust-font-size-to($h3-size); }
 h2 small { @include adjust-font-size-to($h4-size); }
 h3 small { @include adjust-font-size-to($h5-size); }
 h4 small { @include adjust-font-size-to($h6-size); }
 
+/* --------------------------------------------------------------------------------------------------------------------
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Lists
-// --------------------------------------------------------------------------------------------------------------------
+Lists
+
+Markup:
+<ul>
+  <li>Unordered list item</li>
+  <li>Unordered list item</li>
+  <li>Unordered list item</li>
+</ul>
+<ol>
+  <li>Ordered list item</li>
+  <li>Ordered list item</li>
+  <li>Ordered list item</li>
+</ol>
+
+Styleguide 19.3
+
+-------------------------------------------------------------------------------------------------------------------- */
 
 .list_style_none, .list-style-none {
 	padding-left: 0;
@@ -148,18 +170,18 @@ h4 small { @include adjust-font-size-to($h6-size); }
 }
 
 // Unordered and Ordered lists
-// --------------------------------------------------------------------------------------------------------------------
+
 ul, ol {
 	padding: 0;
 	margin: 0 0 rhythm(1) 25px;
 }
+
 ul ul,
 ul ol,
 ol ol,
 ol ul {
 	margin-bottom: 0;
 }
-li {}
 
 ul.unstyled,
 ol.unstyled {
@@ -178,31 +200,61 @@ ol.inline {
 	}
 }
 
-// Description lists
-// --------------------------------------------------------------------------------------------------------------------
-dl { margin-bottom: rhythm(1); }
-dt,
-dd { line-height: rhythm(1); }
-dt { font-weight: bold; }
-dd { margin-left: rhythm(.5); }
+/* --------------------------------------------------------------------------------------------------------------------
+
+Definition lists
+
+Markup:
+<dl>
+  <dt>Rock Hammer</dt>
+  <dd>A geologist’s hammer, rock hammer, rock pick or geological pick is a hammer used for splitting and breaking rocks.</dd>
+</dl>
+
+Styleguide 19.4
+
+-------------------------------------------------------------------------------------------------------------------- */
+
+dl 		{ margin-bottom: rhythm(1); }
+dt, dd 	{ }
+dt 		{ font-weight: bold; }
+dd 		{ margin-left: 0; }
+
+/* --------------------------------------------------------------------------------------------------------------------
 
+Horizontal definition list
+
+Markup:
+<dl class="dl-horizontal">
+  <dt>Rock Hammer</dt>
+  <dd>A geologist’s hammer, rock hammer, rock pick or geological pick is a hammer used for splitting and breaking rocks.</dd>
+</dl>
+
+Styleguide 19.4.1
+
+-------------------------------------------------------------------------------------------------------------------- */
 
 .dl-horizontal {
-  @extend .clearfix;
-  dt {
-	float: left;
-	width: em($horizontal-offset) - 20;
-	clear: left;
-	text-align: right;
-	@include text-overflow();
-  }
-
-  dd { margin-left: em($horizontal-offset); }
+	@extend .clearfix;
+	dt {
+		@include text-overflow();
+		clear: left;
+		float: left;
+		text-align: right;
+		width: em($horizontal-offset) - 20;
+	}
+
+	dd { padding-left: em($horizontal-offset); }
 }
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// MISC
-// --------------------------------------------------------------------------------------------------------------------
+/* --------------------------------------------------------------------------------------------------------------------
+
+Horizontal line
+
+Markup: <hr />
+
+Styleguide 19.5
+
+-------------------------------------------------------------------------------------------------------------------- */
 
 hr {
 	margin: rhythm(1) 0;
@@ -212,6 +264,7 @@ hr {
 
 // Abbreviations and acronyms
 // --------------------------------------------------------------------------------------------------------------------
+
 abbr[title],
 abbr[data-original-title] {
 	cursor: help;
@@ -222,8 +275,20 @@ abbr.initialism {
 	text-transform: uppercase;
 }
 
-// Blockquotes
-// --------------------------------------------------------------------------------------------------------------------
+/* --------------------------------------------------------------------------------------------------------------------
+
+Blockquotes
+
+Markup:
+<blockquote>
+  <p>A geologist’s hammer, rock hammer, rock pick or geological pick is a hammer used for splitting and breaking rocks.</p>
+  <small><cite>Rock Hammer</cite></small>
+</blockquote>
+
+Styleguide 19.6
+
+-------------------------------------------------------------------------------------------------------------------- */
+
 blockquote {
 	padding: 0 0 0 rhythm(1);
 	margin: 0;
@@ -274,6 +339,7 @@ blockquote:after {
 
 // Addresses
 // --------------------------------------------------------------------------------------------------------------------
+
 address {
 	display: block;
 	margin-bottom: rhythm(1);

data/stylesheets/settings/_base.scss

@@ -1,39 +1,85 @@
-// ====================================================================================================================
-// BASE Settings
-// ====================================================================================================================
+/* ====================================================================================================================
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Debug Mode
-// --------------------------------------------------------------------------------------------------------------------
+Base Settings
 
-$debug-mode:        								false 												!default;
-$default-styles: 									true 												!default;
+Styleguide 25
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Text body size
-// --------------------------------------------------------------------------------------------------------------------
+==================================================================================================================== */
 
-$base-font-size:    								14px 												!default;
-$base-line-height:  								20px 												!default;
-$round-to-nearest-half-line: 						true 												!default;
+/* --------------------------------------------------------------------------------------------------------------------
 
-// Change text size with media query
-$responsive-font-size:    							lap-and-up $base-font-size, palm 16px				!default;
+Debug Mode
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Font families
-// --------------------------------------------------------------------------------------------------------------------
+    $debug-mode:                        false   # Enable debug mode
+    $default-styles:                    true    # Use default styles in _default-styles.scss
 
-$font-sans:        									"Helvetica Neue", Helvetica, Arial, sans-serif 		!default;
-$font-serif:       									Georgia, "Times New Roman", Times, serif 			!default;
-$font-mono:        									Monaco, Menlo, Consolas, "Courier New", monospace 	!default;
+Styleguide 25.1
 
-$base-font-family:  								$font-sans 											!default;
-$titles-font-family:  								$font-sans 											!default;
+-------------------------------------------------------------------------------------------------------------------- */
+
+$debug-mode:        					false 																!default;
+$default-styles: 						true 																!default;
+
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Text body size
+
+    $base-font-size:                    14px    # Default text size to use on body text
+    $base-line-height:                  $base-font-size * 1.5     # Default line-height
+    $round-to-nearest-half-line:        true    # Round the line height for the adjust-font-size-to mixin
+
+Change text size with media query. On media query `lap-and-up` (tablet and desktop) use the default text size,
+on `palm` (smartphone) change the base size to 16px, it will be automatically converted to percentage to mantain em proportions.
+
+    $responsive-font-size:              lap-and-up $base-font-size, palm 16px
+
+Styleguide 25.2
+
+-------------------------------------------------------------------------------------------------------------------- */
+
+$base-font-size:    					14px 																!default;
+$base-line-height:  					$base-font-size * 1.5 												!default;
+$round-to-nearest-half-line: 			true 																!default;
+
+$responsive-font-size:    				lap-and-up $base-font-size, palm 16px								!default;
+
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Font families
+
+    $font-sans:                         "Helvetica Neue", Helvetica, Arial, sans-serif
+    $font-serif:                        Georgia, "Times New Roman", Times, serif
+    $font-mono:                         Monaco, Menlo, Consolas, "Courier New", monospace
+
+    $base-font-family:                  $font-sans  # Default font family for body text
+    $titles-font-family:                $font-sans  # Default font family for titles
+
+Styleguide 25.3
+
+-------------------------------------------------------------------------------------------------------------------- */
+
+$font-sans:        						"Helvetica Neue", Helvetica, Arial, sans-serif 						!default;
+$font-serif:       						Georgia, "Times New Roman", Times, serif 							!default;
+$font-mono:        						Monaco, Menlo, Consolas, "Courier New", monospace 					!default;
+
+$base-font-family:  					$font-sans 															!default;
+$titles-font-family:  					$font-sans 															!default;
+
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+em()
+
+To convert `PX` to `EM` using the `$base-font-size` as font size.
+
+	width: em(20px);
+
+Styleguide 24.1
+
+-------------------------------------------------------------------------------------------------------------------- */
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Convert to Ems
-// --------------------------------------------------------------------------------------------------------------------
 @function em($to-size, $from-size: $base-font-size) {
 	@return ($to-size / $from-size) + 0em;
 }

data/stylesheets/settings/_colors.scss

@@ -1,16 +1,43 @@
-// ====================================================================================================================
-// BASE COLORS
-// ====================================================================================================================
-
-$black:                 							#000;
-$grayDarker:            							lighten($black, 15);
-$grayDark:              							lighten($black, 30);
-$gray:                  							lighten($black, 60);
-$grayLight:             							lighten($black, 85);
-$grayLighter:           							lighten($black, 95);
-$white:                 							lighten($black, 100);
-
-$text-color:         								#333 												!default;
-
-$link-color: 										#0066cc 											!default;
-$link-color-hover: 									darken($link-color, 10%) 							!default;
+/* ====================================================================================================================
+
+Base Colors
+
+Used for scaffolding
+
+    $black:                             #000
+    $grayDarker:                        lighten($black, 15)
+    $grayDark:                          lighten($black, 30)
+    $gray:                              lighten($black, 60)
+    $grayLight:                         lighten($black, 85)
+    $grayLighter:                       lighten($black, 95)
+    $white:                             #fff
+
+Styleguide 26
+
+==================================================================================================================== */
+
+$black:									#000;
+$grayDarker:							lighten($black, 15);
+$grayDark:								lighten($black, 30);
+$gray:									lighten($black, 60);
+$grayLight:								lighten($black, 85);
+$grayLighter:							lighten($black, 95);
+$white:									lighten($black, 100);
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Default colors
+
+    $text-color:                        #333
+
+    $link-color:                        #0066cc
+    $link-color-hover:                  darken($link-color, 10%)
+
+Styleguide 26.1
+
+-------------------------------------------------------------------------------------------------------------------- */
+
+$text-color:							#333 																!default;
+
+$link-color:							#0066cc 															!default;
+$link-color-hover:						darken($link-color, 10) 											!default;

data/stylesheets/settings/_components.scss

@@ -1,43 +1,102 @@
-// ====================================================================================================================
-// ENABLE COMPONENTS
-// ====================================================================================================================
-
-$alerts: 							true 		!default;
-$breadcrumbs: 						true 		!default;
-$button-groups: 					true 		!default;
-$buttons: 							true 		!default;
-$captions: 							true 		!default;
-$close: 							true 		!default;
-$dropdowns: 						true 		!default;
-
-$forms: 							true 		!default;
-	$forms-append:					true 		!default;
-	$forms-grid: 					true 		!default;
-	$forms-aligned:					true 		!default;
-	$forms-inline:					true 		!default;
-
-$navs: 								true 		!default;
-$navs-responsive: 					true 		!default;
-$pager: 							true 		!default;
-$pagination: 						true 		!default;
-$labels: 							true 		!default;
-$tables: 							true 		!default;
-
-$tabs:								true 		!default;
-$slider:							true 		!default;
-$modal: 							true 		!default;
-	$modal-buttons: 				true 		!default;
-	$modal-thumbs: 					true 		!default;
-
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Icon Fonts
-// --------------------------------------------------------------------------------------------------------------------
-$use-fontawesome: 					true 		!default;
-
-$use-brandico: 						false 		!default;
-$use-entypo: 						false 		!default;
-$use-fontelico: 					false 		!default;
-$use-maki: 							false 		!default;
-$use-openweb-icons: 				false 		!default;
-$use-typicons: 						false 		!default;
-$use-zocial: 						false 		!default;
+/* ====================================================================================================================
+
+Base Components
+
+Enable or disable components, so you can have in the css only what you need.
+
+    $alerts:                        true   # components/_alerts.scss
+    $breadcrumbs:                   true   # components/_breadcrumbs.scss
+    $button-groups:                 true   # components/_button-group.scss
+    $buttons:                       true   # components/_buttons.scss
+    $captions:                      true   # components/_captions.scss
+    $close:                         true   # components/_close.scss
+    $dropdowns:                     true   # components/_dropdowns.scss
+    $forms:                         true   # components/_forms.scss
+    $forms-aligned:                 true   # components/_forms.scss
+    $forms-append:                  true   # components/_forms.scss
+    $forms-grid:                    true   # components/_forms.scss
+    $forms-inline:                  true   # components/_forms.scss
+    $grids:                         true   # components/_grids.scss
+    $grids-helpers:                 true   # components/_grids.scss
+    $labels:                        true   # components/_labels.scss
+    $modal:                         true   # components/_modal.scss
+    $modal-buttons:                 true   # components/_modal.scss
+    $modal-thumbs:                  true   # components/_modal.scss
+    $navs-responsive:               true   # components/_navs-responsiv.scss
+    $navs:                          true   # components/_navs.scss
+    $pager:                         true   # components/_pager.scss
+    $pagination:                    true   # components/_pagination.scss
+    $slider:                        true   # components/_slider.scss
+    $sprites:                       true   # components/_sprites.scss
+    $tables:                        true   # components/_tables.scss
+    $tabs:                          true   # components/_tabs.scss
+
+    $width-helper-classes:          true   # "Elements width" helper class
+
+Styleguide 27
+
+==================================================================================================================== */
+
+$alerts: 							true 																	!default;
+$breadcrumbs: 						true 																	!default;
+$button-groups: 					true 																	!default;
+$buttons: 							true 																	!default;
+$captions: 							true 																	!default;
+$close: 							true 																	!default;
+$dropdowns: 						true 																	!default;
+
+$forms: 							true 																	!default;
+	$forms-append:					true 																	!default;
+	$forms-grid: 					true 																	!default;
+	$forms-aligned:					true 																	!default;
+	$forms-inline:					true 																	!default;
+
+$grids:                             true                                                                    !default;
+$grids-helpers: 					true 																	!default;
+
+$labels: 							true 																	!default;
+$navs-responsive: 					true 																	!default;
+$navs: 								true 																	!default;
+$pager: 							true 																	!default;
+$pagination: 						true 																	!default;
+$tables: 							true 																	!default;
+
+$tabs:								true 																	!default;
+$slider:							true 																	!default;
+$modal: 							true 																	!default;
+	$modal-buttons: 				true 																	!default;
+	$modal-thumbs: 					true 																	!default;
+
+$sprites: 							true 																	!default;
+$width-helper-classes:				true 																	!default;
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Icon Fonts
+
+Icon Fonts ready to use with the mixin `icon-font`.
+Font files are not required, is used the [We Love Icon Fonts](http://weloveiconfonts.com/) CDN.
+
+    $use-fontawesome:               true    # http://fortawesome.github.io/Font-Awesome/
+
+    $use-brandico:                  false   # http://fontello.github.io/brandico.font/demo.html
+    $use-entypo:                    false   # http://www.entypo.com/
+    $use-fontelico:                 false   # https://github.com/fontello/fontelico.font
+    $use-maki:                      false   # http://www.mapbox.com/maki/
+    $use-openweb-icons:             false   # http://pfefferle.github.io/openwebicons/
+    $use-typicons:                  false   # http://typicons.com/
+    $use-zocial:                    false   # http://zocial.smcllns.com/
+
+Styleguide 27.1
+
+-------------------------------------------------------------------------------------------------------------------- */
+
+$use-fontawesome: 					true 																	!default;
+
+$use-brandico: 						false 																	!default;
+$use-entypo: 						false 																	!default;
+$use-fontelico: 					false 																	!default;
+$use-maki: 							false 																	!default;
+$use-openweb-icons: 				false 																	!default;
+$use-typicons: 						false 																	!default;
+$use-zocial: 						false 																	!default;