staple 0.4.2 → 0.4.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +8 -7
- data/source/styles/colors/themes/default.theme +8 -0
- data/source/styles/colors/themes/flatland.theme +10 -2
- data/source/styles/colors/themes/peace.theme +8 -0
- data/source/styles/colors/themes/plastic.theme +8 -3
- data/source/styles/staple/buttons.scss +1 -0
- data/source/styles/staple/colors.scss +6 -1
- data/source/styles/staple/init/overrides.scss +19 -18
- data/source/styles/staple/typography.scss +4 -9
- data/source/styles/typography/droid-serif-import.scss +1 -0
- data/source/styles/typography/droid-serif.typeface +1 -0
- data/source/styles/typography/gloria-import.scss +1 -0
- data/source/styles/typography/gloria.typeface +1 -0
- data/source/styles/typography/inconsolata-import.scss +1 -0
- data/source/styles/typography/inconsolata.typeface +1 -0
- data/source/styles/typography/lato-import.scss +1 -0
- data/source/styles/typography/lato.typeface +1 -0
- data/source/styles/typography/open-sans-import.scss +1 -0
- data/source/styles/typography/open-sans.typeface +1 -0
- data/source/styles/typography/oswald-import.scss +1 -0
- data/source/styles/typography/oswald.typeface +1 -0
- data/source/styles/typography/oxygen-import.scss +1 -0
- data/source/styles/typography/oxygen.typeface +1 -0
- data/source/styles/typography/pacifico-import.scss +1 -0
- data/source/styles/typography/pacifico.typeface +1 -0
- data/source/styles/typography/roboto-import.scss +1 -1
- data/source/styles/typography/roboto-slab-import.scss +1 -0
- data/source/styles/typography/roboto-slab.typeface +1 -0
- data/source/styles/typography/roboto.typeface +1 -1
- data/source/styles/typography/themes/default.theme +3 -0
- data/source/styles/typography/themes/flatland.theme +3 -0
- data/source/styles/typography/themes/peace.theme +3 -0
- data/source/styles/typography/themes/plastic.theme +3 -5
- data/staple.gemspec +1 -1
- metadata +25 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1994fd847f97d5f64e5fb8f630d47272d634df18
|
|
4
|
+
data.tar.gz: b65b6d78219985e2156a2b574334bae0914f79f9
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: d12a8f806ed2af885a58c934214d62d5f2a7fe14a49c026a3239da50a6d327264edf35fc4dae871664ed1f56b5f544e0115bdd0b3251656b52fc8b77c336bf49
|
|
7
|
+
data.tar.gz: 1a5d41d32231d0ea221b2182b93eba07a3b940bb89a520e72bc561510dcb66abce08ce1a64cae3f5346f9a795892de947b3d4aa403d46bc3d220014ed8e20da9
|
data/README.md
CHANGED
|
@@ -3,13 +3,12 @@
|
|
|
3
3
|
a modular ui framework for rails built on top of foundation and sass.
|
|
4
4
|
|
|
5
5
|
##goals
|
|
6
|
-
|
|
7
6
|
* favor presets over explicit declaration
|
|
8
7
|
* convention over configuration
|
|
9
8
|
* keep it simple
|
|
10
9
|
|
|
11
10
|
##todo
|
|
12
|
-
*
|
|
11
|
+
* integrate images and navs, etc? (as elements?)
|
|
13
12
|
* import web components
|
|
14
13
|
|
|
15
14
|
##lower priority todo
|
|
@@ -32,6 +31,9 @@ a modular ui framework for rails built on top of foundation and sass.
|
|
|
32
31
|
* border-size
|
|
33
32
|
* change amount (color dif, hover dif)
|
|
34
33
|
* refactor generator code from low priority
|
|
34
|
+
* add are you sure? to staple:reset
|
|
35
|
+
* why does success (others too | nav button) button go darker?
|
|
36
|
+
* white/black swap shouldn't affect buttons
|
|
35
37
|
|
|
36
38
|
##Install
|
|
37
39
|
|
|
@@ -51,8 +53,7 @@ rails g staple:install
|
|
|
51
53
|
```
|
|
52
54
|
|
|
53
55
|
##intended use
|
|
54
|
-
|
|
55
|
-
* special cases - seperate generators?
|
|
56
|
+
* *special cases - seperate generators?
|
|
56
57
|
|
|
57
58
|
###themes
|
|
58
59
|
* rails g staple:theme buttons plastic
|
|
@@ -95,6 +96,6 @@ rails g staple:install
|
|
|
95
96
|
* rails g staple:sizes amputate xxl
|
|
96
97
|
|
|
97
98
|
#staple command - coming soon
|
|
98
|
-
staple {button-style|button-theme} {pattern} (append)
|
|
99
|
-
staple buttons round
|
|
100
|
-
staple buttons-theme plastic
|
|
99
|
+
* staple {button-style|button-theme} {pattern} (append)
|
|
100
|
+
* staple buttons round
|
|
101
|
+
* staple buttons-theme plastic
|
|
@@ -1,2 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
primary-color:#01B0F0
|
|
2
|
+
complement-color:#FF358B
|
|
3
|
+
secondary-color:#AEEE00
|
|
4
|
+
tertiary-color:#f39c12
|
|
5
|
+
white:#000
|
|
6
|
+
black:#FFF
|
|
7
|
+
topbar-bg-color:transparent
|
|
8
|
+
topbar-text-color:'rgba($white, $transparent-strong)'
|
|
9
|
+
body-bg:#333333
|
|
10
|
+
body-font-color:'rgba($black, $transparent-medium)'
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
primary-color:#105B63
|
|
2
|
+
complement-color:#FFD34E
|
|
3
|
+
secondary-color:#DB9E36
|
|
4
|
+
tertiary-color:#BD4932
|
|
5
|
+
topbar-bg-color:transparent
|
|
6
|
+
topbar-text-color:'rgba($black, $transparent-strong)'
|
|
7
|
+
body-bg:#FFFAD5
|
|
8
|
+
body-font-color:'rgba($black, $transparent-medium)'
|
|
@@ -29,4 +29,9 @@ $opacity-define:$transparent-light $transparent-weak $transparent-medium $tra
|
|
|
29
29
|
$primary-difference: 30;
|
|
30
30
|
$transition-brighten: 8%;
|
|
31
31
|
|
|
32
|
-
//
|
|
32
|
+
//TOPBAR COLORS
|
|
33
|
+
$topbar-bg-color: $primary-color;
|
|
34
|
+
$topbar-text-color: $white;
|
|
35
|
+
|
|
36
|
+
$body-bg: $white;
|
|
37
|
+
$body-font-color: rgba($black, $transparent-strong);
|
|
@@ -154,7 +154,7 @@ $shiny-edge-active-color: rgba($black, .2);
|
|
|
154
154
|
$header-font-family: $body-font-family;
|
|
155
155
|
// $header-font-weight: $font-weight-normal;
|
|
156
156
|
$header-font-style: normal;
|
|
157
|
-
$header-font-color:
|
|
157
|
+
$header-font-color: $body-font-color;
|
|
158
158
|
$header-line-height: 1.4;
|
|
159
159
|
$header-top-margin: .2rem;
|
|
160
160
|
$header-bottom-margin: .5rem;
|
|
@@ -1317,7 +1317,8 @@ $table-margin-bottom: rem-calc(20);
|
|
|
1317
1317
|
// $include-html-top-bar-classes: $include-html-classes;
|
|
1318
1318
|
|
|
1319
1319
|
// Background color for the top bar
|
|
1320
|
-
$topbar-bg-color:
|
|
1320
|
+
// $topbar-bg-color: $primary-color;
|
|
1321
|
+
// $topbar-text-color: rgba($white, $transparent-strong);
|
|
1321
1322
|
$topbar-bg: $topbar-bg-color;
|
|
1322
1323
|
|
|
1323
1324
|
// Height and margin
|
|
@@ -1329,27 +1330,27 @@ $topbar-title-weight: $font-weight-normal;
|
|
|
1329
1330
|
$topbar-title-font-size: rem-calc(17);
|
|
1330
1331
|
|
|
1331
1332
|
// Style the top bar dropdown elements
|
|
1332
|
-
$topbar-dropdown-bg:
|
|
1333
|
-
$topbar-dropdown-link-color: $
|
|
1333
|
+
$topbar-dropdown-bg: $topbar-bg-color;
|
|
1334
|
+
$topbar-dropdown-link-color: $topbar-text-color;
|
|
1334
1335
|
$topbar-dropdown-link-bg: rgba($black, $transparent-strong);
|
|
1335
1336
|
$topbar-dropdown-link-weight: $font-weight-normal;
|
|
1336
1337
|
$topbar-dropdown-toggle-size: 5px;
|
|
1337
|
-
$topbar-dropdown-toggle-color: $
|
|
1338
|
+
$topbar-dropdown-toggle-color: $topbar-text-color;
|
|
1338
1339
|
$topbar-dropdown-toggle-alpha: 0.4;
|
|
1339
1340
|
|
|
1340
1341
|
// Set the link colors and styles for top-level nav
|
|
1341
|
-
$topbar-link-color: $
|
|
1342
|
-
$topbar-link-color-hover: $
|
|
1343
|
-
$topbar-link-color-active: $
|
|
1344
|
-
$topbar-link-color-active-hover: $
|
|
1342
|
+
$topbar-link-color: $topbar-text-color;
|
|
1343
|
+
$topbar-link-color-hover: $topbar-text-color;
|
|
1344
|
+
$topbar-link-color-active: $topbar-text-color;
|
|
1345
|
+
$topbar-link-color-active-hover: $topbar-text-color;
|
|
1345
1346
|
$topbar-link-weight: $font-weight-normal;
|
|
1346
1347
|
$topbar-link-font-size: rem-calc(13);
|
|
1347
1348
|
$topbar-link-hover-lightness: -10%; // Darken by 10%
|
|
1348
|
-
$topbar-link-bg:
|
|
1349
|
+
$topbar-link-bg: transparent;
|
|
1349
1350
|
$topbar-link-bg-color-hover: rgba($black, $transparent-strong);
|
|
1350
|
-
$topbar-link-bg-hover:
|
|
1351
|
-
$topbar-link-bg-active: $
|
|
1352
|
-
$topbar-link-bg-active-hover:
|
|
1351
|
+
$topbar-link-bg-hover: rgba($black, $transparent-light);
|
|
1352
|
+
$topbar-link-bg-active: rgba($black, $transparent-weak);
|
|
1353
|
+
$topbar-link-bg-active-hover: rgba($black, $transparent-weak);
|
|
1353
1354
|
$topbar-link-font-family: $body-font-family;
|
|
1354
1355
|
$topbar-link-text-transform: none;
|
|
1355
1356
|
$topbar-link-padding: $topbar-height / 3;
|
|
@@ -1369,20 +1370,20 @@ $topbar-dropdown-label-bg: rgba($black, $transparent-strong);
|
|
|
1369
1370
|
$topbar-menu-link-transform: uppercase;
|
|
1370
1371
|
$topbar-menu-link-font-size: rem-calc(13);
|
|
1371
1372
|
$topbar-menu-link-weight: $font-weight-bold;
|
|
1372
|
-
$topbar-menu-link-color: $
|
|
1373
|
-
$topbar-menu-icon-color: $
|
|
1373
|
+
$topbar-menu-link-color: $topbar-text-color;
|
|
1374
|
+
$topbar-menu-icon-color: $topbar-text-color;
|
|
1374
1375
|
$topbar-menu-link-color-toggled: rgba($black, $transparent-medium);
|
|
1375
1376
|
$topbar-menu-icon-color-toggled: rgba($black, $transparent-medium);
|
|
1376
1377
|
|
|
1377
1378
|
// Transitions and breakpoint styles
|
|
1378
|
-
$topbar-transition-speed:
|
|
1379
|
+
$topbar-transition-speed: 150ms;
|
|
1379
1380
|
// Using rem-calc for the below breakpoint causes issues with top bar
|
|
1380
1381
|
$topbar-breakpoint: #{lower-bound($medium-range)}; // Change to 9999px for always mobile layout
|
|
1381
1382
|
// $topbar-media-query: $medium-up;
|
|
1382
1383
|
|
|
1383
1384
|
// Divider Styles
|
|
1384
|
-
$topbar-divider-border-bottom: solid $default-border-size
|
|
1385
|
-
$topbar-divider-border-top: solid $default-border-size
|
|
1385
|
+
$topbar-divider-border-bottom: solid $default-border-size rgba($black, $transparent-light);
|
|
1386
|
+
$topbar-divider-border-top: solid $default-border-size rgba($black, $transparent-light);
|
|
1386
1387
|
|
|
1387
1388
|
// Sticky Class
|
|
1388
1389
|
$topbar-sticky-class: ".sticky";
|
|
@@ -1,12 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
|
|
3
|
-
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700);
|
|
4
|
-
@import url(http://fonts.googleapis.com/css?family=Inconsolata);//&*import
|
|
1
|
+
//&*import
|
|
5
2
|
|
|
6
3
|
//DEFAULTS
|
|
7
|
-
$typeface-primary: "
|
|
8
|
-
$typeface-secondary:
|
|
9
|
-
$typeface-tertiary:
|
|
4
|
+
$typeface-primary: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
5
|
+
$typeface-secondary: serif;
|
|
6
|
+
$typeface-tertiary: monospace;
|
|
10
7
|
$normal-font-weight: 400;
|
|
11
8
|
$header-font-weight: 300;
|
|
12
9
|
$subheader-font-weight: 400;
|
|
@@ -16,8 +13,6 @@ $subheader-font-weight: 400;
|
|
|
16
13
|
$font-family-sans-serif: $typeface-primary;
|
|
17
14
|
$font-family-serif: $typeface-secondary;
|
|
18
15
|
$font-family-monospace: $typeface-tertiary;
|
|
19
|
-
$body-bg: $white;//can use any from colors
|
|
20
|
-
$body-font-color: rgba($black, $transparent-strong);
|
|
21
16
|
$body-font-family: $font-family-sans-serif;
|
|
22
17
|
$body-font-weight: $normal-font-weight;
|
|
23
18
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"Droid Serif", serif
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"Gloria Hallelujah", serif
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"Inconsolata", monospace
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"Lato", sans-serif
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"Oswald", sans-serif
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import url(http://fonts.googleapis.com/css?family=Oxygen:400,300,700);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"Oxygen", sans-serif
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import url(http://fonts.googleapis.com/css?family=Pacifico);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"Pacifico", serif
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import url(http://fonts.googleapis.com/css?family=Roboto
|
|
1
|
+
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,700,900);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"Roboto Slab", serif
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"Roboto
|
|
1
|
+
"Roboto", sans-serif
|
data/staple.gemspec
CHANGED
|
@@ -4,7 +4,7 @@ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
|
|
4
4
|
|
|
5
5
|
Gem::Specification.new do |spec|
|
|
6
6
|
spec.name = "staple"
|
|
7
|
-
spec.version = "0.4.
|
|
7
|
+
spec.version = "0.4.3"
|
|
8
8
|
spec.summary = "Modular UI framework for rails built on top of foundation and sass"
|
|
9
9
|
spec.description = "a modular ui framework for rails built on top of foundation and sass."
|
|
10
10
|
spec.authors = ["Ryan Helsing"]
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: staple
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.4.
|
|
4
|
+
version: 0.4.3
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Ryan Helsing
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2014-11-
|
|
11
|
+
date: 2014-11-21 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: foundation-rails
|
|
@@ -103,7 +103,9 @@ files:
|
|
|
103
103
|
- source/styles/buttons/themes/plastic.theme
|
|
104
104
|
- source/styles/buttons/transparent.scss
|
|
105
105
|
- source/styles/colors/blue.color
|
|
106
|
+
- source/styles/colors/themes/default.theme
|
|
106
107
|
- source/styles/colors/themes/flatland.theme
|
|
108
|
+
- source/styles/colors/themes/peace.theme
|
|
107
109
|
- source/styles/colors/themes/plastic.theme
|
|
108
110
|
- source/styles/forms/2px-border-focus.scss
|
|
109
111
|
- source/styles/forms/2px-border.scss
|
|
@@ -146,9 +148,30 @@ files:
|
|
|
146
148
|
- source/styles/tables/horizontal-lines.scss
|
|
147
149
|
- source/styles/tables/stripe.scss
|
|
148
150
|
- source/styles/tables/themes/plastic.theme
|
|
151
|
+
- source/styles/typography/droid-serif-import.scss
|
|
152
|
+
- source/styles/typography/droid-serif.typeface
|
|
153
|
+
- source/styles/typography/gloria-import.scss
|
|
154
|
+
- source/styles/typography/gloria.typeface
|
|
149
155
|
- source/styles/typography/helvetica-neue.typeface
|
|
156
|
+
- source/styles/typography/inconsolata-import.scss
|
|
157
|
+
- source/styles/typography/inconsolata.typeface
|
|
158
|
+
- source/styles/typography/lato-import.scss
|
|
159
|
+
- source/styles/typography/lato.typeface
|
|
160
|
+
- source/styles/typography/open-sans-import.scss
|
|
161
|
+
- source/styles/typography/open-sans.typeface
|
|
162
|
+
- source/styles/typography/oswald-import.scss
|
|
163
|
+
- source/styles/typography/oswald.typeface
|
|
164
|
+
- source/styles/typography/oxygen-import.scss
|
|
165
|
+
- source/styles/typography/oxygen.typeface
|
|
166
|
+
- source/styles/typography/pacifico-import.scss
|
|
167
|
+
- source/styles/typography/pacifico.typeface
|
|
150
168
|
- source/styles/typography/roboto-import.scss
|
|
169
|
+
- source/styles/typography/roboto-slab-import.scss
|
|
170
|
+
- source/styles/typography/roboto-slab.typeface
|
|
151
171
|
- source/styles/typography/roboto.typeface
|
|
172
|
+
- source/styles/typography/themes/default.theme
|
|
173
|
+
- source/styles/typography/themes/flatland.theme
|
|
174
|
+
- source/styles/typography/themes/peace.theme
|
|
152
175
|
- source/styles/typography/themes/plastic.theme
|
|
153
176
|
- staple.gemspec
|
|
154
177
|
homepage: https://github.com/rhelsing/staple
|