best 0.0.1 → 0.0.2

data/README.md

@@ -0,0 +1,19 @@
+# Best/Rough
+This project aims to improve quality, consistency and overall development speed.
+
+## Structure
+
+* best
+	* components
+		* {here goes our components}
+
+	* framework
+		* best
+			* stylesheets
+				* best (the main scss)
+	* template (boilerplate for new projects)
+
+
+## How to use
+Install it. Reference it, configure it. Apply it.
+Remember to check the config.rb and adjust to your local system paths.

data/framework/best/best.rb

@@ -0,0 +1,32 @@
+module Best
+end
+
+%w(dependencies util browser_support sass_extensions version errors quick_cache logger).each do |lib|
+  require "compass/#{lib}"
+end
+
+require 'sass/callbacks'
+
+module Compass
+  def base_directory
+    File.expand_path(File.join(File.dirname(__FILE__), '..'))
+  end
+  def lib_directory
+    File.expand_path(File.join(File.dirname(__FILE__)))
+  end
+  def shared_extension_paths
+    @shared_extension_paths ||= begin
+      if ENV["HOME"] && File.directory?(ENV["HOME"])
+        [File.expand_path("~/.compass/extensions")]
+      else
+        []
+      end
+    end
+  end
+  module_function :base_directory, :lib_directory, :shared_extension_paths
+  extend QuickCache
+end
+
+%w(configuration frameworks app_integration actions compiler).each do |lib|
+  require "compass/#{lib}"
+end

data/framework/best/stylesheets/_best.scss

@@ -0,0 +1,15 @@
+
+// Best framework
+// ============================================================================
+// This is your framework's main stylesheet. Use it to import all default modules.
+// No import should print code directly (well, except the reset?)
+
+// Load utilities and reset first
+@import "best/utilities";
+@import "best/reset";
+
+@import "best/button";
+@import "best/effects";
+@import "best/form";
+@import "best/navigation";
+@import "best/layout";

data/framework/best/stylesheets/best/_button.scss

@@ -0,0 +1,49 @@
+// Buttons
+// ============================================================================
+/*
+Buttons made easy.
+button-color() applies background-colors/gradients and font-color.
+button applies layout
+*/
+
+/*
+	<button class="button">This is a standard button</button>
+	<button class="button-color">This only has the button-color() mixin applied</button>
+*/
+
+@import "compass/css3/border-radius";
+@import "compass/css3/images";
+@import "compass/css3/text-shadow";
+@import "compass/css3/transition";
+
+
+
+@mixin button-color($color1: white, $color2: #555, $text-color: white) {
+	background-color: $color1; // fallback
+	@include background(linear-gradient($color1, $color2));
+	border-color: rgba($color1, 0.5);
+	color: $text-color;
+
+	&:hover {
+		color: $text-color;
+		@include background(linear-gradient( lighten($color1,20%), $color2));
+	}
+}
+
+
+
+@mixin button($color1: white, $color2: black, $padding: .5em 1em, $smooth: true, $border-radius: .5em) {
+	@include button-color($color1, $color2);
+	@include border-radius($border-radius);
+	@include text-shadow(0 0 1px rgba(0,0,0,.5));
+	@include transition(all .2s ease-in-out);
+	display: inline-block;
+	padding: $padding;
+	border-style: solid;
+	border-width: 1px;
+	
+	&:hover {
+		cursor: pointer;
+		text-decoration: none;
+	}
+}

data/framework/best/stylesheets/best/_effects.scss

@@ -0,0 +1,5 @@
+// Effects
+// ============================================================================
+
+@import "best/effects/iterative";
+@import "best/effects/keyframes";

data/framework/best/stylesheets/best/_form.scss

@@ -0,0 +1,6 @@
+// Forms
+// ============================================================================
+
+@import "best/form/form-layout";
+@import "best/form/form-style";
+@import "best/form/form-validation";

data/framework/best/stylesheets/best/_layout.scss

@@ -0,0 +1,7 @@
+// Layout
+// ============================================================================
+
+@import "best/layout/dl-horizontal";
+@import "best/layout/equal-heights";
+@import "best/layout/layout-center";
+@import "best/layout/mediablock";

data/framework/best/stylesheets/best/_navigation.scss

@@ -0,0 +1,8 @@
+// Navigation
+// ============================================================================
+
+@import "best/navigation/navigation";
+@import "best/navigation/navigation-breadcrumb";
+@import "best/navigation/navigation-dropdown";
+@import "best/navigation/navigation-horizontal";
+@import "best/navigation/tinynav";

data/framework/best/stylesheets/best/_reset.scss

@@ -0,0 +1,4 @@
+// Reset
+// ============================================================================
+
+@import "best/reset/normalize";

data/framework/best/stylesheets/best/_utilities.scss

@@ -0,0 +1,4 @@
+// Utilities
+// ================================================================================================
+
+@import "best/utilities/em";

data/framework/best/stylesheets/best/effects/_iterative.scss

@@ -0,0 +1,15 @@
+// Iterative delay
+// ============================================================================
+/*
+Enables you to run effects iterative through an array of elements. Takes three arguments: $selector, $count and $delay. $count is the number of elements (nth-childs) to run through.
+*/
+
+@import "compass/css3/transition";
+
+@mixin iterative-delay($selector: unquote(".item"), $count: 2, $delay: 0.07s) {
+	@for $i from 1 through $count {
+		#{$selector}:nth-child(#{$i}) {
+			@include transition-delay($delay * $i);
+		}
+	}
+}

data/framework/best/stylesheets/best/effects/_keyframes.scss

@@ -0,0 +1,121 @@
+// Keyframes
+// ============================================================================
+@import "compass/css3/animation";
+@import "compass/css3/transform";
+@import "compass/css3/transition";
+
+
+
+@mixin fadeIns() {
+	// 3D transition
+	@include keyframes(flipFront) {
+		0% {
+			@include rotateX(-180deg);
+		}
+		100% {
+			@include rotateX(0deg);
+		}
+	}
+	@include keyframes(flipBack) {
+		0% {
+			@include rotateX(180deg);
+		}
+		100% {
+			@include rotateX(0deg);
+		}
+	}
+
+	// Pop up
+	@include keyframes(popUp) {
+		0% {
+			@include scale(0);
+			@include rotateX(0deg);
+		}
+		100% {
+			@include scale(1);
+			@include rotateX(0deg);
+		}
+	}
+
+	@include keyframes(fadeInSoft) {
+		0% {
+			opacity: 0.6;
+			@include rotateX(0deg);
+		}
+		100% {
+			opacity: 1;
+			@include rotateX(0deg);
+		}
+	}
+	@include keyframes(fadeOutSoft) {
+		0% {
+			opacity: 1;
+			@include rotateX(0deg);
+		}
+		100% {
+			opacity: 0.6;
+			@include rotateX(0deg);
+		}
+	}
+
+	@include keyframes(fadeIn) {
+		0% {
+			opacity: 0;
+			@include rotateX(0deg);
+		}
+		100% {
+			opacity: 1;
+			@include rotateX(0deg);
+		}
+	}
+
+	@include keyframes(fadeOut) {
+		0% {
+			opacity: 1;
+			@include rotateX(0deg);
+		}
+		100% {
+			opacity: 0;
+			@include rotateX(0deg);
+		}
+	}
+
+	@include keyframes(fadeInDown) {
+		0% {
+			opacity: 0;
+			@include translateX(+3px);
+			@include rotateX(0deg);
+		}
+		100% {
+			opacity: 1;
+			@include translateX(0px);
+			@include rotateX(0deg);
+		}
+	}
+
+	@include keyframes(fadeInUp) {
+		0% {
+			opacity: 0;
+			@include translateX(-3px);
+			@include rotateX(0deg);
+		}
+		100% {
+			opacity: 1;
+			@include translateX(0px);
+			@include rotateX(0deg);
+		}
+	}
+
+	@include keyframes(fadeOutUp) {
+		0% {
+			opacity: 1;
+			@include translateX(0px);
+			@include rotateX(0deg);
+		}
+		100% {
+			opacity: 0;
+			@include translateX(+3px);
+			@include rotateX(0deg);
+		}
+	} 
+}

data/framework/best/stylesheets/best/form/_form-layout.scss

@@ -0,0 +1,120 @@
+// Form layout
+// ============================================================================
+/* Important: this requires the rem and susy modules. And the markup could be a lot better. Actually, you don't use this yet.
+
+````<form>
+	<div class="control-group">
+		<label class="control-label"></label>
+		<div class="controls">
+			<input>
+		</div> 
+	</div>
+</form>````
+*/
+
+@import "compass/utilities/general/clearfix";
+
+
+// Basic form layout
+// ============================================================================
+/* Help */
+@mixin form-basic($margin: 1em) {
+	.control-group {
+		margin-bottom: $margin;
+	}
+	.control-label {
+		display: block;
+		margin-bottom: .4em;
+	}
+	.control-inline {
+		label { display: inline; }
+	}
+}
+
+
+
+// Vertical form layout
+// ============================================================================
+/* Help */
+@mixin form-vertical {
+	.control-group {
+ 		clear: both;
+	}
+}
+
+
+
+// Horiztontal form layout
+// ============================================================================
+/* Help */
+@mixin form-horizontal {
+	clear: both;
+	.control-group {
+		clear: none;
+		float: left;
+		margin-right: 1em;
+		
+		@media only screen and (max-width: 400px) {
+			float: none;
+			margin-right: 0;
+		}
+	}
+
+}
+
+
+
+// Form layout with labels on the left
+// ============================================================================
+/* Help */
+@mixin form-left-aligned {
+
+	legend {
+		margin-left: 260px;
+	}
+	.control-group {
+	}
+	.control-label {
+		float: left;
+		width: 240px;
+		padding-top: .5em;
+		text-align: right;
+		margin-bottom: 0;
+	}
+	.controls {
+		margin-left: 260px;
+	}
+}
+
+
+
+// Form layout in two cols
+// ============================================================================
+/* Help */
+@mixin form-twocol {
+	@include pie-clearfix;
+
+	label { display: block; }
+	.control-group {
+		@include span-columns(2,4);
+		&:nth-child(2n) { @include omega;}
+		
+		// stop nested elements from floating
+		.control-group {
+			@include reset-columns;
+			&:last-child { margin-bottom: 0; }
+		}
+
+		@media only screen and (max-width: 30em) {
+			@include reset-columns;
+			&:nth-child(2n) { @include reset-columns; }
+		}
+	}
+	input[type="text"],
+	input[type="number"],
+	input[type="email"],
+	input[type="password"],
+	textarea {
+		width: 100%;
+	}
+}

data/framework/best/stylesheets/best/form/_form-style.scss

@@ -0,0 +1,41 @@
+// Form style
+// ============================================================================
+/* Applies basic styling for form elements. */
+
+@import "compass/css3/border-radius";
+@import "compass/css3/box-shadow";
+@import "compass/css3/box-sizing";
+@import "compass/css3/transition";
+
+
+
+@mixin form-style(
+		$background-color: #fff,
+		$border-color: #bbb,
+		$focus-border-color: darken($border-color, 10),
+		$padding: .5em,
+		$border-radius: .5em,
+		$box-shadow: 0 0 5px rgba(0, 0, 0, 0.15)
+){
+
+	input[type=email],
+	input[type=text],
+	input[type=search],
+	input[type=password],
+	textarea {
+		@include box-sizing(border-box);
+		@include box-shadow($box-shadow);
+		@include border-radius($border-radius);
+		@include transition(all .2s);
+		padding: $padding;
+		*padding: $padding 0; /* avoids problem in older browsers */
+		background-color: $background-color;
+		border: 1px solid $border-color;
+
+		&:focus {
+			border-color: $focus-border-color;
+			outline: 0;
+		}
+	}
+
+}