framous 0.0.2 → 0.1

data/CHANGELOG.mkdn

@@ -0,0 +1,6 @@
+Framous Changelog
+======================
+
+v0.1 [Nov 15, 2012]
+-------------------
+* Init project

data/LICENSE.txt

@@ -1,22 +1,28 @@
-Copyright (c) 2012 Alec Hance
+Copyright (c) 2012, Alec Hance
+All rights reserved.
 
-MIT License
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are
+met:
 
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above
+      copyright notice, this list of conditions and the following
+      disclaimer in the documentation and/or other materials provided
+      with the distribution.
+    * Neither the name of the author nor the names of other
+      contributors may be used to endorse or promote products derived
+      from this software without specific prior written permission.
 
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

data/README.md

@@ -1,29 +1,23 @@
-# Framous
+framous
+============
 
-TODO: Write a gem description
+HTML5 and SCSS Starter Kit
 
-## Installation
+Installation
+============
 
-Add this line to your application's Gemfile:
+From the command line:
 
-    gem 'framous'
+    (sudo) gem install framous
 
-And then execute:
+Add to a project:
 
-    $ bundle
+    // rails: compass.config, other: config.rb
+    require 'framous'
 
-Or install it yourself as:
+    // command line
+    compass install framous
+    
+Or create a new project:
 
-    $ gem install framous
-
-## Usage
-
-TODO: Write usage instructions here
-
-## Contributing
-
-1. Fork it
-2. Create your feature branch (`git checkout -b my-new-feature`)
-3. Commit your changes (`git commit -am 'Add some feature'`)
-4. Push to the branch (`git push origin my-new-feature`)
-5. Create new Pull Request
+    compass create <project_directory_name> -r framous --using framous

data/lib/framous.rb

@@ -1,10 +1,3 @@
-require "framous/version"
-
-require "compass"
-
+require 'compass'
 extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
 Compass::Frameworks.register('framous', :path => extension_path)
-
-module Framous
-  # Your code goes here...
-end

data/stylesheets/_framous-commons.scss

@@ -0,0 +1,5 @@
+//
+// Framous-commons.scss
+//
+
+@import "framous/settings";

data/stylesheets/_framous-grid.scss

@@ -0,0 +1,7 @@
+//
+// Framous-grid.scss
+//
+
+@import "framous/settings";
+@import "framous/functions";
+@import "framous/grid";

data/stylesheets/_framous.scss

@@ -1 +1,6 @@
-// This is your framework's main stylesheet. Use it to import all default modules.
+//
+// Framous.scss
+//
+
+@import "framous-grid";
+@import "framous-commons";

data/stylesheets/framous/_functions.scss

@@ -0,0 +1,39 @@
+//
+// Functions & Mixins
+//
+
+//
+// Flexible grid
+//
+
+@function flex-grid($columns, $container-columns: $fg-max-columns) {
+  $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($width / $container-width);
+}
+
+// Flexible gutter
+@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($gutter / $container-width);
+}
+
+//
+// Container Span
+//
+
+@function container-span($span: $span) {
+  @if length($span) == 3 {
+    $container-columns: nth($span, 3);
+    @return $container-columns;
+  }
+
+  @else if length($span) == 2 {
+    $container-columns: nth($span, 2);
+    @return $container-columns;
+  }
+
+  @else {
+    @return $grid-columns;
+  }
+}

data/stylesheets/framous/_grid.scss

@@ -0,0 +1,201 @@
+//
+// Grid.scss 
+// The default grid uses 12 columns.
+// A setting that can be easily overridden in /base/settings.scss
+//
+
+//
+// Imports
+//
+
+@import "compass/css3/box-sizing";
+
+// $border-box-sizing: true !default;
+// Makes all elements have a border-box layout
+
+@if $border-box-sizing == true {
+  * {
+    @include box-sizing(border-box);
+  }
+}
+
+$fg-column: $column;
+$fg-gutter: $gutter;
+$fg-max-columns: $grid-columns;
+$fg-max-width: $max-width;
+$parent-columns: $grid-columns !default;
+
+// outer wrapper center container
+@mixin outer-container() {
+  @include clearfix;
+  max-width: $fg-max-width;
+  text-align: left;
+  margin: {
+    left: auto;
+    right: auto;
+  }
+}
+
+// Grid span columns
+// Use the span-columns mixin to specify the number of columns an element:
+// @include span-columns($span: $columns of $container-columns, $display: block)
+// eg. Element that spans across 6 columns (out of the default 12)
+// div.element { @include span-columns(6 of 8); }
+@mixin span-columns($span: $columns of $container-columns, $display: block) {
+
+  $columns: nth($span, 1);
+  $container-columns: container-span($span);
+
+  @if $container-columns != $grid-columns {
+    $parent-columns: $container-columns;
+  }
+
+  @if $display == table {
+    display: table-cell;
+    padding-right: flex-gutter($container-columns);
+    width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);
+
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+
+  @else if $display == inline-block {
+    @include inline-block;
+    margin-right: flex-gutter($container-columns);
+    width: flex-grid($columns, $container-columns);
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  @else {
+    display: block;
+    float: left;
+    margin-right: flex-gutter($container-columns);
+    width: flex-grid($columns, $container-columns);
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+// Clearfix / row container
+// In order to clear floated or table-cell columns:
+@mixin row($display: block) {
+  @include clearfix;
+  @if $display == table {
+    display: table;
+  }
+
+  @else {
+    display: block;
+  }
+}
+
+// Shift
+// To move an element to the left or right by a number of columns:
+@mixin shift($n-columns: 1) {
+  margin-left: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns);
+}
+
+// Pad
+// To add padding around the entire column use pad().
+// By default it adds the same value as the grid's gutter.
+@mixin pad($padding: flex-gutter()) {
+  padding: $padding;
+}
+
+// Remove element gutter
+@mixin omega($display: block, $direction: right) {
+  @if $display == table {
+    padding-#{$direction}: 0;
+  }
+
+  @else {
+    margin-#{$direction}: 0;
+  }
+}
+
+// You can also use nth-omega to remove the gutter of a specific column or set of columns
+@mixin nth-omega($nth, $display: block, $direction: right) {
+  @if $display == table {
+    &:nth-child(#{$nth}) {
+      padding-#{$direction}: 0;
+    }
+  }
+
+  @else {
+    &:nth-child(#{$nth}) {
+      margin-#{$direction}: 0;
+    }
+  }
+}
+
+// Fill 100% of parent
+// This makes sure that the child fills 100% of its parent
+@mixin fill-parent() {
+  width: 100%;
+
+  @if $border-box-sizing == false {
+    @include box-sizing(border-box);
+  }
+}
+
+// Breakpoints
+// The breakpoint() mixin allows you to use media-queries to modify both the grid and the layout.
+// It takes two arguments:
+@mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
+
+  @if length($query) == 1 {
+    @media screen and ($default-feature: nth($query, 1)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 2 {
+    @media screen and (nth($query, 1): nth($query, 2)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 3 {
+    @media screen and (nth($query, 1): nth($query, 2)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: nth($query, 3);
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 4 {
+    @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 5 {
+    @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: nth($query, 5);
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else {
+    @warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
+  }
+}
+ 

data/stylesheets/framous/_settings.scss

@@ -0,0 +1,42 @@
+//
+// Settings.scss
+//
+
+//
+// 1. Responsive Grid
+//
+
+// Column width
+$column: 145px !default;
+// Gutter between each two columns
+$gutter: 9px !default;
+// Total number of columns in the grid (Total Columns For Main Container)
+$grid-columns: 12 !default;
+// Max-width of the outer container
+$max-width: 1024px !default;
+// Makes all elements have a border-box layout
+$border-box-sizing: true !default;
+// Default @media feature for the breakpoint() mixin
+$default-feature: min-width;
+
+//
+// 2. Responsive Breakpoints
+// @see http://css-tricks.com/snippets/css/media-queries-for-standard-devices
+//
+
+// Smartphones (portrait and landscape)
+$phone:							min-device-width 320px max-device-width 479px;
+// Smartphones (portrait)
+$phone-portrait:		max-width 319px;
+// Smartphones (landscape)
+$phone-landscape:		min-width 320px max-width 479px;
+// iPads (portrait and landscape)
+$ipad:							min-device-width 768px;
+// iPads (portrait)
+$ipad-portrait:			min-device-width 768px max-device-width 1024px orientation portrait;
+// iPads (landscape)
+$ipad-landscape:		min-device-width 768px max-device-width 1024px orientation landscape;
+// Desktops and laptops
+$desktop:						min-width 1024px;
+// iPhone 4
+$retina:						-webkit-min-device-pixel-ratio 1.5 min-device-pixel-ratio 1.5;

data/templates/project/manifest.rb

@@ -1,2 +1,15 @@
-# Make sure you list all the project template files here in the manifest.
-stylesheet 'screen.sass', :media => 'screen, projection'
+stylesheet 'screen.scss', :media => 'screen, projection'
+
+description "Framous: HTML5 and SCSS Starter Kit"
+
+help %Q{
+  Please see Framous github for all documentation and tutorials:
+
+    http://github.com/alechance/framous
+}
+
+welcome_message %Q{
+  Please see Framous github for all documentation and tutorials:
+
+    http://github.com/alechance/framous
+}

data/templates/project/screen.scss

@@ -1,2 +1,8 @@
-// This is where you put the contents of the main stylesheet for the user's project.
-// It should import your sass stylesheets and demonstrate how to use them.
+//** Framous-Grid **//
+
+// Import ------------------------------------------------------------------
+
+@import "framous-grid";
+
+// For future include framous-commons
+// @import "framous-commons"

metadata

@@ -1,26 +1,55 @@
 --- !ruby/object:Gem::Specification 
 name: framous
 version: !ruby/object:Gem::Version 
-  hash: 27
+  hash: 9
   prerelease: 
   segments: 
   - 0
-  - 0
-  - 2
-  version: 0.0.2
+  - 1
+  version: "0.1"
 platform: ruby
 authors: 
 - Alec Hance
+- Khalid Yagoubi
 autorequire: 
 bindir: bin
 cert_chain: []
 
-date: 2012-11-02 00:00:00 Z
-dependencies: []
-
-description: A fluid grid framework written with SCSS & Compass Style
-email: 
-- hello@alechance.com
+date: 2012-11-15 00:00:00 Z
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: compass
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 29
+        segments: 
+        - 0
+        - 11
+        version: "0.11"
+  type: :runtime
+  version_requirements: *id001
+- !ruby/object:Gem::Dependency 
+  name: sass
+  prerelease: false
+  requirement: &id002 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 15
+        segments: 
+        - 3
+        - 2
+        - 0
+        version: 3.2.0
+  type: :runtime
+  version_requirements: *id002
+description: HTML5 and SCSS StarterKit
+email: hello@alechance.com
 executables: []
 
 extensions: []
@@ -28,18 +57,19 @@ extensions: []
 extra_rdoc_files: []
 
 files: 
-- .gitignore
-- Gemfile
+- CHANGELOG.mkdn
 - LICENSE.txt
 - README.md
-- Rakefile
-- framous.gemspec
 - lib/framous.rb
-- lib/framous/version.rb
+- stylesheets/_framous-commons.scss
+- stylesheets/_framous-grid.scss
 - stylesheets/_framous.scss
+- stylesheets/framous/_functions.scss
+- stylesheets/framous/_grid.scss
+- stylesheets/framous/_settings.scss
 - templates/project/manifest.rb
 - templates/project/screen.scss
-homepage: ""
+homepage: http://github.com/alechance/framous
 licenses: []
 
 post_install_message: 
@@ -71,6 +101,6 @@ rubyforge_project:
 rubygems_version: 1.8.24
 signing_key: 
 specification_version: 3
-summary: A fluid grid framework written with SCSS & Compass Style
+summary: HTML5 and SCSS StarterKit
 test_files: []
 

data/.gitignore

@@ -1,17 +0,0 @@
-*.gem
-*.rbc
-.bundle
-.config
-.yardoc
-Gemfile.lock
-InstalledFiles
-_yardoc
-coverage
-doc/
-lib/bundler/man
-pkg
-rdoc
-spec/reports
-test/tmp
-test/version_tmp
-tmp

data/Gemfile

@@ -1,4 +0,0 @@
-source 'https://rubygems.org'
-
-# Specify your gem's dependencies in framous.gemspec
-gemspec

data/Rakefile

@@ -1 +0,0 @@
-require "bundler/gem_tasks"

data/framous.gemspec

@@ -1,19 +0,0 @@
-# -*- encoding: utf-8 -*-
-lib = File.expand_path('../lib', __FILE__)
-$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
-require 'framous/version'
-
-Gem::Specification.new do |gem|
-  gem.name          = "framous"
-  gem.version       = Framous::VERSION
-  gem.authors       = ["Alec Hance"]
-  gem.email         = ["hello@alechance.com"]
-  gem.description   = %q{A fluid grid framework written with SCSS & Compass Style}
-  gem.summary       = %q{A fluid grid framework written with SCSS & Compass Style}
-  gem.homepage      = ""
-
-  gem.files         = `git ls-files`.split($/)
-  gem.executables   = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
-  gem.test_files    = gem.files.grep(%r{^(test|spec|features)/})
-  gem.require_paths = ["lib"]
-end

data/lib/framous/version.rb

@@ -1,3 +0,0 @@
-module Framous
-  VERSION = "0.0.2"
-end