atlas_assets 0.0.7
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +2 -0
- data/Gemfile +15 -0
- data/Gemfile.lock +86 -0
- data/LICENSE +22 -0
- data/Procfile +1 -0
- data/README.md +36 -0
- data/Rakefile +16 -0
- data/_config.yml +13 -0
- data/atlas_assets.gemspec +21 -0
- data/config.ru +9 -0
- data/docs/.gitignore +1 -0
- data/docs/404.html +1 -0
- data/docs/_layouts/default.html +56 -0
- data/docs/_plugins/jekyll_assets.rb +3 -0
- data/docs/_posts/2013-05-17-buttons.md +43 -0
- data/docs/_posts/2013-05-17-flash.md +58 -0
- data/docs/_posts/2013-05-17-fonts.md +26 -0
- data/docs/_posts/2013-05-17-grid.md +60 -0
- data/docs/_posts/2013-05-17-helpers.md +9 -0
- data/docs/_posts/2013-05-17-icons.md +1089 -0
- data/docs/_posts/2013-05-17-lists.md +76 -0
- data/docs/_posts/2013-05-17-navbar.md +73 -0
- data/docs/_posts/2013-05-21-forms.md +423 -0
- data/docs/index.html +31 -0
- data/lib/assets/fonts/atlas.eot +0 -0
- data/lib/assets/fonts/atlas.svg +279 -0
- data/lib/assets/fonts/atlas.ttf +0 -0
- data/lib/assets/fonts/atlas.woff +0 -0
- data/lib/assets/javascripts/atlas_assets.js +9 -0
- data/lib/assets/javascripts/backbone.js +1572 -0
- data/lib/assets/javascripts/jquery.js +9405 -0
- data/lib/assets/javascripts/jquery_ujs.js +378 -0
- data/lib/assets/javascripts/keypress.js +20 -0
- data/lib/assets/javascripts/pusher.js +101 -0
- data/lib/assets/javascripts/setup.js +35 -0
- data/lib/assets/javascripts/string.js +912 -0
- data/lib/assets/javascripts/underscore.js +1228 -0
- data/lib/assets/stylesheets/atlas_assets.css +10 -0
- data/lib/assets/stylesheets/buttons.css.scss +56 -0
- data/lib/assets/stylesheets/flash.css.scss +32 -0
- data/lib/assets/stylesheets/fonts.css.scss +66 -0
- data/lib/assets/stylesheets/forms.css.scss +861 -0
- data/lib/assets/stylesheets/grid.css.scss +762 -0
- data/lib/assets/stylesheets/helpers.css.scss +55 -0
- data/lib/assets/stylesheets/icons.css.scss +823 -0
- data/lib/assets/stylesheets/lists.css.scss +73 -0
- data/lib/assets/stylesheets/navbar.css.scss +121 -0
- data/lib/assets/stylesheets/pre.css.scss +7 -0
- data/lib/atlas_assets/engine.rb +8 -0
- data/lib/atlas_assets/version.rb +5 -0
- data/lib/atlas_assets.rb +1 -0
- data/rails/init.rb +1 -0
- metadata +114 -0
data/.gitignore
ADDED
data/Gemfile
ADDED
@@ -0,0 +1,15 @@
|
|
1
|
+
source 'https://rubygems.org'
|
2
|
+
|
3
|
+
# Specify your gem's dependencies in atlas_assets.gemspec
|
4
|
+
gemspec
|
5
|
+
|
6
|
+
gem "rake"
|
7
|
+
gem "jekyll"
|
8
|
+
gem "sass"
|
9
|
+
gem 'jekyll-assets', :git => "git://github.com/ixti/jekyll-assets.git"
|
10
|
+
gem 'rack-contrib'
|
11
|
+
gem "rack-rewrite"
|
12
|
+
gem "pygmentize", "~> 0.0.3"
|
13
|
+
gem "kramdown"
|
14
|
+
gem "coderay"
|
15
|
+
gem "puma"
|
data/Gemfile.lock
ADDED
@@ -0,0 +1,86 @@
|
|
1
|
+
GIT
|
2
|
+
remote: git://github.com/ixti/jekyll-assets.git
|
3
|
+
revision: a04c7628f4746f2b159cb0c5925876368d0029c1
|
4
|
+
specs:
|
5
|
+
jekyll-assets (0.5.1)
|
6
|
+
jekyll (~> 1.0)
|
7
|
+
sprockets (~> 2.9)
|
8
|
+
|
9
|
+
PATH
|
10
|
+
remote: .
|
11
|
+
specs:
|
12
|
+
atlas_assets (0.0.7)
|
13
|
+
handlebars_assets (~> 0.12.1)
|
14
|
+
|
15
|
+
GEM
|
16
|
+
remote: https://rubygems.org/
|
17
|
+
specs:
|
18
|
+
classifier (1.3.3)
|
19
|
+
fast-stemmer (>= 1.0.0)
|
20
|
+
coderay (1.0.9)
|
21
|
+
colorator (0.1)
|
22
|
+
commander (4.1.3)
|
23
|
+
highline (~> 1.6.11)
|
24
|
+
directory_watcher (1.4.1)
|
25
|
+
execjs (1.4.0)
|
26
|
+
multi_json (~> 1.0)
|
27
|
+
fast-stemmer (1.0.2)
|
28
|
+
handlebars_assets (0.12.1)
|
29
|
+
execjs (>= 1.2.9)
|
30
|
+
sprockets (>= 2.0.3)
|
31
|
+
tilt
|
32
|
+
highline (1.6.19)
|
33
|
+
hike (1.2.2)
|
34
|
+
jekyll (1.0.2)
|
35
|
+
classifier (~> 1.3)
|
36
|
+
colorator (~> 0.1)
|
37
|
+
commander (~> 4.1.3)
|
38
|
+
directory_watcher (~> 1.4.1)
|
39
|
+
kramdown (~> 1.0.2)
|
40
|
+
liquid (~> 2.3)
|
41
|
+
maruku (~> 0.5)
|
42
|
+
pygments.rb (~> 0.5.0)
|
43
|
+
safe_yaml (~> 0.7.0)
|
44
|
+
kramdown (1.0.2)
|
45
|
+
liquid (2.5.0)
|
46
|
+
maruku (0.6.1)
|
47
|
+
syntax (>= 1.0.0)
|
48
|
+
multi_json (1.7.3)
|
49
|
+
posix-spawn (0.3.6)
|
50
|
+
puma (2.0.1)
|
51
|
+
rack (>= 1.1, < 2.0)
|
52
|
+
pygmentize (0.0.3)
|
53
|
+
pygments.rb (0.5.0)
|
54
|
+
posix-spawn (~> 0.3.6)
|
55
|
+
yajl-ruby (~> 1.1.0)
|
56
|
+
rack (1.5.2)
|
57
|
+
rack-contrib (1.1.0)
|
58
|
+
rack (>= 0.9.1)
|
59
|
+
rack-rewrite (1.3.3)
|
60
|
+
rake (10.0.4)
|
61
|
+
safe_yaml (0.7.1)
|
62
|
+
sass (3.2.9)
|
63
|
+
sprockets (2.9.3)
|
64
|
+
hike (~> 1.2)
|
65
|
+
multi_json (~> 1.0)
|
66
|
+
rack (~> 1.0)
|
67
|
+
tilt (~> 1.1, != 1.3.0)
|
68
|
+
syntax (1.0.0)
|
69
|
+
tilt (1.4.1)
|
70
|
+
yajl-ruby (1.1.0)
|
71
|
+
|
72
|
+
PLATFORMS
|
73
|
+
ruby
|
74
|
+
|
75
|
+
DEPENDENCIES
|
76
|
+
atlas_assets!
|
77
|
+
coderay
|
78
|
+
jekyll
|
79
|
+
jekyll-assets!
|
80
|
+
kramdown
|
81
|
+
puma
|
82
|
+
pygmentize (~> 0.0.3)
|
83
|
+
rack-contrib
|
84
|
+
rack-rewrite
|
85
|
+
rake
|
86
|
+
sass
|
data/LICENSE
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
Copyright (c) 2013 Rune Skjoldborg Madsen
|
2
|
+
|
3
|
+
MIT License
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
6
|
+
a copy of this software and associated documentation files (the
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
11
|
+
the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be
|
14
|
+
included in all copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/Procfile
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
web: bundle exec puma -p $PORT config.ru
|
data/README.md
ADDED
@@ -0,0 +1,36 @@
|
|
1
|
+
Atlas Assets
|
2
|
+
============
|
3
|
+
|
4
|
+
This Ruby gem holds all shared assets used throughout the O'Reilly Atlas platform.
|
5
|
+
|
6
|
+
Style Guide
|
7
|
+
-----------
|
8
|
+
|
9
|
+
For reference, visit the online [style guide documentation](http://atlas-assets.herokuapp.com) included in this gem.
|
10
|
+
|
11
|
+
Usage
|
12
|
+
-----
|
13
|
+
|
14
|
+
To use in a new Rails application, add the gem to your Gemfile, and add the following to your CSS (`app/assets/stylesheets/application.css`) and JS (`app/assets/javascripts/application.js`) manifest files.
|
15
|
+
|
16
|
+
```javascript
|
17
|
+
*= require atlas_assets
|
18
|
+
```
|
19
|
+
|
20
|
+
Along with all the CSS and JS widgets, it will include our base bundle of JS libraries (`JQuery`, `underscore.js`, `backbone.js`, etc)
|
21
|
+
|
22
|
+
Adding new styles
|
23
|
+
-----------------
|
24
|
+
|
25
|
+
If you need to add or change styles in this gem, first get a local environment set up:
|
26
|
+
|
27
|
+
1. Clone down the gem to your local machine
|
28
|
+
2. Run `bundle` from the gem root
|
29
|
+
3. Fire up jekyll by running `jekyll serve --watch`
|
30
|
+
|
31
|
+
You now have the site running in your browser on `localhost:4000`. Now follow these steps to add and document the new style(s):
|
32
|
+
|
33
|
+
1. Create you own feature branch
|
34
|
+
2. Implement your style by tweaking the CSS and checking the documentation on `localhost:4000`. Do not work from the specific Atlas Rails app by updating the gem constantly. All new styles should be developed using the `docs`, and should be independent from a particular application.
|
35
|
+
3. When ready, bump the version number in `lib/atlas_assets/version.rb`, and send a pull request to the master branch. We'll then release the new gem version by running `gem build` and `gem push`.
|
36
|
+
4. Bump the `atlas_assets` gem version in your apps `Gemfile`, run `bundle`, and use the new styles.
|
data/Rakefile
ADDED
@@ -0,0 +1,16 @@
|
|
1
|
+
require "bundler/gem_tasks"
|
2
|
+
|
3
|
+
task default: "assets:precompile"
|
4
|
+
|
5
|
+
namespace :assets do
|
6
|
+
desc "Precompile assets"
|
7
|
+
task :precompile do
|
8
|
+
Rake::Task["clean"].invoke
|
9
|
+
sh "bundle exec jekyll build"
|
10
|
+
end
|
11
|
+
end
|
12
|
+
|
13
|
+
desc "Remove compiled files"
|
14
|
+
task :clean do
|
15
|
+
sh "rm -rf #{File.dirname(__FILE__)}/_site/*"
|
16
|
+
end
|
data/_config.yml
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
lib = File.expand_path('../lib', __FILE__)
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
4
|
+
require 'atlas_assets/version'
|
5
|
+
|
6
|
+
Gem::Specification.new do |gem|
|
7
|
+
gem.name = "atlas_assets"
|
8
|
+
gem.version = Atlas::Assets::VERSION
|
9
|
+
gem.authors = ["Rune Skjoldborg Madsen"]
|
10
|
+
gem.email = ["rune@runemadsen.com"]
|
11
|
+
gem.description = %q{Public repository with assets and design guide for the Atlas platform}
|
12
|
+
gem.summary = %q{Public repository with assets and design guide for the Atlas platform}
|
13
|
+
gem.homepage = ""
|
14
|
+
|
15
|
+
gem.files = `git ls-files`.split($/)
|
16
|
+
gem.executables = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
|
17
|
+
gem.test_files = gem.files.grep(%r{^(test|spec|features)/})
|
18
|
+
gem.require_paths = ["lib"]
|
19
|
+
|
20
|
+
gem.add_dependency "handlebars_assets", "~> 0.12.1"
|
21
|
+
end
|
data/config.ru
ADDED
data/docs/.gitignore
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
_site
|
data/docs/404.html
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
Nope!
|
@@ -0,0 +1,56 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<meta charset="utf-8">
|
5
|
+
<title>{{ page.title }}</title>
|
6
|
+
{% stylesheet atlas_assets %}
|
7
|
+
{% javascript atlas_assets %}
|
8
|
+
<style type="text/css">
|
9
|
+
body {
|
10
|
+
padding: 60px 0px;
|
11
|
+
}
|
12
|
+
h1 {
|
13
|
+
margin-top: 0px;
|
14
|
+
}
|
15
|
+
pre .line-numbers {
|
16
|
+
margin-right: 10px;
|
17
|
+
}
|
18
|
+
.example {
|
19
|
+
padding: 20px;
|
20
|
+
-webkit-border-top-left-radius: 10px;
|
21
|
+
-webkit-border-top-right-radius: 10px;
|
22
|
+
-moz-border-radius-topleft: 10px;
|
23
|
+
-moz-border-radius-topright: 10px;
|
24
|
+
border-top-left-radius: 10px;
|
25
|
+
border-top-right-radius: 10px;
|
26
|
+
border: 3px solid #ececec;
|
27
|
+
}
|
28
|
+
.CodeRay .code {
|
29
|
+
background-color: #ececec;
|
30
|
+
padding: 10px 20px 5px 20px;
|
31
|
+
overflow-x: auto;
|
32
|
+
}
|
33
|
+
.CodeRay pre {
|
34
|
+
margin-top: 0px;
|
35
|
+
}
|
36
|
+
</style>
|
37
|
+
</head>
|
38
|
+
<body>
|
39
|
+
<div class="container">
|
40
|
+
<div class="row">
|
41
|
+
<div class="span3">
|
42
|
+
<ul class="list">
|
43
|
+
<li class="list-item"><a href="/">Home<i class="icon-arrow-right-2"></i></a></li>
|
44
|
+
{% for post in site.posts %}
|
45
|
+
<li class="list-item"><a href="{{ post.url }}">{{ post.title }}<i class="icon-arrow-right-2"></i></a></li>
|
46
|
+
{% endfor %}
|
47
|
+
</ul>
|
48
|
+
</div>
|
49
|
+
<div class="span1"> </div>
|
50
|
+
<div class="span8">
|
51
|
+
{{ content }}
|
52
|
+
</div>
|
53
|
+
</div>
|
54
|
+
</div>
|
55
|
+
</body>
|
56
|
+
</html>
|
@@ -0,0 +1,43 @@
|
|
1
|
+
---
|
2
|
+
layout: default
|
3
|
+
title: "Buttons"
|
4
|
+
date: 2013-05-17 23:24:04
|
5
|
+
---
|
6
|
+
|
7
|
+
Buttons
|
8
|
+
=======
|
9
|
+
|
10
|
+
~~~html
|
11
|
+
<a href="#" class="btn">Button</a>
|
12
|
+
~~~
|
13
|
+
|
14
|
+
Sizes
|
15
|
+
------
|
16
|
+
|
17
|
+
<p><a href="#" class="btn small">Small</a></p>
|
18
|
+
|
19
|
+
<p><a href="#" class="btn">Normal</a></p>
|
20
|
+
|
21
|
+
<p><a href="#" class="btn medium">Medium</a></p>
|
22
|
+
|
23
|
+
<p><a href="#" class="btn large">Large</a></p>
|
24
|
+
|
25
|
+
~~~html
|
26
|
+
<a href="#" class="btn small">Small</a>
|
27
|
+
<a href="#" class="btn">Normal</a>
|
28
|
+
<a href="#" class="btn medium">Medium</a>
|
29
|
+
<a href="#" class="btn large">Large</a>
|
30
|
+
~~~
|
31
|
+
|
32
|
+
Colors
|
33
|
+
------
|
34
|
+
|
35
|
+
<p><a href="#" class="btn blue">Blue</a></p>
|
36
|
+
<p><a href="#" class="btn red">Red</a></p>
|
37
|
+
<p><a href="#" class="btn green">Green</a></p>
|
38
|
+
|
39
|
+
~~~html
|
40
|
+
<a href="#" class="btn blue">Blue</a>
|
41
|
+
<a href="#" class="btn red">Red</a>
|
42
|
+
<a href="#" class="btn green">Green</a>
|
43
|
+
~~~
|
@@ -0,0 +1,58 @@
|
|
1
|
+
---
|
2
|
+
layout: default
|
3
|
+
title: "Flash"
|
4
|
+
date: 2013-05-17 23:24:04
|
5
|
+
---
|
6
|
+
|
7
|
+
Flash
|
8
|
+
=====
|
9
|
+
|
10
|
+
The `.flash` class is a general style for all user messages.
|
11
|
+
|
12
|
+
Basic
|
13
|
+
-----
|
14
|
+
|
15
|
+
<div class="flash">
|
16
|
+
<div class="flash-item">This is a flash message</div>
|
17
|
+
</div>
|
18
|
+
|
19
|
+
~~~html
|
20
|
+
<div class="flash">
|
21
|
+
<div class="flash-item">This is a flash message</div>
|
22
|
+
</div>
|
23
|
+
~~~
|
24
|
+
|
25
|
+
Colors
|
26
|
+
-------
|
27
|
+
|
28
|
+
<div class="flash">
|
29
|
+
<div class="flash-item notice">This is a notice message</div>
|
30
|
+
<div class="flash-item warning">This is a warning message</div>
|
31
|
+
<div class="flash-item error">This is an error message</div>
|
32
|
+
</div>
|
33
|
+
|
34
|
+
~~~html
|
35
|
+
<div class="flash">
|
36
|
+
<div class="flash-item notice">This is a notice message</div>
|
37
|
+
<div class="flash-item warning">This is a warning message</div>
|
38
|
+
<div class="flash-item error">This is an error message</div>
|
39
|
+
</div>
|
40
|
+
~~~
|
41
|
+
|
42
|
+
Close button
|
43
|
+
------------
|
44
|
+
|
45
|
+
You can add a close button with the `.flash-close` class.
|
46
|
+
|
47
|
+
<div class="flash">
|
48
|
+
<div class="flash-item">This is a message<a href="#" class="flash-close"><i class="icon-cross-3"></i></a></div>
|
49
|
+
</div>
|
50
|
+
|
51
|
+
~~~html
|
52
|
+
<div class="flash">
|
53
|
+
<div class="flash-item">
|
54
|
+
This is a message
|
55
|
+
<a href="#" class="flash-close"><i class="icon-cross-3"></i></a>
|
56
|
+
</div>
|
57
|
+
</div>
|
58
|
+
~~~
|
@@ -0,0 +1,26 @@
|
|
1
|
+
---
|
2
|
+
layout: default
|
3
|
+
title: "Fonts"
|
4
|
+
date: 2013-05-17 23:24:04
|
5
|
+
---
|
6
|
+
|
7
|
+
Fonts
|
8
|
+
=====
|
9
|
+
|
10
|
+
|
11
|
+
Headings
|
12
|
+
--------
|
13
|
+
|
14
|
+
All HTML headings, `<h1>` through `<h6>` are available.
|
15
|
+
|
16
|
+
<h1>h1. Heading 1</h1>
|
17
|
+
|
18
|
+
<h2>h2. Heading 2</h2>
|
19
|
+
|
20
|
+
<h3>h3. Heading 3</h3>
|
21
|
+
|
22
|
+
<h4>h4. Heading 4</h4>
|
23
|
+
|
24
|
+
<h5>h5. Heading 5</h5>
|
25
|
+
|
26
|
+
<h6>h6. Heading 6</h6>
|
@@ -0,0 +1,60 @@
|
|
1
|
+
---
|
2
|
+
layout: default
|
3
|
+
title: "Grid"
|
4
|
+
date: 2013-05-17 23:24:04
|
5
|
+
---
|
6
|
+
|
7
|
+
<style type="text/css">
|
8
|
+
|
9
|
+
.show-grid {
|
10
|
+
margin-top: 10px;
|
11
|
+
margin-bottom: 20px;
|
12
|
+
}
|
13
|
+
|
14
|
+
.show-grid [class*="span"] {
|
15
|
+
background-color: #eee;
|
16
|
+
text-align: center;
|
17
|
+
-webkit-border-radius: 3px;
|
18
|
+
-moz-border-radius: 3px;
|
19
|
+
border-radius: 3px;
|
20
|
+
min-height: 40px;
|
21
|
+
line-height: 40px;
|
22
|
+
}
|
23
|
+
</style>
|
24
|
+
|
25
|
+
Grid
|
26
|
+
====
|
27
|
+
|
28
|
+
The default Atlas grid system is built on the Twitter Bootstrap grid system, which utilizes 12 columns. It's a responsive grid system that adapts to the browser window in 2 different sizes: `940px`, `725px` and for smaller displays, fluid with the columns stacking vertically.
|
29
|
+
|
30
|
+
<div class="docs-grid">
|
31
|
+
<div class="row show-grid">
|
32
|
+
<div class="span1">1</div>
|
33
|
+
<div class="span1">1</div>
|
34
|
+
<div class="span1">1</div>
|
35
|
+
<div class="span1">1</div>
|
36
|
+
<div class="span1">1</div>
|
37
|
+
<div class="span1">1</div>
|
38
|
+
<div class="span1">1</div>
|
39
|
+
<div class="span1">1</div>
|
40
|
+
</div>
|
41
|
+
<div class="row show-grid">
|
42
|
+
<div class="span2">2</div>
|
43
|
+
<div class="span3">3</div>
|
44
|
+
<div class="span3">3</div>
|
45
|
+
</div>
|
46
|
+
<div class="row show-grid">
|
47
|
+
<div class="span4">4</div>
|
48
|
+
<div class="span4">4</div>
|
49
|
+
</div>
|
50
|
+
<div class="row show-grid">
|
51
|
+
<div class="span8">8</div>
|
52
|
+
</div>
|
53
|
+
</div>
|
54
|
+
|
55
|
+
~~~html
|
56
|
+
<div class="row">
|
57
|
+
<div class="span4">...</div>
|
58
|
+
<div class="span8">...</div>
|
59
|
+
</div>
|
60
|
+
~~~
|