basscss-rails 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +22 -0
  3. data/Gemfile +4 -0
  4. data/LICENSE.txt +22 -0
  5. data/README.md +67 -0
  6. data/Rakefile +2 -0
  7. data/app/assets/stylesheets/basscss/_borders.scss +35 -0
  8. data/app/assets/stylesheets/basscss/_button-themes.scss +32 -0
  9. data/app/assets/stylesheets/basscss/_buttons.scss +33 -0
  10. data/app/assets/stylesheets/basscss/_colors.scss +20 -0
  11. data/app/assets/stylesheets/basscss/_form-themes.scss +37 -0
  12. data/app/assets/stylesheets/basscss/_forms.scss +68 -0
  13. data/app/assets/stylesheets/basscss/_grid.scss +56 -0
  14. data/app/assets/stylesheets/basscss/_lists.scss +16 -0
  15. data/app/assets/stylesheets/basscss/_margins.scss +34 -0
  16. data/app/assets/stylesheets/basscss/_nav-themes.scss +130 -0
  17. data/app/assets/stylesheets/basscss/_navs.scss +59 -0
  18. data/app/assets/stylesheets/basscss/_padding.scss +18 -0
  19. data/app/assets/stylesheets/basscss/_positions.scss +22 -0
  20. data/app/assets/stylesheets/basscss/_reset.scss +10 -0
  21. data/app/assets/stylesheets/basscss/_table-object.scss +26 -0
  22. data/app/assets/stylesheets/basscss/_table-themes.scss +8 -0
  23. data/app/assets/stylesheets/basscss/_tables.scss +23 -0
  24. data/app/assets/stylesheets/basscss/_theme.scss +16 -0
  25. data/app/assets/stylesheets/basscss/_type.scss +43 -0
  26. data/app/assets/stylesheets/basscss/_utilities.scss +30 -0
  27. data/app/assets/stylesheets/basscss/_variables.scss +62 -0
  28. data/app/assets/stylesheets/basscss/basscss-lite.scss +19 -0
  29. data/app/assets/stylesheets/basscss/basscss.scss +43 -0
  30. data/basscss-rails.gemspec +23 -0
  31. data/lib/basscss/rails.rb +7 -0
  32. data/lib/basscss/rails/engine.rb +8 -0
  33. data/lib/basscss/rails/version.rb +5 -0
  34. metadata +105 -0
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: b42bc530e7e0140e164255084ac6ea301ff586f3
4
+ data.tar.gz: 2ec01689af7c734429e7cf02c0542e80d2e99f4c
5
+ SHA512:
6
+ metadata.gz: 421bb41f2a18c11655f2797c03b700f875cac332ba436d8d77c935478b6c9e198be2d3bbd4436937a7c9127d74a40f17caab3f58045479f8248e1a3ce2eb6278
7
+ data.tar.gz: becc7d7cda4a187bd7d9cbb570ab66bad847d69d1083cc83c9232c5802a915c30a86a7918f1c82b98f14161283b3de457c89bd46c1decbce625886a665fd9c32
data/.gitignore ADDED
@@ -0,0 +1,22 @@
1
+ *.gem
2
+ *.rbc
3
+ .bundle
4
+ .config
5
+ .yardoc
6
+ Gemfile.lock
7
+ InstalledFiles
8
+ _yardoc
9
+ coverage
10
+ doc/
11
+ lib/bundler/man
12
+ pkg
13
+ rdoc
14
+ spec/reports
15
+ test/tmp
16
+ test/version_tmp
17
+ tmp
18
+ *.bundle
19
+ *.so
20
+ *.o
21
+ *.a
22
+ mkmf.log
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in basscss.gemspec
4
+ gemspec
data/LICENSE.txt ADDED
@@ -0,0 +1,22 @@
1
+ Copyright (c) 2014 Brent Jackson, John Otander
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/README.md ADDED
@@ -0,0 +1,67 @@
1
+ # BASSCSS for Rails
2
+
3
+ Include BASSCSS, the next-level CSS toolkit, in your Rails apps through the assets pipeline.
4
+
5
+ Repackaged from <https://github.com/jxnblk/basscss> by Brent Jackson.
6
+
7
+ ## Installation
8
+
9
+ Add this line to your application's Gemfile:
10
+
11
+ ```ruby
12
+ gem 'basscss'
13
+ ```
14
+
15
+ And then execute:
16
+
17
+ $ bundle
18
+
19
+ Or install it yourself as:
20
+
21
+ $ gem install basscss
22
+
23
+ ##### Using Sass
24
+
25
+ You will then need to require the stylesheet in your application.scss:
26
+
27
+ ```scss
28
+ @import "basscss/basscss";
29
+ ```
30
+
31
+ There's also a lite version of BASSCSS, which can be included instead:
32
+
33
+ ```scss
34
+ @import "basscss/basscss-lite";
35
+ ```
36
+
37
+ ##### Using CSS
38
+
39
+ Or, in your application.css:
40
+
41
+ ```css
42
+ *= require basscss/basscss;
43
+ ```
44
+
45
+ Or, for BASSCSS lite:
46
+
47
+ ```css
48
+ *= require basscss/basscss-lite;
49
+ ```
50
+
51
+ ## Usage
52
+
53
+ Further documentation can be found on the BASSCSS website: <http://www.basscss.com/docs/>
54
+
55
+ ## Contributing
56
+
57
+ 1. Fork it ( https://github.com/johnotander/basscss/fork )
58
+ 2. Create your feature branch (`git checkout -b my-new-feature`)
59
+ 3. Commit your changes (`git commit -am 'Add some feature'`)
60
+ 4. Push to the branch (`git push origin my-new-feature`)
61
+ 5. Create a new Pull Request
62
+
63
+ ## Acknowledgements
64
+
65
+ * The CSS toolkit is written by Brent Jackson: <https://github.com/jxnblk/basscss>
66
+
67
+ More documentation available at <http://www.basscss.com/docs/>.
data/Rakefile ADDED
@@ -0,0 +1,2 @@
1
+ require "bundler/gem_tasks"
2
+
@@ -0,0 +1,35 @@
1
+ // Borders
2
+
3
+ .border {
4
+ border-style: solid;
5
+ border-width: $border-width;
6
+ border-color: $border-color;
7
+ }
8
+
9
+ .border-top {
10
+ border-top-style: solid;
11
+ border-top-width: $border-width;
12
+ border-top-color: $border-color;
13
+ }
14
+
15
+ .border-right {
16
+ border-right-style: solid;
17
+ border-right-width: $border-width;
18
+ border-right-color: $border-color;
19
+ }
20
+
21
+ .border-bottom {
22
+ border-bottom-style: solid;
23
+ border-bottom-width: $border-width;
24
+ border-bottom-color: $border-color;
25
+ }
26
+
27
+ .border-left {
28
+ border-left-style: solid;
29
+ border-left-width: $border-width;
30
+ border-left-color: $border-color;
31
+ }
32
+
33
+ .rounded { border-radius: $border-radius; }
34
+ .circle { border-radius: 50%; }
35
+
@@ -0,0 +1,32 @@
1
+ // Button Themes
2
+
3
+ .button {
4
+ border-radius: $border-radius;
5
+ transition-duration: .2s;
6
+ transition-timing-function: ease;
7
+ transition-property: box-shadow , background-color;
8
+ &:focus {
9
+ outline: none;
10
+ box-shadow: 0 0 0 2px #fff, 0 0 1px 4px rgba($blue, .5);
11
+ }
12
+ }
13
+
14
+ .button-blue {
15
+ color: #fff;
16
+ background-color: $blue;
17
+ &:hover {
18
+ color: #fff;
19
+ background-color: darken($blue, 20%);
20
+ }
21
+ }
22
+
23
+ .button-gray {
24
+ color: #fff;
25
+ background-color: $mid-gray;
26
+ &:hover {
27
+ color: #fff;
28
+ background-color: darken($mid-gray, 20%);
29
+ }
30
+ &:focus {}
31
+ }
32
+
@@ -0,0 +1,33 @@
1
+ // Buttons
2
+
3
+ .button {
4
+ font-family: inherit;
5
+ font-weight: bold;
6
+ text-decoration: none;
7
+ cursor: pointer;
8
+ border: none;
9
+ -webkit-appearance: none;
10
+ appearance: none;
11
+ white-space: nowrap;
12
+ display: inline-block;
13
+ line-height: $ui-height;
14
+ height: auto;
15
+ min-height: $ui-height;
16
+ padding: 0 $ui-padding;
17
+ &:hover,
18
+ &:focus {
19
+ text-decoration: none;
20
+ }
21
+ }
22
+
23
+ .button-big {
24
+ line-height: $ui-height-big;
25
+ min-height: $ui-height-big;
26
+ padding: 0 1.5*$ui-padding;
27
+ }
28
+
29
+ .button-small {
30
+ line-height: $ui-height-small;
31
+ min-height: $ui-height-small;
32
+ }
33
+
@@ -0,0 +1,20 @@
1
+ // Colors
2
+
3
+ .white { color: #fff; }
4
+ .dark-gray { color: $dark-gray; }
5
+ .mid-gray { color: $mid-gray; }
6
+ .light-gray { color: $light-gray; }
7
+ .blue { color: $blue; }
8
+ .green { color: $green; }
9
+ .yellow { color: $yellow; }
10
+ .red { color: $red; }
11
+
12
+ .bg-white { background-color: #fff; }
13
+ .bg-dark-gray { background-color: $dark-gray; }
14
+ .bg-mid-gray { background-color: $mid-gray; }
15
+ .bg-light-gray { background-color: $light-gray; }
16
+ .bg-blue { background-color: $blue; }
17
+ .bg-green { background-color: $green; }
18
+ .bg-yellow { background-color: $yellow; }
19
+ .bg-red { background-color: $red; }
20
+
@@ -0,0 +1,37 @@
1
+ // Form Themes
2
+
3
+ // See _forms.scss for structural styles
4
+
5
+ .form-light {
6
+ .input,
7
+ .textarea,
8
+ .select {
9
+ background-color: white;
10
+ transition: box-shadow .2s ease;
11
+ border-color: $border-color;
12
+ border-radius: $border-radius;
13
+ &:focus {
14
+ outline: none;
15
+ border-color: $blue;
16
+ box-shadow: 0 0 .125rem rgba($blue,.5);
17
+ }
18
+ }
19
+ .radio input,
20
+ .checkbox input {
21
+ transition: box-shadow .2s ease;
22
+ &:focus {
23
+ outline: none;
24
+ box-shadow: 0 0 0 2px #fff, 0 0 1px 4px rgba($blue, .5);
25
+ }
26
+ }
27
+ .radio input {
28
+ border-radius: 50%;
29
+ }
30
+ .fieldset {
31
+ border-width: 1px;
32
+ border-style: solid;
33
+ border-color: $border-color;
34
+ border-radius: $border-radius;
35
+ }
36
+ }
37
+
@@ -0,0 +1,68 @@
1
+ // Forms
2
+
3
+ .form {
4
+ font-size: 1rem;
5
+ .field,
6
+ .input,
7
+ .select {
8
+ -moz-box-sizing: border-box;
9
+ box-sizing: border-box;
10
+ max-width: 100%;
11
+ height: $ui-height;
12
+ line-height: $ui-height - $ui-padding;
13
+ }
14
+ .input,
15
+ .select {
16
+ border-style: solid;
17
+ border-width: 1px;
18
+ }
19
+ .select {
20
+ margin-right: 0;
21
+ margin-left: 0;
22
+ &[multiple] {
23
+ height: auto;
24
+ }
25
+ }
26
+ .input {
27
+ padding: .5*$ui-padding $ui-padding;
28
+ -webkit-appearance: none;
29
+ appearance: none;
30
+ }
31
+ .textarea {
32
+ -moz-box-sizing: border-box;
33
+ box-sizing: border-box;
34
+ padding: $ui-padding;
35
+ line-height: 1.5;
36
+ }
37
+ .field-big,
38
+ .input-big {
39
+ height: $ui-height-big;
40
+ }
41
+ .field-small,
42
+ .input-small {
43
+ height: $ui-height-small;
44
+ line-height: $ui-height-small - $ui-padding;
45
+ }
46
+ }
47
+
48
+ .form-stacked {
49
+ .label,
50
+ .input,
51
+ .select,
52
+ .checkbox,
53
+ .radio,
54
+ .fieldset,
55
+ .field {
56
+ display: block;
57
+ width: 100%;
58
+ }
59
+ .input,
60
+ .select,
61
+ .radio,
62
+ .checkbox,
63
+ .fieldset,
64
+ .field {
65
+ margin-bottom: 1rem;
66
+ }
67
+ }
68
+
@@ -0,0 +1,56 @@
1
+ // Grid
2
+
3
+ .container {
4
+ max-width: $grid-max-width;
5
+ margin-right: auto;
6
+ margin-left: auto;
7
+ }
8
+
9
+ .row {
10
+ overflow: hidden;
11
+ margin-right: -$grid-gutter/2;
12
+ margin-left: -$grid-gutter/2;
13
+ }
14
+
15
+ .col,
16
+ .col-right,
17
+ .col-center,
18
+ .mobile-col,
19
+ .col-px {
20
+ box-sizing: border-box;
21
+ padding-right: $grid-gutter/2;
22
+ padding-left: $grid-gutter/2;
23
+ }
24
+
25
+ // Mobile grid
26
+ .mobile-col { float: left; }
27
+ @for $i from 1 through 11 {
28
+ .mobile-col-#{$i} { width: percentage($i/12); }
29
+ }
30
+
31
+ // Desktop grid
32
+ @media screen and (min-width: $breakpoint-desktop) {
33
+ .col { float: left; }
34
+ .col-right { float: right; }
35
+ .col-center { margin-right: auto; margin-left: auto; }
36
+ @for $i from 1 through 11 {
37
+ .col-#{$i} { width: percentage($i/12); }
38
+ .col-offset-#{$i} { margin-left: percentage($i/12); }
39
+ }
40
+ .container-col-10 {
41
+ max-width: (10/12 * ($grid-max-width + $grid-gutter)) - $grid-gutter;
42
+ margin-right: auto;
43
+ margin-left: auto;
44
+ }
45
+ .container-col-8 {
46
+ max-width: (8/12 * ($grid-max-width + $grid-gutter)) - $grid-gutter;
47
+ margin-right: auto;
48
+ margin-left: auto;
49
+ }
50
+ .container-col-6 {
51
+ max-width: (6/12 * ($grid-max-width + $grid-gutter)) - $grid-gutter;
52
+ margin-right: auto;
53
+ margin-left: auto;
54
+ }
55
+ }
56
+
@@ -0,0 +1,16 @@
1
+ // Lists
2
+
3
+ // Simple unbulleted list
4
+ .list-reset {
5
+ list-style: none;
6
+ padding-left: 0;
7
+ }
8
+
9
+ // Inline list
10
+ .list-inline {
11
+ li {
12
+ display: inline;
13
+ white-space: nowrap;
14
+ }
15
+ }
16
+
@@ -0,0 +1,34 @@
1
+ // Margins
2
+
3
+ .m0 { margin: 0; }
4
+ .mb0 { margin-bottom: 0; }
5
+
6
+ .m1 { margin: .5*$space; }
7
+ .mt1 { margin-top: .5*$space; }
8
+ .mr1 { margin-right: .5*$space; }
9
+ .mb1 { margin-bottom: .5*$space; }
10
+ .ml1 { margin-left: .5*$space; }
11
+
12
+ .m2 { margin: $space; }
13
+ .mt2 { margin-top: $space; }
14
+ .mr2 { margin-right: $space; }
15
+ .mb2 { margin-bottom: $space; }
16
+ .ml2 { margin-left: $space; }
17
+
18
+ .m3 { margin: 2*$space; }
19
+ .mt3 { margin-top: 2*$space; }
20
+ .mr3 { margin-right: 2*$space; }
21
+ .mb3 { margin-bottom: 2*$space; }
22
+ .ml3 { margin-left: 2*$space; }
23
+
24
+ .m4 { margin: 4*$space; }
25
+ .mt4 { margin-top: 4*$space; }
26
+ .mr4 { margin-right: 4*$space; }
27
+ .mb4 { margin-bottom: 4*$space; }
28
+ .ml4 { margin-left: 4*$space; }
29
+
30
+
31
+ // Wrapper for horizontally centering elements with a set width
32
+ .wrap { margin-right: auto; margin-left: auto; }
33
+
34
+
@@ -0,0 +1,130 @@
1
+ // Nav Themes
2
+
3
+ // See _nav.scss for structural styles
4
+
5
+ // Undo default link styles
6
+ .nav a {
7
+ &:hover,
8
+ &:focus {
9
+ text-decoration: none;
10
+ }
11
+ }
12
+
13
+ .nav-dark {
14
+ & > a {
15
+ color: white;
16
+ &:hover,
17
+ &:focus {
18
+ color: white;
19
+ background-color: $darken-2;
20
+ }
21
+ }
22
+ .active {
23
+ background-color: $darken-3;
24
+ }
25
+ }
26
+
27
+ .nav-light {
28
+ & > a {
29
+ color: $dark-gray;
30
+ &:hover,
31
+ &:focus {
32
+ color: $dark-gray;
33
+ background-color: $darken-1;
34
+ }
35
+ }
36
+ .active {
37
+ background-color: $darken-2;
38
+ }
39
+ }
40
+
41
+ // Bordered treatment - For vertical layouts only
42
+ .nav-borders {
43
+ border-style: solid;
44
+ border-width: 1px;
45
+ border-color: $border-color;
46
+ & > a {
47
+ border-top-style: solid;
48
+ border-top-width: 1px;
49
+ border-top-color: $border-color;
50
+ &:first-child {
51
+ border-top: 0;
52
+ }
53
+ }
54
+ .active {
55
+ color: $dark-gray;
56
+ }
57
+ }
58
+
59
+ // Pills
60
+ .nav-pills {
61
+ & > a {
62
+ border-radius: $border-radius;
63
+ &:hover,
64
+ &:focus {
65
+ background-color: rgba($blue,.125);
66
+ }
67
+ }
68
+ .active {
69
+ color: white;
70
+ background-color: $blue;
71
+ &:hover,
72
+ &:focus {
73
+ background-color: darken($blue,10%);
74
+ }
75
+ }
76
+ }
77
+
78
+ // Segmented control styles - For horizontal layouts only
79
+ .nav-segments {
80
+ box-shadow: inset 0 0 0 1px $blue;
81
+ border-radius: $border-radius;
82
+ & > a {
83
+ border-right: 1px solid $blue;
84
+ border-bottom: 1px solid $blue;
85
+ &:hover,
86
+ &:focus {
87
+ background-color: rgba($blue,.125);
88
+ }
89
+ &:first-child {
90
+ border-radius: $border-radius 0 0 $border-radius;
91
+ }
92
+ &:last-child {
93
+ border-right: 0;
94
+ border-radius: 0 $border-radius $border-radius 0;
95
+ }
96
+ }
97
+ .active {
98
+ color: white;
99
+ background-color: $blue;
100
+ &:hover,
101
+ &:focus {
102
+ background-color: darken($blue,10%);
103
+ }
104
+ }
105
+ .disabled {
106
+ color: rgba($dark-gray,.5);
107
+ &:hover,
108
+ &:focus {
109
+ color: rgba($dark-gray,.5);
110
+ background-color: transparent;
111
+ }
112
+ }
113
+ }
114
+
115
+ // Tabs - For horizontal layout only
116
+ .nav-tabs {
117
+ & > a {
118
+ border-radius: $border-radius $border-radius 0 0;
119
+ border-bottom: 1px solid $border-color;
120
+ &:hover {
121
+ background-color: $darken-1;
122
+ }
123
+ }
124
+ .active {
125
+ background-color: white;
126
+ border: 1px solid $border-color;
127
+ border-bottom-color: transparent;
128
+ }
129
+ }
130
+
@@ -0,0 +1,59 @@
1
+ // Nav Component
2
+
3
+ // Sets line height, display block, padding, and white-space nowrap
4
+ .nav {
5
+ line-height: $ui-height;
6
+ & > a,
7
+ .nav-item {
8
+ display: block;
9
+ line-height: inherit;
10
+ white-space: nowrap;
11
+ }
12
+ & > a {
13
+ padding-right: $ui-padding;
14
+ padding-left: $ui-padding;
15
+ }
16
+ }
17
+
18
+ // Sets display table at all sizes
19
+ .mobile-nav-table {
20
+ display: table;
21
+ & > a,
22
+ .nav-item {
23
+ display: table-cell;
24
+ vertical-align: middle;
25
+ }
26
+ }
27
+
28
+ // Sets display table above breakpoint
29
+ @media (min-width: $breakpoint-mobile) {
30
+ .nav-table {
31
+ display: table;
32
+ & > a,
33
+ .nav-item {
34
+ display: table-cell;
35
+ vertical-align: middle;
36
+ }
37
+ }
38
+ }
39
+
40
+ // Extension to set all nav-table items equal width
41
+ // Use with .full-width to span the full width of container
42
+ .nav-table-fixed { table-layout: fixed; }
43
+
44
+ // Extension to add padding to .nav-item
45
+ .nav-item-px {
46
+ padding-right: $ui-padding;
47
+ padding-left: $ui-padding;
48
+ }
49
+
50
+ // Height extensions
51
+ .nav-big { line-height: $ui-height-big; }
52
+ .nav-small { line-height: $ui-height-small; }
53
+
54
+ // Extension to align with surrounding content
55
+ .nav-flush {
56
+ margin-right: -$ui-padding;
57
+ margin-left: -$ui-padding;
58
+ }
59
+
@@ -0,0 +1,18 @@
1
+ // Padding
2
+
3
+ .p1 { padding: .5*$space; }
4
+ .px1 { padding-right: .5*$space; padding-left: .5*$space; }
5
+ .py1 { padding-top: .5*$space; padding-bottom: .5*$space; }
6
+
7
+ .p2 { padding: $space; }
8
+ .px2 { padding-right: $space; padding-left: $space; }
9
+ .py2 { padding-top: $space; padding-bottom: $space; }
10
+
11
+ .p3 { padding: 2*$space; }
12
+ .px3 { padding-right: 2*$space; padding-left: 2*$space; }
13
+ .py3 { padding-top: 2*$space; padding-bottom: 2*$space; }
14
+
15
+ .p4 { padding: 4*$space; }
16
+ .px4 { padding-right: 4*$space; padding-left: 4*$space; }
17
+ .py4 { padding-top: 4*$space; padding-bottom: 4*$space; }
18
+
@@ -0,0 +1,22 @@
1
+ // Positioning Utilities
2
+
3
+ .relative { position: relative; }
4
+ .absolute { position: absolute; }
5
+ .fixed { position: fixed; }
6
+
7
+ .top-0 { top: 0; }
8
+ .right-0 { right: 0; }
9
+ .bottom-0 { bottom: 0; }
10
+ .left-0 { left: 0; }
11
+
12
+ .z1 { z-index: 1; }
13
+ .z2 { z-index: 2; }
14
+ .z3 { z-index: 3; }
15
+ .z4 { z-index: 4; }
16
+
17
+ .absolute-center {
18
+ top: 0; right: 0; bottom: 0; left: 0;
19
+ margin: auto;
20
+ display: table;
21
+ }
22
+
@@ -0,0 +1,10 @@
1
+ // Reset
2
+
3
+ body, button, input, select, textarea, pre { margin: 0; }
4
+ h1, h2, h3, h4, h5, h6, p, dl, ol, ul {
5
+ margin-top: 0;
6
+ margin-bottom: 1rem;
7
+ }
8
+ button, input, select, textarea { font-family: inherit; font-size: 100%; }
9
+ article, aside, details, figcaption, figure, footer, header, main, nav, section, summary { display: block; }
10
+
@@ -0,0 +1,26 @@
1
+ // Table object
2
+
3
+ .mobile-table {
4
+ display: table;
5
+ width: 100%;
6
+ }
7
+ .mobile-table-cell {
8
+ display: table-cell;
9
+ vertical-align: middle;
10
+ }
11
+
12
+ @media (min-width: $breakpoint-desktop){
13
+ .table {
14
+ display: table;
15
+ width: 100%;
16
+ }
17
+ .table-cell {
18
+ display: table-cell;
19
+ vertical-align: middle;
20
+ }
21
+ }
22
+
23
+ .table-fixed {
24
+ table-layout: fixed;
25
+ }
26
+
@@ -0,0 +1,8 @@
1
+ // Table Themes
2
+
3
+ .table-light {
4
+ th, td {
5
+ border-bottom: 1px solid $border-color;
6
+ }
7
+ }
8
+
@@ -0,0 +1,23 @@
1
+ // Tables
2
+
3
+ .table-reset {
4
+ border-collapse: collapse;
5
+ border-spacing: 0;
6
+ max-width: 100%;
7
+ width: 100%;
8
+ th { text-align: left; }
9
+ th, td {
10
+ padding: $ui-padding;
11
+ line-height: inherit;
12
+ }
13
+ th { vertical-align: bottom; }
14
+ td { vertical-align: top; }
15
+ }
16
+
17
+ // Extension for smaller tables
18
+ .table-small {
19
+ th, td {
20
+ padding: .25*$ui-padding $ui-padding;
21
+ line-height: $ui-height-small;
22
+ }
23
+ }
@@ -0,0 +1,16 @@
1
+ // Base thematic styles
2
+
3
+ body {
4
+ color: $dark-gray;
5
+ background-color: #fff;
6
+ }
7
+
8
+ a {
9
+ color: $blue;
10
+ text-decoration: none;
11
+ &:hover {
12
+ color: darken($blue, 10%);
13
+ text-decoration: underline;
14
+ }
15
+ }
16
+
@@ -0,0 +1,43 @@
1
+ // Type
2
+
3
+ body {
4
+ font-family: $font-family;
5
+ line-height: $line-height;
6
+ font-weight: 400;
7
+ }
8
+
9
+ h1, h2, h3, h4, h5, h6 { line-height: $line-height-heading; }
10
+
11
+ // Base Type Scale
12
+ h1, .h1 { font-size: $h1; }
13
+ h2, .h2 { font-size: $h2; }
14
+ h3, .h3 { font-size: $h3; }
15
+ h4, .h4,
16
+ p, dl, ol, ul { font-size: $h4; }
17
+ h5, .h5 { font-size: $h5; }
18
+ h6, .h6, small { font-size: $h6; }
19
+
20
+ // Responsive Type Scale
21
+ @if ($responsive-type) {
22
+ @media screen and (min-width: $breakpoint-desktop) {
23
+ .h1 { font-size: $desktop-h1; }
24
+ .h2 { font-size: $desktop-h2; }
25
+ .h3 { font-size: $desktop-h3; }
26
+ .h4 { font-size: $desktop-h4; }
27
+ .h5 { font-size: $desktop-h5; }
28
+ .h6 { font-size: $desktop-h6; }
29
+ }
30
+ }
31
+
32
+ // Utilities
33
+ .bold { font-weight: bold; }
34
+ .regular { font-weight: normal; }
35
+ .italic { font-style: italic; }
36
+ .caps { text-transform: uppercase; letter-spacing: .2em; }
37
+
38
+ // Alignment
39
+ .left-align { text-align: left; }
40
+ .center { text-align: center; }
41
+ .right-align { text-align: right; }
42
+ .justified { text-align: justify; }
43
+
@@ -0,0 +1,30 @@
1
+ // Layout Utilities
2
+
3
+ .inline { display: inline; }
4
+ .block { display: block; }
5
+ .inline-block { display: inline-block; }
6
+
7
+ .oh { overflow: hidden; }
8
+ .left { float: left; }
9
+ .right { float: right; }
10
+
11
+ .clearfix {
12
+ &:before, &:after { content: " "; display: table; }
13
+ &:after { clear: both; }
14
+ }
15
+
16
+ .fit { max-width: 100%; }
17
+
18
+ .full-width { width: 100%; }
19
+ .half-width { width: 50%; }
20
+
21
+ // Responsive states
22
+ .mobile-show { display: none !important; }
23
+ @media screen and (max-width: 48em) {
24
+ .mobile-show,
25
+ .mobile-block { display: block !important; }
26
+ .mobile-block { width: 100%; }
27
+ .mobile-hide { display: none !important; }
28
+ .mobile-center { text-align: center; }
29
+ }
30
+
@@ -0,0 +1,62 @@
1
+ // Variables
2
+
3
+ // Default whitespace unit
4
+ $space: 1rem !default;
5
+
6
+ // Typography
7
+ $font-family: 'Helvetica Neue', Helvetica, sans-serif !default;
8
+ $line-height: 1.5 !default;
9
+ $line-height-heading: 1.25 !default;
10
+
11
+ // Type Scale
12
+ $h1: 2rem !default;
13
+ $h2: 1.5rem !default;
14
+ $h3: 1.25rem !default;
15
+ $h4: 1rem !default;
16
+ $h5: .75rem !default;
17
+ $h6: .75rem !default;
18
+
19
+ // Responsive type scale
20
+ $responsive-type: true !default;
21
+ $desktop-h1: 4rem !default;
22
+ $desktop-h2: 2rem !default;
23
+ $desktop-h3: 1.5rem !default;
24
+ $desktop-h4: 1.125rem !default;
25
+ $desktop-h5: .875rem !default;
26
+ $desktop-h6: .875rem !default;
27
+
28
+ // Breakpoints
29
+ $breakpoint-mobile: 32em !default;
30
+ $breakpoint-desktop: 48em !default;
31
+
32
+ // Heights for buttons, forms, nav, etc.
33
+ $ui-height: 2.25rem !default;
34
+ $ui-height-small: 1.75rem !default;
35
+ $ui-height-big: 3rem !default;
36
+
37
+ $ui-padding: .75*$space !default;
38
+
39
+ // Grid
40
+ $grid-max-width: 75rem !default;
41
+ $grid-gutter: 2 * $space !default;
42
+
43
+ // Theme
44
+ $blue: #0096cc !default;
45
+ $light-gray: #eee !default;
46
+ $mid-gray: #777 !default;
47
+ $dark-gray: #333 !default;
48
+
49
+ $red: #f96010 !default;
50
+ $green: #11e966 !default;
51
+ $yellow: #ffdc00 !default;
52
+
53
+ // Alpha blacks for UI elements
54
+ $darken-1: rgba(#000,.125) !default;
55
+ $darken-2: rgba(#000,.25) !default;
56
+ $darken-3: rgba(#000,.375) !default;
57
+
58
+ // Borders
59
+ $border-color: #ccc !default;
60
+ $border-width: 1px !default;
61
+ $border-radius: .25rem !default;
62
+
@@ -0,0 +1,19 @@
1
+ /*
2
+
3
+ BASSCSS Lite
4
+
5
+ Next-level CSS toolkit - http://basscss.com
6
+
7
+ Made with love by Jxnblk - ©2014 Brent Jackson
8
+ MIT License http://opensource.org/licenses/MIT
9
+
10
+ */
11
+
12
+
13
+ @import "variables";
14
+ @import "reset";
15
+ @import "type";
16
+ @import "margins";
17
+ @import "padding";
18
+ @import "utilities";
19
+
@@ -0,0 +1,43 @@
1
+ /*
2
+
3
+ BASSCSS
4
+
5
+ Next-level CSS toolkit - http://basscss.com
6
+
7
+ Made with love by Jxnblk - ©2014 Brent Jackson
8
+ MIT License http://opensource.org/licenses/MIT
9
+
10
+ */
11
+
12
+
13
+ @import "variables";
14
+
15
+ @import "reset";
16
+
17
+ @import "type";
18
+ @import "margins";
19
+ @import "padding";
20
+ @import "utilities";
21
+ @import "forms";
22
+ @import "lists";
23
+ @import "positions";
24
+ @import "tables";
25
+
26
+ // Components
27
+ @import "buttons";
28
+ @import "grid";
29
+ @import "table-object";
30
+ @import "navs";
31
+
32
+
33
+ // Thematic styles
34
+ @import "theme";
35
+ @import "colors";
36
+ @import "borders";
37
+
38
+ @import "form-themes";
39
+ @import "table-themes";
40
+
41
+ @import "button-themes";
42
+ @import "nav-themes";
43
+
@@ -0,0 +1,23 @@
1
+ # coding: utf-8
2
+ lib = File.expand_path('../lib', __FILE__)
3
+ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
4
+ require 'basscss/rails/version'
5
+
6
+ Gem::Specification.new do |spec|
7
+ spec.name = "basscss-rails"
8
+ spec.version = Basscss::Rails::VERSION
9
+ spec.authors = ["John Otander"]
10
+ spec.email = ["johnotander@gmail.com"]
11
+ spec.summary = %q{Include BASSCSS in your Rails apps.}
12
+ spec.description = %q{Include BASSCSS, a simple, responsive CSS toolkit based on OOCSS principles in your Rails apps.}
13
+ spec.homepage = "https://github.com/johnotander/basscss-rails"
14
+ spec.license = "MIT"
15
+
16
+ spec.files = `git ls-files -z`.split("\x0")
17
+ spec.executables = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
18
+ spec.test_files = spec.files.grep(%r{^(test|spec|features)/})
19
+ spec.require_paths = ["lib"]
20
+
21
+ spec.add_development_dependency "bundler", "~> 1.6"
22
+ spec.add_development_dependency "rake"
23
+ end
@@ -0,0 +1,7 @@
1
+ require "basscss/rails/version"
2
+ require "basscss/rails/engine"
3
+
4
+ module Basscss
5
+ module Rails
6
+ end
7
+ end
@@ -0,0 +1,8 @@
1
+ module Basscss
2
+ module Rails
3
+ if defined?(::Rails::Engine)
4
+ class Engine < ::Rails::Engine
5
+ end
6
+ end
7
+ end
8
+ end
@@ -0,0 +1,5 @@
1
+ module Basscss
2
+ module Rails
3
+ VERSION = "0.0.1"
4
+ end
5
+ end
metadata ADDED
@@ -0,0 +1,105 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: basscss-rails
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.0.1
5
+ platform: ruby
6
+ authors:
7
+ - John Otander
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2014-08-23 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: bundler
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - "~>"
18
+ - !ruby/object:Gem::Version
19
+ version: '1.6'
20
+ type: :development
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - "~>"
25
+ - !ruby/object:Gem::Version
26
+ version: '1.6'
27
+ - !ruby/object:Gem::Dependency
28
+ name: rake
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - ">="
32
+ - !ruby/object:Gem::Version
33
+ version: '0'
34
+ type: :development
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - ">="
39
+ - !ruby/object:Gem::Version
40
+ version: '0'
41
+ description: Include BASSCSS, a simple, responsive CSS toolkit based on OOCSS principles
42
+ in your Rails apps.
43
+ email:
44
+ - johnotander@gmail.com
45
+ executables: []
46
+ extensions: []
47
+ extra_rdoc_files: []
48
+ files:
49
+ - ".gitignore"
50
+ - Gemfile
51
+ - LICENSE.txt
52
+ - README.md
53
+ - Rakefile
54
+ - app/assets/stylesheets/basscss/_borders.scss
55
+ - app/assets/stylesheets/basscss/_button-themes.scss
56
+ - app/assets/stylesheets/basscss/_buttons.scss
57
+ - app/assets/stylesheets/basscss/_colors.scss
58
+ - app/assets/stylesheets/basscss/_form-themes.scss
59
+ - app/assets/stylesheets/basscss/_forms.scss
60
+ - app/assets/stylesheets/basscss/_grid.scss
61
+ - app/assets/stylesheets/basscss/_lists.scss
62
+ - app/assets/stylesheets/basscss/_margins.scss
63
+ - app/assets/stylesheets/basscss/_nav-themes.scss
64
+ - app/assets/stylesheets/basscss/_navs.scss
65
+ - app/assets/stylesheets/basscss/_padding.scss
66
+ - app/assets/stylesheets/basscss/_positions.scss
67
+ - app/assets/stylesheets/basscss/_reset.scss
68
+ - app/assets/stylesheets/basscss/_table-object.scss
69
+ - app/assets/stylesheets/basscss/_table-themes.scss
70
+ - app/assets/stylesheets/basscss/_tables.scss
71
+ - app/assets/stylesheets/basscss/_theme.scss
72
+ - app/assets/stylesheets/basscss/_type.scss
73
+ - app/assets/stylesheets/basscss/_utilities.scss
74
+ - app/assets/stylesheets/basscss/_variables.scss
75
+ - app/assets/stylesheets/basscss/basscss-lite.scss
76
+ - app/assets/stylesheets/basscss/basscss.scss
77
+ - basscss-rails.gemspec
78
+ - lib/basscss/rails.rb
79
+ - lib/basscss/rails/engine.rb
80
+ - lib/basscss/rails/version.rb
81
+ homepage: https://github.com/johnotander/basscss-rails
82
+ licenses:
83
+ - MIT
84
+ metadata: {}
85
+ post_install_message:
86
+ rdoc_options: []
87
+ require_paths:
88
+ - lib
89
+ required_ruby_version: !ruby/object:Gem::Requirement
90
+ requirements:
91
+ - - ">="
92
+ - !ruby/object:Gem::Version
93
+ version: '0'
94
+ required_rubygems_version: !ruby/object:Gem::Requirement
95
+ requirements:
96
+ - - ">="
97
+ - !ruby/object:Gem::Version
98
+ version: '0'
99
+ requirements: []
100
+ rubyforge_project:
101
+ rubygems_version: 2.2.2
102
+ signing_key:
103
+ specification_version: 4
104
+ summary: Include BASSCSS in your Rails apps.
105
+ test_files: []