flexy 1.0 → 1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 34e2c966b22c54d1f60fc12d5249024f122aa820
-  data.tar.gz: 2d9895b14c03cb1c61fe1c9ae9cb521a887dd0bc
+  metadata.gz: dc9ea03e1422be7d9b7aa01ae53ddce93326872a
+  data.tar.gz: bddd31d74ab13f42fcd7c8f48c23420ea1989fd2
 SHA512:
-  metadata.gz: 960e092aca02fd2dc62f3cdfa143fa374dac9a75119ed833bb334a800099294ef227081e9a7771966db292fdf6435c13715b47adabd3dd890738219889cf9ce2
-  data.tar.gz: 58de07412923f5c8a4ebb69b170f0d0a23a392bd3260ef9fd38a9284ffacd014bca3da55cd734621a6dfd20821c3b8675903dd2b240149e6714a67766cbe6d61
+  metadata.gz: 6b688168c3bf818a2bf1ee4f09a850e691b615f9255e205cf5c2da03336580eb8bbcd9fa8c46741e96c5098702bbc872c90948487cf5e9134fd3ba2682de653f
+  data.tar.gz: b6d9c0de403cd0e643ce8e3353950abaecfb8749de6ff1ba5cb57d98c1f51e9e03a43b6de1afa2cfb1c66392a0c6460673d77726f72ebb64c1ecc80323145ac0

data/README.md

@@ -1,54 +1,4 @@
-Compass Extension Template
-==========================
+A simple Flexbox Compass extension 
+==================================
 
-Whenever I'm creating a [Compass extension](http://compass-style.org/help/tutorials/extensions/), I find that I always use the same basic template for creating extensions, and that the project that Compass comes with isn't quite complete enough to get me where I need to be. With that in mind, I've created this little project to get you on your way. Here's a little template that I've put together to kickstart Compass extension development. Wherever it says "Extension" in the template files/file names, replace it with *your* extension's name. All files are self documented; please read the documentation there.
-
-## lib/extension.rb
-
-Your `lib` directory is your Ruby directory. The main file in here is **extension.rb** which contains the information that Compass needs to make your Extension run like a champ.  It contains the Compass requires for other gems (like you would include in *config.rb* normally), the code to register your extension with Compass, the version number and date of the version, and any SassScript you may want to write.
-
-## stylesheets/_extension.scss
-
-Your `stylesheets` directory is where you write all of your extension's Sass! I've included **_extension.scss**, but you can include whatever you'd like. Write Sass or SCSS, do what works for you! Have sub folders, have sub partials, this is your playground. Important to note: make sure that every file in here is a Partial unless there is a file you specifically want to be output as a full file. Generally speaking, most Compass extensions *only* have partial files.
-
-## templates/project
-
-Your `templates` directory is where you store any project templates/patterns you'd like a user to be able to use. The Compass Extension documentation explains in full what a template/pattern can do, the one provided is a generic one including print, i.e., and screen stylesheets that will import your extension. This will provide users with the ability to create a new project using your Compass extension in the following way:
-
-`compass create <my_project> -r extension --using extension`
-
-## CHANGELOG.md/README.md
-
-These files aren't required for your Compass extension, but I really like including them as they are useful for Users to understand the direction of your Compass extension. Yes! That means you get to throw this README out and write your own! Do it!
-
-## extension.gemspec
-
-This is the magic file that will turn your collection of files into a packaged Compass extension! It's all laid out for you, just add/change what you need! When you're all done editing what you need, in the command line, from the directory where that lives, type the following:
-
-`gem build extension.gemspec`
-
-This will bundle your extension up into a Ruby gem. From there, if you're just using it locally, you can install your Extension in by typing the following:
-
-`gem install extension-VERSION.gem`
-
-If you're looking to distribute your extension, first, make sure you've got a [Ruby Gems](http://rubygems.org/) account, and type in the following:
-
-`gem push extension-VERSION.gem`
-
-If you're not logged in to Ruby Gems, it will ask you to log in, then it will push your extension up to Ruby Gems! Tada! It's now distributed to the world! To install a Compass extension from Ruby Gems, it's as simple as:
-
-`gem install extension`
-
-<hr>
-
-# AND YOU'RE DONE.
-
-<hr>
-
-## Special Thanks
-Super special thanks goes out to [Nathan Weizenbaum](https://github.com/nex3/) for Sass, [Chris Eppstein](https://github.com/chriseppstein/) for Compass, and [Mason Wendell](https://github.com/canarymason/) and [Scott Kellum](https://github.com/scottkellum/), my Compass extension partners in crime. Much of what's presented here is an amalgamation of what Chris, Mason, and Scott have taught me, so double thanks to them.
-
-## License
-[Creative Commons Attribution 3.0](http://creativecommons.org/licenses/by/3.0). Go wild.
-
-If you're able to link me to your extension so I can see what you've built, that'd be awesome!
+Open [flexy-demo.scss](https://github.com/Guilh/Flexy/blob/master/templates/project/flexy-demo.scss) for examples of how to use Flexy. 

data/lib/flexy.rb

@@ -17,8 +17,8 @@ Compass::Frameworks.register('flexy', :path => extension_path)
 #    a prerelease version
 #  Date is in the form of YYYY-MM-DD
 module Extension
-  VERSION = "1.0"
-  DATE = "2014-06-03"
+  VERSION = "1.1"
+  DATE = "2014-06-06"
 end
 
 # This is where any custom SassScript should be placed. The functions will be  

data/stylesheets/_flexy.scss

@@ -1,14 +1,14 @@
 @import "compass/css3/shared";
 
-$flexy-support: not -moz, -webkit, not -o, not -ms, not -khtml, official !default;
+$flexy-support: not -moz, -webkit, not -o, not -ms, official !default;
 $flexy-breakpoint: 769px !default;
 
 @mixin flexy(
 	$el: li,
 	$direction: row,
-	$align: stetch,
+	$align: stretch,
 	$justify: flex-start,
-	$grow: 0 1 auto,
+	$flex: 0 1 auto,
 	$breakpoint: $flexy-breakpoint) {
 	
 	@media (min-width: $breakpoint) {
@@ -27,7 +27,7 @@ $flexy-breakpoint: 769px !default;
 
 		// Grow all flex items
 		& > #{$el} {
-			@include experimental(flex,$grow,$flexy-support...);
+			@include experimental(flex,$flex,$flexy-support...);
 		}
 	}
 }

data/templates/project/flexy-demo.scss

@@ -0,0 +1,62 @@
+// Import Flexy and you're ready to go!
+
+@import "flexy";
+
+///////////////////////////////
+// Flexy Variables ///////////
+/////////////////////////////
+
+	// Config variable for setting flexbox support
+		$flexy-support: not -moz, -webkit, not -o, not -ms, official;
+
+	// Config variable for setting flexbox media query breakpoint. The default value is 769px.
+		$flexy-breakpoint: 769px;
+
+//////////////////////////////
+// Flexy Mixins /////////////
+////////////////////////////
+
+	// Establish flexbox layout with default all values
+		@include flexy;
+
+	// Optional Arguments
+		@include flexy($el, $direction, $align, $justify, $flex);
+
+	 	// $el         - Defines the element or class to target as flex items
+		// $direction  - Set the flex-direction
+		// $align      - Align flex items
+		// $justify    - Set the flex container alignment
+		// $flex       - Set the flex value for flex items
+
+  // Variable Defaults
+
+  	// $el: li       
+		// $direction: row
+		// $align: stretch
+		// $justify: flex-start
+		// $flex: 0 1 auto
+
+	// Target a specific flex item and apply a flex-grow
+	@include flexy-grow($item, $amt);
+
+	// Change the order of flex items
+	@include flexy-order($order);
+
+//////////////////////////////
+// Examples /////////////////
+////////////////////////////
+
+.main-nav {
+	@include flexy($align: center, $flex: 1);
+	@include flexy-grow(2, 3);
+}
+.content-row {
+	@include flexy(".col", $flex: 1);
+	@include flexy-grow(1, 2);
+	.secondary-content {
+		@include flexy-order(3);
+	}
+	.extra-content {
+		@include flexy-order(2);
+	}
+}

data/templates/project/manifest.rb

@@ -1,19 +1,19 @@
 # Description
-description "A simple Compass extension for Flexbox!"
+description "A simple flexbox Compass extension."
 
 # Stylesheet Import
-file 'screen.scss', :like => :stylesheet, :media => 'screen, projection'
+file 'flexy-demo.scss', :like => :stylesheet, :media => 'screen, projection'
 
 # General File Import
 # file 'README.md', :to => "README.md"
 
 # Compass Extension Help
 help %Q{
-  Help for your Compass extension
+  Open flexy-demo.scss for help and examples.
 }
 
 # Compass Extension Welcome Message
 #  Users will see this when they create a new project using this template.
 welcome_message %Q{
-  You have successfully installed Flexy!
+  You have successfully installed the Flexy demo! Open flexy-demo.scss for examples.
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: flexy
 version: !ruby/object:Gem::Version
-  version: '1.0'
+  version: '1.1'
 platform: ruby
 authors:
 - Guil Hernandez
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-06-03 00:00:00.000000000 Z
+date: 2014-06-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -45,11 +45,12 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- CHANGELOG.md
 - README.md
 - lib/flexy.rb
 - stylesheets/_flexy.scss
+- templates/project/flexy-demo.scss
 - templates/project/manifest.rb
-- templates/project/screen.scss
 homepage: http://teamtreehouse.com
 licenses: []
 metadata: {}

data/templates/project/screen.scss

@@ -1,3 +0,0 @@
-// This file will get output into the user's Sass folder.
-// We're going to import our extension's Sass here! Remember to change it!
-@import "extension";