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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: ccee9665f00b1ba28fbb1e6df9ceeea1fd2708f5df730e3800e359fa4cca4810
4
- data.tar.gz: 196433c044083bdc7f7c59ca29488912b40f193e422cc915c6cb8b0f94eff645
3
+ metadata.gz: b8631e5b390b1f408efb48fa52a82d827fac519de79196186657a7bb9cb78f89
4
+ data.tar.gz: c442aed4313df6a9c38eabcc09b91f58aba35b119a642ce8066afc1f2256299a
5
5
  SHA512:
6
- metadata.gz: e9ff04f0a4f10534e756c6901f3ba8cae1c7f207ee5d3987909594497957c4ab9775b194cbe3e91499dad42f00d630c78d611c838cb1a23c116d9b84e02f2f4d
7
- data.tar.gz: 800e4861177112cc2b8383c75239bdeb4f12cfcf74de11747804a71c2946efdb5682eeb2c20fd82efb7ef0b8bf56552ce674f5fe03ce0189bb894d84a8c3fe71
6
+ metadata.gz: a01828471f62a35179356c6f34778b3da850743a398ed9690e618e59a1f6d2317d5af36a48ba674878d7607364a0a3536e687f987c49543dbf3ed48b114b93d1
7
+ data.tar.gz: e2a2f7f576a6dae2d3dbea1f048854c577716f0684960587188ec09ff2e2b47ed0b4cb099c984913e62978ceada3e7332cd3f8042dada9637fa4dc12d75ca2da
data/README.md CHANGED
@@ -1,51 +1,80 @@
1
- # Sass::Zero
1
+ # SASS-ZERO
2
2
 
3
- Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/sass/zero`. To experiment with that code, run `bin/console` for an interactive prompt.
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
- TODO: Delete this and the text above, and describe your gem
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
- ## Installation
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
- Add this line to your application's Gemfile:
21
+ ### Shape UP
22
+ SASS-ZERO comes with a implict flow from Shape UP, Find Elemens -> Create Affordance -> Make it Beautiful.
10
23
 
11
- Gemfile
24
+ ### Breadboard Theme (Just HTML)
25
+ ![screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/Screenshot_2020-02-17+Routeend.png)
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
- application.css
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
- somefile.scss
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
- ## Usage
64
+ ## References
32
65
 
33
- TODO: Write usage instructions here
66
+ [SASS](https://sass-lang.com)
34
67
 
35
- ## Development
68
+ [Tailwindcss](https://tailwindcss.com)
36
69
 
37
- After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake test` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
70
+ [Milligram](https://milligram.io)
38
71
 
39
- To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
72
+ [BEM](http://getbem.com/naming)
40
73
 
41
- ## Contributing
74
+ [Refactoring UI](https://refactoringui.com/book)
42
75
 
43
- Bug reports and pull requests are welcome on GitHub at https://github.com/lazaronixon/sass-zero. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
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).
@@ -1,5 +1,5 @@
1
1
  module Sass
2
2
  module Zero
3
- VERSION = "0.0.7"
3
+ VERSION = "0.0.8"
4
4
  end
5
5
  end
@@ -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-left: $border-4 solid $breadboard-300;
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
- border-left: $border-4 solid $breadboard-900;
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-top: $border solid $breadboard-300;
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
- background-color: $breadboard-200;
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
- line-height: $leading-tight;
101
- padding: $size-3 $size-4;
105
+ padding: $size-2 $size-3;
102
106
  width: $size-full;
103
107
 
104
108
  &:focus {
105
- background-color: $breadboard-bg;
106
- border-color: $breadboard-300;
107
- outline: 0;
109
+ border-color: $breadboard-700;
108
110
  }
109
111
  }
110
112
 
111
- select {
112
- background: $breadboard-200 url('data:image/svg+xml;utf8,<svg width="16" height="16" style="fill: %23#{str-slice(ie-hex-str($breadboard-700), 4)};" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path></svg>') center right $size-2 no-repeat;
113
- padding-right: $size-8;
114
- }
115
-
116
- textarea {
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-3;
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-4;
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-bottom: $border solid $breadboard-300;
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.7
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-17 00:00:00.000000000 Z
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
@@ -1,17 +0,0 @@
1
- PATH
2
- remote: .
3
- specs:
4
- sass-zero (0.0.1)
5
-
6
- GEM
7
- remote: https://rubygems.org/
8
- specs:
9
-
10
- PLATFORMS
11
- ruby
12
-
13
- DEPENDENCIES
14
- sass-zero!
15
-
16
- BUNDLED WITH
17
- 1.17.3