sass-zero 0.0.7 → 0.0.8
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.
- checksums.yaml +4 -4
- data/README.md +48 -19
- data/lib/sass/zero/version.rb +1 -1
- data/vendor/assets/stylesheets/sass-zero/base/breadboard.scss +64 -23
- data/vendor/assets/stylesheets/sass-zero/variables/typography.scss +0 -1
- metadata +2 -3
- data/Gemfile.lock +0 -17
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b8631e5b390b1f408efb48fa52a82d827fac519de79196186657a7bb9cb78f89
|
4
|
+
data.tar.gz: c442aed4313df6a9c38eabcc09b91f58aba35b119a642ce8066afc1f2256299a
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: a01828471f62a35179356c6f34778b3da850743a398ed9690e618e59a1f6d2317d5af36a48ba674878d7607364a0a3536e687f987c49543dbf3ed48b114b93d1
|
7
|
+
data.tar.gz: e2a2f7f576a6dae2d3dbea1f048854c577716f0684960587188ec09ff2e2b47ed0b4cb099c984913e62978ceada3e7332cd3f8042dada9637fa4dc12d75ca2da
|
data/README.md
CHANGED
@@ -1,51 +1,80 @@
|
|
1
|
-
#
|
1
|
+
# SASS-ZERO
|
2
2
|
|
3
|
-
|
3
|
+
SASS-ZERO is a css framework that brings concepts from [tailwindcss](https://tailwindcss.com) and [milligram](https://milligram.io) but with ideas from [BEM](http://getbem.com/naming), [Refactoring UI](https://refactoringui.com/book) and [Shape UP](https://basecamp.com/shapeup).
|
4
4
|
|
5
|
-
|
5
|
+
### Tailwindcss
|
6
|
+
"Instead of hand-picking values from a limitless pool any time you need to make a decision, start with a smaller set of options." - [Refactoring UI](https://refactoringui.com/book).
|
6
7
|
|
7
|
-
|
8
|
+
SASS-ZERO use font, color, spacing, border and etc from [tailwindcss](https://tailwindcss.com) but instead the utility-first approach we use [sass variables](https://sass-lang.com/documentation/variables).
|
9
|
+
|
10
|
+
### Milligram
|
11
|
+
"Programmers don’t need a pixel-perfect design to start implementing. All they need are endpoints: input elements, buttons, places where stored data should appear. These affordances are the core of a user interface design." - [Shape UP](https://basecamp.com/shapeup/3.2-chapter-10#affordances-before-pixel-perfect-screens).
|
12
|
+
|
13
|
+
SASS-ZERO comes with a basic grayscale theme that help you to bring your ideas to life, questions about font, color, spacing and layout can be resolved after the raw affordances.
|
14
|
+
|
15
|
+
### BEM
|
16
|
+
I believe that html is code, therefore it should be named and scoped as well. Developers need to be good with naming things, css is another oportunity to practice.
|
17
|
+
|
18
|
+
### Refactoring UI
|
19
|
+
Developers should be able to produce your own design, [Refactoring UI](https://refactoringui.com/book) is the book for that.
|
8
20
|
|
9
|
-
|
21
|
+
### Shape UP
|
22
|
+
SASS-ZERO comes with a implict flow from Shape UP, Find Elemens -> Create Affordance -> Make it Beautiful.
|
10
23
|
|
11
|
-
|
24
|
+
### Breadboard Theme (Just HTML)
|
25
|
+

|
26
|
+
|
27
|
+
## Installation
|
28
|
+
|
29
|
+
Add this to your application's Gemfile:
|
12
30
|
|
13
31
|
```ruby
|
14
32
|
gem 'sass-zero'
|
15
33
|
gem 'autoprefixer-rails'
|
16
34
|
```
|
17
35
|
|
18
|
-
|
36
|
+
## Usage
|
37
|
+
|
38
|
+
Add this line to your application.css:
|
19
39
|
|
20
40
|
```css
|
21
41
|
*= require sass-zero/base
|
22
42
|
```
|
23
43
|
|
24
|
-
|
44
|
+
Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Variables](https://github.com/lazaronixon/sass-zero/blob/master/vendor/assets/stylesheets/sass-zero/variables.scss):
|
25
45
|
|
26
46
|
```scss
|
27
47
|
@import "sass-zero/variables";
|
28
48
|
@import "sass-zero/mixins";
|
49
|
+
|
50
|
+
// Block
|
51
|
+
.block { color: $red-300; }
|
52
|
+
|
53
|
+
// Element
|
54
|
+
.block__elem { color: $red-400; }
|
55
|
+
|
56
|
+
|
57
|
+
// Modifier
|
58
|
+
.block--mod .block__elem { color: $red-200; }
|
59
|
+
|
60
|
+
.block__elem--mod { color: $red-500; }
|
61
|
+
|
29
62
|
```
|
30
63
|
|
31
|
-
##
|
64
|
+
## References
|
32
65
|
|
33
|
-
|
66
|
+
[SASS](https://sass-lang.com)
|
34
67
|
|
35
|
-
|
68
|
+
[Tailwindcss](https://tailwindcss.com)
|
36
69
|
|
37
|
-
|
70
|
+
[Milligram](https://milligram.io)
|
38
71
|
|
39
|
-
|
72
|
+
[BEM](http://getbem.com/naming)
|
40
73
|
|
41
|
-
|
74
|
+
[Refactoring UI](https://refactoringui.com/book)
|
42
75
|
|
43
|
-
|
76
|
+
[Shape UP](https://basecamp.com/shapeup)
|
44
77
|
|
45
78
|
## License
|
46
79
|
|
47
80
|
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
48
|
-
|
49
|
-
## Code of Conduct
|
50
|
-
|
51
|
-
Everyone interacting in the Sass::Zero project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/[USERNAME]/sass-zero/blob/master/CODE_OF_CONDUCT.md).
|
data/lib/sass/zero/version.rb
CHANGED
@@ -7,6 +7,8 @@ $breadboard-300: $gray-300 !default;
|
|
7
7
|
$breadboard-700: $gray-700 !default;
|
8
8
|
$breadboard-900: $gray-900 !default;
|
9
9
|
|
10
|
+
$breadboard-svg-fill: "%23a0aec0" !default;
|
11
|
+
|
10
12
|
html {
|
11
13
|
background-color: $breadboard-bg;
|
12
14
|
color: $breadboard-700;
|
@@ -19,7 +21,8 @@ body {
|
|
19
21
|
}
|
20
22
|
|
21
23
|
blockquote {
|
22
|
-
border-
|
24
|
+
border-color: $breadboard-300;
|
25
|
+
border-left-width: $border-4;
|
23
26
|
padding: $size-3 $size-4;
|
24
27
|
|
25
28
|
*:last-child {
|
@@ -60,7 +63,8 @@ code {
|
|
60
63
|
|
61
64
|
pre {
|
62
65
|
background: $breadboard-200;
|
63
|
-
|
66
|
+
border-color: $breadboard-900;
|
67
|
+
border-left-width: $border-4;
|
64
68
|
overflow-y: hidden;
|
65
69
|
|
66
70
|
& > code {
|
@@ -72,7 +76,8 @@ pre {
|
|
72
76
|
}
|
73
77
|
|
74
78
|
hr {
|
75
|
-
border-
|
79
|
+
border-color: $breadboard-300;
|
80
|
+
border-top-width: $border;
|
76
81
|
margin: $size-4 $size-0;
|
77
82
|
}
|
78
83
|
|
@@ -93,40 +98,75 @@ input:not([type]),
|
|
93
98
|
textarea,
|
94
99
|
select {
|
95
100
|
appearance: none;
|
96
|
-
|
97
|
-
border: $border solid $breadboard-200;
|
101
|
+
border-color: $breadboard-300;
|
98
102
|
border-radius: $rounded;
|
103
|
+
border-width: $border;
|
99
104
|
display: block;
|
100
|
-
|
101
|
-
padding: $size-3 $size-4;
|
105
|
+
padding: $size-2 $size-3;
|
102
106
|
width: $size-full;
|
103
107
|
|
104
108
|
&:focus {
|
105
|
-
|
106
|
-
border-color: $breadboard-300;
|
107
|
-
outline: 0;
|
109
|
+
border-color: $breadboard-700;
|
108
110
|
}
|
109
111
|
}
|
110
112
|
|
111
|
-
select {
|
112
|
-
background:
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
min-height: $size-24;
|
113
|
+
select:not([multiple]) {
|
114
|
+
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{$breadboard-svg-fill}"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"/></svg>');
|
115
|
+
background-position: right $size-2 center;
|
116
|
+
background-repeat: no-repeat;
|
117
|
+
background-size: $size-6;
|
118
|
+
padding-right: $size-10;
|
118
119
|
}
|
119
120
|
|
120
121
|
label, legend {
|
121
122
|
display: block;
|
122
|
-
font-size: $text-xs;
|
123
|
-
font-weight: $font-bold;
|
124
|
-
letter-spacing: $tracking-wide;
|
125
123
|
margin-bottom: $size-1;
|
126
124
|
}
|
127
125
|
|
126
|
+
input[type='checkbox'],
|
127
|
+
input[type='radio'] {
|
128
|
+
appearance: none;
|
129
|
+
background-origin: border-box;
|
130
|
+
border-color: $breadboard-300;
|
131
|
+
border-width: $border;
|
132
|
+
color: $breadboard-900;
|
133
|
+
display: inline-block;
|
134
|
+
margin-bottom: -2.5px;
|
135
|
+
height: $size-4;
|
136
|
+
width: $size-4;
|
137
|
+
|
138
|
+
&:checked {
|
139
|
+
border-color: transparent;
|
140
|
+
background-color: currentColor;
|
141
|
+
background-position: center;
|
142
|
+
background-repeat: no-repeat;
|
143
|
+
}
|
144
|
+
}
|
145
|
+
|
146
|
+
input[type='checkbox'] {
|
147
|
+
border-radius: $rounded;
|
148
|
+
|
149
|
+
&:checked {
|
150
|
+
background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z"/></svg>');
|
151
|
+
}
|
152
|
+
}
|
153
|
+
|
154
|
+
input[type='radio'] {
|
155
|
+
border-radius: $rounded-full;
|
156
|
+
|
157
|
+
&:checked {
|
158
|
+
background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>');
|
159
|
+
}
|
160
|
+
}
|
161
|
+
|
162
|
+
.label-inline {
|
163
|
+
display: inline-block;
|
164
|
+
margin-left: $size-1;
|
165
|
+
}
|
166
|
+
|
128
167
|
a {
|
129
168
|
color: $breadboard-900;
|
169
|
+
cursor: pointer;
|
130
170
|
font-weight: $font-medium;
|
131
171
|
text-decoration: underline;
|
132
172
|
|
@@ -154,7 +194,7 @@ fieldset,
|
|
154
194
|
input,
|
155
195
|
select,
|
156
196
|
textarea {
|
157
|
-
margin-bottom: $size-
|
197
|
+
margin-bottom: $size-4;
|
158
198
|
}
|
159
199
|
|
160
200
|
blockquote,
|
@@ -166,7 +206,7 @@ p,
|
|
166
206
|
pre,
|
167
207
|
table,
|
168
208
|
ul {
|
169
|
-
margin-bottom: $size-
|
209
|
+
margin-bottom: $size-6;
|
170
210
|
}
|
171
211
|
|
172
212
|
table {
|
@@ -174,7 +214,8 @@ table {
|
|
174
214
|
}
|
175
215
|
|
176
216
|
td, th {
|
177
|
-
border-
|
217
|
+
border-color: $breadboard-300;
|
218
|
+
border-bottom-width: $border;
|
178
219
|
padding: $size-2 $size-4;
|
179
220
|
text-align: left;
|
180
221
|
}
|
@@ -3,7 +3,6 @@
|
|
3
3
|
// Variables for controlling the font family of an element.
|
4
4
|
// font-family: $font-sans;
|
5
5
|
// *******************************************************************
|
6
|
-
|
7
6
|
$font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
8
7
|
$font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
|
9
8
|
$font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: sass-zero
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.8
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Lázaro Nixon
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2020-02-
|
11
|
+
date: 2020-02-19 00:00:00.000000000 Z
|
12
12
|
dependencies: []
|
13
13
|
description: SASS-ZERO is a CSS framework that provides a basic grayscale theme to
|
14
14
|
create raw affordance and after that, you can make it beautiful with our constrained
|
@@ -21,7 +21,6 @@ extra_rdoc_files: []
|
|
21
21
|
files:
|
22
22
|
- ".gitignore"
|
23
23
|
- Gemfile
|
24
|
-
- Gemfile.lock
|
25
24
|
- README.md
|
26
25
|
- lib/sass/zero.rb
|
27
26
|
- lib/sass/zero/version.rb
|