compass-bootstrap-rails 0.1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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";
|