sass-zero 0.0.15 → 0.0.16

Sign up to get free protection for your applications and to get access to all the features.
Files changed (6) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +46 -37
  3. data/app/assets/stylesheets/sass-zero/base/breadboard.scss +11 -10
  4. data/lib/sass/zero/version.rb +1 -1
  5. data/package.json +1 -1
  6. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 47d35302ba2723cb777011a6bfa1c894bdafaf377a61c7e7d4af315a1f21a0f2
4
- data.tar.gz: d54d3f3eee2afb89cab063c746e895c9ba58bdf0398e48c161fc09fccb42a3ca
3
+ metadata.gz: 8c28fb1cfc92cea251c2e6c5ca5f45057744151bff8d0e20e9931d3ee7dd325d
4
+ data.tar.gz: b42892bb9448cf55e25e14eceefd5c6ccc629b15bdb91d06a075722e4a3df81e
5
5
  SHA512:
6
- metadata.gz: '09f602335ec3c316cc335888f6509a08bb252f859fbd23b2549d3ace7349a925e7a79f0760991e416da9f26fc483f0c27afb1402dd2b9251380ee2e9e5cf26f4'
7
- data.tar.gz: 30833cac34f6c06e55d00d00635f5a5d0740a41212e6613fcc85a63178327e8b305decc2fc7be1cf622a94cdd9c533743eb387ffcae261aadc8eea18123926ba
6
+ metadata.gz: 3db2f05373c83d233c362e399e717f089e7517ed2a8c1e6274a5606043865aa3039e071b795154d45619b737f5c950150de041fe9a27c615dd5ce644d92be5d2
7
+ data.tar.gz: b0d676cd0a8f8610ad4d47ffb4c4928a43aa296c422c3c68dd7a2bcb4333d0b325ee1664f59146ee465fcf5d91c97903b05cbfe12c8a89a3fde8d61b39f31b5d
data/README.md CHANGED
@@ -2,11 +2,7 @@
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
- ### Tailwindcss
6
-
7
- "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).
8
-
9
- 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).
5
+ ![screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/Screenshot_2020-02-26+Routeend.png)
10
6
 
11
7
  ### Milligram
12
8
 
@@ -14,32 +10,53 @@ SASS-ZERO use font, color, spacing, border and etc from [tailwindcss](https://ta
14
10
 
15
11
  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.
16
12
 
13
+ ### Tailwindcss
14
+
15
+ "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).
16
+
17
+ 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).
18
+
17
19
  ### BEM
18
20
 
19
21
  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.
20
22
 
23
+ ### Shape UP
24
+
25
+ SASS-ZERO comes with a implict flow from Shape UP, Find Elemens -> Create Affordance -> Make it Beautiful.
26
+
21
27
  ### Refactoring UI
22
28
 
23
29
  Developers should be able to produce your own design, [Refactoring UI](https://refactoringui.com/book) is the book for that.
24
30
 
25
- ### Shape UP
31
+ ### Breadboard Theme
32
+
33
+ - [Example](https://github.com/lazaronixon/sass-zero/blob/master/Example.html)
34
+ - [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/base/breadboard.scss)
35
+
36
+ ### Variables
37
+
38
+ - [Border](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/border.scss)
39
+ - [Breakpoint](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/breakpoints.scss)
40
+ - [Colors](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/colors.scss)
41
+ - [Effects](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/effects.scss)
42
+ - [Flex](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/flex.scss)
43
+ - [Spacing](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/spacing.scss)
44
+ - [Transform](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/transform.scss)
45
+ - [Transition](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/transition.scss)
46
+ - [Typography](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/typography.scss)
47
+ - [Width](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/width.scss)
48
+ - [Z-Index](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/zindex.scss)
26
49
 
27
- SASS-ZERO comes with a implict flow from Shape UP, Find Elemens -> Create Affordance -> Make it Beautiful.
28
50
 
29
51
  ### Utilities
30
52
 
31
- - [Margin Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/flush.scss)
32
53
  - [Margin Push](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/push.scss)
33
54
  - [Margin Pull](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/pull.scss)
55
+ - [Margin Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/flush.scss)
34
56
  - [Padding Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/unpad.scss)
35
57
  - [Text Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/text.scss)
36
58
  - [Layout Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/layout.scss)
37
59
 
38
-
39
- ### Breadboard Theme - [Just HTML](https://github.com/lazaronixon/sass-zero/blob/master/Example.html)
40
-
41
- ![screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/Screenshot_2020-02-18+Routeend.png)
42
-
43
60
  ## Installation
44
61
 
45
62
  Add this to your application's Gemfile:
@@ -64,36 +81,28 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
64
81
  @import "sass-zero/variables";
65
82
  @import "sass-zero/mixins";
66
83
 
67
- // Block
68
- .block { color: $red-300; }
69
-
70
- // Element
71
- .block__elem { color: $red-400; }
84
+ .block {
85
+ color: $red-300;
72
86
 
73
- // Modifier
74
- .block--mod .block__elem { color: $red-200; }
75
-
76
- .block__elem--mod { color: $red-500; }
87
+ &__elem {
88
+ color: $red-400;
89
+ }
77
90
 
91
+ &--mod {
92
+ color: $red-500;
93
+ }
94
+ }
78
95
  ```
79
96
 
80
97
  ## References
81
98
 
82
- [SASS](https://sass-lang.com)
83
-
84
- [Tailwindcss](https://tailwindcss.com)
85
-
86
- [Milligram](https://milligram.io)
87
-
88
- [BEM](http://getbem.com/naming)
89
-
90
- [Refactoring UI](https://refactoringui.com/book)
91
-
92
- [Shape UP](https://basecamp.com/shapeup)
93
-
94
- [Zondicons](http://www.zondicons.com)
95
-
96
- [Inline SVG](https://github.com/jamesmartin/inline_svg)
99
+ - [SASS](https://sass-lang.com)
100
+ - [Tailwindcss](https://tailwindcss.com)
101
+ - [Milligram](https://milligram.io)
102
+ - [BEM](http://getbem.com/naming)
103
+ - [Refactoring UI](https://refactoringui.com/book)
104
+ - [Shape UP](https://basecamp.com/shapeup)
105
+ - [Hero Icons](https://github.com/refactoringui/heroicons)
97
106
 
98
107
  ## License
99
108
 
data/app/assets/stylesheets/sass-zero/base/breadboard.scss CHANGED
@@ -1,11 +1,11 @@
1
1
  @import "sass-zero/variables";
2
2
  @import "sass-zero/mixins";
3
3
 
4
- $breadboard-primary: $gray-900;
5
- $breadboard-color: $gray-700;
6
- $breadboard-border: $gray-400;
7
- $breadboard-border-control: $gray-300;
8
- $breadboard-background: $gray-200;
4
+ $breadboard-primary: $gray-900;
5
+ $breadboard-color: $gray-700;
6
+ $breadboard-border: $gray-400;
7
+ $breadboard-border-control: $gray-300;
8
+ $breadboard-background: $gray-200;
9
9
 
10
10
  html {
11
11
  background-color: $white;
@@ -50,30 +50,30 @@ input[type='submit'] {
50
50
  }
51
51
 
52
52
  .btn {
53
- &--primary {
53
+ &.btn--primary {
54
54
  background-color: $breadboard-primary;
55
55
  border-color: $breadboard-primary;
56
56
  color: $white;
57
57
  }
58
58
 
59
- &--secondary {
59
+ &.btn--secondary {
60
60
  background-color: $white;
61
61
  border-color: $breadboard-primary;
62
62
  }
63
63
 
64
- &--tertiary {
64
+ &.btn--tertiary {
65
65
  background-color: transparent;
66
66
  border-color: transparent;
67
67
  }
68
68
 
69
- &--with-icon {
69
+ &.btn--with-icon {
70
70
  padding-left: $size-8;
71
71
  background-position: $size-2 center;
72
72
  background-repeat: no-repeat;
73
73
  background-size: $size-5 auto;
74
74
  }
75
75
 
76
- &--small {
76
+ &.btn--small {
77
77
  font-size: $text-sm;
78
78
  padding-top: 0.35rem;
79
79
  padding-bottom: 0.35rem;
@@ -135,6 +135,7 @@ select {
135
135
 
136
136
  &:focus {
137
137
  border-color: $breadboard-color;
138
+ outline: 0;
138
139
  }
139
140
  }
140
141
 
data/lib/sass/zero/version.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  module Sass
2
2
  module Zero
3
- VERSION = "0.0.15"
3
+ VERSION = "0.0.16"
4
4
  end
5
5
  end
data/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sass-zero",
3
- "version": "0.0.15",
3
+ "version": "0.0.16",
4
4
  "description": "A CSS framework for rapid UI development based on tailwindcss, miligram and BEM.",
5
5
  "homepage": "https://github.com/lazaronixon/sass-zero",
6
6
  "repository": "lazaronixon/sass-zero",
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.15
4
+ version: 0.0.16
5
5
  platform: ruby
6
6
  authors:
7
7
  - lazaronixon
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-02-26 00:00:00.000000000 Z
11
+ date: 2020-02-27 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: autoprefixer-rails