compass-bootstrap-rails 0.1.3.1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +8 -0
- data/Gemfile +4 -0
- data/README.mkdn +151 -0
- data/Rakefile +1 -0
- data/compass-bootstrap.gemspec +25 -0
- data/lib/compass-bootstrap/rails/engine.rb +7 -0
- data/lib/compass-bootstrap/rails.rb +7 -0
- data/lib/compass-bootstrap/version.rb +5 -0
- data/lib/compass-bootstrap.rb +9 -0
- data/stylesheets/compass-bootstrap/_compass_bootstrap.scss +29 -0
- data/stylesheets/compass-bootstrap/_forms.scss +465 -0
- data/stylesheets/compass-bootstrap/_mixins.scss +210 -0
- data/stylesheets/compass-bootstrap/_patterns.scss +1003 -0
- data/stylesheets/compass-bootstrap/_reset.scss +141 -0
- data/stylesheets/compass-bootstrap/_scaffolding.scss +137 -0
- data/stylesheets/compass-bootstrap/_tables.scss +171 -0
- data/stylesheets/compass-bootstrap/_type.scss +187 -0
- data/stylesheets/compass-bootstrap/_variables.scss +60 -0
- data/vendor/assets/javascripts/bootstrap-alerts.js +104 -0
- data/vendor/assets/javascripts/bootstrap-dropdown.js +50 -0
- data/vendor/assets/javascripts/bootstrap-modal.js +227 -0
- data/vendor/assets/javascripts/bootstrap-popover.js +77 -0
- data/vendor/assets/javascripts/bootstrap-scrollspy.js +105 -0
- data/vendor/assets/javascripts/bootstrap-tabs.js +62 -0
- data/vendor/assets/javascripts/bootstrap-twipsy.js +307 -0
- data/vendor/assets/stylesheets/compass-bootstrap/_compass_bootstrap.scss +29 -0
- data/vendor/assets/stylesheets/compass-bootstrap/_forms.scss +465 -0
- data/vendor/assets/stylesheets/compass-bootstrap/_mixins.scss +210 -0
- data/vendor/assets/stylesheets/compass-bootstrap/_patterns.scss +1003 -0
- data/vendor/assets/stylesheets/compass-bootstrap/_reset.scss +141 -0
- data/vendor/assets/stylesheets/compass-bootstrap/_scaffolding.scss +137 -0
- data/vendor/assets/stylesheets/compass-bootstrap/_tables.scss +171 -0
- data/vendor/assets/stylesheets/compass-bootstrap/_type.scss +187 -0
- data/vendor/assets/stylesheets/compass-bootstrap/_variables.scss +60 -0
- data/vendor/assets/stylesheets/compass-bootstrap/compass_bootstrap.scss +29 -0
- data/vendor/assets/stylesheets/compass-bootstrap/manifest.rb +20 -0
- metadata +94 -0
data/.gitignore
ADDED
data/Gemfile
ADDED
data/README.mkdn
ADDED
@@ -0,0 +1,151 @@
|
|
1
|
+
Twitter Bootstrap- Compass Plugin
|
2
|
+
================================
|
3
|
+
|
4
|
+
Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
|
5
|
+
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.: <http://twitter.github.com/bootstrap/>
|
6
|
+
|
7
|
+
* This plugin is consistent with 1.3.0 version of Bootstrap
|
8
|
+
------------------------------------------------------------
|
9
|
+
|
10
|
+
This plugin adds the Bootstrap to [Compass](http://compass-style.org/).
|
11
|
+
|
12
|
+
Install on Rails 3.0
|
13
|
+
====================
|
14
|
+
|
15
|
+
gem install compass-bootstrap
|
16
|
+
|
17
|
+
Install on Rails 3.1
|
18
|
+
====================
|
19
|
+
Add compass and compass-bootstrap to the assets group in you Gemfile
|
20
|
+
|
21
|
+
gem 'compass'
|
22
|
+
gem 'compass-bootstrap'
|
23
|
+
|
24
|
+
|
25
|
+
Adding the Bootstrap plugin to an existing Rails 3.0 project
|
26
|
+
============================================
|
27
|
+
Add the following to your compass.rb
|
28
|
+
|
29
|
+
# Require any additional compass plugins here.
|
30
|
+
require 'compass-bootstrap'
|
31
|
+
|
32
|
+
Run the following on your project's directory
|
33
|
+
|
34
|
+
compass install compass-bootstrap/compass-bootstrap
|
35
|
+
|
36
|
+
this will add the following files to your stylesheets dir:
|
37
|
+
|
38
|
+
create sass/compass_bootstrap.scss
|
39
|
+
create sass/_reset.scss
|
40
|
+
create sass/_variables.scss
|
41
|
+
create sass/_mixins.scss
|
42
|
+
create sass/_scaffolding.scss
|
43
|
+
create sass/_type.scss
|
44
|
+
create sass/_tables.scss
|
45
|
+
create sass/_forms.scss
|
46
|
+
create sass/_patterns.scss
|
47
|
+
create javascripts/bootstrap-alerts.js
|
48
|
+
create javascripts/bootstrap-dropdown.js
|
49
|
+
create javascripts/bootstrap-modal.js
|
50
|
+
create javascripts/bootstrap-popover.js
|
51
|
+
create javascripts/bootstrap-scrollspy.js
|
52
|
+
create javascripts/bootstrap-tabs.js
|
53
|
+
create javascripts/bootstrap-twipsy.js
|
54
|
+
create stylesheets/compass_bootstrap.css
|
55
|
+
|
56
|
+
Now you can add the bootstrap style to your .scss/.sass files:
|
57
|
+
|
58
|
+
@import 'compass_bootstrap';
|
59
|
+
|
60
|
+
this will make available all the classes and styles from bootstrap
|
61
|
+
|
62
|
+
### If you only want to add some bootstrap styles to your files, add:
|
63
|
+
|
64
|
+
@import 'preboot.scss';
|
65
|
+
|
66
|
+
And now you can use the mixins on your own classes:
|
67
|
+
|
68
|
+
|
69
|
+
## Changing the theme color:
|
70
|
+
-----------------------------
|
71
|
+
|
72
|
+
Open _preboot.sccs and you will see the entire list of colors, you can change those in order to apply your own color scheme
|
73
|
+
|
74
|
+
// VARIABLES
|
75
|
+
// ---------
|
76
|
+
|
77
|
+
// / Links
|
78
|
+
$linkColor: #0069d6;
|
79
|
+
$linkColorHover: darken($linkColor, 10);
|
80
|
+
|
81
|
+
// Grays
|
82
|
+
$black: #000;
|
83
|
+
$grayDark: lighten($black, 25%);
|
84
|
+
$gray: lighten($black, 50%);
|
85
|
+
$grayLight: lighten($black, 75%);
|
86
|
+
$grayLighter: lighten($black, 90%);
|
87
|
+
$white: #fff;
|
88
|
+
|
89
|
+
// Accent Colors
|
90
|
+
$blue: #049CDB;
|
91
|
+
$blueDark: #0064CD;
|
92
|
+
$green: #46a546;
|
93
|
+
$red: #9d261d;
|
94
|
+
$yellow: #ffc40d;
|
95
|
+
$orange: #f89406;
|
96
|
+
$pink: #c3325f;
|
97
|
+
$purple: #7a43b6;
|
98
|
+
|
99
|
+
// Baseline grid
|
100
|
+
$basefont: 13px;
|
101
|
+
$baseline: 18px;
|
102
|
+
|
103
|
+
// Griditude
|
104
|
+
$gridColumns: 16;
|
105
|
+
$gridColumnWidth: 40px;
|
106
|
+
$gridGutterWidth: 20px;
|
107
|
+
$extraSpace: ($gridGutterWidth * 2); // For our grid calculations
|
108
|
+
$siteWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
|
109
|
+
|
110
|
+
// Color Scheme
|
111
|
+
$baseColor: $blue; // Set a base color
|
112
|
+
$complement: spin($baseColor, 180); // Determine a complementary color
|
113
|
+
$split1: spin($baseColor, 158); // Split complements
|
114
|
+
$split2: spin($baseColor, -158);
|
115
|
+
$triad1: spin($baseColor, 135); // Triads colors
|
116
|
+
$triad2: spin($baseColor, -135);
|
117
|
+
$tetra1: spin($baseColor, 90); // Tetra colors
|
118
|
+
$tetra2: spin($baseColor, -90);
|
119
|
+
$analog1: spin($baseColor, 22); // Analogs colors
|
120
|
+
$analog2: spin($baseColor, -22);
|
121
|
+
|
122
|
+
Adding the Bootstrap plugin to an existing Rails 3.1 project
|
123
|
+
============================================
|
124
|
+
Open config/application.rb and add the following line after config.assets.enabled = true
|
125
|
+
|
126
|
+
config.sass.load_paths << Compass::Frameworks['compass-bootstrap'].stylesheets_directory
|
127
|
+
|
128
|
+
After adding this line rename application.css from app/assets/stylesheets to
|
129
|
+
end with scss extension.
|
130
|
+
|
131
|
+
Open application.css.scss and remove the **require_tree .** directive, in order
|
132
|
+
to have access to bootstrap mixins we need to import all our scss files with
|
133
|
+
@import sass command like:
|
134
|
+
|
135
|
+
@import 'compass-bootstrap/compass_bootstrap';
|
136
|
+
|
137
|
+
If we have more scss files in our project import them as well to access mixis.
|
138
|
+
|
139
|
+
### Bootstrap javascripts
|
140
|
+
Version 1.3.0 includes javascript files, they are not necessary but if we want
|
141
|
+
to use them, we can rely on Rails 3.1 asset pipeline. Just require them in the
|
142
|
+
javascript manifest - ex: in the app/assets/javascript/application.js - like
|
143
|
+
this:
|
144
|
+
|
145
|
+
//= require bootstrap-alerts
|
146
|
+
|
147
|
+
## TODO
|
148
|
+
|
149
|
+
* make the documentation file for mixins and a example site
|
150
|
+
* port more classes to mixins
|
151
|
+
|
data/Rakefile
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
require "bundler/gem_tasks"
|
@@ -0,0 +1,25 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
$:.push File.expand_path("../lib", __FILE__)
|
3
|
+
require "compass-bootstrap/version"
|
4
|
+
|
5
|
+
Gem::Specification.new do |s|
|
6
|
+
s.name = %q{compass-bootstrap-rails}
|
7
|
+
|
8
|
+
s.authors = ["Hector Bustillos", "Mario A Chavez"]
|
9
|
+
s.date = %q{2011-09-12}
|
10
|
+
s.description = %q{Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.}
|
11
|
+
s.email = %w{mac@crowdint.com}
|
12
|
+
s.has_rdoc = false
|
13
|
+
s.version = Compass::Bootstrap::VERSION
|
14
|
+
s.homepage = "https://github.com/mariochavez/compass-bootstrap"
|
15
|
+
s.summary = %q{Compass compatible Sass port of twitter bootstrap.}
|
16
|
+
|
17
|
+
s.rubyforge_project = "compass-bootstrap"
|
18
|
+
|
19
|
+
s.files = `git ls-files`.split("\n")
|
20
|
+
s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
|
21
|
+
s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
|
22
|
+
s.require_paths = ["lib"]
|
23
|
+
s.add_dependency(%q<compass>, [">= 0.10.0"])
|
24
|
+
|
25
|
+
end
|
@@ -0,0 +1,9 @@
|
|
1
|
+
require 'compass'
|
2
|
+
require "compass-bootstrap/rails"
|
3
|
+
require "compass-bootstrap/version"
|
4
|
+
|
5
|
+
plugin_root = File.join(File.dirname(__FILE__), "..")
|
6
|
+
|
7
|
+
Compass::Frameworks.register("compass-bootstrap",
|
8
|
+
:stylesheets_directory => File.join(plugin_root, "stylesheets"),
|
9
|
+
:templates_directory => File.join(plugin_root, "vendor/assets/stylesheets"))
|
@@ -0,0 +1,29 @@
|
|
1
|
+
/*!
|
2
|
+
* this is a port to SCSS version of the bootstrap less
|
3
|
+
|
4
|
+
* ==========================================
|
5
|
+
* Bootstrap @VERSION
|
6
|
+
*
|
7
|
+
* Copyright 2011 Twitter, Inc
|
8
|
+
* Licensed under the Apache License v2.0
|
9
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
10
|
+
*
|
11
|
+
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
12
|
+
* Date: @DATE
|
13
|
+
*/
|
14
|
+
|
15
|
+
// CSS Reset
|
16
|
+
@import "reset.scss";
|
17
|
+
|
18
|
+
// Core
|
19
|
+
@import "variables.scss"; // Modify this for custom colors, font-sizes, etc
|
20
|
+
@import "mixins.scss";
|
21
|
+
|
22
|
+
// Grid system and page structure
|
23
|
+
@import "scaffolding.scss";
|
24
|
+
|
25
|
+
// Styled patterns and elements
|
26
|
+
@import "type.scss";
|
27
|
+
@import "forms.scss";
|
28
|
+
@import "tables.scss";
|
29
|
+
@import "patterns.scss";
|