rapido-css 0.0.3 → 0.0.4

data/stylesheets/utilities/_mixins.scss

@@ -1,37 +1,70 @@
-// ====================================================================================================================
-// MIXINS
-// ====================================================================================================================
-
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Base
-// --------------------------------------------------------------------------------------------------------------------
-@mixin clearfix {
-	*zoom: 1;
-	&:before,
-	&:after {
-		display: table;
-		content: "";
-		line-height: 0;
-	}
-	&:after {
-		clear: both;
-	}
-}
+/* ====================================================================================================================
+
+Mixins
+
+Some of them are from Bootstrap, others are custom.
+
+Styleguide 23
+
+==================================================================================================================== */
+
+/* --------------------------------------------------------------------------------------------------------------------
 
+Create a rectangle
 
+	@include size($height, $width);
 
+* `$height`: Height of the rectangle
+* `$width`: Width of the rectangle
+
+Styleguide 23.1
+
+-------------------------------------------------------------------------------------------------------------------- */
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Shortcuts
-// --------------------------------------------------------------------------------------------------------------------
 @mixin size($height, $width) {
 	width: $width;
 	height: $height;
 }
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Create a square
+
+	@include square($size);
+
+* `$size`: Dimension used both for width and height
+
+Styleguide 23.2
+
+-------------------------------------------------------------------------------------------------------------------- */
+
 @mixin square($size) {
 	@include size($size, $size);
 }
 
+/* --------------------------------------------------------------------------------------------------------------------
+
+Position an element
+
+	@include position ($position, $coordinates);
+
+* `$position`: fixed, relative, absolute
+* `$coordinates`: 0 = null, 0px or more is a value used in the css.
+
+Example:
+
+	@include position (absolute, 0 0px 0px 0);
+
+Become:
+
+	position: absolute;
+	right: 0px;
+	bottom: 0px;
+
+Styleguide 23.3
+
+-------------------------------------------------------------------------------------------------------------------- */
+
 @mixin position ($position: relative, $coordinates: 0 0 0 0) {
 
 	@if type-of($position) == list {
@@ -75,12 +108,43 @@
 	}
 }
 
+/* --------------------------------------------------------------------------------------------------------------------
+
+Center-block
+
+	@include center-block();
+
+Become:
+
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+
+Styleguide 23.4
+
+-------------------------------------------------------------------------------------------------------------------- */
+
 @mixin center-block() {
 	display: block;
 	margin-left: auto;
 	margin-right: auto;
 }
 
+/* --------------------------------------------------------------------------------------------------------------------
+
+Center
+
+Vertical and horizontal centering with absolute positioning, using the element size and negative margin.
+
+	@include center($width, $height);
+
+* `$height`: Height of the element
+* `$width`: Width of the element
+
+Styleguide 23.5
+
+-------------------------------------------------------------------------------------------------------------------- */
+
 @mixin center ($width, $height: null) {
 	@include position(absolute, 50% 0 0 50%);
 	margin-left: -($width / 2);
@@ -88,9 +152,38 @@
 	@else { margin-top: -($width / 2);  }
 }
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Forms
-// --------------------------------------------------------------------------------------------------------------------
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Extend
+
+When using SASS syntax.
+
+	+e(classname)
+
+Styleguide 23.6
+
+-------------------------------------------------------------------------------------------------------------------- */
+
+@mixin e($class) {
+	@if $class {
+		@extend .#{$class};
+	}
+}
+
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Placeholder
+
+	@include placeholder($color);
+
+* `$color`: Set color of the placeholder of an input.
+
+Styleguide 23.7
+
+-------------------------------------------------------------------------------------------------------------------- */
+
 @mixin placeholder($color: $gray) {
 	&:-moz-placeholder {
 		color: $color;
@@ -103,11 +196,26 @@
 	}
 }
 
-@mixin tab-focus() {}
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Text overflow
-// --------------------------------------------------------------------------------------------------------------------
+/* --------------------------------------------------------------------------------------------------------------------
+
+Text overflow
+
+Wrap text with ellipsis (modern browsers only).
+
+	@include text-overflow();
+
+Become
+
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+
+Styleguide 23.8
+
+-------------------------------------------------------------------------------------------------------------------- */
+
+
 @mixin text-overflow() {
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -115,18 +223,25 @@
 }
 
 
-@mixin hide-text {
-	color:            transparent;
-	font:             0/0 a;
-	text-shadow:      none;
-}
+/* --------------------------------------------------------------------------------------------------------------------
+
+Triangle
+
+Create a css-only triangle.
+
+	@include triangle($size, $color, $direction);
+
+* `$size`: Width of the triangle
+* `$color`: Color of the triangle
+* `$direction`: There are available up, up-right, right, down-right, down, down-left, left, up-left
+
+Styleguide 23.9
+
+
+-------------------------------------------------------------------------------------------------------------------- */
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Pseudo Elements
-// --------------------------------------------------------------------------------------------------------------------
 @mixin triangle ($size, $color, $direction) {
-	height: 0;
-	width: 0;
+	@include square(0);
 
 	@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
 		border-color: transparent;
@@ -136,9 +251,9 @@
 		@if $direction == up {
 			border-bottom-color: $color;
 		} @else if $direction == right {
-			border-left-color:   $color;
+			border-left-color:  $color;
 		} @else if $direction == down {
-			border-top-color:    $color;
+			border-top-color:   $color;
 		} @else if $direction == left {
 			border-right-color:  $color;
 		}
@@ -165,7 +280,25 @@
 	}
 }
 
-// For now only side triangles with border
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Triangle with Borders
+
+Add a css-only triangle width side borders, usefull for tooltips. For now only side triangles with border are suported.
+
+	@include triangle_border($size, $color, $border-color, $border-width, $direction);
+
+* `$size`: Same as `square`
+* `$color`: Color of the triangle
+* `$border-color`: Border color of the triangle
+* `$border-width`: Border width of the triangle
+* `$direction`: left or right
+
+Styleguide 23.10
+
+-------------------------------------------------------------------------------------------------------------------- */
+
 @mixin triangle_border($size, $color, $border-color, $border-width, $direction) {
 
 	$border-width-fix: '';
@@ -201,10 +334,20 @@
 	}
 }
 
+/* --------------------------------------------------------------------------------------------------------------------
+
+Text inset shadow
+
+	@include text-inset-shadow($bg, $textcolor, $contrast);
+
+* `$bg`: Background color of the text
+* `$textcolor`: Color of the text
+* `$contrast`: How much stronger the inset will be
+
+Styleguide 23.11
+
+-------------------------------------------------------------------------------------------------------------------- */
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Colors
-// --------------------------------------------------------------------------------------------------------------------
 @mixin text-inset-shadow($bg: #fff, $textcolor: #054d4a, $contrast:  #f43059) {
 	$shadow: darken($textcolor, 30%);
 
@@ -212,19 +355,55 @@
 	text-shadow: 1px 5px 7px $bg, 0 0 0 rgba($shadow,.8);
 }
 
+/* --------------------------------------------------------------------------------------------------------------------
+
+Alpha Color
+
+Alpha color with ie full opacity fallback (for IE)
+
+	@include alpha-color($color, $alpha, $attribute);
+
+* `$color`: Base HEX color
+* `$alpha`: Opacity
+* `$attribute`: On what attribute
+
+Example
+
+	@include alpha-color(#000, .5, color);
+
+Become
+
+	color: #000;
+	color: rgba(0,0,0,.5);
+
+Styleguide 23.12
+
+-------------------------------------------------------------------------------------------------------------------- */
+
 @mixin alpha-color($color: #fff, $alpha: .5, $attribute: background) {
 	@if $attribute == color {
 		color: $color;
 		color: rgba($color, $alpha);
 	} @else {
-		#{$attribute}-color: $color;
-		#{$attribute}-color: rgba($color, $alpha);
+		#{$attribute}: $color;
+		#{$attribute}: rgba($color, $alpha);
 	}
 }
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Keyframes support
-// --------------------------------------------------------------------------------------------------------------------
+/* --------------------------------------------------------------------------------------------------------------------
+
+Keyframes support
+
+Used for creating custom animations.
+
+	@include keyframes($name);
+
+* `$name`: Name of the keyframe
+
+Styleguide 23.13
+
+-------------------------------------------------------------------------------------------------------------------- */
+
 @mixin keyframes($name) {
 	@-webkit-keyframes #{$name} {
 		@content;
@@ -242,10 +421,18 @@
 	}
 }
 
+/* --------------------------------------------------------------------------------------------------------------------
+
+Nav divider
+
+	@include nav-divider($top $bottom);
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Components
-// --------------------------------------------------------------------------------------------------------------------
+* `$top`: Color of the top border
+* `$bottom`: Color of the bottom border
+
+Styleguide 23.14
+
+-------------------------------------------------------------------------------------------------------------------- */
 
 @mixin nav-divider($top: #e5e5e5, $bottom: false) {
 	*width: 100%;
@@ -261,9 +448,21 @@
 	@if $bottom { border-bottom: 1px solid $bottom; }
 }
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Images
-// --------------------------------------------------------------------------------------------------------------------
+/* --------------------------------------------------------------------------------------------------------------------
+
+Comicbook Shadow
+
+	@include shadow-comicbook($padding $color $size $distance);
+
+* `$padding`: Border color
+* `$color`: Color of the shadow
+* `$size`: Size of the shadow
+* `$distance`: Distance of the shadow from the image
+
+Styleguide 23.15
+
+-------------------------------------------------------------------------------------------------------------------- */
+
 @mixin shadow-comicbook($padding: 5px, $color: #bbb, $size: 15px, $distance: 10px) {
 
 	$lightColor: lighten($color, 8);
@@ -298,21 +497,144 @@
 	}
 }
 
+/* --------------------------------------------------------------------------------------------------------------------
+
+Icon Fonts
+
+Use the unicode character from an icon font to insert it wherever you want.
+
+	@include icon-font($char $font);
+
+* `$char`: Unicode of the character †
+* `$font`: What font to use ‡
+
+† For example for: `&#xf000` use `xf000`
+
+‡ Fonts available: Fontawesome, Brandico, Entypo, Fontelico, Maki, Openweb-icons, Typicons, Zocial
+
+
+Styleguide 23.16
+
+-------------------------------------------------------------------------------------------------------------------- */
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Icon Fonts
-// --------------------------------------------------------------------------------------------------------------------
 @mixin icon-font($char: '\f013', $font: 'FontAwesome') {
 	display: inline-block;
 	font-family: $font;
 	content: "#{$char}";
 }
 
+/* --------------------------------------------------------------------------------------------------------------------
+
+Media Queries
+
+Add media queries to css width simple naming convention.
+
+    @include media(<$media>) {...};
+
+You can set the start/and with of each step from usins the variables `$lap-start`, `$desk-start`, `$desk-end`.
+
+* `$media`:
+	* `palm`: Only Palm
+	* `lap`:  Only Lap
+	* `lap-and-up`: Lap + Desktop
+	* `portable`: Lap + Palm
+	* `desk`: Only Desktop
+
+Styleguide 23.17
+
+-------------------------------------------------------------------------------------------------------------------- */
+
+@mixin media($media-query){
+
+	@if $media-query == palm { // Palm only
+		@media only screen and (max-width:$palm-end) {
+			@content;
+		}
+	}
+
+	@elseif $media-query == lap{  // Lap only
+		@media only screen and (min-width:$lap-start) and (max-width:$lap-end) {
+			@content;
+		}
+	}
+
+	@elseif $media-query == lap-and-up{ // Lap + Dektop
+		@media only screen and (min-width:$lap-start) {
+			@content;
+		}
+	}
+
+	@elseif $media-query == portable{ // Palm + Lap
+		@media only screen and (max-width:$lap-end) {
+			@content;
+		}
+	}
+
+	@elseif $media-query == desk{ // Desktop only
+		@media only screen and (min-width:$desk-start) {
+			@content;
+		}
+	}
+
+	@else {
+		@content;
+	}
+
+}
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Sprites
+
+Rapido use the compass' [Sprites Mixin](http://compass-style.org/help/tutorials/spriting/) that make including sprites easily both in the html and directly in the css,
+for more info see the full documentation from the link.
+
+First you need to add to your scss file an import to import all of the seperate icons that will be compiled in a single image.
+For example if you have a folder named `icons` inside the main `images` folder add this line:
+
+	@import "icons/*.png";
+
+Then add you have two options:
+
+Add the sprite in the html with (where `icon_name` is the filename of the icon). .s` is the standard class the must be used with all sprites images.
+
+	<a href="#"><i class="s icons-icon_name"></i> Link</a>
+
+Or via `@include` from the scss:
+
+	a:before {
+		@include sprite(icon_name)
+	}
+
+The result is the same.
+
+Styleguide 23.18
+
+-------------------------------------------------------------------------------------------------------------------- */
+
+@mixin sprite($name) {
+	@extend .s;
+	@extend .s-#{$name};
+}
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Responsive grid
+
+	@include columns ($cols, $cols-container, $omega, $nth-omega, $remove-omega, $from, $media, $highlight-omega);
+
+* `$cols`: How many columns
+* `$cols-container`: Columns of the container (default: $total-columns)
+* `$omega`: Bolean, us if is the last column
+* `$nth-omega`: If is a multi-row grid list use nth to apply omega to each element at the end of each row (example: `3n` to use omega every 3th element )
+* `$remove-omega`: Remove omega on previously applied omega (ignore it)
+* `$from`: Direction, left or right
+* `$media`: Media query to to use, for responsive grids
+* `$highlight-omega`: Bolean, used for debugging nth
+
+Styleguide 23.19
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// GRID
-// --------------------------------------------------------------------------------------------------------------------
-// @include columns( $cols, $cols-container: $total-columns, $omega: false,  $nth-omega: false, $remove-omega: false, $from: left, $media: all, $highlight-omega: false );
+-------------------------------------------------------------------------------------------------------------------- */
 
 @mixin columns (
 	$cols,

metadata

@@ -1,8 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rapido-css
 version: !ruby/object:Gem::Version
-  version: 0.0.3
-  prerelease: 
+  version: 0.0.4
 platform: ruby
 authors:
 - Raffaele Rasini
@@ -14,7 +13,6 @@ dependencies:
 - !ruby/object:Gem::Dependency
   name: compass
   requirement: !ruby/object:Gem::Requirement
-    none: false
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
@@ -22,7 +20,6 @@ dependencies:
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
-    none: false
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
@@ -49,6 +46,7 @@ files:
 - stylesheets/components/_close.scss
 - stylesheets/components/_dropdowns.scss
 - stylesheets/components/_forms.scss
+- stylesheets/components/_grids.scss
 - stylesheets/components/_labels.scss
 - stylesheets/components/_modals.scss
 - stylesheets/components/_navs.scss
@@ -59,14 +57,13 @@ files:
 - stylesheets/components/_tables.scss
 - stylesheets/components/_tabs.scss
 - stylesheets/components/_type.scss
-- stylesheets/components/config.rb
 - stylesheets/config.rb
 - stylesheets/settings/_base.scss
 - stylesheets/settings/_colors.scss
 - stylesheets/settings/_components.scss
 - stylesheets/settings/_dimensions.scss
 - stylesheets/settings/_effects.scss
-- stylesheets/settings/config.rb
+- stylesheets/styleguide.md
 - stylesheets/susy/_susy_background.scss
 - stylesheets/susy/_susy_functions.scss
 - stylesheets/susy/_susy_grid.scss
@@ -81,34 +78,30 @@ files:
 - stylesheets/utilities/_debug.scss
 - stylesheets/utilities/_helper-classes.scss
 - stylesheets/utilities/_icon-fonts.scss
-- stylesheets/utilities/_media-queries.scss
 - stylesheets/utilities/_mixins.scss
-- stylesheets/utilities/_sprites.scss
-- stylesheets/utilities/config.rb
 - templates/project/manifest.rb
 - templates/project/screen.scss
 homepage: https://github.com/raffone/rapido
 licenses: []
+metadata: {}
 post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
-  none: false
   requirements:
   - - ! '>='
     - !ruby/object:Gem::Version
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
-  none: false
   requirements:
   - - ! '>='
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 1.8.25
+rubygems_version: 2.0.7
 signing_key: 
-specification_version: 3
+specification_version: 4
 summary: a quick bootstrap prototyping framework
 test_files: []

data/stylesheets/components/config.rb

@@ -1,8 +0,0 @@
-http_path = "/"
-css_dir = "."
-sass_dir = "."
-images_dir = "img"
-javascripts_dir = "js"
-output_style = :compressed
-relative_assets=true
-line_comments = false

data/stylesheets/settings/config.rb

@@ -1,8 +0,0 @@
-http_path = "/"
-css_dir = "."
-sass_dir = "."
-images_dir = "img"
-javascripts_dir = "js"
-output_style = :compressed
-relative_assets=true
-line_comments = false