├── .gitignore ├── .travis.yml ├── Gemfile ├── README.md ├── Rakefile ├── lessframework-rails.gemspec ├── lib ├── lessframework-rails.rb └── lessframework-rails │ ├── engine.rb │ ├── railtie.rb │ └── version.rb └── vendor └── assets └── stylesheets ├── less133.css ├── less14.css ├── less15.css └── retina.css /.gitignore: -------------------------------------------------------------------------------- 1 | *.gem 2 | .bundle 3 | Gemfile.lock 4 | pkg/* 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | rvm: 2 | - 1.8.7 # (current default) 3 | - 1.9.2 4 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source "http://rubygems.org" 2 | 3 | # Specify your gem's dependencies in lessframework-rails.gemspec 4 | gemspec 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # LessFramework-rails 2 | 3 | [![Build Status](http://travis-ci.org/aslamnd/lessframework-rails.png)](http://travis-ci.org/aslamnd/lessframework-rails) 4 | 5 | Less Framework is a CSS grid system for designing adaptive web-sites. It 6 | contains 4 layouts and 3 set of typography presets, all based on a 7 | single grid. 8 | 9 | This gem provides following stylesheets from Less Framework. 10 | 11 | ### less15 - Optimize for 1.5 line-height 12 | Typography presets based on 16 px text. Good for fonts like Georgia. 13 | 14 | ### less14 - Optimize for 1.4 line-height 15 | Typography presets based on 17 px text. Good for fonts like Palatino. 16 | 17 | ### less133 - Optimize for 1.33 line-height 18 | Typography presets based on 18 px text. Good for fonts like Times. 19 | 20 | ### retina - Retina media query 21 | Adds a media query that targets screens with a device-pixel-ratio of 2+. 22 | 23 | 24 | 25 | Learn more about Less Framework here - [ http://lessframework.com/ ] (http://lessframework.com/) 26 | 27 | 28 | ## Rails 3.1 29 | 30 | Include Less Framework in Gemfile 31 | ``` 32 | gem 'lessframework-rails' 33 | ``` 34 | and run ```bundle install```. 35 | 36 | Add necessary stylesheet files to ```app/assets/stylesheets/application.css``` 37 | 38 | ``` 39 | *= require less15 40 | *= require less14 41 | *= require less133 42 | *= require retina 43 | ``` 44 | 45 | ## Credits 46 | Thanks [@jonikorpi](http://twitter.com/jonikorpi) for making [Less 47 | Framework](http://lessframework.com/). 48 | -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | require 'bundler' 2 | Bundler::GemHelper.install_tasks 3 | -------------------------------------------------------------------------------- /lessframework-rails.gemspec: -------------------------------------------------------------------------------- 1 | # -*- encoding: utf-8 -*- 2 | $:.push File.expand_path("../lib", __FILE__) 3 | require "lessframework-rails/version" 4 | 5 | Gem::Specification.new do |s| 6 | s.name = "lessframework-rails" 7 | s.version = Lessframework::Rails::VERSION 8 | s.platform = Gem::Platform::RUBY 9 | s.authors = ["Aslam Najeebdeen"] 10 | s.email = ["aslam@frontcube.com"] 11 | s.homepage = "http://github.com/aslamnd/lessframework-rails" 12 | s.summary = "Less Frameworks for Rails 3 projects" 13 | s.description = "Less Frameworks is an adaptive CSS grid system, helps to make responsive website. This gem provides Less Framwork for your Rails 3 projects. Learn more about Less framwork at http://lessframework.com/" 14 | 15 | s.rubyforge_project = "lessframework-rails" 16 | 17 | s.files = `git ls-files`.split("\n") 18 | s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n") 19 | s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) } 20 | s.require_paths = ["lib"] 21 | 22 | s.add_dependency "railties", "~> 3.0" 23 | s.add_dependency "thor", "~> 0.14" 24 | s.add_development_dependency "bundler", "~> 1.0.0" 25 | s.add_development_dependency "rails", "~> 3.0" 26 | end 27 | -------------------------------------------------------------------------------- /lib/lessframework-rails.rb: -------------------------------------------------------------------------------- 1 | module Lessframework 2 | module Rails 3 | if ::Rails.version < "3.1" 4 | require "lessframework-rails/railtie" 5 | else 6 | require "lessframework-rails/engine" 7 | end 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /lib/lessframework-rails/engine.rb: -------------------------------------------------------------------------------- 1 | module Lessframework 2 | module Rails 3 | class Engine < ::Rails::Engine 4 | end 5 | end 6 | end 7 | -------------------------------------------------------------------------------- /lib/lessframework-rails/railtie.rb: -------------------------------------------------------------------------------- 1 | module Lessframework 2 | module Rails 3 | class Railtie < ::Rails::Railtie 4 | end 5 | end 6 | end 7 | -------------------------------------------------------------------------------- /lib/lessframework-rails/version.rb: -------------------------------------------------------------------------------- 1 | module Lessframework 2 | module Rails 3 | VERSION = "0.0.1" 4 | end 5 | end 6 | -------------------------------------------------------------------------------- /vendor/assets/stylesheets/less133.css: -------------------------------------------------------------------------------- 1 | /* Less Framework 4 2 | http://lessframework.com 3 | by Joni Korpi 4 | License: http://opensource.org/licenses/mit-license.php */ 5 | 6 | 7 | /* Resets 8 | ------ */ 9 | 10 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 11 | p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 12 | img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 13 | dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, figure, figcaption, hgroup, 16 | menu, footer, header, nav, section, summary, time, mark, audio, video { 17 | margin: 0; 18 | padding: 0; 19 | border: 0; 20 | } 21 | 22 | article, aside, canvas, figure, figure img, figcaption, hgroup, 23 | footer, header, nav, section, audio, video { 24 | display: block; 25 | } 26 | 27 | a img {border: 0;} 28 | 29 | 30 | 31 | /* Typography presets 32 | ------------------ */ 33 | 34 | .gigantic { 35 | font-size: 123px; 36 | line-height: 132px; 37 | letter-spacing: -2px; 38 | } 39 | 40 | .huge, h1 { 41 | font-size: 76px; 42 | line-height: 84px; 43 | letter-spacing: -1px; 44 | } 45 | 46 | .large, h2 { 47 | font-size: 47px; 48 | line-height: 48px; 49 | } 50 | 51 | .bigger, h3 { 52 | font-size: 29px; 53 | line-height: 36px; 54 | } 55 | 56 | .big, h4 { 57 | font-size: 25px; 58 | line-height: 30px; 59 | } 60 | 61 | body { 62 | font: 18px/24px "Times New Roman", Times, serif; 63 | } 64 | 65 | .small, small { 66 | font-size: 13px; 67 | line-height: 18px; 68 | } 69 | 70 | /* Selection colours (easy to forget) */ 71 | 72 | ::selection {background: rgb(255,255,158);} 73 | ::-moz-selection {background: rgb(255,255,158);} 74 | img::selection {background: transparent;} 75 | img::-moz-selection {background: transparent;} 76 | body {-webkit-tap-highlight-color: rgb(255,255,158);} 77 | 78 | 79 | 80 | /* Default Layout: 992px. 81 | Gutters: 24px. 82 | Outer margins: 48px. 83 | Leftover space for scrollbars @1024px: 32px. 84 | ------------------------------------------------------------------------------- 85 | cols 1 2 3 4 5 6 7 8 9 10 86 | px 68 160 252 344 436 528 620 712 804 896 */ 87 | 88 | body { 89 | width: 896px; 90 | padding: 72px 48px 84px; 91 | background: rgb(232,232,232); 92 | color: rgb(60,60,60); 93 | -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */ 94 | } 95 | 96 | 97 | 98 | /* Tablet Layout: 768px. 99 | Gutters: 24px. 100 | Outer margins: 28px. 101 | Inherits styles from: Default Layout. 102 | ----------------------------------------------------------------- 103 | cols 1 2 3 4 5 6 7 8 104 | px 68 160 252 344 436 528 620 712 */ 105 | 106 | @media only screen and (min-width: 768px) and (max-width: 991px) { 107 | 108 | body { 109 | width: 712px; 110 | padding: 48px 28px 60px; 111 | } 112 | } 113 | 114 | 115 | 116 | /* Mobile Layout: 320px. 117 | Gutters: 24px. 118 | Outer margins: 34px. 119 | Inherits styles from: Default Layout. 120 | --------------------------------------------- 121 | cols 1 2 3 122 | px 68 160 252 */ 123 | 124 | @media only screen and (max-width: 767px) { 125 | 126 | body { 127 | width: 252px; 128 | padding: 48px 34px 60px; 129 | } 130 | 131 | } 132 | 133 | 134 | 135 | /* Wide Mobile Layout: 480px. 136 | Gutters: 24px. 137 | Outer margins: 22px. 138 | Inherits styles from: Default Layout, Mobile Layout. 139 | ------------------------------------------------------------ 140 | cols 1 2 3 4 5 141 | px 68 160 252 344 436 */ 142 | 143 | @media only screen and (min-width: 480px) and (max-width: 767px) { 144 | 145 | body { 146 | width: 436px; 147 | padding: 36px 22px 48px; 148 | } 149 | 150 | } 151 | 152 | -------------------------------------------------------------------------------- /vendor/assets/stylesheets/less14.css: -------------------------------------------------------------------------------- 1 | /* Less Framework 4 2 | http://lessframework.com 3 | by Joni Korpi 4 | License: http://opensource.org/licenses/mit-license.php */ 5 | 6 | 7 | /* Resets 8 | ------ */ 9 | 10 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 11 | p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 12 | img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 13 | dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, figure, figcaption, hgroup, 16 | menu, footer, header, nav, section, summary, time, mark, audio, video { 17 | margin: 0; 18 | padding: 0; 19 | border: 0; 20 | } 21 | 22 | article, aside, canvas, figure, figure img, figcaption, hgroup, 23 | footer, header, nav, section, audio, video { 24 | display: block; 25 | } 26 | 27 | a img {border: 0;} 28 | 29 | 30 | 31 | /* Typography presets 32 | ------------------ */ 33 | 34 | .gigantic { 35 | font-size: 116px; 36 | line-height: 120px; 37 | letter-spacing: -2px; 38 | } 39 | 40 | .huge, h1 { 41 | font-size: 72px; 42 | line-height: 72px; 43 | letter-spacing: -1px; 44 | } 45 | 46 | .large, h2 { 47 | font-size: 44px; 48 | line-height: 48px; 49 | } 50 | 51 | .bigger, h3 { 52 | font-size: 28px; 53 | line-height: 36px; 54 | } 55 | 56 | .big, h4 { 57 | font-size: 24px; 58 | line-height: 30px; 59 | } 60 | 61 | body { 62 | font: 17px/24px Palatino, Constantia, "Palatino Linotype", serif; 63 | } 64 | 65 | .small, small { 66 | font-size: 13px; 67 | line-height: 18px; 68 | } 69 | 70 | /* Selection colours (easy to forget) */ 71 | 72 | ::selection {background: rgb(255,255,158);} 73 | ::-moz-selection {background: rgb(255,255,158);} 74 | img::selection {background: transparent;} 75 | img::-moz-selection {background: transparent;} 76 | body {-webkit-tap-highlight-color: rgb(255,255,158);} 77 | 78 | 79 | 80 | /* Default Layout: 992px. 81 | Gutters: 24px. 82 | Outer margins: 48px. 83 | Leftover space for scrollbars @1024px: 32px. 84 | ------------------------------------------------------------------------------- 85 | cols 1 2 3 4 5 6 7 8 9 10 86 | px 68 160 252 344 436 528 620 712 804 896 */ 87 | 88 | body { 89 | width: 896px; 90 | padding: 72px 48px 84px; 91 | background: rgb(232,232,232); 92 | color: rgb(60,60,60); 93 | -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */ 94 | } 95 | 96 | 97 | 98 | /* Tablet Layout: 768px. 99 | Gutters: 24px. 100 | Outer margins: 28px. 101 | Inherits styles from: Default Layout. 102 | ----------------------------------------------------------------- 103 | cols 1 2 3 4 5 6 7 8 104 | px 68 160 252 344 436 528 620 712 */ 105 | 106 | @media only screen and (min-width: 768px) and (max-width: 991px) { 107 | 108 | body { 109 | width: 712px; 110 | padding: 48px 28px 60px; 111 | } 112 | } 113 | 114 | 115 | 116 | /* Mobile Layout: 320px. 117 | Gutters: 24px. 118 | Outer margins: 34px. 119 | Inherits styles from: Default Layout. 120 | --------------------------------------------- 121 | cols 1 2 3 122 | px 68 160 252 */ 123 | 124 | @media only screen and (max-width: 767px) { 125 | 126 | body { 127 | width: 252px; 128 | padding: 48px 34px 60px; 129 | } 130 | 131 | } 132 | 133 | 134 | 135 | /* Wide Mobile Layout: 480px. 136 | Gutters: 24px. 137 | Outer margins: 22px. 138 | Inherits styles from: Default Layout, Mobile Layout. 139 | ------------------------------------------------------------ 140 | cols 1 2 3 4 5 141 | px 68 160 252 344 436 */ 142 | 143 | @media only screen and (min-width: 480px) and (max-width: 767px) { 144 | 145 | body { 146 | width: 436px; 147 | padding: 36px 22px 48px; 148 | } 149 | 150 | } 151 | 152 | -------------------------------------------------------------------------------- /vendor/assets/stylesheets/less15.css: -------------------------------------------------------------------------------- 1 | /* Less Framework 4 2 | http://lessframework.com 3 | by Joni Korpi 4 | License: http://opensource.org/licenses/mit-license.php */ 5 | 6 | 7 | /* Resets 8 | ------ */ 9 | 10 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 11 | p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 12 | img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 13 | dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, figure, figcaption, hgroup, 16 | menu, footer, header, nav, section, summary, time, mark, audio, video { 17 | margin: 0; 18 | padding: 0; 19 | border: 0; 20 | } 21 | 22 | article, aside, canvas, figure, figure img, figcaption, hgroup, 23 | footer, header, nav, section, audio, video { 24 | display: block; 25 | } 26 | 27 | a img {border: 0;} 28 | 29 | 30 | 31 | /* Typography presets 32 | ------------------ */ 33 | 34 | .gigantic { 35 | font-size: 110px; 36 | line-height: 120px; 37 | letter-spacing: -2px; 38 | } 39 | 40 | .huge, h1 { 41 | font-size: 68px; 42 | line-height: 72px; 43 | letter-spacing: -1px; 44 | } 45 | 46 | .large, h2 { 47 | font-size: 42px; 48 | line-height: 48px; 49 | } 50 | 51 | .bigger, h3 { 52 | font-size: 26px; 53 | line-height: 36px; 54 | } 55 | 56 | .big, h4 { 57 | font-size: 22px; 58 | line-height: 30px; 59 | } 60 | 61 | body { 62 | font: 16px/24px Georgia, serif; 63 | } 64 | 65 | .small, small { 66 | font-size: 13px; 67 | line-height: 18px; 68 | } 69 | 70 | /* Selection colours (easy to forget) */ 71 | 72 | ::selection {background: rgb(255,255,158);} 73 | ::-moz-selection {background: rgb(255,255,158);} 74 | img::selection {background: transparent;} 75 | img::-moz-selection {background: transparent;} 76 | body {-webkit-tap-highlight-color: rgb(255,255,158);} 77 | 78 | 79 | 80 | /* Default Layout: 992px. 81 | Gutters: 24px. 82 | Outer margins: 48px. 83 | Leftover space for scrollbars @1024px: 32px. 84 | ------------------------------------------------------------------------------- 85 | cols 1 2 3 4 5 6 7 8 9 10 86 | px 68 160 252 344 436 528 620 712 804 896 */ 87 | 88 | body { 89 | width: 896px; 90 | padding: 72px 48px 84px; 91 | background: rgb(232,232,232); 92 | color: rgb(60,60,60); 93 | -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */ 94 | } 95 | 96 | 97 | 98 | /* Tablet Layout: 768px. 99 | Gutters: 24px. 100 | Outer margins: 28px. 101 | Inherits styles from: Default Layout. 102 | ----------------------------------------------------------------- 103 | cols 1 2 3 4 5 6 7 8 104 | px 68 160 252 344 436 528 620 712 */ 105 | 106 | @media only screen and (min-width: 768px) and (max-width: 991px) { 107 | 108 | body { 109 | width: 712px; 110 | padding: 48px 28px 60px; 111 | } 112 | } 113 | 114 | 115 | 116 | /* Mobile Layout: 320px. 117 | Gutters: 24px. 118 | Outer margins: 34px. 119 | Inherits styles from: Default Layout. 120 | --------------------------------------------- 121 | cols 1 2 3 122 | px 68 160 252 */ 123 | 124 | @media only screen and (max-width: 767px) { 125 | 126 | body { 127 | width: 252px; 128 | padding: 48px 34px 60px; 129 | } 130 | 131 | } 132 | 133 | 134 | 135 | /* Wide Mobile Layout: 480px. 136 | Gutters: 24px. 137 | Outer margins: 22px. 138 | Inherits styles from: Default Layout, Mobile Layout. 139 | ------------------------------------------------------------ 140 | cols 1 2 3 4 5 141 | px 68 160 252 344 436 */ 142 | 143 | @media only screen and (min-width: 480px) and (max-width: 767px) { 144 | 145 | body { 146 | width: 436px; 147 | padding: 36px 22px 48px; 148 | } 149 | 150 | } 151 | 152 | -------------------------------------------------------------------------------- /vendor/assets/stylesheets/retina.css: -------------------------------------------------------------------------------- 1 | /* Retina media query. 2 | Overrides styles for devices with a 3 | device-pixel-ratio of 2+, such as iPhone 4. 4 | ----------------------------------------------- */ 5 | 6 | @media 7 | only screen and (-webkit-min-device-pixel-ratio: 2), 8 | only screen and (min-device-pixel-ratio: 2) { 9 | 10 | body { 11 | 12 | } 13 | 14 | } 15 | 16 | --------------------------------------------------------------------------------