rapido-css 0.0.1

data/README.mkdn

@@ -0,0 +1,21 @@
+Rapido Framework
+================
+
+An easy and quick prototyping framework based on Bootstrap without all the default styles.
+
+It's still a early alpha, when I'll fixed the majority of the bugs I'll write some documentation.
+
+== Contributing to rapido-css
+
+* Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet.
+* Check out the issue tracker to make sure someone already hasn't requested it and/or contributed it.
+* Fork the project.
+* Start a feature/bugfix branch.
+* Commit and push until you are happy with your contribution.
+* Make sure to add tests for it. This is important so I don't break it in a future version unintentionally.
+* Please try not to mess with the Rakefile, version, or history. If you want to have your own version, or is otherwise necessary, that is fine, but please isolate to its own commit so I can cherry-pick around it.
+
+== Copyright
+
+Copyright (c) 2013 Raffaele Rasini. See LICENSE.txt for
+further details.

data/lib/rapido-css.rb

@@ -0,0 +1,3 @@
+require 'compass'
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('rapido-css', :path => extension_path)

data/stylesheets/_components.scss

@@ -0,0 +1,24 @@
+@import	"components/type";
+@import	"components/forms";
+@import	"components/tables";
+@import	"components/images";
+@import "components/captions";
+
+@import	"components/buttons";
+@import	"components/button-groups";
+@import	"components/dropdowns";
+@import "components/pills";
+@import	"components/close";
+
+@import	"components/navs";
+@import	"components/responsive-navs";
+@import "components/breadcrumbs";
+@import "components/pagination";
+@import "components/pager";
+
+@import	"components/alerts";
+
+// Scripts
+@import	"components/modals";
+@import	"components/sliders";
+@import	"components/tabs";

data/stylesheets/_default-styles.scss

@@ -0,0 +1,480 @@
+
+@if $default-styles {
+
+	// Titles
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	%h1 {}
+	%h2 {}
+	%h3 {}
+	%h4 {}
+	%h5 {}
+	%h6 {}
+
+	// Inputs
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	%input {
+		color: $text-color;
+		border-color: $gray;
+		background-color: $grayLighter;
+
+		&:focus {
+			background-color: $grayLight;
+		}
+	}
+
+	%input-addon {
+		color: $text-color;
+		border-color: $grayLight;
+		background-color: $grayLighter;
+	}
+
+	// Selects
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+
+	%select {
+		color: $text-color;
+		border-color: $gray;
+		background-color: $grayLighter;
+
+		&:hover {
+			background-color: $grayLight;
+		}
+	}
+
+	// Buttons
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+
+	// Default
+	%btn {
+		color: $text-color;
+		border-color: $gray;
+		background-color: $grayLight;
+
+		// Hover/focus state
+		&:hover,
+		&:focus {
+			background-color: darken($grayLight, 10% );
+		}
+
+		// Active state
+		&.active,
+		&:active {
+			background-color: darken($grayLight, 20% );
+		}
+	}
+
+	%btn-primary {
+		color: #fff;
+		border-color: darken(green, 10%);
+		background-color: green;
+
+		// Hover/focus state
+		&:hover,
+		&:focus {
+			background-color: darken(green, 5%);
+		}
+
+		// Active state
+		&.active,
+		&:active {
+			background-color: darken(green, 10%);
+		}
+	}
+
+
+	%btn-secondary {
+		color: #fff;
+		border-color: darken(red, 10%);
+		background-color: red;
+
+		// Hover/focus state
+		&:hover,
+		&:focus {
+			background-color: darken(red, 5%);
+		}
+
+		// Active state
+		&.active,
+		&:active {
+			background-color: darken(red, 10%);
+		}
+	}
+
+	%btn-warning {}
+	%btn-danger {}
+	%btn-info {}
+	%btn-success {}
+	%btn-inverse {}
+
+	// Generic style for buttons used by the scripts
+	%btn-scripts {
+		@include alpha-color(#000, .6, background);
+		color: #fff;
+		cursor: pointer;
+		display: block;
+		text-align: center;
+		text-decoration: none;
+
+		&:hover {
+			color: #fff;
+			@include alpha-color(#000, .8, background);
+		}
+	}
+
+
+	// Captions
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	%caption {
+		@include alpha-color(#000, .8, background);
+		color: #fff;
+		padding: $captions-padding;
+	}
+
+	// Pills (Labels & Badges)
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	%pill {
+		background-color: $gray;
+		color: $white;
+	}
+
+	// Dropdowns
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	%dropdown {
+		background: $grayLighter;
+		border-color: $gray;
+
+		.divider { @include nav-divider($gray); margin-top: -1px }
+
+		> li > a { border-bottom: 1px dotted $gray; }
+
+		> li > a:hover,
+		> li > a:focus {
+		// .dropdown-submenu:hover > a,
+		// .dropdown-submenu:focus > a {
+			text-decoration: none;
+			background-color: $grayLight;
+		}
+	}
+
+	%dropdown-open {
+		background: $grayLighter;
+	    &:after {background-color: $grayLighter;}
+	}
+
+
+	// Caret per Dropdown e Select
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+
+	$caret-width: em(12px);
+
+	%caret {
+		min-width: $caret-width;
+		&:after {
+			@include triangle($caret-width, $gray, down);
+			margin-top: -($caret-width / 4);
+		}
+	}
+
+
+	// Tables
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	%table-bordered {
+		thead {
+			th, td {
+				background-color: $gray;
+				color: #FFF;
+			}
+		}
+		tbody {
+			td { border-bottom: 1px solid $grayLight; }
+		}
+	}
+
+	%table-striped { background-color: $grayLighter;}
+
+	%table-hover { background-color: $gray;}
+
+	%table-sortable {
+		thead {
+			th {
+				&:hover {background: $grayDark }
+				&.sorting-asc:after {content: "\25BC"; }
+				&.sorting-desc:after {content: "\25B2";}
+			}
+		}
+	}
+
+	// Navs
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	%nav-btn {}
+
+	%nav-btn_hover { background-color: $grayLighter;}
+
+	%nav-btn_active {
+		color: $white;
+		background-color: $link-color;
+	}
+
+	%nav-btn_disabled {color: $grayLight;}
+
+
+	// Breadcrumbs
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	%breadcrumb {
+		> li {
+			&:after {
+				color: #ccc;
+				content: "›";
+				padding: 0 10px;
+			}
+			&:last-child {
+				&:after {
+					content: "";
+					padding-right: 0;
+				}
+			}
+		}
+		.active { color: $grayLight; }
+	}
+
+	// Pagination
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	%pagination_btn {
+		  background-color: $grayLight;
+		  border-color: $gray;
+	}
+
+	%pagination_btn-hover {
+		  background-color: $grayLighter;
+	}
+
+	%pagination_btn-active {
+		  color: #fff;
+		  background-color: $gray;
+	}
+
+	%pagination_btn-disabled {
+		  color: $grayLight;
+		  background-color: transparent;
+		  border-color: $grayLight;
+	}
+
+
+	// Pager
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	%pager-btn {
+		  background-color: $grayLight;
+		  border-color: $gray;
+	}
+
+	%pager-btn_hover {
+		background-color: $grayLighter;
+	}
+
+	%pager-btn_disabled {
+		  color: $grayLight;
+		  background-color: #fff;
+		  border-color: $grayLight;
+	}
+
+
+
+	// Loader icon
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	$loader-ico-size: 44px;
+
+	%loader-ico { background: url('//cdn.jsdelivr.net/wp-advanced-ajax-page-loader/2.5.12/loaders/SMALL%20-%20Spinning%20Arrows.gif') center center no-repeat; }
+
+	// Modals
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	$modal-btn-size: em(30px);
+
+	// Buttons
+	%modal-btn {
+		@extend %btn-scripts !optional;
+		@include square($modal-btn-size);
+		line-height: $modal-btn-size;
+	}
+
+	%modal-close {
+		@include position(absolute, 0px (em(-5px) - $modal-btn-size) 0 0);
+	}
+
+	%modal-close-alt {
+		@include position(absolute, 0px 0px 0 0);
+		background-color: transparent;
+		color: $link-color;
+		&:hover {
+			color: $link-color-hover;
+		}
+	}
+
+	%modal-btnbar-size {@include size($modal-btn-size, $modal-btn-size * 5);}
+
+	// Other styles
+	%modal-overlay { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiqAcAAIgAgoGu+rEAAAAASUVORK5CYII='); }
+
+	%modal-skin {
+		@include box-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
+		@include border-radius($base-border-radius);
+		background: #fff;
+
+		// Icons
+		.fancybox-close:after 		{ @include icon-font(\f00d); }
+		.fancybox-prev span:after 	{ @include icon-font(\f053); }
+		.fancybox-next span:after 	{ @include icon-font(\f054); }
+		.btnPrev:after 				{ @include icon-font(\f04a); }
+		.btnNext:after 				{ @include icon-font(\f051); }
+		.btnPlay:after 				{ @include icon-font(\f04b); }
+		.btnPlayOn:after 			{ @include icon-font(\f04c); }
+		.btnToggle:after 			{ @include icon-font(\f065); }
+		.btnToggleOn:after 			{ @include icon-font(\f066); }
+		.btnClose:after 			{ @include icon-font(\f00d); }
+	}
+
+	%modal-nav { margin-top: (0 - ($modal-btn-size / 2)); }
+
+	%modal-caption { @extend %caption !optional; }
+
+	%modal-loading {
+		margin-top: -($loader-ico-size / 2);
+		margin-left: -($loader-ico-size / 2);
+		opacity: 0.8;
+
+		div {
+			@extend %loader-ico !optional;
+			@include square($loader-ico-size);
+
+		}
+	}
+
+
+	// Sliders
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	$slider-btn-size: em(30px);
+
+	// Buttons
+	%slider-btn {
+		@extend %btn-scripts !optional;
+		@include square($slider-btn-size);
+		line-height: $slider-btn-size;
+		margin-top: -($slider-btn-size / 2);
+
+		&.bx-prev i:after { @include icon-font(\f053); }
+		&.bx-next i:after { @include icon-font(\f054); }
+	}
+
+	// Pager
+	%slider-pager {
+		@include position(absolute, 0 0 -30px 0);
+		padding-top: 20px;
+		.bx-pager-item {
+			a {
+				@include border-radius(5px);
+				@include square(10px);
+				@include hide-text;
+				background: $grayLight;
+				margin: 0 5px;
+				&:hover, &.active { background: $gray; }
+			}
+		}
+	}
+
+	// Other styles
+	%slider-caption { @extend %caption !optional; }
+
+	%slider-loading {
+		@extend %loader-ico !optional;
+		@include alpha-color(#000, .60);
+		min-height: $loader-ico-size;
+	}
+
+	// Tabs
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+
+	%tab-nav {
+		//...
+	}
+
+	%tab-btn {
+		background: $grayLighter;
+		border: solid 1px $grayLight;
+		border-bottom: none;
+	}
+
+	%tab-btn_hover {
+		background: $grayLighter;
+		border: solid 1px $grayLight;
+		border-bottom: none;
+	}
+
+	%tab-btn_current {
+		border-color: $gray;
+		&:after { background: $grayLighter; }
+	}
+
+	%tab-container {
+		border: solid 1px $gray;
+		background: $grayLighter;
+	}
+
+
+	// Alerts
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+
+	%alert {
+		background-color: $grayLighter;
+		border: 1px solid $grayLight;
+	}
+
+	// Responsive NAV
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+
+	%nav-big {}
+
+	%nav-small {
+		background-color: #272c33;
+
+		a {
+			color: #fff;
+			padding: $input-padding;
+			// &:after { display: none;}
+		}
+
+		ul,
+		ul li,
+		ul li a {
+			width: 100%;
+			border: 0;
+			margin: 0;
+			float: none;
+			display: block;
+			position: static;
+			text-align: left;
+			@include border-radius(0);
+			background-color: transparent;
+		}
+
+		.open {
+			background-color: lighten(#272c33, 10);
+
+			.btn.dropdown-toggle[data-toggle=dropdown] {
+				background-color: darken(#272c33, 10);
+			}
+		}
+	}
+
+	%nav-toggle {
+		@extend .btn;
+		@include square($responsive-nav-toggle-size);
+		font-size: $responsive-nav-toggle-size * .6;
+		padding: 0;
+		line-height: $responsive-nav-toggle-size;
+		span {@include hide-text();}
+		&:before {
+			@include icon-font(\f0c9);
+		}
+	}
+
+}
+

data/stylesheets/_functions.scss

@@ -0,0 +1,50 @@
+
+// Conversione da Easing da Transform a Transition
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+@function toBezier($easing) {
+
+	@if 	$easing == linear         { @return linear; }
+	@elseif $easing == ease           { @return ease; }
+	@elseif $easing == ease-in        { @return ease-in; }
+	@elseif $easing == ease-out       { @return ease-out; }
+	@elseif $easing == ease-in-out    { @return ease-in-out; }
+
+	@elseif $easing == easeInQuad     { @return cubic-bezier(0.550, 0.085, 0.680, 0.530); }
+	@elseif $easing == easeInCubic    { @return cubic-bezier(0.550, 0.055, 0.675, 0.190); }
+	@elseif $easing == easeInQuart    { @return cubic-bezier(0.895, 0.030, 0.685, 0.220); }
+	@elseif $easing == easeInQuint    { @return cubic-bezier(0.755, 0.050, 0.855, 0.060); }
+	@elseif $easing == easeInSine     { @return cubic-bezier(0.470, 0.000, 0.745, 0.715); }
+	@elseif $easing == easeInExpo     { @return cubic-bezier(0.950, 0.050, 0.795, 0.035); }
+	@elseif $easing == easeInCirc     { @return cubic-bezier(0.600, 0.040, 0.980, 0.335); }
+	@elseif $easing == easeInBack     { @return cubic-bezier(.600, -0.280, 0.735, 0.045); }
+
+	@elseif $easing == easeOutQuad    { @return cubic-bezier(0.250, 0.460, 0.450, 0.940); }
+	@elseif $easing == easeOutCubic   { @return cubic-bezier(0.215, 0.610, 0.355, 1.000); }
+	@elseif $easing == easeOutQuart   { @return cubic-bezier(0.165, 0.840, 0.440, 1.000); }
+	@elseif $easing == easeOutQuint   { @return cubic-bezier(0.230, 1.000, 0.320, 1.000); }
+	@elseif $easing == easeOutSine    { @return cubic-bezier(0.390, 0.575, 0.565, 1.000); }
+	@elseif $easing == easeOutExpo    { @return cubic-bezier(0.190, 1.000, 0.220, 1.000); }
+	@elseif $easing == easeOutCirc    { @return cubic-bezier(0.075, 0.820, 0.165, 1.000); }
+	@elseif $easing == easeOutBack    { @return cubic-bezier(0.175, 0.885, 0.320, 1.275); }
+
+	@elseif $easing == easeInOutQuad  { @return cubic-bezier(0.455, 0.030, 0.515, 0.955); }
+	@elseif $easing == easeInOutCubic { @return cubic-bezier(0.645, 0.045, 0.355, 1.000); }
+	@elseif $easing == easeInOutQuart { @return cubic-bezier(0.770, 0.000, 0.175, 1.000); }
+	@elseif $easing == easeInOutQuint { @return cubic-bezier(0.860, 0.000, 0.070, 1.000); }
+	@elseif $easing == easeInOutSine  { @return cubic-bezier(0.445, 0.050, 0.550, 0.950); }
+	@elseif $easing == easeInOutExpo  { @return cubic-bezier(1.000, 0.000, 0.000, 1.000); }
+	@elseif $easing == easeInOutCirc  { @return cubic-bezier(0.785, 0.135, 0.150, 0.860); }
+	@elseif $easing == easeInOutBack  { @return cubic-bezier(.680, -0.550, 0.265, 1.550); }
+	@else 							  { @return null; }
+
+}
+
+
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+@function rhythm_neg($i: 1) {
+	@return -(rhythm($i));
+}
+
+@function space_neg($w: 1, $c: 12) {
+	@return -(space($w, $c));
+}