bkss-rails 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +15 -0
- data/README.md +167 -0
- data/Rakefile +21 -0
- data/app/assets/javascripts/modernizr.js +4 -0
- data/app/assets/stylesheets/styleguide.sass +599 -0
- data/app/controllers/styleguides_controller.rb +58 -0
- data/app/helpers/styleguide_helper.rb +147 -0
- data/app/views/layouts/styleguide.html.erb +16 -0
- data/app/views/layouts/styleguide_page.html.erb +147 -0
- data/app/views/styleguides/_block.html.erb +51 -0
- data/app/views/styleguides/_specimen.html.erb +10 -0
- data/app/views/styleguides/_swatch.html.erb +10 -0
- data/app/views/styleguides/all.html.erb +8 -0
- data/config/routes.rb +5 -0
- data/lib/generators/nkss/install_generator.rb +18 -0
- data/lib/generators/templates/1.html.erb +8 -0
- data/lib/generators/templates/example-for-styleguides.css +17 -0
- data/lib/generators/templates/styleguide-extras.css +1 -0
- data/lib/generators/templates/styleguide-extras.scss +1 -0
- data/lib/generators/templates/styleguide.html.erb +19 -0
- data/lib/generators/templates/styleguides.yml +4 -0
- data/lib/nkss.rb +5 -0
- data/lib/nkss/engine.rb +6 -0
- data/lib/nkss/rails.rb +1 -0
- data/lib/nkss/version.rb +3 -0
- data/spec/dummy/README.rdoc +28 -0
- data/spec/dummy/Rakefile +6 -0
- data/spec/dummy/app/assets/javascripts/application.js +13 -0
- data/spec/dummy/app/assets/stylesheets/application.css +13 -0
- data/spec/dummy/app/controllers/application_controller.rb +5 -0
- data/spec/dummy/app/helpers/application_helper.rb +2 -0
- data/spec/dummy/app/views/layouts/application.html.erb +14 -0
- data/spec/dummy/bin/bundle +3 -0
- data/spec/dummy/bin/rails +4 -0
- data/spec/dummy/bin/rake +4 -0
- data/spec/dummy/config.ru +4 -0
- data/spec/dummy/config/application.rb +22 -0
- data/spec/dummy/config/boot.rb +5 -0
- data/spec/dummy/config/database.yml +25 -0
- data/spec/dummy/config/environment.rb +5 -0
- data/spec/dummy/config/environments/development.rb +29 -0
- data/spec/dummy/config/environments/production.rb +80 -0
- data/spec/dummy/config/environments/test.rb +36 -0
- data/spec/dummy/config/initializers/backtrace_silencers.rb +7 -0
- data/spec/dummy/config/initializers/filter_parameter_logging.rb +4 -0
- data/spec/dummy/config/initializers/inflections.rb +16 -0
- data/spec/dummy/config/initializers/mime_types.rb +5 -0
- data/spec/dummy/config/initializers/secret_token.rb +12 -0
- data/spec/dummy/config/initializers/session_store.rb +3 -0
- data/spec/dummy/config/initializers/wrap_parameters.rb +14 -0
- data/spec/dummy/config/locales/en.yml +23 -0
- data/spec/dummy/config/routes.rb +56 -0
- data/spec/dummy/db/test.sqlite3 +0 -0
- data/spec/dummy/public/404.html +58 -0
- data/spec/dummy/public/422.html +58 -0
- data/spec/dummy/public/500.html +57 -0
- data/spec/dummy/public/favicon.ico +0 -0
- data/spec/helpers/styleguide_helper_spec.rb +99 -0
- data/spec/spec_helper.rb +17 -0
- metadata +222 -0
checksums.yaml
ADDED
@@ -0,0 +1,15 @@
|
|
1
|
+
---
|
2
|
+
!binary "U0hBMQ==":
|
3
|
+
metadata.gz: !binary |-
|
4
|
+
MmMyYTFlNzdhNWM2NDBkYWRhNmViN2Q4MmFmMzkzYmNmNmQxMmVmOA==
|
5
|
+
data.tar.gz: !binary |-
|
6
|
+
M2E0YmRmOGRmYjMxOGQwZDY5OTRhOGM4ODVmOTVhZmE5YzQwNWQwNA==
|
7
|
+
!binary "U0hBNTEy":
|
8
|
+
metadata.gz: !binary |-
|
9
|
+
ZmE4M2ZlOWQyZDlmMzE0ZmYyYjk2N2Y5NWQwNTAwMzgzODRmYTJjYzljYzAy
|
10
|
+
NjYwMjdmMTI4MzJhNjdmOWI2ZWM5MWU4MzlhMTFiNjA3MDNiN2UwNjM5Nzcw
|
11
|
+
NDBkNzdlMjFmMDFiZTE0N2M0NDIzZjg1NmEyNjA0ZmVlNWFmOTE=
|
12
|
+
data.tar.gz: !binary |-
|
13
|
+
MWMzNzA1Mzc1ZTRkNTc3MjgxOTQ0ODVkMDdmZWI5YThmMzFmZjllYWRhNWRh
|
14
|
+
YjAxMjNmZmU1ODJjZTc5ZTg0MDM3OGRkMzVhYmQ2NDJhMzA4OGU1YjhkZWY4
|
15
|
+
ZjNjYTZjMWUwNjFmNDNhODVhNzM0NjJjM2M0YTM0MDMyMzk1YTI=
|
data/README.md
ADDED
@@ -0,0 +1,167 @@
|
|
1
|
+
Nadarei KSS
|
2
|
+
===========
|
3
|
+
|
4
|
+
**Nadarei KSS Styleguides** lets you create pretty styleguides for your Rails
|
5
|
+
3.2 projects.
|
6
|
+
|
7
|
+
![Image](https://raw.github.com/nadarei/nkss-rails/misc/sample.jpg)
|
8
|
+
|
9
|
+
[See more screenshots here.](https://github.com/nadarei/nkss-rails/tree/misc)
|
10
|
+
|
11
|
+
What is KSS?
|
12
|
+
------------
|
13
|
+
|
14
|
+
It's a standard for documenting stylesheets. It's also a tool that parses these
|
15
|
+
sheets, which `nkss-rails` uses.
|
16
|
+
|
17
|
+
See the KSS website at [warpspire.com/kss](http://warpspire.com/kss).
|
18
|
+
|
19
|
+
### What is nkss-rails?
|
20
|
+
|
21
|
+
A drop-in, easy-to-use, gorgeous-by-default Rails plugin you can put into your
|
22
|
+
projects so you can instantly have cute docs.
|
23
|
+
|
24
|
+
It's a pre-configured distribution of KSS. I've already done the grunt work for
|
25
|
+
you, like setting up the layouts, templates and CSS files for your styleguide.
|
26
|
+
All you gotta worry about is documenting your styles!
|
27
|
+
|
28
|
+
Installation
|
29
|
+
------------
|
30
|
+
|
31
|
+
Add me, and `haml`, to your `Gemfile`.
|
32
|
+
|
33
|
+
gem 'haml'
|
34
|
+
gem 'nkss-rails', github: 'nadarei/nkss-rails'
|
35
|
+
|
36
|
+
Then type `bundle` to update your bundle. Then, install the needed files into
|
37
|
+
your project:
|
38
|
+
|
39
|
+
$ bundle exec rails generate nkss:install
|
40
|
+
|
41
|
+
Now move on to the next section.
|
42
|
+
|
43
|
+
### Customization
|
44
|
+
|
45
|
+
This gives you the following things that you should customize:
|
46
|
+
|
47
|
+
#### `config/styleguides.yml`
|
48
|
+
|
49
|
+
A list of sections in your styleguide. Your
|
50
|
+
mission: edit this file to add your own sections.
|
51
|
+
|
52
|
+
#### `app/views/styleguides/`
|
53
|
+
|
54
|
+
Your styleguides live here. Your mission:
|
55
|
+
edit the first styleguide (*1.html.haml*) and later, add your own.
|
56
|
+
|
57
|
+
#### `app/views/layouts/styleguide.html.haml`
|
58
|
+
|
59
|
+
The layout for your styleguide. Your mission: make sure that this loads the
|
60
|
+
right styles and scripts that your
|
61
|
+
application uses.
|
62
|
+
|
63
|
+
#### `app/assets/stylesheets/styleguide-extras.css`
|
64
|
+
|
65
|
+
Place any extra CSS definitions in here.
|
66
|
+
|
67
|
+
#### `app/assets/stylesheets/example-for-styleguides.css`
|
68
|
+
An example of a documented KSS block. Study it, then delete it.
|
69
|
+
|
70
|
+
### Viewing your sheets
|
71
|
+
|
72
|
+
Now visit `http://localhost:8000/styleguides`. It should work straight away. By
|
73
|
+
default, it's only enabled in development mode.
|
74
|
+
|
75
|
+
This works because you have a new route added to your app that mounts the Nkss
|
76
|
+
engine to that path:
|
77
|
+
|
78
|
+
Rails.application.routes.draw do
|
79
|
+
...
|
80
|
+
mount Nkss::Engine => '/styleguides' if Rails.env.development?
|
81
|
+
...
|
82
|
+
end
|
83
|
+
|
84
|
+
How to document your styles
|
85
|
+
---------------------------
|
86
|
+
|
87
|
+
When you do the process above, you should already have an example in
|
88
|
+
`app/assets/stylesheets/example-for-styleguides.css`. But here's how to do it,
|
89
|
+
anyway...
|
90
|
+
|
91
|
+
### Document your CSS
|
92
|
+
|
93
|
+
In your CSS file, add a KSS document block. In this example, we'll define
|
94
|
+
section `1.3`. Refer to the [KSS Syntax](http://warpspire.com/kss/syntax/) page
|
95
|
+
for more info.
|
96
|
+
|
97
|
+
/*
|
98
|
+
A button for doing things.
|
99
|
+
|
100
|
+
Styleguide 1.3.
|
101
|
+
*/
|
102
|
+
.button {
|
103
|
+
color: red
|
104
|
+
}
|
105
|
+
|
106
|
+
### Add the markup
|
107
|
+
|
108
|
+
Add the markup in the corresponding section in
|
109
|
+
`app/views/styleguides/N.html.haml`, where `N` is the main section number. In
|
110
|
+
this case, we'll be editing `1.html.haml`.
|
111
|
+
|
112
|
+
-# 1.html.haml
|
113
|
+
= kss_block '1.3' do
|
114
|
+
%a.button{href: '#'} Do things
|
115
|
+
|
116
|
+
### For new main sections
|
117
|
+
|
118
|
+
If you're adding a new main section, edit the file `config/styleguides.yml` to
|
119
|
+
add it to the menu.
|
120
|
+
|
121
|
+
# config/styleguides.yml
|
122
|
+
title: My Site
|
123
|
+
sections:
|
124
|
+
1: Buttons
|
125
|
+
2: Forms
|
126
|
+
3: Ratings
|
127
|
+
4: ...
|
128
|
+
|
129
|
+
### That's it!
|
130
|
+
|
131
|
+
You should see your newly-documented style in
|
132
|
+
`http://localhost:8000/styleguides/1`.
|
133
|
+
|
134
|
+
Using in production
|
135
|
+
-------------------
|
136
|
+
|
137
|
+
Just make sure to add `styleguide.css` and `styleguide-extras.css` to your
|
138
|
+
precompilation list. Usually this is in `config/environments/production.rb`.
|
139
|
+
|
140
|
+
Our bias
|
141
|
+
--------
|
142
|
+
|
143
|
+
We use this happily with our client projects, and our clients are happy with it,
|
144
|
+
too. It has quite a bias with our process (for instance: HAML by default), sorry
|
145
|
+
about that.
|
146
|
+
|
147
|
+
Our primary purpose of maintaining this package is to use it for our projects;
|
148
|
+
as such, we can't always guarantee that all contributions will be merged in.
|
149
|
+
|
150
|
+
If you feel this is too limiting, you can always override the
|
151
|
+
[templates](https://github.com/nadarei/nkss-rails/tree/master/app/views)
|
152
|
+
or
|
153
|
+
[CSS](https://github.com/nadarei/nkss-rails/tree/master/app/assets/stylesheets)
|
154
|
+
by copying them to your application.
|
155
|
+
|
156
|
+
Alternatively, simply copy the entire gem to your project and hack away at it
|
157
|
+
yourself:
|
158
|
+
|
159
|
+
$ git clone https://github.com/nadarei/nkss-rails.git ./vendor/nkss-rails
|
160
|
+
|
161
|
+
# In your gemfile:
|
162
|
+
gem 'nkss-rails', path: 'vendor/nkss-rails'
|
163
|
+
|
164
|
+
Acknowledgements
|
165
|
+
----------------
|
166
|
+
|
167
|
+
2012, MIT License.
|
data/Rakefile
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
#!/usr/bin/env rake
|
2
|
+
begin
|
3
|
+
require 'bundler/setup'
|
4
|
+
rescue LoadError
|
5
|
+
puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
|
6
|
+
end
|
7
|
+
|
8
|
+
APP_RAKEFILE = File.expand_path("../spec/dummy/Rakefile", __FILE__)
|
9
|
+
load 'rails/tasks/engine.rake'
|
10
|
+
|
11
|
+
Bundler::GemHelper.install_tasks
|
12
|
+
|
13
|
+
Dir[File.join(File.dirname(__FILE__), 'tasks/**/*.rake')].each {|f| load f }
|
14
|
+
|
15
|
+
require 'rspec/core'
|
16
|
+
require 'rspec/core/rake_task'
|
17
|
+
|
18
|
+
desc "Run all specs in spec directory (excluding plugin specs)"
|
19
|
+
RSpec::Core::RakeTask.new(:spec => 'app:db:test:prepare')
|
20
|
+
|
21
|
+
task :default => :spec
|
@@ -0,0 +1,4 @@
|
|
1
|
+
/* Modernizr 2.6.2 (Custom Build) | MIT & BSD
|
2
|
+
* Build: http://modernizr.com/download/#-backgroundsize-borderradius-boxshadow-multiplebgs-opacity-rgba-textshadow-touch-shiv-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes-load
|
3
|
+
*/
|
4
|
+
;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a){var e=a[d];if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'<style id="s',h,'">',a,"</style>"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e}),q.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:w(["@media (",m.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},q.rgba=function(){return z("background-color:rgba(150,255,150,.5)"),C(j.backgroundColor,"rgba")},q.multiplebgs=function(){return z("background:url(https://),url(https://),red url(https://)"),/(url\s*\(.*?){3}/.test(j.background)},q.backgroundsize=function(){return F("backgroundSize")},q.borderradius=function(){return F("borderRadius")},q.boxshadow=function(){return F("boxShadow")},q.textshadow=function(){return b.createElement("div").style.textShadow===""},q.opacity=function(){return A("opacity:.55"),/^0.55$/.test(j.opacity)};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)y(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},z(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")),j||p(a,c),a}var c=a.html5||{},d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g="_html5shiv",h=0,i={},j;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};
|
@@ -0,0 +1,599 @@
|
|
1
|
+
// # Templates: Styleguide CSS
|
2
|
+
// This is the CSS stylesheet for the styleguide pages.
|
3
|
+
|
4
|
+
$pad: 50px
|
5
|
+
$checkerboard: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAF0lEQVQI12P4BAI/QICBFCaYBPNJYQIAkUZftTbC4sIAAAAASUVORK5CYII="
|
6
|
+
$dark-checkerboard: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg=="
|
7
|
+
$mono: 'Menlo', 'Monaco', 'Lucida Console', monospace
|
8
|
+
$sans: 'Helvetica Neue', sans-serif
|
9
|
+
$bluish: #f0f7fb
|
10
|
+
|
11
|
+
html, body
|
12
|
+
margin: 0
|
13
|
+
padding: 0
|
14
|
+
|
15
|
+
@mixin code
|
16
|
+
background: #eee
|
17
|
+
padding: 4px 4px
|
18
|
+
border-radius: 2px
|
19
|
+
margin: 0 2px
|
20
|
+
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2)
|
21
|
+
|
22
|
+
.sg-badge
|
23
|
+
position: absolute
|
24
|
+
z-index: 1
|
25
|
+
right: 0
|
26
|
+
bottom: 0
|
27
|
+
padding: 5px 10px
|
28
|
+
background: #eee
|
29
|
+
color: #888
|
30
|
+
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7)
|
31
|
+
border-top-left-radius: 3px
|
32
|
+
border-top-right-radius: 3px
|
33
|
+
border-left: solid 1px #ddd
|
34
|
+
border-right: solid 1px #ddd
|
35
|
+
border-top: solid 1px #ddd
|
36
|
+
font-size: 9pt
|
37
|
+
font-family: $sans
|
38
|
+
|
39
|
+
body
|
40
|
+
padding: $pad !important
|
41
|
+
background: #fcfcfc !important
|
42
|
+
border-top: solid 6px #222 !important
|
43
|
+
|
44
|
+
html, body
|
45
|
+
overflow: inherit !important
|
46
|
+
|
47
|
+
// ### Layout
|
48
|
+
|
49
|
+
.sg-body
|
50
|
+
margin-left: 180px + $pad
|
51
|
+
padding-bottom: 20px
|
52
|
+
|
53
|
+
body .sg-toc
|
54
|
+
font-family: $sans
|
55
|
+
font-size: 10pt
|
56
|
+
width: 180px
|
57
|
+
position: fixed
|
58
|
+
padding: ($pad - 10px) 20px $pad $pad
|
59
|
+
top: 10px
|
60
|
+
left: 0
|
61
|
+
bottom: 0
|
62
|
+
z-index: 10
|
63
|
+
|
64
|
+
overflow-y: auto
|
65
|
+
|
66
|
+
&::-webkit-scrollbar
|
67
|
+
width: 10px
|
68
|
+
height: 10px
|
69
|
+
|
70
|
+
&::-webkit-scrollbar-thumb
|
71
|
+
background: rgba(0, 0, 0, 0.0)
|
72
|
+
border-radius: 5px
|
73
|
+
|
74
|
+
&:hover::-webkit-scrollbar-thumb
|
75
|
+
background: rgba(0, 0, 0, 0.2)
|
76
|
+
|
77
|
+
// ----------------------------------------------------------------------------
|
78
|
+
|
79
|
+
// ### Full layout
|
80
|
+
|
81
|
+
body.sg-full
|
82
|
+
.sg-toc
|
83
|
+
display: none
|
84
|
+
.sg-body
|
85
|
+
margin-left: 0
|
86
|
+
margin-right: 0
|
87
|
+
|
88
|
+
// Sidebar toggle button
|
89
|
+
.sg-toggle-sidebar
|
90
|
+
margin: 0
|
91
|
+
padding: 0
|
92
|
+
border: 0
|
93
|
+
background: rgba(black, 0.0)
|
94
|
+
|
95
|
+
position: fixed
|
96
|
+
left: 0
|
97
|
+
top: 0
|
98
|
+
bottom: 0
|
99
|
+
z-index: 11
|
100
|
+
|
101
|
+
line-height: 100%
|
102
|
+
|
103
|
+
width: 20px
|
104
|
+
|
105
|
+
cursor: pointer
|
106
|
+
|
107
|
+
color: #aaa
|
108
|
+
text-shadow: 0 1px 0 rgba(white, 0.8)
|
109
|
+
font-size: 8pt
|
110
|
+
font-family: $sans
|
111
|
+
text-align: center
|
112
|
+
|
113
|
+
&:before
|
114
|
+
content: '\25c0'
|
115
|
+
display: none
|
116
|
+
|
117
|
+
&:hover
|
118
|
+
background: rgba(black, 0.1)
|
119
|
+
border-right: solid 1px rgba(black, 0.03)
|
120
|
+
|
121
|
+
&:before
|
122
|
+
display: block
|
123
|
+
|
124
|
+
// ----------------------------------------------------------------------------
|
125
|
+
|
126
|
+
// ### Contents
|
127
|
+
|
128
|
+
.sg-toc
|
129
|
+
h1
|
130
|
+
font-size: 18pt
|
131
|
+
color: #888
|
132
|
+
font-weight: 200
|
133
|
+
line-height: 1.2
|
134
|
+
|
135
|
+
margin-bottom: 0px
|
136
|
+
padding-bottom: 30px
|
137
|
+
|
138
|
+
small, strong
|
139
|
+
display: block
|
140
|
+
text-align: right
|
141
|
+
|
142
|
+
small
|
143
|
+
font-size: 1em
|
144
|
+
strong
|
145
|
+
font-weight: bold
|
146
|
+
color: #222
|
147
|
+
|
148
|
+
ul, li
|
149
|
+
list-style-type: none
|
150
|
+
margin: 0
|
151
|
+
padding: 0
|
152
|
+
|
153
|
+
li a
|
154
|
+
border-top: solid 1px #eee
|
155
|
+
|
156
|
+
a
|
157
|
+
display: block
|
158
|
+
padding: 7px 0
|
159
|
+
|
160
|
+
height: 24px
|
161
|
+
line-height: 24px
|
162
|
+
|
163
|
+
a:visited, a
|
164
|
+
font-weight: normal
|
165
|
+
color: #777
|
166
|
+
|
167
|
+
a:after
|
168
|
+
content: ''
|
169
|
+
display: table
|
170
|
+
clear: both
|
171
|
+
|
172
|
+
a:hover
|
173
|
+
color: #36c
|
174
|
+
|
175
|
+
a.active
|
176
|
+
font-weight: bold
|
177
|
+
color: #222
|
178
|
+
|
179
|
+
.sg-number
|
180
|
+
float: left
|
181
|
+
|
182
|
+
a .sg-number:after
|
183
|
+
content: '\2192'
|
184
|
+
margin-left: 10px
|
185
|
+
color: #ddd
|
186
|
+
|
187
|
+
.sg-name
|
188
|
+
float: right
|
189
|
+
text-align: right
|
190
|
+
|
191
|
+
// ----------------------------------------------------------------------------
|
192
|
+
|
193
|
+
// Layout
|
194
|
+
.sg-body .sg-example
|
195
|
+
margin-bottom: $pad
|
196
|
+
|
197
|
+
// ### An example block
|
198
|
+
|
199
|
+
.sg-example
|
200
|
+
margin-left: 60px
|
201
|
+
position: relative
|
202
|
+
|
203
|
+
// View code button
|
204
|
+
.sg-button
|
205
|
+
position: absolute
|
206
|
+
right: 10px
|
207
|
+
bottom: 10px
|
208
|
+
z-index: 10
|
209
|
+
|
210
|
+
// Filename badge
|
211
|
+
.sg-filename
|
212
|
+
@extend .sg-badge
|
213
|
+
display: none
|
214
|
+
|
215
|
+
&:hover .sg-filename
|
216
|
+
display: block
|
217
|
+
|
218
|
+
// Description
|
219
|
+
.sg-description
|
220
|
+
line-height: 1.5
|
221
|
+
font-family: $sans
|
222
|
+
position: relative
|
223
|
+
|
224
|
+
code
|
225
|
+
@include code
|
226
|
+
|
227
|
+
> h3 a, > h3 a:visited
|
228
|
+
background: #222
|
229
|
+
color: #ddd
|
230
|
+
text-align: center
|
231
|
+
font-weight: 200
|
232
|
+
font-size: 11pt
|
233
|
+
font-family: $sans
|
234
|
+
|
235
|
+
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05)
|
236
|
+
|
237
|
+
display: block
|
238
|
+
width: 50px
|
239
|
+
height: 50px
|
240
|
+
line-height: 50px
|
241
|
+
|
242
|
+
float: left
|
243
|
+
margin-left: -70px
|
244
|
+
border-radius: 25px
|
245
|
+
|
246
|
+
> h3 a:hover
|
247
|
+
background: #444
|
248
|
+
|
249
|
+
.sg-description
|
250
|
+
padding: 5px 0 25px 0
|
251
|
+
font-size: 10pt
|
252
|
+
color: #444
|
253
|
+
|
254
|
+
.sg-description
|
255
|
+
p, ul
|
256
|
+
margin-top: 5px
|
257
|
+
|
258
|
+
h1, h2, h3, h4, h5, h6
|
259
|
+
color: #222
|
260
|
+
margin: 0
|
261
|
+
padding: 0
|
262
|
+
font-weight: bold
|
263
|
+
font-size: 12pt
|
264
|
+
|
265
|
+
code
|
266
|
+
font-size: 0.9em
|
267
|
+
color: #8080b0
|
268
|
+
font-weight: normal
|
269
|
+
margin-left: 7px
|
270
|
+
padding: 0
|
271
|
+
|
272
|
+
background: transparent
|
273
|
+
box-shadow: none
|
274
|
+
|
275
|
+
font-family: $mono
|
276
|
+
|
277
|
+
&:before
|
278
|
+
content: '\203a'
|
279
|
+
margin-right: 10px
|
280
|
+
|
281
|
+
ul.sg-modifiers
|
282
|
+
&
|
283
|
+
margin: 20px 0 0 25px
|
284
|
+
padding: 0
|
285
|
+
list-style-type: none
|
286
|
+
|
287
|
+
li
|
288
|
+
margin: 5px 0
|
289
|
+
padding: 0
|
290
|
+
list-style-type: disc
|
291
|
+
|
292
|
+
li strong
|
293
|
+
@include code
|
294
|
+
padding: 1px 5px
|
295
|
+
font-weight: bold
|
296
|
+
|
297
|
+
.sg-html
|
298
|
+
&
|
299
|
+
display: none
|
300
|
+
&.sg-expanded
|
301
|
+
display: block
|
302
|
+
|
303
|
+
border: solid 1px #ccc
|
304
|
+
border-top: 0
|
305
|
+
position: relative
|
306
|
+
|
307
|
+
background: $bluish
|
308
|
+
|
309
|
+
pre
|
310
|
+
padding: 20px !important
|
311
|
+
line-height: 1.5
|
312
|
+
border: 0 !important
|
313
|
+
color: #30305a
|
314
|
+
text-shadow: 0 1px 0 rgba(white, 0.6)
|
315
|
+
font-size: 8pt
|
316
|
+
font-family: $mono
|
317
|
+
|
318
|
+
overflow-y: scroll
|
319
|
+
|
320
|
+
.sg-canvases
|
321
|
+
border: solid 4px #f0f0f0
|
322
|
+
border-radius: 2px
|
323
|
+
|
324
|
+
// ## Canvas
|
325
|
+
.sg-canvas
|
326
|
+
&
|
327
|
+
overflow: hidden
|
328
|
+
overflow-x: auto
|
329
|
+
border: solid 1px #ccc
|
330
|
+
|
331
|
+
position: relative
|
332
|
+
z-index: 0
|
333
|
+
|
334
|
+
// Collapse
|
335
|
+
& + .sg-canvas
|
336
|
+
margin-top: -1px
|
337
|
+
|
338
|
+
&::-webkit-scrollbar
|
339
|
+
width: 10px
|
340
|
+
height: 10px
|
341
|
+
|
342
|
+
&::-webkit-scrollbar-thumb
|
343
|
+
background: rgba(0, 0, 0, 0.05)
|
344
|
+
border-radius: 5px
|
345
|
+
border: solid 3px #f4f4f4
|
346
|
+
|
347
|
+
&:hover::-webkit-scrollbar-thumb
|
348
|
+
background: rgba(0, 0, 0, 0.3)
|
349
|
+
|
350
|
+
& > div
|
351
|
+
padding: 25px
|
352
|
+
zoom: 1
|
353
|
+
|
354
|
+
& > div:after
|
355
|
+
content: ''
|
356
|
+
clear: both
|
357
|
+
display: table
|
358
|
+
|
359
|
+
// Reset the inside elements of the canvas.
|
360
|
+
& > div > *
|
361
|
+
margin: 0 auto !important
|
362
|
+
float: none !important
|
363
|
+
position: relative !important
|
364
|
+
bottom: inherit
|
365
|
+
right: inherit
|
366
|
+
left: inherit
|
367
|
+
top: inherit
|
368
|
+
|
369
|
+
&.align-center > div
|
370
|
+
text-align: center
|
371
|
+
|
372
|
+
&.align-left > div
|
373
|
+
text-align: left
|
374
|
+
|
375
|
+
&.align-right > div
|
376
|
+
text-align: right
|
377
|
+
|
378
|
+
// Light
|
379
|
+
&.bg-clear
|
380
|
+
background: transparent
|
381
|
+
|
382
|
+
&.bg-light
|
383
|
+
background: url($checkerboard)
|
384
|
+
|
385
|
+
&.bg-white
|
386
|
+
background: #fff
|
387
|
+
border: solid 10px #ddd
|
388
|
+
|
389
|
+
&.bg-black
|
390
|
+
background: #000
|
391
|
+
|
392
|
+
&.bg-dark
|
393
|
+
background: url($dark-checkerboard)
|
394
|
+
|
395
|
+
// Canvas modifier
|
396
|
+
& > .sg-modifier-name
|
397
|
+
@extend .sg-badge
|
398
|
+
bottom: auto
|
399
|
+
top: 0
|
400
|
+
|
401
|
+
border-bottom: solid 1px #ddd
|
402
|
+
border-top: 0
|
403
|
+
border-right: 0
|
404
|
+
border-radius: 0
|
405
|
+
border-bottom-left-radius: 3px
|
406
|
+
|
407
|
+
font-weight: bold
|
408
|
+
color: #222
|
409
|
+
padding: 3px 15px
|
410
|
+
|
411
|
+
// ----------------------------------------------------------------------------
|
412
|
+
|
413
|
+
// Scroll
|
414
|
+
.sg-html pre
|
415
|
+
&::-webkit-scrollbar
|
416
|
+
width: 15px
|
417
|
+
height: 15px
|
418
|
+
|
419
|
+
&::-webkit-scrollbar-thumb
|
420
|
+
background: rgba(0, 0, 0, 0.1)
|
421
|
+
border-radius: 8px
|
422
|
+
border: solid 3px $bluish
|
423
|
+
|
424
|
+
// ### Type specimens
|
425
|
+
|
426
|
+
.sg-specimen
|
427
|
+
margin: 0 auto
|
428
|
+
width: 600px
|
429
|
+
padding: 40px
|
430
|
+
background: white
|
431
|
+
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1)
|
432
|
+
color: #333
|
433
|
+
|
434
|
+
.sg-drop
|
435
|
+
font-size: 4em
|
436
|
+
display: block
|
437
|
+
float: right
|
438
|
+
margin: -40px 0px 30px 30px
|
439
|
+
background: #f0f0f0
|
440
|
+
padding: 20px
|
441
|
+
|
442
|
+
h3
|
443
|
+
font-size: 1.8em
|
444
|
+
white-space: wrap
|
445
|
+
|
446
|
+
p
|
447
|
+
margin-top: 0.9em
|
448
|
+
|
449
|
+
p.sg-small
|
450
|
+
color: #aaa
|
451
|
+
text-transform: uppercase
|
452
|
+
padding-bottom: 0.5em
|
453
|
+
margin-bottom: 2.1em
|
454
|
+
border-bottom: solid 1px #eee
|
455
|
+
|
456
|
+
p strong
|
457
|
+
font-weight: bold
|
458
|
+
display: block
|
459
|
+
font-size: 1.2em
|
460
|
+
|
461
|
+
// ### Color swatches
|
462
|
+
|
463
|
+
.sg-canvas .sg-swatch
|
464
|
+
&
|
465
|
+
background: white
|
466
|
+
font-size: 8pt
|
467
|
+
line-height: 1.3
|
468
|
+
padding: 3px
|
469
|
+
box-shadow: 0 0 3px rgba(black, 0.2)
|
470
|
+
position: relative
|
471
|
+
|
472
|
+
display: inline-block
|
473
|
+
vertical-align: top
|
474
|
+
|
475
|
+
margin: 10px !important
|
476
|
+
|
477
|
+
text-align: left
|
478
|
+
|
479
|
+
strong
|
480
|
+
display: block
|
481
|
+
color: #333
|
482
|
+
font-size: 1.1em
|
483
|
+
font-weight: bold
|
484
|
+
|
485
|
+
small
|
486
|
+
display: block
|
487
|
+
border-top: solid 1px rgba(black, 0.05)
|
488
|
+
margin-top: 5px
|
489
|
+
padding-top: 5px
|
490
|
+
|
491
|
+
.sg-text
|
492
|
+
font-weight: bold
|
493
|
+
padding: 2px 5px
|
494
|
+
background: white
|
495
|
+
position: absolute
|
496
|
+
bottom: 0px
|
497
|
+
right: 0px
|
498
|
+
border-top-left-radius: 2px
|
499
|
+
|
500
|
+
.sg-background
|
501
|
+
width: 100px
|
502
|
+
height: 100px
|
503
|
+
padding: 10px
|
504
|
+
box-sizing: border-box
|
505
|
+
|
506
|
+
&
|
507
|
+
color: rgba(black, 0.5)
|
508
|
+
text-shadow: 0 1px 0 rgba(white, 0.2)
|
509
|
+
|
510
|
+
&.sg-dark
|
511
|
+
.sg-background
|
512
|
+
color: rgba(#fff, 0.5)
|
513
|
+
text-shadow: 0 1px 0 rgba(black, 0.2)
|
514
|
+
|
515
|
+
strong
|
516
|
+
color: #fff
|
517
|
+
|
518
|
+
small
|
519
|
+
border-top-color: rgba(white, 0.05)
|
520
|
+
|
521
|
+
&:hover
|
522
|
+
.sg-text
|
523
|
+
color: #222 !important
|
524
|
+
|
525
|
+
.sg-page-title
|
526
|
+
font-size: 28pt
|
527
|
+
line-height: 36pt
|
528
|
+
font-weight: bold
|
529
|
+
color: #999
|
530
|
+
|
531
|
+
margin: 0 0 50px -10px
|
532
|
+
padding: 13px 0 20px 0
|
533
|
+
border-bottom: solid 1px #eee
|
534
|
+
|
535
|
+
font-family: $sans
|
536
|
+
font-weight: 200
|
537
|
+
|
538
|
+
overflow: hidden
|
539
|
+
|
540
|
+
// Number
|
541
|
+
strong
|
542
|
+
color: #ccc
|
543
|
+
|
544
|
+
display: inline-block
|
545
|
+
width: 60px
|
546
|
+
margin-left: -60px
|
547
|
+
text-align: right
|
548
|
+
float: right
|
549
|
+
|
550
|
+
font-weight: 700
|
551
|
+
|
552
|
+
// ----------------------------------------------------------------------------
|
553
|
+
|
554
|
+
.sg-button
|
555
|
+
margin: 0
|
556
|
+
padding: 0
|
557
|
+
border: 0
|
558
|
+
display: inline-block
|
559
|
+
|
560
|
+
background: #f0fafa
|
561
|
+
border-radius: 4px
|
562
|
+
box-shadow: inset 0 0 0 1px rgba(black, 0.1), inset 0 2px 0 rgba(white, 0.2)
|
563
|
+
|
564
|
+
height: 24px
|
565
|
+
line-height: 24px
|
566
|
+
padding: 0 15px
|
567
|
+
|
568
|
+
font-size: 9pt
|
569
|
+
font-weight: bold
|
570
|
+
font-family: $sans
|
571
|
+
|
572
|
+
color: #555
|
573
|
+
text-shadow: 0 1px 0 rgba(white, 0.9)
|
574
|
+
|
575
|
+
cursor: pointer
|
576
|
+
|
577
|
+
&:hover
|
578
|
+
background: #f0fafa
|
579
|
+
color: #509090
|
580
|
+
// Glyph
|
581
|
+
&:after
|
582
|
+
content: '\25bc'
|
583
|
+
margin-left: 6px
|
584
|
+
font-size: 0.6em
|
585
|
+
color: #a0afaf
|
586
|
+
|
587
|
+
&.sg-expanded
|
588
|
+
background: #f0fafa * 0.95
|
589
|
+
|
590
|
+
&.sg-expanded:after
|
591
|
+
content: '\25b2'
|
592
|
+
|
593
|
+
// Clickity
|
594
|
+
&:active
|
595
|
+
background: #509090
|
596
|
+
color: #eee
|
597
|
+
text-shadow: 0 1px 0 rgba(black, 0.3)
|
598
|
+
box-shadow: inset 0 0 0 1px rgba(black, 0.1)
|
599
|
+
|