sass-zero 1.1.6 → 1.2.0
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/.sass-zero-references.scss +15 -25
- data/Gemfile.lock +1 -1
- data/README.md +78 -42
- data/app/assets/stylesheets/sass-zero/{mixins.scss → _mixins.scss} +1 -4
- data/app/assets/stylesheets/sass-zero/base.scss +363 -1
- data/app/assets/stylesheets/sass-zero/variables/{breakpoints.scss → _breakpoints.scss} +5 -5
- data/app/assets/stylesheets/sass-zero/variables/{grid.scss → _grid.scss} +0 -20
- data/app/assets/stylesheets/sass-zero/variables/{typography.scss → _typography.scss} +3 -3
- data/lib/sass_zero/version.rb +1 -1
- data/sass-zero.gemspec +1 -1
- metadata +33 -35
- data/app/assets/stylesheets/sass-zero/base/preflight.scss +0 -363
- /data/app/assets/stylesheets/sass-zero/{variables.scss → _variables.scss} +0 -0
- /data/app/assets/stylesheets/sass-zero/utilities/{align.scss → _align.scss} +0 -0
- /data/app/assets/stylesheets/sass-zero/utilities/{animation.scss → _animation.scss} +0 -0
- /data/app/assets/stylesheets/sass-zero/utilities/{border.scss → _border.scss} +0 -0
- /data/app/assets/stylesheets/sass-zero/utilities/{container.scss → _container.scss} +0 -0
- /data/app/assets/stylesheets/sass-zero/utilities/{flex.scss → _flex.scss} +0 -0
- /data/app/assets/stylesheets/sass-zero/utilities/{flush.scss → _flush.scss} +0 -0
- /data/app/assets/stylesheets/sass-zero/utilities/{layout.scss → _layout.scss} +0 -0
- /data/app/assets/stylesheets/sass-zero/utilities/{list.scss → _list.scss} +0 -0
- /data/app/assets/stylesheets/sass-zero/utilities/{pad.scss → _pad.scss} +0 -0
- /data/app/assets/stylesheets/sass-zero/utilities/{position.scss → _position.scss} +0 -0
- /data/app/assets/stylesheets/sass-zero/utilities/{pull.scss → _pull.scss} +0 -0
- /data/app/assets/stylesheets/sass-zero/utilities/{push.scss → _push.scss} +0 -0
- /data/app/assets/stylesheets/sass-zero/utilities/{text.scss → _text.scss} +0 -0
- /data/app/assets/stylesheets/sass-zero/utilities/{unpad.scss → _unpad.scss} +0 -0
- /data/app/assets/stylesheets/sass-zero/variables/{border.scss → _border.scss} +0 -0
- /data/app/assets/stylesheets/sass-zero/variables/{colors.scss → _colors.scss} +0 -0
- /data/app/assets/stylesheets/sass-zero/variables/{effects.scss → _effects.scss} +0 -0
- /data/app/assets/stylesheets/sass-zero/variables/{filters.scss → _filters.scss} +0 -0
- /data/app/assets/stylesheets/sass-zero/variables/{flex.scss → _flex.scss} +0 -0
- /data/app/assets/stylesheets/sass-zero/variables/{height.scss → _height.scss} +0 -0
- /data/app/assets/stylesheets/sass-zero/variables/{sizing.scss → _sizing.scss} +0 -0
- /data/app/assets/stylesheets/sass-zero/variables/{transform.scss → _transform.scss} +0 -0
- /data/app/assets/stylesheets/sass-zero/variables/{transition.scss → _transition.scss} +0 -0
- /data/app/assets/stylesheets/sass-zero/variables/{width.scss → _width.scss} +0 -0
- /data/app/assets/stylesheets/sass-zero/variables/{zindex.scss → _zindex.scss} +0 -0
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: ba90537c1863378335ab5d75f4bbec2b40cadfbfe9a411ef8e9eecea7cd61b05
|
4
|
+
data.tar.gz: 60bd88b0235a72815efabf572dcd74e84d80e89e76cf62d8c11b22a9745aeee7
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: aa3f62f922ef34285d8e76a20dd36ee5b5efedcda713bed5fce70781fc3e7007adc1ba32bdd487285ea09ae602c6691edb1d1338f01dfcb82b8cd66f597e6611
|
7
|
+
data.tar.gz: 9f72e0f2ef60bccdf82009276a423ede2c88be2ba3a9e238a05060bd82e47c8e168a382977230644f7616c125ddd6145913cc967b9f738407034db0f1bcabdb9
|
data/.sass-zero-references.scss
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
// *******************************************************************
|
2
|
-
//
|
2
|
+
// Borders
|
3
3
|
// *******************************************************************
|
4
4
|
|
5
5
|
$rounded-none: 0;
|
@@ -19,7 +19,7 @@ $border-4: 4px;
|
|
19
19
|
$border-8: 8px;
|
20
20
|
|
21
21
|
// *******************************************************************
|
22
|
-
//
|
22
|
+
// Breakpoints
|
23
23
|
// *******************************************************************
|
24
24
|
|
25
25
|
$breakpoint-sm: 640px;
|
@@ -29,7 +29,7 @@ $breakpoint-xl: 1280px;
|
|
29
29
|
$breakpoint-2xl: 1536px;
|
30
30
|
|
31
31
|
// *******************************************************************
|
32
|
-
//
|
32
|
+
// Colors
|
33
33
|
// *******************************************************************
|
34
34
|
|
35
35
|
$transparent: transparent;
|
@@ -281,7 +281,7 @@ $blue-gray-800: #1e293b;
|
|
281
281
|
$blue-gray-900: #0f172a;
|
282
282
|
|
283
283
|
// *******************************************************************
|
284
|
-
//
|
284
|
+
// Effects
|
285
285
|
// *******************************************************************
|
286
286
|
|
287
287
|
$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
@@ -310,7 +310,7 @@ $opacity-95: 0.95;
|
|
310
310
|
$opacity-100: 1;
|
311
311
|
|
312
312
|
// *******************************************************************
|
313
|
-
//
|
313
|
+
// Filters
|
314
314
|
// *******************************************************************
|
315
315
|
|
316
316
|
$blur-none: blur(0);
|
@@ -373,7 +373,7 @@ $sepia-0: sepia(0);
|
|
373
373
|
$sepia: sepia(100%);
|
374
374
|
|
375
375
|
// *******************************************************************
|
376
|
-
//
|
376
|
+
// Flex
|
377
377
|
// *******************************************************************
|
378
378
|
|
379
379
|
$flex-1: 1 1 0%; // Allow grow and shrink, ignoring its initial size.
|
@@ -388,7 +388,7 @@ $flex-shrink-0: 0;
|
|
388
388
|
$flex-shrink: 1;
|
389
389
|
|
390
390
|
// *******************************************************************
|
391
|
-
//
|
391
|
+
// Grid
|
392
392
|
// *******************************************************************
|
393
393
|
|
394
394
|
$grid-cols-1: repeat(1, minmax(0, 1fr));
|
@@ -437,18 +437,8 @@ $row-span-5: span 5 / span 5;
|
|
437
437
|
$row-span-6: span 6 / span 6;
|
438
438
|
$row-span-full: calc(1 / -1);
|
439
439
|
|
440
|
-
$auto-cols-auto: auto;
|
441
|
-
$auto-cols-min: min-content;
|
442
|
-
$auto-cols-max: max-content;
|
443
|
-
$auto-cols-fr: minmax(0, 1fr);
|
444
|
-
|
445
|
-
$auto-rows-auto: auto;
|
446
|
-
$auto-rows-min: min-content;
|
447
|
-
$auto-rows-max: max-content;
|
448
|
-
$auto-rows-fr: minmax(0, 1fr);
|
449
|
-
|
450
440
|
// *******************************************************************
|
451
|
-
//
|
441
|
+
// Height
|
452
442
|
// *******************************************************************
|
453
443
|
|
454
444
|
$h-auto: auto;
|
@@ -487,7 +477,7 @@ $max-h-max: max-content;
|
|
487
477
|
$max-h-fit: fit-content;
|
488
478
|
|
489
479
|
// *******************************************************************
|
490
|
-
//
|
480
|
+
// Sizing
|
491
481
|
// *******************************************************************
|
492
482
|
|
493
483
|
$size-px: 1px;
|
@@ -523,7 +513,7 @@ $size-80: 20rem;
|
|
523
513
|
$size-96: 24rem;
|
524
514
|
|
525
515
|
// *******************************************************************
|
526
|
-
//
|
516
|
+
// Transform
|
527
517
|
// *******************************************************************
|
528
518
|
|
529
519
|
$scale-0: 0;
|
@@ -563,7 +553,7 @@ $skew-6: 6deg;
|
|
563
553
|
$skew-12: 12deg;
|
564
554
|
|
565
555
|
// *******************************************************************
|
566
|
-
//
|
556
|
+
// Transition
|
567
557
|
// *******************************************************************
|
568
558
|
|
569
559
|
$transition-none: none;
|
@@ -598,7 +588,7 @@ $ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
598
588
|
$ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
599
589
|
|
600
590
|
// *******************************************************************
|
601
|
-
//
|
591
|
+
// Typography
|
602
592
|
// *******************************************************************
|
603
593
|
|
604
594
|
$font-sans: ui-sans-serif, 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";
|
@@ -652,7 +642,7 @@ $tracking-wider: 0.05em;
|
|
652
642
|
$tracking-widest: 0.1em;
|
653
643
|
|
654
644
|
// *******************************************************************
|
655
|
-
//
|
645
|
+
// Width
|
656
646
|
// *******************************************************************
|
657
647
|
|
658
648
|
$w-auto: auto;
|
@@ -713,7 +703,7 @@ $max-w-max: max-content;
|
|
713
703
|
$max-w-fit: fit-content;
|
714
704
|
|
715
705
|
// *******************************************************************
|
716
|
-
//
|
706
|
+
// Zindex
|
717
707
|
// *******************************************************************
|
718
708
|
|
719
709
|
$z-auto: auto;
|
@@ -725,7 +715,7 @@ $z-40: 40;
|
|
725
715
|
$z-50: 50;
|
726
716
|
|
727
717
|
// *******************************************************************
|
728
|
-
//
|
718
|
+
// Mixins
|
729
719
|
// *******************************************************************
|
730
720
|
|
731
721
|
@mixin antialiased {}
|
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
@@ -21,77 +21,89 @@ Add these lines to your application.css:
|
|
21
21
|
|
22
22
|
### Variables
|
23
23
|
|
24
|
+
Instead of hand-picking values from a limitless pool any time you need to make a decision, start with a smaller set of options.
|
25
|
+
|
24
26
|
#### Essential
|
25
27
|
|
26
|
-
- [Border](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/
|
27
|
-
- [Colors](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/
|
28
|
-
- [Effects](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/
|
29
|
-
- [
|
30
|
-
- [
|
31
|
-
- [
|
32
|
-
- [
|
33
|
-
- [
|
34
|
-
- [Width](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/width.scss)
|
28
|
+
- [Border](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_border.scss)
|
29
|
+
- [Colors](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_colors.scss)
|
30
|
+
- [Effects](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_effects.scss)
|
31
|
+
- [Height](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_height.scss)
|
32
|
+
- [Sizing](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_sizing.scss)
|
33
|
+
- [Typography](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_typography.scss)
|
34
|
+
- [Width](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_width.scss)
|
35
|
+
- [Z-Index](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_zindex.scss)
|
35
36
|
|
36
37
|
#### Others
|
37
38
|
|
38
|
-
- [Breakpoints](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/
|
39
|
-
- [Filters](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/
|
40
|
-
- [
|
41
|
-
- [
|
42
|
-
- [
|
39
|
+
- [Breakpoints](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_breakpoints.scss)
|
40
|
+
- [Filters](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_filters.scss)
|
41
|
+
- [Flex](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_flex.scss)
|
42
|
+
- [Grid](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_grid.scss)
|
43
|
+
- [Transform](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_transform.scss)
|
44
|
+
- [Transition](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_transition.scss)
|
45
|
+
- [Mixins](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/_mixins.scss)
|
43
46
|
|
44
47
|
### Utility classes
|
45
48
|
|
46
|
-
|
47
|
-
|
48
|
-
- [
|
49
|
-
- [
|
50
|
-
- [
|
51
|
-
- [
|
52
|
-
- [
|
53
|
-
- [
|
54
|
-
- [
|
55
|
-
- [Margin
|
56
|
-
- [
|
57
|
-
- [
|
58
|
-
- [
|
59
|
-
- [
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
- [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/breadboard.scss)
|
64
|
-
- [Example](https://github.com/lazaronixon/sass-zero/blob/master/example.html)
|
49
|
+
This can be useful for dealing with similar components, and positioning.
|
50
|
+
|
51
|
+
- [Align](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_align.scss)
|
52
|
+
- [Animation](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_animation.scss)
|
53
|
+
- [Border](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_border.scss)
|
54
|
+
- [Container](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_container.scss)
|
55
|
+
- [Flex Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_flex.scss)
|
56
|
+
- [Layout Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_layout.scss)
|
57
|
+
- [List Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_list.scss)
|
58
|
+
- [Margin Pull](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_pull.scss)
|
59
|
+
- [Margin Push](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_push.scss)
|
60
|
+
- [Margin Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_flush.scss)
|
61
|
+
- [Padding](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_pad.scss)
|
62
|
+
- [Padding Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_unpad.scss)
|
63
|
+
- [Position Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_position.scss)
|
64
|
+
- [Text Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_text.scss)
|
65
65
|
|
66
66
|
## Breadboard
|
67
67
|
|
68
|
-
This is an optional
|
68
|
+
This is an optional grayscale theme that you can use as design foundation.
|
69
69
|
|
70
|
-
|
70
|
+
- [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/breadboard.scss)
|
71
|
+
- [Screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/sass-zero-screenshot-3.png)
|
72
|
+
- [Example](https://github.com/lazaronixon/sass-zero/blob/master/example.html)
|
71
73
|
|
72
74
|
## Using variables
|
73
75
|
|
74
|
-
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/
|
76
|
+
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):
|
75
77
|
|
76
78
|
```scss
|
77
79
|
@import "sass-zero/variables";
|
78
80
|
|
79
81
|
.block {
|
80
|
-
color: $
|
82
|
+
color: $rose-500;
|
83
|
+
|
84
|
+
&__element_one {
|
85
|
+
color: $fuchsia-500;
|
86
|
+
}
|
81
87
|
|
82
|
-
&
|
83
|
-
color: $
|
88
|
+
&__element_two {
|
89
|
+
color: $purple-500;
|
84
90
|
}
|
85
91
|
|
86
92
|
&--modifier {
|
87
|
-
color: $
|
93
|
+
color: $violet-500;
|
88
94
|
}
|
89
95
|
}
|
90
96
|
```
|
91
97
|
|
92
98
|
```html
|
99
|
+
<div class="block">
|
100
|
+
<div class="block__element_one" />
|
101
|
+
<div class="block__element_two" />
|
102
|
+
</div>
|
103
|
+
|
93
104
|
<div class="block block--modifier">
|
94
|
-
<div class="
|
105
|
+
<div class="block__element_one" />
|
106
|
+
<div class="block__element_two" />
|
95
107
|
</div>
|
96
108
|
```
|
97
109
|
|
@@ -102,10 +114,34 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
|
|
102
114
|
1. Copy `.sass-zero-references.scss` to the root of your application.
|
103
115
|
2. Install [SCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss).
|
104
116
|
|
105
|
-
###
|
117
|
+
### Pulsar/TextMate
|
106
118
|
|
107
119
|
1. Copy `.sass-zero-references.scss` to the root of your application.
|
108
120
|
|
121
|
+
## Customization
|
122
|
+
|
123
|
+
### Breadboard
|
124
|
+
|
125
|
+
When you are sure about the style of your application you should make a copy of `breadboard.scss` and customize fonts, borders, and colors.
|
126
|
+
|
127
|
+
You will need to remove the original breadboard from application.css:
|
128
|
+
|
129
|
+
```css
|
130
|
+
*= require sass-zero/base
|
131
|
+
*= require sass-zero/utilities
|
132
|
+
```
|
133
|
+
|
134
|
+
### Variables
|
135
|
+
|
136
|
+
Instead of using the default variables you can add more or change the existents, I recommend you make a copy of `_variables.scss` to your application and change it as you want.
|
137
|
+
|
138
|
+
```scss
|
139
|
+
@import "sass-zero/variables/border";
|
140
|
+
@import "sass-zero/variables/breakpoints";
|
141
|
+
@import "design-system/colors";
|
142
|
+
...
|
143
|
+
```
|
144
|
+
|
109
145
|
## Development
|
110
146
|
|
111
147
|
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 the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
|
@@ -1,7 +1,4 @@
|
|
1
|
-
@import "variables/border";
|
2
|
-
@import "variables/effects";
|
3
1
|
@import "variables/sizing";
|
4
|
-
@import "variables/zindex";
|
5
2
|
|
6
3
|
@mixin antialiased {
|
7
4
|
-webkit-font-smoothing: antialiased;
|
@@ -39,7 +36,7 @@
|
|
39
36
|
padding-right: $padding-x;
|
40
37
|
padding-left: $padding-x;
|
41
38
|
margin-right: auto;
|
42
|
-
margin-left:
|
39
|
+
margin-left: auto;
|
43
40
|
}
|
44
41
|
|
45
42
|
@mixin gradient($direction, $from, $to: transparent, $via: null) {
|