sass-zero 1.1.1 → 1.1.3

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 (14) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile.lock +1 -1
  3. data/README.md +32 -55
  4. data/app/assets/stylesheets/sass-zero/breadboard.scss +2 -3
  5. data/app/assets/stylesheets/sass-zero/utilities/border.scss +4 -0
  6. data/app/assets/stylesheets/sass-zero/utilities/layout.scss +4 -0
  7. data/app/assets/stylesheets/sass-zero/utilities/pad.scss +4 -4
  8. data/app/assets/stylesheets/sass-zero/utilities/pull.scss +4 -4
  9. data/app/assets/stylesheets/sass-zero/utilities/push.scss +7 -7
  10. data/app/assets/stylesheets/sass-zero/variables/sizing.scss +5 -7
  11. data/lib/sass_zero/version.rb +1 -1
  12. metadata +3 -4
  13. data/package.json +0 -18
  14. /data/{Example.html → example/index.html} +0 -0
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 438e8f1e1f375d54c379aec29c9a3384a77d6cd94ae9bde0f9ce02fbba1bcfc7
4
- data.tar.gz: 75a78be4c281f9f6a8d6e434b3a1aa99b37d68d360a145704e6b0125fcb76e0a
3
+ metadata.gz: 4c3ae66178979873a6c94299148c552fd111d97667f44bedefa606c06fb47fd8
4
+ data.tar.gz: 8dff808e65ba1a32a244187446e6dfc0383fdb16f8c1c2f005a778ad4926c1bf
5
5
  SHA512:
6
- metadata.gz: 94706d42564c0b3b158c98c5a7b774d1c1978d5c1f5af6c1515334bb271b53c0bfa75fa5493e64eb4abdc0067d0cd6ddbf29dd4367bf0651288010ed07649072
7
- data.tar.gz: 770f78854e72f4d4d48677632804dc74bff56cf59d8cb8ddf06f8dd53a974b06e0fa00f06d7036eefd026bff22eb92023c62aefa5de9fd89be23c91d91cdbf05
6
+ metadata.gz: 71cc61dc9360ef52fc5422475be79cb687a1cab85e271ad6ed21304401c071a465ad1ea03c7cd1f19c9cdf84ba3e97ce99717b51975c10791bd791e22a81658c
7
+ data.tar.gz: 8fdd20c09ebc2d87aa1c140d5e08945dad6582ae9e62080f588763de3eebc3d12dd476bce666918acf4cd3810364eb7247fc69030ed26d4b8cf597e152f9920d
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- sass-zero (1.1.1)
4
+ sass-zero (1.1.3)
5
5
 
6
6
  GEM
7
7
  remote: https://rubygems.org/
data/README.md CHANGED
@@ -4,33 +4,52 @@ SASS-ZERO is a css framework that brings concepts from [tailwindcss](https://tai
4
4
 
5
5
  ![screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/sass-zero-screenshot-3.png)
6
6
 
7
- ### Milligram
7
+ ## Installation
8
8
 
9
- "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).
9
+ ```ruby
10
+ bundle add sassc-rails
11
+ bundle add sass-zero
12
+ ```
10
13
 
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.
14
+ ## Usage
12
15
 
13
- ### Tailwind CSS
16
+ Add these lines to your application.css:
14
17
 
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).
18
+ ```css
19
+ *= require sass-zero/base
20
+ *= require sass-zero/utilities
21
+ *= require sass-zero/breadboard
22
+ ```
16
23
 
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).
24
+ ### Using variables
18
25
 
19
- ### BEM
26
+ 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):
20
27
 
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.
28
+ ```scss
29
+ @import "sass-zero/variables";
22
30
 
23
- ### Shape UP
31
+ .block {
32
+ color: $red-300;
24
33
 
25
- SASS-ZERO comes with a implict flow from Shape UP, Find Elemens -> Create Affordance -> Make it Beautiful.
34
+ &__element {
35
+ color: $red-400;
36
+ }
26
37
 
27
- ### Refactoring UI
38
+ &--modifier {
39
+ color: $red-500;
40
+ }
41
+ }
42
+ ```
28
43
 
29
- Developers should be able to produce your own design, [Refactoring UI](https://refactoringui.com/book) is the book for that.
44
+ ```html
45
+ <div class="block block--modifier">
46
+ <div class="block__element" />
47
+ </div>
48
+ ```
30
49
 
31
50
  ### Breadboard Theme
32
51
 
33
- - [Example](https://github.com/lazaronixon/sass-zero/blob/master/Example.html)
52
+ - [Example](https://github.com/lazaronixon/sass-zero/blob/master/example/index.html)
34
53
  - [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/breadboard.scss)
35
54
 
36
55
  ### Variables
@@ -68,48 +87,6 @@ Developers should be able to produce your own design, [Refactoring UI](https://r
68
87
  - [Position Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/position.scss)
69
88
  - [List Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/list.scss)
70
89
 
71
- ## Installation
72
-
73
- Add this to your application's Gemfile:
74
-
75
- ```ruby
76
- gem "sass-zero"
77
- ```
78
-
79
- ## Usage
80
-
81
- Add this line to your application.css:
82
-
83
- ```css
84
- *= require sass-zero/base
85
- *= require sass-zero/utilities
86
- *= require sass-zero/breadboard
87
- ```
88
-
89
- 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):
90
-
91
- ```scss
92
- @import "sass-zero/variables";
93
-
94
- .block {
95
- color: $red-300;
96
-
97
- &__element {
98
- color: $red-400;
99
- }
100
-
101
- &--modifier {
102
- color: $red-500;
103
- }
104
- }
105
- ```
106
-
107
- ```html
108
- <div class="block block--modifier">
109
- <div class="block__element" />
110
- </div>
111
- ```
112
-
113
90
  ## References
114
91
 
115
92
  - [SASS](https://sass-lang.com)
data/app/assets/stylesheets/sass-zero/breadboard.scss CHANGED
@@ -25,7 +25,7 @@ $radius-secondary: $rounded;
25
25
  }
26
26
 
27
27
  html {
28
- accent-color: var(--color-primary); // scss-lint:disable all
28
+ accent-color: var(--color-primary);
29
29
  background: var(--color-bg--main);
30
30
  color: var(--color-text);
31
31
  font-family: $font-family;
@@ -104,8 +104,7 @@ html {
104
104
  }
105
105
 
106
106
  [type="checkbox"], [type="radio"] {
107
- transform: scale(1.2, 1.2);
108
- margin: $size-1;
107
+ transform: scale(1.2); margin: $size-1;
109
108
  }
110
109
 
111
110
  blockquote {
data/app/assets/stylesheets/sass-zero/utilities/border.scss CHANGED
@@ -15,3 +15,7 @@
15
15
  .border--all {
16
16
  border-width: $border !important;
17
17
  }
18
+
19
+ .border--round {
20
+ border-radius: $rounded-full !important;
21
+ }
data/app/assets/stylesheets/sass-zero/utilities/layout.scss CHANGED
@@ -53,6 +53,10 @@
53
53
  min-width: 0;
54
54
  }
55
55
 
56
+ .u-max-width {
57
+ max-width: 100%;
58
+ }
59
+
56
60
  .u-full-height {
57
61
  height: 100%;
58
62
  }
data/app/assets/stylesheets/sass-zero/utilities/pad.scss CHANGED
@@ -2,10 +2,10 @@
2
2
 
3
3
  // *******************************************************************
4
4
  // Pad Utilities
5
- // .pad-[xs|sm|md|lg|xl|2xl|3xl]--top
6
- // .pad-[xs|sm|md|lg|xl|2xl|3xl]--right
7
- // .pad-[xs|sm|md|lg|xl|2xl|3xl]--bottom
8
- // .pad-[xs|sm|md|lg|xl|2xl|3xl]--left
5
+ // .pad-[xs|sm|md|lg|xl]--top
6
+ // .pad-[xs|sm|md|lg|xl]--right
7
+ // .pad-[xs|sm|md|lg|xl]--bottom
8
+ // .pad-[xs|sm|md|lg|xl]--left
9
9
  // *******************************************************************
10
10
  @each $scale, $size in $size-map {
11
11
  .pad-#{$scale}--top {
data/app/assets/stylesheets/sass-zero/utilities/pull.scss CHANGED
@@ -2,10 +2,10 @@
2
2
 
3
3
  // *******************************************************************
4
4
  // Pull Utilities
5
- // .pull-[xs|sm|md|lg|xl|2xl|3xl]--top
6
- // .pull-[xs|sm|md|lg|xl|2xl|3xl]--right
7
- // .pull-[xs|sm|md|lg|xl|2xl|3xl]--bottom
8
- // .pull-[xs|sm|md|lg|xl|2xl|3xl]--left
5
+ // .pull-[xs|sm|md|lg|xl]--top
6
+ // .pull-[xs|sm|md|lg|xl]--right
7
+ // .pull-[xs|sm|md|lg|xl]--bottom
8
+ // .pull-[xs|sm|md|lg|xl]--left
9
9
  // *******************************************************************
10
10
  @each $scale, $size in $size-map {
11
11
  .pull-#{$scale}--top {
data/app/assets/stylesheets/sass-zero/utilities/push.scss CHANGED
@@ -2,13 +2,13 @@
2
2
 
3
3
  // *******************************************************************
4
4
  // Push Utilities
5
- // .push-[xs|sm|md|lg|xl|2xl|3xl]
6
- // .push-[xs|sm|md|lg|xl|2xl|3xl]--top
7
- // .push-[xs|sm|md|lg|xl|2xl|3xl]--right
8
- // .push-[xs|sm|md|lg|xl|2xl|3xl]--bottom
9
- // .push-[xs|sm|md|lg|xl|2xl|3xl]--left
10
- // .push-[xs|sm|md|lg|xl|2xl|3xl]--ends
11
- // .push-[xs|sm|md|lg|xl|2xl|3xl]--sides
5
+ // .push-[xs|sm|md|lg|xl]
6
+ // .push-[xs|sm|md|lg|xl]--top
7
+ // .push-[xs|sm|md|lg|xl]--right
8
+ // .push-[xs|sm|md|lg|xl]--bottom
9
+ // .push-[xs|sm|md|lg|xl]--left
10
+ // .push-[xs|sm|md|lg|xl]--ends
11
+ // .push-[xs|sm|md|lg|xl]--sides
12
12
  // *******************************************************************
13
13
  @each $scale, $size in $size-map {
14
14
  .push-#{$scale} {
data/app/assets/stylesheets/sass-zero/variables/sizing.scss CHANGED
@@ -35,11 +35,9 @@ $size-80: 20rem;
35
35
  $size-96: 24rem;
36
36
 
37
37
  $size-map: (
38
- "xs": $size-2,
39
- "sm": $size-4,
40
- "md": $size-6,
41
- "lg": $size-12,
42
- "xl": $size-16,
43
- "2xl": $size-24,
44
- "3xl": $size-32
38
+ "xs": $size-2,
39
+ "sm": $size-4,
40
+ "md": $size-8,
41
+ "lg": $size-16,
42
+ "xl": $size-32
45
43
  );
data/lib/sass_zero/version.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  module Sass
2
2
  module Zero
3
- VERSION = "1.1.1"
3
+ VERSION = "1.1.3"
4
4
  end
5
5
  end
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: 1.1.1
4
+ version: 1.1.3
5
5
  platform: ruby
6
6
  authors:
7
7
  - lazaronixon
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2022-08-15 00:00:00.000000000 Z
11
+ date: 2023-06-19 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description:
14
14
  email:
@@ -20,7 +20,6 @@ files:
20
20
  - ".github/FUNDING.yml"
21
21
  - ".gitignore"
22
22
  - ".scss-lint.yml"
23
- - Example.html
24
23
  - Gemfile
25
24
  - Gemfile.lock
26
25
  - README.md
@@ -59,10 +58,10 @@ files:
59
58
  - app/assets/stylesheets/sass-zero/variables/typography.scss
60
59
  - app/assets/stylesheets/sass-zero/variables/width.scss
61
60
  - app/assets/stylesheets/sass-zero/variables/zindex.scss
61
+ - example/index.html
62
62
  - lib/sass-zero.rb
63
63
  - lib/sass_zero.rb
64
64
  - lib/sass_zero/version.rb
65
- - package.json
66
65
  - sass-zero.gemspec
67
66
  homepage: http://github.com/lazaronixon/sass-zero
68
67
  licenses:
data/package.json DELETED
@@ -1,18 +0,0 @@
1
- {
2
- "name": "sass-zero",
3
- "version": "1.1.1",
4
- "description": "A CSS framework for rapid UI development based on tailwindcss, miligram and BEM.",
5
- "homepage": "https://github.com/lazaronixon/sass-zero",
6
- "repository": "lazaronixon/sass-zero",
7
- "license": "MIT",
8
- "author": "Lázaro Nixon <lazaronixon@hotmail.com>",
9
- "private": false,
10
- "keywords": [
11
- "css",
12
- "css-framework",
13
- "sass-zero",
14
- "milligram",
15
- "tailwindcss",
16
- "bem"
17
- ]
18
- }
/data/{Example.html → example/index.html} RENAMED
File without changes