bear-sass 1.0 → 1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d62cdac09f980079973e75de0eb45bfb3d45f3ff
-  data.tar.gz: bb3f8ff728cd0f70f793754ff9f5c10f2420e2f9
+  metadata.gz: a8afebb71e60b767271c8fcc7900ebdb6c5e8ddb
+  data.tar.gz: 35aebe445721f24a2b3d32b547983088bbc62dee
 SHA512:
-  metadata.gz: 474ebea168d26a9861f028a33ec9164c17c4d1de7c105cc7bf86b9c49e8270be0e20b8085574dbc9c91f072ee777ab70435bece5b5bd0f55183c99d066c8abc8
-  data.tar.gz: 07522f8fc1fce6bff033efd1f4c26fb17b5b91b6e3678a14a8035eeb5b471058d87e6a345ea7d232f92335c0ff33b96d7d95625fbe7c3ab424f5a4bf46e4e411
+  metadata.gz: dd6af5d720a0427ae3e5d80665f8a6a05bf19a6f303109d3754f618045add75dbb9ae4ccc33704932754eb0c4f4bbe9a6e358d721fdd3f8e8c0126acb9c6a474
+  data.tar.gz: d576bc6532d28730ef77d9a32ba9b0185b58150488af29fbf91dc5b4f8b7bc4007372930cdac87b443f3baae77203e292d02db9d13eea8853f93ad4c493763f1

data/CHANGELOG.md

@@ -0,0 +1,26 @@
+# Changelog
+
+## 1.1
+
+* Set a class instead of an id for headers in templates
+
+* Fix an eval error in the ERb template
+
+* Fix an issue with assets loading in Rails
+
+* Add documentation (under the documentation dir)
+
+* Rely on class instead of an id for headers
+
+## 1.0
+
+* Add some documentation for the following sections
+  - Grid system
+  - Navigation
+  - Ui elements
+  - Customization
+
+* Relies on an id instead of a class for header divs
+
+* Add a changelog file
+

data/README.md

@@ -11,6 +11,14 @@ about the style and some components.
 I hope you will love this project and it will be useful. I'm just "open sourcing"
 this hoping it could be useful for someone.
 
+## Features
+
+* Simple to use and customize
+* Written in Sass
+* Lightweight
+* Make responsive design easy
+* Open source <3
+
 ## Installation
 
 I'm a big fan of Ruby on Rails so the kit is available as a gem:
@@ -25,20 +33,15 @@ stylesheet file.
 Alternatively, you can download assets using curl or wget:
 
 ~~~bash
-$ # To be written...
+$ wget https://github.com/robin850/bear/archive/master.zip
+$ unzip master.zip
 ~~~
 
-___Complete there___
-
-## Features
-
-* Simple to use and customize
-* Written in Sass
-* Lightweight
-* Make responsive design easy
-* Open source <3
+Then you can use either Sass files (located in the `sass` directory) or just
+use the generated CSS file (located in the `css` folder). Then use a `link` tag
+in your HTML files and there you go!
 
-## Basic usage
+## Basic usage with Rails
 
 If you are using Rails, the gem ships with a rails generator for the layout.
 You can optionally give the name of the generated layout:
@@ -47,7 +50,7 @@ You can optionally give the name of the generated layout:
 $ rails g bear:layout nice
 ~~~
 
-If you are not using Rails, please read the next section.
+Then add at the top of your file `@import "bear";` to use it!
 
 ## Documentation
 

data/css/bear.css

@@ -1 +1 @@
-html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none}body{min-width:960px}.row{margin-left:auto;margin-right:auto;width:960px}.container{margin-top:1.5em}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{display:inline;float:left;margin-left:10px;margin-right:10px}.push_1,.pull_1,.push_2,.pull_2,.push_3,.pull_3,.push_4,.pull_4,.push_5,.pull_5,.push_6,.pull_6,.push_7,.pull_7,.push_8,.pull_8,.push_9,.pull_9,.push_10,.pull_10,.push_11,.pull_11{position:relative}.alpha{margin-left:0}.omega{margin-right:0}.row .grid_1{width:60px}.row .grid_2{width:140px}.row .grid_3{width:220px}.row .grid_4{width:300px}.row .grid_5{width:380px}.row .grid_6{width:460px}.row .grid_7{width:540px}.row .grid_8{width:620px}.row .grid_9{width:700px}.row .grid_10{width:780px}.row .grid_11{width:860px}.row .grid_12{width:940px}.row .prefix_1{padding-left:80px}.row .prefix_2{padding-left:160px}.row .prefix_3{padding-left:240px}.row .prefix_4{padding-left:320px}.row .prefix_5{padding-left:400px}.row .prefix_6{padding-left:480px}.row .prefix_7{padding-left:560px}.row .prefix_8{padding-left:640px}.row .prefix_9{padding-left:720px}.row .prefix_10{padding-left:800px}.row .prefix_11{padding-left:880px}.row .suffix_1{padding-right:80px}.row .suffix_2{padding-right:160px}.row .suffix_3{padding-right:240px}.row .suffix_4{padding-right:320px}.row .suffix_5{padding-right:400px}.row .suffix_6{padding-right:480px}.row .suffix_7{padding-right:560px}.row .suffix_8{padding-right:640px}.row .suffix_9{padding-right:720px}.row .suffix_10{padding-right:800px}.row .suffix_11{padding-right:880px}.row .push_1{left:80px}.row .push_2{left:160px}.row .push_3{left:240px}.row .push_4{left:320px}.row .push_5{left:400px}.row .push_6{left:480px}.row .push_7{left:560px}.row .push_8{left:640px}.row .push_9{left:720px}.row .push_10{left:800px}.row .push_11{left:880px}.row .pull_1{left:-80px}.row .pull_2{left:-160px}.row .pull_3{left:-240px}.row .pull_4{left:-320px}.row .pull_5{left:-400px}.row .pull_6{left:-480px}.row .pull_7{left:-560px}.row .pull_8{left:-640px}.row .pull_9{left:-720px}.row .pull_10{left:-800px}.row .pull_11{left:-880px}.clear,.clearer{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:before,.clearfix:after,.row:before,.row:after{content:'.';display:block;overflow:hidden;visibility:hidden;font-size:0;line-height:0;width:0;height:0}.clearfix:after,.row:after{clear:both}.clearfix,.row{zoom:1}@media only screen and (min-width: 768px) and (max-width: 959px){body{min-width:768px}.row{width:768px}.row .grid_1{width:44px}.row .grid_2{width:108px}.row .grid_3{width:172px}.row .grid_4{width:236px}.row .grid_5{width:300px}.row .grid_6{width:364px}.row .grid_7{width:428px}.row .grid_8{width:492px}.row .grid_9{width:556px}.row .grid_10{width:620px}.row .grid_11{width:684px}.row .grid_12{width:748px}.row .prefix_1{padding-left:64px}.row .prefix_2{padding-left:128px}.row .prefix_3{padding-left:192px}.row .prefix_4{padding-left:256px}.row .prefix_5{padding-left:320px}.row .prefix_6{padding-left:384px}.row .prefix_7{padding-left:448px}.row .prefix_8{padding-left:512px}.row .prefix_9{padding-left:576px}.row .prefix_10{padding-left:640px}.row .prefix_11{padding-left:704px}.row .suffix_1{padding-right:64px}.row .suffix_2{padding-right:128px}.row .suffix_3{padding-right:192px}.row .suffix_4{padding-right:256px}.row .suffix_5{padding-right:320px}.row .suffix_6{padding-right:384px}.row .suffix_7{padding-right:448px}.row .suffix_8{padding-right:512px}.row .suffix_9{padding-right:576px}.row .suffix_10{padding-right:640px}.row .suffix_11{padding-right:704px}.row .push_1{left:64px}.row .push_2{left:128px}.row .push_3{left:192px}.row .push_4{left:256px}.row .push_5{left:320px}.row .push_6{left:384px}.row .push_7{left:448px}.row .push_8{left:512px}.row .push_9{left:576px}.row .push_10{left:640px}.row .push_11{left:704px}.row .pull_1{left:-64px}.row .pull_2{left:-128px}.row .pull_3{left:-192px}.row .pull_4{left:-256px}.row .pull_5{left:-320px}.row .pull_6{left:-384px}.row .pull_7{left:-448px}.row .pull_8{left:-512px}.row .pull_9{left:-576px}.row .pull_10{left:-640px}.row .pull_11{left:-704px}}@media only screen and (max-width: 767px){body{min-width:300px}.row{width:300px}.row .grid_1,.row .grid_2,.row .grid_3,.row .grid_4,.row .grid_5,.row .grid_6,.row .grid_7,.row .grid_8,.row .grid_9,.row .grid_10,.row .grid_11,.row .grid_12{margin:0;width:300px}.row .prefix_1,.row .prefix_2,.row .prefix_3,.row .prefix_4,.row .prefix_5,.row .prefix_6,.row .prefix_7,.row .prefix_8,.row .prefix_9,.row .prefix_10,.row .prefix_11{padding-left:0}.row .suffix_1,.row .suffix_2,.row .suffix_3,.row .suffix_4,.row .suffix_5,.row .suffix_6,.row .suffix_7,.row .suffix_8,.row .suffix_9,.row .suffix_10,.row .suffix_11{padding-right:0}.row .push_1,.row .push_2,.row .push_3,.row .push_4,.row .push_5,.row .push_6,.row .push_7,.row .push_8,.row .push_9,.row .push_10,.row .push_11,.row .pull_1,.row .pull_2,.row .pull_3,.row .pull_4,.row .pull_5,.row .pull_6,.row .pull_7,.row .pull_8,.row .pull_9,.row .pull_10,.row .pull_11{left:0}}@media only screen and (min-width: 480px) and (max-width: 767px){body{min-width:480px}.row{width:420px}.row .grid_1,.row .grid_2,.row .grid_3,.row .grid_4,.row .grid_5,.row .grid_6,.row .grid_7,.row .grid_8,.row .grid_9,.row .grid_10,.row .grid_11,.row .grid_12{margin:0;width:420px}}#header{background-color:#27221c;color:#fff;height:60px;line-height:1.5em;max-height:60px;overflow:hidden;width:100%}#header h1,#header h2,#header h3,#header h4,#header h5,#header h6{color:#fff;line-height:1em;padding-top:18.4px}#header a{color:#fff;font-size:14px;font-weight:bold}#header ul{list-style-type:none;padding-top:18.4px}#header ul li{display:block;float:left;margin-right:1.5em}#header ul:last-child{margin-right:0}.nav-pills{list-style-type:none}.nav-pills li{display:block;height:32px;float:left;overflow:hidden;margin-bottom:1.5em;margin-right:15px;-khtml-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}.nav-pills li a{color:#333;display:block;padding:5px 12px}.nav-pills li.active{background:#27221c;font-weight:bold}.nav-pills li.active a{color:white}body{color:#333;font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:14px;line-height:1.5em}p{line-height:1.5em}h1,h2,h3,h4,h5,h6{color:#333;font-weight:bold;line-height:1.5em}h1,h2,h3{line-height:2em}h1{font-size:2.25em}h2{font-size:2em}h3{font-size:1.75em}h4{font-size:1.5em}h5{font-size:1.25em}h6{font-size:1.115em;font-weight:bold}p+ul{margin-top:0.75em}ul{list-style-type:disc}ol{list-style-type:decimal}ul,ol{padding-left:2em}ul ul,ol ul{margin-top:0;margin-bottom:0;list-style-type:circle}ul ol{list-style-type:decimal}ol ol{list-style-type:lower-alpha}footer{margin:1.5em auto;line-height:1.5em;text-align:center}.alert{background:#eccdcd;color:#ac4142;min-height:20px;margin:0 0 7px 0 !important;overflow:hidden;padding:8px 10px;width:100%;-khtml-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}.alert-success,.alert.success{background:#b3dbb2;color:#40833e;min-height:20px;margin:0 0 7px 0 !important;overflow:hidden;padding:8px 10px;width:100%;-khtml-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}.alert-warning,.alert.warning{background:#f7ecb5;color:#c09853;min-height:20px;margin:0 0 7px 0 !important;overflow:hidden;padding:8px 10px;width:100%;-khtml-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}button.btn,button.btn-light,button.btn-green,input.btn,input.btn-light,input.btn-green{border:none;box-shadow:none}.btn{background-color:#362f27;color:#ebdeca !important;display:inline-block;font-weight:bold;font-size:14px;text-align:center;line-height:1.5em;padding:7px 20px;vertical-align:middle;-khtml-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}.btn:hover{background-color:#211d18;cursor:pointer}.btn-light{background-color:#e0e0e0;color:#505050 !important;display:inline-block;font-weight:bold;font-size:14px;text-align:center;line-height:1.5em;padding:7px 20px;vertical-align:middle;-khtml-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}.btn-light:hover{background-color:#cecece;cursor:pointer}.btn-green{background-color:#40833e;color:#fff !important;display:inline-block;font-weight:bold;font-size:14px;text-align:center;line-height:1.5em;padding:7px 20px;vertical-align:middle;-khtml-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}.btn-green:hover{background-color:#346b33;cursor:pointer}#header .btn-light,#header .btn-green,#header .btn{margin-top:12px}.label,.tag{background:#e0e0e0;color:#505050;display:inline-block;font-size:11px;font-weight:bold;line-height:1em;padding:3px 4px;vertical-align:baseline;white-space:nowrap;-khtml-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}.label.blue,.label-blue,.tag.blue,.tag-blue{background:#65bfbf;color:#fff;display:inline-block;font-size:11px;font-weight:bold;line-height:1em;padding:3px 4px;vertical-align:baseline;white-space:nowrap;-khtml-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}.label.green,.label-green,.tag.green,.tag-green{background:#40833e;color:#fff;display:inline-block;font-size:11px;font-weight:bold;line-height:1em;padding:3px 4px;vertical-align:baseline;white-space:nowrap;-khtml-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}.label.brown,.label-brown,.tag.brown,.tag-brown{background:#362f27;color:#fff;display:inline-block;font-size:11px;font-weight:bold;line-height:1em;padding:3px 4px;vertical-align:baseline;white-space:nowrap;-khtml-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}.label.red,.label-red,.tag.red,.tag-red{background:#ac4142;color:#fff;display:inline-block;font-size:11px;font-weight:bold;line-height:1em;padding:3px 4px;vertical-align:baseline;white-space:nowrap;-khtml-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}.panel{background:#f2f2f2;border:1px solid #e9e9e9;margin-bottom:2em;margin-top:2em;padding:8px 12px;-khtml-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}table{background:transparent;border-collapse:collapse;line-height:2em;margin-bottom:2em;width:100%}table thead{display:table-header-group}table th{border-bottom:1px solid #e0e0e0;font-weight:bold;padding-bottom:3px;text-align:left}table td{border-bottom:1px solid #e0e0e0;padding:5px}form{margin:1.5em 0}form input[type="text"],form input[type="email"],form input[type="password"],form input[type="search"],form input[type="time"],form input[type="tel"],form input[type="date"],form input[type="datetime"],form input[type="datetime-local"],form input[type="number"],form input[type="url"],form input[type="week"],form input[type="month"]{background:#fff;border:1px solid #b6b6b6;color:#333;display:block;height:20px;font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:14px;line-height:20px;margin:0.5em 0;outline:none;padding:3px 7px;width:300px;-khtml-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}form textarea{background:#fff;border:1px solid #b6b6b6;color:#333;display:block;height:20px;font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:14px;line-height:20px;margin:0.5em 0;outline:none;padding:3px 7px;width:300px;-khtml-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;min-height:200px;min-width:300px;padding-top:8px}form fieldset{border:1px solid #dcdcdc;padding:1.5em;-khtml-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none}body{min-width:960px}.row{margin-left:auto;margin-right:auto;width:960px}.container{margin-top:1.5em}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{display:inline;float:left;margin-left:10px;margin-right:10px}.push_1,.pull_1,.push_2,.pull_2,.push_3,.pull_3,.push_4,.pull_4,.push_5,.pull_5,.push_6,.pull_6,.push_7,.pull_7,.push_8,.pull_8,.push_9,.pull_9,.push_10,.pull_10,.push_11,.pull_11{position:relative}.alpha{margin-left:0}.omega{margin-right:0}.row .grid_1{width:60px}.row .grid_2{width:140px}.row .grid_3{width:220px}.row .grid_4{width:300px}.row .grid_5{width:380px}.row .grid_6{width:460px}.row .grid_7{width:540px}.row .grid_8{width:620px}.row .grid_9{width:700px}.row .grid_10{width:780px}.row .grid_11{width:860px}.row .grid_12{width:940px}.row .prefix_1{padding-left:80px}.row .prefix_2{padding-left:160px}.row .prefix_3{padding-left:240px}.row .prefix_4{padding-left:320px}.row .prefix_5{padding-left:400px}.row .prefix_6{padding-left:480px}.row .prefix_7{padding-left:560px}.row .prefix_8{padding-left:640px}.row .prefix_9{padding-left:720px}.row .prefix_10{padding-left:800px}.row .prefix_11{padding-left:880px}.row .suffix_1{padding-right:80px}.row .suffix_2{padding-right:160px}.row .suffix_3{padding-right:240px}.row .suffix_4{padding-right:320px}.row .suffix_5{padding-right:400px}.row .suffix_6{padding-right:480px}.row .suffix_7{padding-right:560px}.row .suffix_8{padding-right:640px}.row .suffix_9{padding-right:720px}.row .suffix_10{padding-right:800px}.row .suffix_11{padding-right:880px}.row .push_1{left:80px}.row .push_2{left:160px}.row .push_3{left:240px}.row .push_4{left:320px}.row .push_5{left:400px}.row .push_6{left:480px}.row .push_7{left:560px}.row .push_8{left:640px}.row .push_9{left:720px}.row .push_10{left:800px}.row .push_11{left:880px}.row .pull_1{left:-80px}.row .pull_2{left:-160px}.row .pull_3{left:-240px}.row .pull_4{left:-320px}.row .pull_5{left:-400px}.row .pull_6{left:-480px}.row .pull_7{left:-560px}.row .pull_8{left:-640px}.row .pull_9{left:-720px}.row .pull_10{left:-800px}.row .pull_11{left:-880px}.clear,.clearer{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:before,.clearfix:after,.row:before,.row:after{content:'.';display:block;overflow:hidden;visibility:hidden;font-size:0;line-height:0;width:0;height:0}.clearfix:after,.row:after{clear:both}.clearfix,.row{zoom:1}@media only screen and (min-width: 768px) and (max-width: 959px){body{min-width:768px}.row{width:768px}.row .grid_1{width:44px}.row .grid_2{width:108px}.row .grid_3{width:172px}.row .grid_4{width:236px}.row .grid_5{width:300px}.row .grid_6{width:364px}.row .grid_7{width:428px}.row .grid_8{width:492px}.row .grid_9{width:556px}.row .grid_10{width:620px}.row .grid_11{width:684px}.row .grid_12{width:748px}.row .prefix_1{padding-left:64px}.row .prefix_2{padding-left:128px}.row .prefix_3{padding-left:192px}.row .prefix_4{padding-left:256px}.row .prefix_5{padding-left:320px}.row .prefix_6{padding-left:384px}.row .prefix_7{padding-left:448px}.row .prefix_8{padding-left:512px}.row .prefix_9{padding-left:576px}.row .prefix_10{padding-left:640px}.row .prefix_11{padding-left:704px}.row .suffix_1{padding-right:64px}.row .suffix_2{padding-right:128px}.row .suffix_3{padding-right:192px}.row .suffix_4{padding-right:256px}.row .suffix_5{padding-right:320px}.row .suffix_6{padding-right:384px}.row .suffix_7{padding-right:448px}.row .suffix_8{padding-right:512px}.row .suffix_9{padding-right:576px}.row .suffix_10{padding-right:640px}.row .suffix_11{padding-right:704px}.row .push_1{left:64px}.row .push_2{left:128px}.row .push_3{left:192px}.row .push_4{left:256px}.row .push_5{left:320px}.row .push_6{left:384px}.row .push_7{left:448px}.row .push_8{left:512px}.row .push_9{left:576px}.row .push_10{left:640px}.row .push_11{left:704px}.row .pull_1{left:-64px}.row .pull_2{left:-128px}.row .pull_3{left:-192px}.row .pull_4{left:-256px}.row .pull_5{left:-320px}.row .pull_6{left:-384px}.row .pull_7{left:-448px}.row .pull_8{left:-512px}.row .pull_9{left:-576px}.row .pull_10{left:-640px}.row .pull_11{left:-704px}}@media only screen and (max-width: 767px){body{min-width:300px}.row{width:300px}.row .grid_1,.row .grid_2,.row .grid_3,.row .grid_4,.row .grid_5,.row .grid_6,.row .grid_7,.row .grid_8,.row .grid_9,.row .grid_10,.row .grid_11,.row .grid_12{margin:0;width:300px}.row .prefix_1,.row .prefix_2,.row .prefix_3,.row .prefix_4,.row .prefix_5,.row .prefix_6,.row .prefix_7,.row .prefix_8,.row .prefix_9,.row .prefix_10,.row .prefix_11{padding-left:0}.row .suffix_1,.row .suffix_2,.row .suffix_3,.row .suffix_4,.row .suffix_5,.row .suffix_6,.row .suffix_7,.row .suffix_8,.row .suffix_9,.row .suffix_10,.row .suffix_11{padding-right:0}.row .push_1,.row .push_2,.row .push_3,.row .push_4,.row .push_5,.row .push_6,.row .push_7,.row .push_8,.row .push_9,.row .push_10,.row .push_11,.row .pull_1,.row .pull_2,.row .pull_3,.row .pull_4,.row .pull_5,.row .pull_6,.row .pull_7,.row .pull_8,.row .pull_9,.row .pull_10,.row .pull_11{left:0}}@media only screen and (min-width: 480px) and (max-width: 767px){body{min-width:480px}.row{width:420px}.row .grid_1,.row .grid_2,.row .grid_3,.row .grid_4,.row .grid_5,.row .grid_6,.row .grid_7,.row .grid_8,.row .grid_9,.row .grid_10,.row .grid_11,.row .grid_12{margin:0;width:420px}}.header{background-color:#27221c;color:#fff;height:60px;line-height:1.5em;max-height:60px;overflow:hidden;width:100%}.header h1,.header h2,.header h3,.header h4,.header h5,.header h6{color:#fff;line-height:1em;padding-top:18.4px}.header a{color:#fff;font-size:14px;font-weight:bold}.header ul{list-style-type:none;padding-top:18.4px}.header ul li{display:block;float:left;margin-right:1.5em}.header ul:last-child{margin-right:0}.nav-pills{list-style-type:none}.nav-pills li{display:block;height:32px;float:left;overflow:hidden;margin-bottom:1.5em;margin-right:15px;-khtml-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}.nav-pills li a{color:#333;display:block;padding:5px 12px}.nav-pills li.active{background:#27221c;font-weight:bold}.nav-pills li.active a{color:white}body{color:#333;font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:14px;line-height:1.5em}p{line-height:1.5em}h1,h2,h3,h4,h5,h6{color:#333;font-weight:bold;line-height:1.5em}h1,h2,h3{line-height:2em}h1{font-size:2.25em}h2{font-size:2em}h3{font-size:1.75em}h4{font-size:1.5em}h5{font-size:1.25em}h6{font-size:1.115em;font-weight:bold}p+ul{margin-top:0.75em}ul{list-style-type:disc}ol{list-style-type:decimal}ul,ol{padding-left:2em}ul ul,ol ul{margin-top:0;margin-bottom:0;list-style-type:circle}ul ol{list-style-type:decimal}ol ol{list-style-type:lower-alpha}footer{margin:1.5em auto;line-height:1.5em;text-align:center}.alert{background:#eccdcd;color:#ac4142;min-height:20px;margin:0 0 7px 0 !important;overflow:hidden;padding:8px 10px;width:100%;-khtml-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}.alert-success,.alert.success{background:#b3dbb2;color:#40833e;min-height:20px;margin:0 0 7px 0 !important;overflow:hidden;padding:8px 10px;width:100%;-khtml-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}.alert-warning,.alert.warning{background:#f7ecb5;color:#c09853;min-height:20px;margin:0 0 7px 0 !important;overflow:hidden;padding:8px 10px;width:100%;-khtml-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}button.btn,button.btn-light,button.btn-green,input.btn,input.btn-light,input.btn-green{border:none;box-shadow:none}.btn{background-color:#362f27;color:#ebdeca !important;display:inline-block;font-weight:bold;font-size:14px;text-align:center;line-height:1.5em;padding:7px 20px;vertical-align:middle;-khtml-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}.btn:hover{background-color:#211d18;cursor:pointer}.btn-light{background-color:#e0e0e0;color:#505050 !important;display:inline-block;font-weight:bold;font-size:14px;text-align:center;line-height:1.5em;padding:7px 20px;vertical-align:middle;-khtml-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}.btn-light:hover{background-color:#cecece;cursor:pointer}.btn-green{background-color:#40833e;color:#fff !important;display:inline-block;font-weight:bold;font-size:14px;text-align:center;line-height:1.5em;padding:7px 20px;vertical-align:middle;-khtml-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}.btn-green:hover{background-color:#346b33;cursor:pointer}.header .btn-light,.header .btn-green,.header .btn{margin-top:12px}.label,.tag{background:#e0e0e0;color:#505050;display:inline-block;font-size:11px;font-weight:bold;line-height:1em;padding:3px 4px;vertical-align:baseline;white-space:nowrap;-khtml-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}.label.blue,.label-blue,.tag.blue,.tag-blue{background:#65bfbf;color:#fff;display:inline-block;font-size:11px;font-weight:bold;line-height:1em;padding:3px 4px;vertical-align:baseline;white-space:nowrap;-khtml-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}.label.green,.label-green,.tag.green,.tag-green{background:#40833e;color:#fff;display:inline-block;font-size:11px;font-weight:bold;line-height:1em;padding:3px 4px;vertical-align:baseline;white-space:nowrap;-khtml-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}.label.brown,.label-brown,.tag.brown,.tag-brown{background:#362f27;color:#fff;display:inline-block;font-size:11px;font-weight:bold;line-height:1em;padding:3px 4px;vertical-align:baseline;white-space:nowrap;-khtml-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}.label.red,.label-red,.tag.red,.tag-red{background:#ac4142;color:#fff;display:inline-block;font-size:11px;font-weight:bold;line-height:1em;padding:3px 4px;vertical-align:baseline;white-space:nowrap;-khtml-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}.panel{background:#f2f2f2;border:1px solid #e9e9e9;margin-bottom:2em;margin-top:2em;padding:8px 12px;-khtml-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}table{background:transparent;border-collapse:collapse;line-height:2em;margin-bottom:2em;width:100%}table thead{display:table-header-group}table th{border-bottom:1px solid #e0e0e0;font-weight:bold;padding-bottom:3px;text-align:left}table td{border-bottom:1px solid #e0e0e0;padding:5px}form{margin:1.5em 0}form input[type="text"],form input[type="email"],form input[type="password"],form input[type="search"],form input[type="time"],form input[type="tel"],form input[type="date"],form input[type="datetime"],form input[type="datetime-local"],form input[type="number"],form input[type="url"],form input[type="week"],form input[type="month"]{background:#fff;border:1px solid #b6b6b6;color:#333;display:block;height:20px;font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:14px;line-height:20px;margin:0.5em 0;outline:none;padding:3px 7px;width:300px;-khtml-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}form textarea{background:#fff;border:1px solid #b6b6b6;color:#333;display:block;height:20px;font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:14px;line-height:20px;margin:0.5em 0;outline:none;padding:3px 7px;width:300px;-khtml-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;min-height:200px;min-width:300px;padding-top:8px}form fieldset{border:1px solid #dcdcdc;padding:1.5em;-khtml-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}

data/documentation/README.md

@@ -0,0 +1,9 @@
+# Documentation
+
+Please see [the site](http://robin850.github.io/bear) to browse the documenation online. Feel free to fork and edit it if you find typos or just wan to improve
+it!
+
+* [Grid](grid.md)
+* [Navigation](navigation.md)
+* [Ui elements](ui.md)
+* [Customization](customization.md)

data/documentation/customization.md

@@ -0,0 +1,83 @@
+# Customization
+
+Bear aims to be more or less customizable. You can either configure the style
+through variables or implement other elements using built-in mixins.
+
+## Variables
+
+Bear is built through variables. It lets you change most values to theme your
+site simply. The variables' name are clear so normally, you just need to have
+a look at the whole list and redefine them as you want:
+
+~~~scss
+// Base
+$baseFontSize: 14px;
+$baseFontFamily: Helvetica, arial, freesans, clean, sans-serif;
+$baseColor: #333333;
+$lineHeight: 1.5em;
+
+// Colors
+$lightGray: #e0e0e0;
+$darkGray: #505050;
+$green: #40833e;
+$white: white;
+$yellow: darken(#fcf8e3, 10%);
+$darkYellow: #c09853;
+$red: #ac4142;
+$blue: #65bfbf;
+$brown: lighten(#211d18, 7%);
+
+// Header
+$headerBackground: #27221c;
+$headerHeight: 60px;
+$headerColor: $white;
+
+// Buttons
+$btnBackground: $brown;
+$btnColor: lighten(#e8d9c3, 2%);
+
+$btnGreenBackground: $green;
+$btnGreenColor: $white;
+
+$btnLightBackground: $lightGray;
+$btnLightColor: $darkGray;
+
+// Tags/labels
+$labelFontSize: 11px;
+
+// Panels
+$panelBackground: lighten($lightGray, 7%);
+$panelBorder: 1px solid lighten($darkGray, 60%);
+
+// Forms
+$fieldBorder: 1px solid lighten($darkGray, 40%);
+$fieldFontFamily: $baseFontFamily;
+$fieldFontSize: $baseFontSize;
+$fieldColor: $baseColor;
+$fieldSetBorder: 1px solid lighten($darkGray, 55%);
+~~~
+
+## Mixins
+
+Bear also comes with few mixins so you can implement new items (e.g. buttons).
+Let's take the example of a button! Let's say you cant to add a nice red button
+for dangerous tasks ; the implementation would look like this:
+
+~~~scss
+// Just replace $color and $background with your values
+.btn.red, .btn-red {
+  @include button($color, $background);
+}
+~~~
+
+Bear has the following mixins:
+
+* [border-radius($radius: 3px)][border-radius]
+* [alert($background, $color: darken($background, 10%))][alert]
+* [label($background, $color)][label]
+* [field][] (to add the same style as fields)
+
+[border-radius]: https://github.com/robin850/bear/blob/master/sass/_mixins.scss#L1
+[alert]: https://github.com/robin850/bear/blob/master/sass/_mixins.scss#L28
+[label]: https://github.com/robin850/bear/blob/master/sass/_mixins.scss#L39
+[field]: https://github.com/robin850/bear/blob/master/sass/_mixins.scss#L52

data/documentation/grid.md

@@ -0,0 +1,49 @@
+# The grid system
+
+The grid system is based on the [960] grid system and is fully responsive. The
+responsive part of the grid is based on [this repository][960-responsive].
+However, some classes have been renamed. For instance, `container_12` is simply
+`row` (just like most CSS kit) to make evntual backports and change easier if
+you want to use a 16 columns based grid.
+
+So, to create a grid container just create a div with the `row` class ; you can
+also add the `container` class to ensure a little margin-top (of 1.5 em):
+
+~~~html
+<div class="row container">
+  <!-- Here go your divs -->
+</div>
+~~~
+
+Then you can use the buil-in row classes which go from `grid_1` to `grid_12`.
+If you want to clear the first and the last div's gutter, you can use the `alpha`
+and `omega` classes to clear (respectively) the left and right margin. E.g.:
+
+~~~html
+<div class="row container">
+  <div class="alpha grid_6">...</div>
+  <div class="grid_3">...</div>
+  <div class="grid_3 omega">...</div>
+</div>
+~~~
+
+You may also need to use the `clear` (or `clearer`) class on some elements (placed
+after a `grid_*` element) to clear floats.
+
+# Responsive grid
+
+As said at the beginning, the grid system is responsive. It relies on media
+queries to detect if it's either a computer, tablet or phone. The following
+media queries are used in the `grid.scss` file:
+
+~~~sass
+// For tablets
+@media only screen and (min-width: 768px) and (max-width: 959px)
+// All mobiles width
+@media only screen and (max-width: 767px)
+// Mobile landscape width to tablet portrait width
+@media only screen and (min-width: 480px) and (max-width: 767px)
+~~~
+
+[960]: http://960.gs/
+[960-responsive]: https://github.com/tylerwolff/960-Responsive-Grid

data/documentation/navigation.md

@@ -0,0 +1,49 @@
+# Navigation
+
+Bear comes with some styled elements to simplify navigations. For the moment
+there are only pills navs and headers.
+
+## Headers
+
+To put a header, you just have to create a div with the `header` class. Then,
+inside you can either use a `row` element or leave it as is to have a 100% width
+header:
+
+~~~html
+<div class="header">
+  <!-- Here's your header -->
+</div>
+~~~
+
+Bear also stylize header's ul elements to make a nav easily. You just have to
+create a simple ul tag with `li`s and links inside:
+
+~~~html
+<div class="header">
+  <ul>
+    <li><a href="/">Home</a></li>
+    <li><a href="/blog">Blog</a></li>
+    <li><a href="/portfolio">Portfolio</a></li>
+  </ul>
+</div>
+~~~
+
+Bear also ensures that buttons and titles in headers are correctly stylized.
+
+## Pills nav
+
+You can also create pills navs to make, for instance, sub-navs in your page. Bear
+doesn't ship with JavaScript plugins so you will have to make the necessary code
+to make the active class and the content toggled correctly.
+
+To create a pills nav, Bear just requires the following code:
+
+~~~html
+<ul class="nav-pills">
+  <li class="active">All</li>
+  <li>Open</li>
+  <li>Closed</li>
+</ul>
+~~~
+
+You may need to use a `clear` element just after the ul to clear float.

data/documentation/ui.md

@@ -0,0 +1,83 @@
+# Ui elements
+
+Bear ships with stylized UI elements. It's add some nice styles to current
+elements (such as paragraphs and titles) and also provides extra elements such
+as panels or alerts.
+
+## Typography
+
+Bear adds some basic styling to common elements:
+
+* Titles (from h1 to h6)
+* Paragraphs
+* Lists
+
+You don't need to specify extra class(es) on these elements to get some nice
+styling. If you don't love the base style, feel free to customize it (see the
+"customization" setion for further information).
+
+## Buttons
+
+You can easily add buttons to your page using the buttons' classes:
+
+* `btn`
+* `btn-green` or `btn green`
+* `btn-light` or `btn light`
+
+For example:
+
+~~~html
+<a href="" class="btn-green">Merge this</a>
+~~~
+
+You can easily create new buttons ; please see the "customization" section.
+
+## Panels
+
+Bear comes with a simple panel element. Just add the `panel` class to a div:
+
+~~~html
+<div class="panel">
+  <h4>A nice Panel</h4>
+  <p>...</p>
+</div>
+~~~
+
+## Tags/labels
+
+You can easily tag your resources or simply add labels in your page relying on
+the following classes:
+
+* `label` or `tag`
+* `label-blue`, `label blue`, `tag blue` or `tag-blue`
+* `label-green`, `label green`, `tag green` or `tag-green`
+* `label-brown`, `label brown`, `tag brown` or `tag-brown`
+* `label-red`, `label red`, `tag red` or `tag-red`
+
+Generally, these classes are applied on `span` or `a` elements so the CSS may
+seems odd on other elements.
+
+## Alerts
+
+Bear comes with three alerts divs to simply notice your users:
+
+~~~html
+<div class="alert">Here comes an error message</div>
+<div class="alert success">Nice job mate!</div>
+<div class="alert warning">Warning! Keep it simple!</div>
+~~~
+
+Alternatively, you can also use the "dasherized" version of the class names (with
+`alert-success` and `alert-warning`).
+
+## Tables
+
+There is nothing special with tables. They just have a basic style with bottom
+borders and some padding/margin. They don't require special class.
+
+## Forms
+
+As tables, forms just have a basic style and don't require any special class to
+stylize a special element. Fieldsets, inputs and textareas are stylized. You
+should rely on the button classes (`btn`, etc.) to enhance submit or reset
+buttons' style.

data/lib/bear/engine.rb

@@ -1,4 +1,13 @@
 module Bear
-  class Engine < ::Rails::Engine
+  class Engine < Rails::Engine
+    # Thanks Foundation for this snippet
+    add_paths_block = lambda { |app|
+      app.config.assets.paths << File.expand_path("../../../sass", __FILE__)
+    }
+
+    initializer 'bear.update_asset_paths', &add_paths_block
+    initializer 'bear.update_asset_paths', :group => :assets,
+                &add_paths_block
+
   end
 end

data/lib/bear/generators/templates/layout.html.erb

@@ -6,11 +6,12 @@
 
     <%%= stylesheet_link_tag "application" %>
     <%%= javascript_include_tag "application" %>
+    <%%= csrf_meta_tags %>
   </head>
 
   <body>
 
-    <div id="header">
+    <div class="header">
       <div class="row">
         <div class="alpha grid_2">
           <h4><%= Rails.application.class.parent_name %></h4>
@@ -26,11 +27,11 @@
     <div class="container row">
       <%% if notice %>
         <div class="alert success"><%%= notice %></div>
-      <% end %>
+      <%% end %>
 
       <%% if alert %>
         <div class="alert"><%%= alert %></div>
-      <% end %>
+      <%% end %>
 
       <%%= yield %>
     </div>

data/lib/bear/generators/templates/layout.html.slim

@@ -9,7 +9,7 @@ html
 
   body
 
-    div#header
+    div.header
       div.row
         div.alpha.grid_2
           h4 <%= Rails.application.class.parent_name %>

data/lib/bear/version.rb

@@ -1,3 +1,3 @@
 module Bear
-  VERSION = "1.0"
+  VERSION = "1.1"
 end

data/sass/buttons.scss

@@ -17,7 +17,7 @@ button, input {
   @include button($btnGreenColor, $btnGreenBackground);
 }
 
-#header {
+.header {
   .btn-light, .btn-green, .btn {
     margin-top: $headerHeight / 5;
   }

data/sass/header.scss

@@ -1,4 +1,4 @@
-#header {
+.header {
   background-color: $headerBackground;
   color: $headerColor;
   height: $headerHeight;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bear-sass
 version: !ruby/object:Gem::Version
-  version: '1.0'
+  version: '1.1'
 platform: ruby
 authors:
 - Robin Dupret
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-05-19 00:00:00.000000000 Z
+date: 2013-06-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -60,11 +60,17 @@ extensions: []
 extra_rdoc_files: []
 files:
 - .gitignore
+- CHANGELOG.md
 - Gemfile
 - README.md
 - Rakefile
 - bear-sass.gemspec
 - css/bear.css
+- documentation/README.md
+- documentation/customization.md
+- documentation/grid.md
+- documentation/navigation.md
+- documentation/ui.md
 - lib/bear-sass.rb
 - lib/bear/engine.rb
 - lib/bear/generators/USAGE