concisecss 0.0.1

data/app/assets/stylesheets/objects/_navigation.scss

@@ -0,0 +1,377 @@
+ @if $use-navigation == true {
+    //------------------------------------//
+    //  $NAVIGATION
+    //------------------------------------//
+    nav {
+        ul {
+            list-style: none;
+            margin: 0;
+        }
+        
+        li {
+            cursor: pointer;
+            position: relative;
+        }
+        
+        
+        // Dropdown 
+        .dropdown li { margin-right: 0px; }
+    }
+
+
+    // Nested dropdown 
+    .nav-dropdown {
+        ul {
+            ul {
+                display: none;
+                left: 0;
+                margin: 0;
+                opacity: 0;
+                padding: 0;
+                position: absolute;
+                visibility: hidden;
+                width: 150px;
+                z-index: 99999;
+                
+                ul {
+                    display: none;
+                    left: 0;
+                    margin: 0;
+                    opacity: 0;
+                    padding: 0;
+                    position: absolute;
+                    visibility: hidden;
+                    width: 150px;
+                    z-index: 99999;
+                }
+            }
+            
+            ol ul, 
+            ul ol, 
+            ol ol {
+                display: none;
+                left: 0;
+                margin: 0;
+                opacity: 0;
+                padding: 0;
+                position: absolute;
+                visibility: hidden;
+                width: 150px;
+                z-index: 99999;
+            }
+        }
+        
+        ol {
+            ol, 
+            ul {
+                display: none;
+                left: 0;
+                margin: 0;
+                opacity: 0;
+                padding: 0;
+                position: absolute;
+                visibility: hidden;
+                width: 150px;
+                z-index: 99999;
+            }
+            
+            ol {
+                ol, 
+                ul {
+                    display: none;
+                    left: 0;
+                    margin: 0;
+                    opacity: 0;
+                    padding: 0;
+                    position: absolute;
+                    visibility: hidden;
+                    width: 150px;
+                    z-index: 99999;
+                }
+            }
+            
+            ul {
+                ul, 
+                ol {
+                    display: none;
+                    left: 0;
+                    margin: 0;
+                    opacity: 0;
+                    padding: 0;
+                    position: absolute;
+                    visibility: hidden;
+                    width: 150px;
+                    z-index: 99999;
+                }
+            }
+        }
+        
+        .list-inline li li, 
+        &.list-inline li li { margin-right: 0px; }
+        
+        li li {
+            background: #fff;
+            display: block;
+        }
+        
+        ul {
+            ul ul, 
+            ol ul, 
+            ul ol, 
+            ol ol { display: block; }
+        }
+        
+        ol {
+            ul ul, 
+            ol ul, 
+            ul ol { display: block; }
+        }
+        
+        ul li:hover {
+            ul, 
+            ol {
+                display: block;
+                opacity: 1;
+                top: 100%;
+                visibility: visible;
+            }
+        }
+        
+        ol li:hover {
+            ul, 
+            ol {
+                display: block;
+                opacity: 1;
+                top: 100%;
+                visibility: visible;
+            }
+        }
+        
+        ul li:hover {
+            ul ul, 
+            ol ul, 
+            ul ol, 
+            ol ol {
+                display: none;
+                opacity: 0;
+                visibility: hidden;
+            }
+        }
+        
+        ol li:hover {
+            ul ul, 
+            ol ul, 
+            ul ol, 
+            ol ol {
+                display: none;
+                opacity: 0;
+                visibility: hidden;
+            }
+        }
+        
+        ul {
+            ul li:hover {
+                ul, 
+                ol {
+                    display: block;
+                    left: 100%;
+                    opacity: 1;
+                    position: absolute;
+                    top: 0;
+                    visibility: visible;
+                }
+            }
+            
+            ol li:hover {
+                ol, 
+                ul {
+                    display: block;
+                    left: 100%;
+                    opacity: 1;
+                    position: absolute;
+                    top: 0;
+                    visibility: visible;
+                }
+            }
+        }
+        
+        ol {
+            ul li:hover {
+                ul, 
+                ol {
+                    display: block;
+                    left: 100%;
+                    opacity: 1;
+                    position: absolute;
+                    top: 0;
+                    visibility: visible;
+                }
+            }
+            
+            ol li:hover {
+                ol, 
+                ul {
+                    display: block;
+                    left: 100%;
+                    opacity: 1;
+                    position: absolute;
+                    top: 0;
+                    visibility: visible;
+                }
+            }
+        }
+    }
+
+
+    // Vertical 
+    .nav-vertical {
+        li {
+            display: block;
+            margin-right: 0px;
+            padding: 10px;
+        }
+        
+        .icon {
+            line-height: inherit;
+            margin-right: 7px;
+            
+            &.right, &.text-right { margin-right: 0px; }
+        }
+        
+        &.nav-bordered {
+            border: 1px solid #eee;
+            
+            li:hover { background-color: #f6f6f6; }
+        }
+        
+        &.nav-line li:hover { background-color: #f6f6f6; }
+        
+        .badge, 
+        .label { margin-top: 5px; }
+        
+        .dropdown .dropdown-menu { top: 100%; }
+    }
+
+    @include breakpoint(small) {
+        .nav-vertical .dropdown .dropdown-menu {
+            left: 100%;
+            top: 0;
+        }
+    }
+
+
+    // Responsive navigation 
+    .naver {
+        .naver-handle {
+            color: inherit;
+            cursor: pointer;
+            display: none;
+            @include font-size(24px); 
+            text-align: right;
+            text-transform: uppercase;
+            
+            @include vendor(user-select, none);
+        }
+        
+        .naver-wrapper { 
+            height: auto; 
+            width: 100%;
+        }
+        
+        &.enabled {
+            .naver-handle { display: block; }
+            
+            .naver-wrapper {
+                height: 0px;
+                overflow: hidden;
+                
+                li {
+                    display: block;
+                    padding: 8px;
+                    text-align: left;
+                    width: 100%;
+                    
+                    &:hover { background: #f9f9f9; }
+                }
+            }
+        }
+    }
+
+    .nav-responsive {
+        &.naver .naver-handle:after {
+            content: "\f0c9";
+            font-family: FontAwesome;
+            text-align: right;
+        }
+        
+        &.nav-responsive-text.naver {
+            .naver-handle:after { content: "\00a0 \f0c9"; }
+            
+            .naver-container:before {
+                clear: both;
+                content: ".";
+                display: block;
+                height: 0;
+                line-height: 0;
+                text-align: right;
+                visibility: hidden;
+            }
+        }
+    }
+
+
+    // Left-aligned responsive navigation
+    .nav-responsive-left {
+        &.naver .naver-handle {
+            text-align: left;
+            
+            &:before {
+                content: "\f0c9";
+                font-family: FontAwesome;
+                text-align: left;
+            }
+        }
+        
+        &.nav-responsive-text.naver {
+            .naver-handle:before { content: "\f0c9 \00a0"; }
+            
+            .naver-container:after {
+                clear: both;
+                content: ".";
+                display: block;
+                height: 0;
+                line-height: 0;
+                text-align: left;
+                visibility: hidden;
+            }
+        }
+    }
+
+
+    // Centered responsive navigation
+    .nav-responsive-center {
+        &.naver .naver-handle {
+            text-align: center;
+            
+            &:before {
+                content: "\f0c9";
+                font-family: FontAwesome;
+                text-align: center;
+            }
+        }
+        
+        &.nav-responsive-text.naver {
+            .naver-handle:before { content: "\f0c9 \00a0"; }
+            
+            .naver-container:after {
+                clear: both;
+                content: ".";
+                display: block;
+                height: 0;
+                line-height: 0;
+                text-align: center;
+                visibility: hidden;
+            }
+        }
+    }
+}

data/app/assets/stylesheets/objects/_progress.scss

@@ -0,0 +1,102 @@
+@if $use-progress == true {
+    //------------------------------------//
+    //  $PROGRESS
+    //------------------------------------//
+    .progress {
+        background-color: #f9f9f9;
+        color: #fff;
+        @include font-size(11px, false); 
+        height: 12px;
+        line-height: 1.182;
+        margin: 6px 0;
+        position: relative;
+        text-align: center;
+        width: 100%;
+        
+        @include vendor(box-shadow, inset 0 1px 1px rgba(100, 100, 100, 0.1));
+        
+        @include vendor(box-sizing, initial);
+    }
+
+    .progress-small {
+        @include font-size(9px, false); 
+        height: 6px;
+        line-height: 0.875;
+    }
+
+    .progress-large {
+        @include font-size($base-font-size, false); 
+        height: 25px;
+        line-height: 1.7;
+    }
+
+    .progress {
+        > span {
+            background-color: rgb(43, 194, 83);
+            display: block;
+            height: 100%;
+            overflow: hidden;
+            position: relative;
+            width: auto;
+        }
+        
+        
+        // Rounded corners
+        &.border-radius > span { border-radius: $border-radius; }
+        
+        
+        // Stacked
+        &.progress-stacked {
+            > span {
+                display: inline-block;
+                float: left;
+            }
+            
+            &.border-radius > span {
+                border-radius: 0px;
+                
+                &:first-of-type { border-radius: $border-radius 0 0 $border-radius; }
+                
+                &:last-of-type { border-radius: 0 $border-radius $border-radius 0; }
+            }
+        }
+    }
+
+
+    // Striped
+    .progress-striped {
+        > span {
+            &:after, > span {
+                bottom: 0;
+                content: "";
+                left: 0;
+                overflow: hidden;
+                position: absolute;
+                right: 0;
+                top: 0;
+                z-index: 1;
+
+                @include vendor(background-size, 50px 50px);
+                
+                background-image: 
+                    -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
+                background-image: 
+                    -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
+            }
+        }
+        
+        
+        // Animated 
+        &.progress-animate > span {
+            &:after, > span {             
+                @include vendor(animation, move 2s linear infinite);
+            }
+        }
+    }
+
+    @-webkit-keyframes move {
+        0% { background-position: 0 0; }
+        
+        100% { background-position: 50px 50px; }
+    }
+}

data/app/assets/stylesheets/objects/_wells.scss

@@ -0,0 +1,103 @@
+@if $use-wells == true {
+    //------------------------------------//
+    //  $WELLS
+    //------------------------------------//
+    .well {
+        background-color: #f9f9f9;
+        border-color: #ededed;
+        border-style: solid;
+        border-width: 1px;
+        margin-bottom: 24px;
+        padding: 0px 15px;
+        
+        h1, h2, h3, h4, h5, h6,
+        .h1, .h2, .h3, .h4, .h5, .h6,
+        .giga, .mega, .kilo { color: inherit; }
+        
+        p { margin: 10px 0; }
+        
+        pre, 
+        .pre.well {
+            @include font-size(14px); 
+            padding: 10px 15px;
+        }
+    }
+
+    .well {
+        // Headings
+        header {
+            h1, h2, h3, h4, h5, h6,
+            .h1, .h2, .h3, .h4, .h5, .h6,
+            .giga, .mega, .kilo { margin: 20px 0 10px; }
+            
+            .label, 
+            .badge { margin-top: 10px; }
+        }
+        
+        
+        // Background colors 
+        &[class*='bg-'] { color: #fff; }
+        
+        &.bg-white { color: #666; }
+        
+        &.bg-black { border-color: #000; }
+        
+        &.bg-green { border-color: darken($bg-green, 15%); }
+        
+        &.bg-light-green {
+            border-color: darken($bg-green, 15%);
+            color: $color-green;
+        }
+        
+        &.bg-blue { border-color: darken($bg-blue, 15%); }
+        
+        &.bg-light-blue {
+            border-color: darken($bg-blue, 15%);
+            color: $color-blue;
+        }
+        
+        &.bg-yellow { border-color: darken($bg-yellow, 15%); }
+        
+        &.bg-light-yellow {
+            border-color: darken($bg-yellow, 15%);
+            color: $color-yellow;
+        }
+        
+        &.bg-red { border-color: darken($bg-red, 15%); }
+        
+        &.bg-light-red {
+            border-color: darken($bg-red, 15%);
+            color: $color-red;
+        }
+    }
+
+
+    // Close icon
+    .close {
+        color: #000;
+        filter: alpha(opacity = 20);
+        float: right;
+        @include font-size(22px); 
+        font-weight: bold;
+        opacity: .2;
+        
+        &:hover, &:focus {
+            color: #000;
+            cursor: pointer;
+            filter: alpha(opacity = 50);
+            opacity: .5;
+            text-decoration: none;
+            
+            @include vendor(transition, all 0.2s linear);
+        }
+    }
+
+    button.close {
+        background: transparent;
+        border: 0;
+        cursor: pointer;
+        padding: 0;
+    }
+
+    .well .close { margin-top: 6px; }
+}

data/concisecss.gemspec

@@ -0,0 +1,25 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'concisecss/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "concisecss"
+  spec.version       = Concisecss::VERSION
+  spec.authors       = ["Benjamin Sigidi"]
+  spec.email         = ["benjamin@sigididesign.com"]
+  spec.summary       = %q{Concise is built from the ground-up for mobile devices. This means it will look great on all devices.}
+  spec.description   = %q{Concise is built on a set of simple but important principles that aid in effective and manageable web design. By understanding these principles, Concise can be used to it's full potential and we can create a better paradigm for using HTML and CSS to build websites.}
+  spec.homepage      = "http://concisecss.com"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0")
+  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency 'bundler', '~> 1.5'
+  spec.add_development_dependency 'rake', '~> 0'
+  spec.add_development_dependency 'rails', '~> 4.0'
+  spec. add_development_dependency 'httpclient', '~> 2.2', '~> 0'
+end

data/lib/concisecss/concisecss_source.rb

@@ -0,0 +1,63 @@
+require "thor"
+require "json"
+require "httpclient"
+
+class ConcisecssSource < Thor
+  include Thor::Actions
+
+  desc "fetch source files", "fetch source files from ConciseCSS GitHub "
+  def fetch
+    filtered_tags = fetch_tags
+    tag = select("Which tag do you want to fetch?", filtered_tags)
+    self.destination_root = "app/assets"
+    remote = "https://github.com/ConciseCSS/concise.css"
+    get "#{remote}/raw/#{tag}/scss/concise.scss", "stylesheets/concise.scss"
+    get "#{remote}/raw/#{tag}/scss/_defaults.scss", "stylesheets/_defaults.scss"
+    get "#{remote}/raw/#{tag}/scss/objects/_badges.scss", "stylesheets/objects/_badges.scss"
+    get "#{remote}/raw/#{tag}/scss/objects/_breadcrumbs.scss", "stylesheets/objects/_breadcrumbs.scss"
+    get "#{remote}/raw/#{tag}/scss/objects/_buttons.scss", "stylesheets/objects/_buttons.scss"
+    get "#{remote}/raw/#{tag}/scss/objects/_colors.scss", "stylesheets/objects/_colors.scss"
+    get "#{remote}/raw/#{tag}/scss/objects/_dropdowns.scss", "stylesheets/objects/_dropdowns.scss"
+    get "#{remote}/raw/#{tag}/scss/objects/_groups.scss", "stylesheets/objects/_groups.scss"
+    get "#{remote}/raw/#{tag}/scss/objects/_navigation.scss", "stylesheets/objects/_navigation.scss"
+    get "#{remote}/raw/#{tag}/scss/objects/_progress.scss", "stylesheets/objects/_progress.scss"
+    get "#{remote}/raw/#{tag}/scss/objects/_wells.scss", "stylesheets/objects/_wells.scss"
+    get "#{remote}/raw/#{tag}/scss/objects/_clearfix.scss", "stylesheets/objects/_clearfix.scss"
+    get "#{remote}/raw/#{tag}/scss/objects/_conditional.scss", "stylesheets/objects/_conditional.scss"
+    get "#{remote}/raw/#{tag}/scss/objects/_debug.scss", "stylesheets/objects/_debug.scss"
+    get "#{remote}/raw/#{tag}/scss/objects/_helper.scss", "stylesheets/objects/_helper.scss"
+    get "#{remote}/raw/#{tag}/scss/objects/_mixins.scss", "stylesheets/objects/_mixins.scss"
+    get "#{remote}/raw/#{tag}/scss/objects/_normalize.scss", "stylesheets/objects/_normalize.scss"
+    get "#{remote}/raw/#{tag}/scss/objects/_print.scss", "stylesheets/objects/_print.scss"
+    get "#{remote}/raw/#{tag}/scss/objects/_shared.scss", "stylesheets/objects/_shared.scss"
+    get "#{remote}/raw/#{tag}/scss/base/_blockquotes.scss", "stylesheets/base/_blockquotes.scss"
+    get "#{remote}/raw/#{tag}/scss/base/_container.scss", "stylesheets/base/_container.scss"
+    get "#{remote}/raw/#{tag}/scss/base/_forms.scss", "stylesheets/base/_forms.scss"
+    get "#{remote}/raw/#{tag}/scss/base/_grid.scss", "stylesheets/base/_grid.scss"
+    get "#{remote}/raw/#{tag}/scss/base/_headings.scss", "stylesheets/base/_headings.scss"
+    get "#{remote}/raw/#{tag}/scss/base/_lists.scss", "stylesheets/base/_lists.scss"
+    get "#{remote}/raw/#{tag}/scss/base/_main.scss", "stylesheets/base/_main.scss"
+    get "#{remote}/raw/#{tag}/scss/base/_selection.scss", "stylesheets/base/_selection.scss"
+    get "#{remote}/raw/#{tag}/scss/base/_tables.scss", "stylesheets/base/_tables.scss"
+    get "#{remote}/raw/#{tag}/scss/base/_type.scss", "stylesheets/base/_type.scss"
+
+    get "#{remote}/raw/#{tag}/js/non-responsive.js", "javascripts/concisecss/non-responsive.js"
+    get "#{remote}/raw/#{tag}/js/navigation.js", "javascripts/concisecss/navigation.js"
+    get "#{remote}/raw/#{tag}/js/naver.js", "javascripts/concisecss/naver.js"
+    get "#{remote}/raw/#{tag}/js/dropdown.js", "javascripts/concisecss/dropdown.js"
+    get "#{remote}/raw/#{tag}/js/close.js", "javascripts/concisecss/close.js"
+  end
+
+
+
+  private
+
+  def fetch_tags
+    http = HTTPClient.new
+    response = JSON.parse(http.get("https://api.github.com/repos/ConciseCSS/concise.css/tags").body)
+    response.map{|tag| tag["name"]}.sort
+  end
+
+
+
+end

data/lib/concisecss/engine.rb

@@ -0,0 +1,6 @@
+module Concisecss
+  module Rails
+    class Engine < ::Rails::Engine
+    end
+  end
+end

data/lib/concisecss/version.rb

@@ -0,0 +1,3 @@
+module Concisecss
+  VERSION = "0.0.1"
+end

data/lib/concisecss.rb

@@ -0,0 +1,7 @@
+require "concisecss/version"
+
+module Concisecss
+  module Rails
+    require "concisecss/engine"
+  end
+end