atlas_assets 0.0.7
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 +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
|
+
~~~
|