sass-zero 1.2.0 → 1.2.1
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/Gemfile.lock +1 -1
- data/README.md +8 -3
- data/app/assets/stylesheets/sass-zero/breadboard.scss +18 -12
- data/app/assets/stylesheets/sass-zero/utilities/_container.scss +5 -5
- data/example.html +74 -76
- data/lib/sass_zero/version.rb +1 -1
- data/screenshot.png +0 -0
- metadata +3 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: f7f05e20af5e4a52e6185beed33e25344e260fa78c2f187921b0b7701db2c6b9
|
4
|
+
data.tar.gz: 909717b4652838d63db482582f4e2b77aeb0f48be60f0fda8ad810d190fd53e3
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 3966527028e6ea03365fd5e38c38528807749acf34a49b48601c5fd36ccdc0aace2f5e1bb4944c61fa76d8d92366e51af8fdf43cc158be99583feb9ac9ac8767
|
7
|
+
data.tar.gz: 62a7f6214a40c498dcbb54908480f09824cb72359566326c18a567ae6d7df11c9527b529ab92c1616d0a2aa368161310468f60c231622bf5a1c0966cd5b3bd84
|
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
@@ -65,10 +65,10 @@ This can be useful for dealing with similar components, and positioning.
|
|
65
65
|
|
66
66
|
## Breadboard
|
67
67
|
|
68
|
-
|
68
|
+
These default styles ensure that even without custom styling, the content is usable and understandable, if your development process is mostly reproducing Figma designs, you might don't need it.
|
69
69
|
|
70
70
|
- [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/breadboard.scss)
|
71
|
-
- [Screenshot](
|
71
|
+
- [Screenshot](screenshot.png)
|
72
72
|
- [Example](https://github.com/lazaronixon/sass-zero/blob/master/example.html)
|
73
73
|
|
74
74
|
## Using variables
|
@@ -124,11 +124,12 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
|
|
124
124
|
|
125
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
126
|
|
127
|
-
You will need to
|
127
|
+
You will need to replace the original breadboard in application.css:
|
128
128
|
|
129
129
|
```css
|
130
130
|
*= require sass-zero/base
|
131
131
|
*= require sass-zero/utilities
|
132
|
+
*= require design-system/breadboard
|
132
133
|
```
|
133
134
|
|
134
135
|
### Variables
|
@@ -142,6 +143,10 @@ Instead of using the default variables you can add more or change the existents,
|
|
142
143
|
...
|
143
144
|
```
|
144
145
|
|
146
|
+
## References
|
147
|
+
|
148
|
+
[The 35 CSS properties you must know to do 80% of the work](https://github.com/lazaronixon/css-properties-counter)
|
149
|
+
|
145
150
|
## Development
|
146
151
|
|
147
152
|
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).
|
@@ -7,10 +7,11 @@ $radius-primary: $rounded;
|
|
7
7
|
$radius-secondary: $rounded;
|
8
8
|
|
9
9
|
:root {
|
10
|
-
--color-bg--main: #{$
|
11
|
-
--color-bg--surface: #{$
|
10
|
+
--color-bg--main: #{$gray-100};
|
11
|
+
--color-bg--surface: #{$white};
|
12
12
|
--color-bg--highlight: #{$gray-200};
|
13
|
-
--color-
|
13
|
+
--color-border: #{$gray-300};
|
14
|
+
--color-primary: #{$gray-800};
|
14
15
|
--color-text: #{$gray-900};
|
15
16
|
}
|
16
17
|
|
@@ -19,11 +20,16 @@ $radius-secondary: $rounded;
|
|
19
20
|
--color-bg--main: #{$gray-900};
|
20
21
|
--color-bg--surface: #{$gray-800};
|
21
22
|
--color-bg--highlight: #{$gray-700};
|
23
|
+
--color-border: #{$gray-600};
|
22
24
|
--color-primary: #{$white};
|
23
25
|
--color-text: #{$white};
|
24
26
|
}
|
25
27
|
}
|
26
28
|
|
29
|
+
*, ::before, ::after {
|
30
|
+
border-color: var(--color-border);
|
31
|
+
}
|
32
|
+
|
27
33
|
html {
|
28
34
|
accent-color: var(--color-primary);
|
29
35
|
background: var(--color-bg--main);
|
@@ -42,11 +48,11 @@ html {
|
|
42
48
|
&--primary {
|
43
49
|
background-color: var(--color-primary);
|
44
50
|
border-color: var(--color-primary);
|
45
|
-
color: var(--color-bg--
|
51
|
+
color: var(--color-bg--surface);
|
46
52
|
}
|
47
53
|
|
48
54
|
&--secondary {
|
49
|
-
background-color: var(--color-bg--
|
55
|
+
background-color: var(--color-bg--surface);
|
50
56
|
border-color: var(--color-primary);
|
51
57
|
}
|
52
58
|
|
@@ -73,7 +79,7 @@ html {
|
|
73
79
|
.input {
|
74
80
|
appearance: none;
|
75
81
|
resize: none;
|
76
|
-
background-color: var(--color-bg--
|
82
|
+
background-color: var(--color-bg--surface);
|
77
83
|
border-radius: $radius-secondary;
|
78
84
|
border-width: $border;
|
79
85
|
padding: $size-2 $size-3;
|
@@ -94,8 +100,8 @@ html {
|
|
94
100
|
}
|
95
101
|
}
|
96
102
|
|
97
|
-
.
|
98
|
-
background-color: var(--color-bg--
|
103
|
+
.dropdown {
|
104
|
+
background-color: var(--color-bg--surface);
|
99
105
|
border-width: $border; border-radius: $radius-primary;
|
100
106
|
padding: $size-3 $size-4;
|
101
107
|
box-shadow: $shadow-lg;
|
@@ -113,7 +119,7 @@ blockquote {
|
|
113
119
|
}
|
114
120
|
|
115
121
|
code {
|
116
|
-
background-color: var(--color-bg--
|
122
|
+
background-color: var(--color-bg--main);
|
117
123
|
border-radius: $rounded;
|
118
124
|
font-size: $text-sm;
|
119
125
|
padding: $size-1;
|
@@ -121,7 +127,7 @@ code {
|
|
121
127
|
}
|
122
128
|
|
123
129
|
pre {
|
124
|
-
background-color: var(--color-bg--
|
130
|
+
background-color: var(--color-bg--main);
|
125
131
|
border-left-width: $border-4;
|
126
132
|
overflow-y: hidden;
|
127
133
|
|
@@ -189,7 +195,7 @@ table, progress, blockquote, figure, pre, menu, ul, ol, dl, p {
|
|
189
195
|
}
|
190
196
|
|
191
197
|
dialog {
|
192
|
-
background-color: var(--color-bg--
|
198
|
+
background-color: var(--color-bg--surface);
|
193
199
|
border-width: $border; border-radius: $radius-primary;
|
194
200
|
padding: $size-3 $size-4;
|
195
201
|
box-shadow: $shadow-lg;
|
@@ -201,7 +207,7 @@ dialog::backdrop {
|
|
201
207
|
}
|
202
208
|
|
203
209
|
progress {
|
204
|
-
background-color: var(--color-bg--
|
210
|
+
background-color: var(--color-bg--main);
|
205
211
|
}
|
206
212
|
|
207
213
|
@include progress-bar {
|
@@ -6,31 +6,31 @@
|
|
6
6
|
}
|
7
7
|
|
8
8
|
@media (min-width: $breakpoint-sm) {
|
9
|
-
.container {
|
9
|
+
.container--sm {
|
10
10
|
max-width: $breakpoint-sm;
|
11
11
|
}
|
12
12
|
}
|
13
13
|
|
14
14
|
@media (min-width: $breakpoint-md) {
|
15
|
-
.container {
|
15
|
+
.container--md {
|
16
16
|
max-width: $breakpoint-md;
|
17
17
|
}
|
18
18
|
}
|
19
19
|
|
20
20
|
@media (min-width: $breakpoint-lg) {
|
21
|
-
.container {
|
21
|
+
.container--lg {
|
22
22
|
max-width: $breakpoint-lg;
|
23
23
|
}
|
24
24
|
}
|
25
25
|
|
26
26
|
@media (min-width: $breakpoint-xl) {
|
27
|
-
.container {
|
27
|
+
.container--xl {
|
28
28
|
max-width: $breakpoint-xl;
|
29
29
|
}
|
30
30
|
}
|
31
31
|
|
32
32
|
@media (min-width: $breakpoint-2xl) {
|
33
|
-
.container {
|
33
|
+
.container--2xl {
|
34
34
|
max-width: $breakpoint-2xl;
|
35
35
|
}
|
36
36
|
}
|
data/example.html
CHANGED
@@ -1,42 +1,49 @@
|
|
1
|
-
<main class="container">
|
2
|
-
<
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
<div class="popup-menu push-xs--top u-position--right">
|
28
|
-
<ul class="list--unindented u-nowrap flush">
|
29
|
-
<li>Unordered list item 1</li>
|
30
|
-
<li>Unordered list item 2</li>
|
31
|
-
<li>Unordered list item 3</li>
|
32
|
-
</ul>
|
1
|
+
<main class="container container--lg" style="background-color: var(--color-bg--surface);">
|
2
|
+
<div class="push-md--bottom">
|
3
|
+
<div class="push-sm--bottom">
|
4
|
+
<p>The base type is 1.6rem (16px) over 1.6 line height (24px)</p>
|
5
|
+
<a href="#" class="txt--underline">Anchor</a>
|
6
|
+
<em>Emphasis</em>
|
7
|
+
<small>Small</small>
|
8
|
+
<strong>Strong</strong>
|
9
|
+
<u>Underline</u>
|
10
|
+
<kbd>CTRL+C</kbd>
|
11
|
+
<mark>Highlighted text</mark>
|
12
|
+
</div>
|
13
|
+
|
14
|
+
<h1>Heading</h1>
|
15
|
+
<h2>Heading</h2>
|
16
|
+
<h3>Heading</h3>
|
17
|
+
<h4>Heading</h4>
|
18
|
+
<h5>Heading</h5>
|
19
|
+
<h6>Heading</h6>
|
20
|
+
</div>
|
21
|
+
|
22
|
+
<div class="push-md--bottom">
|
23
|
+
<div class="push-xs--bottom">
|
24
|
+
<button class="btn btn--primary">Button Primary</button>
|
25
|
+
<button class="btn btn--secondary">Button Secondary</button>
|
26
|
+
<button class="btn btn--tertiary">Button Tertiary</button>
|
33
27
|
</div>
|
34
|
-
</details>
|
35
28
|
|
36
|
-
|
37
|
-
<button class="btn btn--secondary btn--small">Small Button</button>
|
29
|
+
<a href="#" class="btn btn--secondary">Link Button</a>
|
38
30
|
|
39
|
-
|
31
|
+
<input type="submit" value="Submit Button" class="btn btn--secondary" />
|
32
|
+
|
33
|
+
<details class="u-position-context">
|
34
|
+
<summary class="btn btn--secondary">Dropdown Button</summary>
|
35
|
+
<div class="dropdown push-xs--top u-position--right">
|
36
|
+
<ul class="list--unindented u-nowrap flush">
|
37
|
+
<li>Unordered list item 1</li>
|
38
|
+
<li>Unordered list item 2</li>
|
39
|
+
<li>Unordered list item 3</li>
|
40
|
+
</ul>
|
41
|
+
</div>
|
42
|
+
</details>
|
43
|
+
|
44
|
+
<button class="btn btn--secondary"><span class="btn__icon bx bx-plus"></span> Icon Button</button>
|
45
|
+
<button class="btn btn--secondary btn--small">Small Button</button>
|
46
|
+
</div>
|
40
47
|
|
41
48
|
<form class="push-md--bottom">
|
42
49
|
<label for="nameField" class="u-display-b txt--bold">Name</label>
|
@@ -100,9 +107,7 @@
|
|
100
107
|
<input type="submit" value="Send" class="btn btn--primary">
|
101
108
|
</form>
|
102
109
|
|
103
|
-
<
|
104
|
-
|
105
|
-
<table>
|
110
|
+
<table class="push-md--bottom">
|
106
111
|
<thead>
|
107
112
|
<tr>
|
108
113
|
<th>Name</th>
|
@@ -127,54 +132,47 @@
|
|
127
132
|
</tbody>
|
128
133
|
</table>
|
129
134
|
|
135
|
+
<div class="push-md--bottom">
|
136
|
+
<ul class="list--unindented">
|
137
|
+
<li>Unordered list item 1</li>
|
138
|
+
<li>Unordered list item 2</li>
|
139
|
+
<li>Unordered list item 3</li>
|
140
|
+
</ul>
|
141
|
+
|
142
|
+
<ol class="list--unindented">
|
143
|
+
<li>Ordered list item 1</li>
|
144
|
+
<li>Ordered list item 2</li>
|
145
|
+
<li>Ordered list item 3</li>
|
146
|
+
</ol>
|
147
|
+
|
148
|
+
<dl>
|
149
|
+
<dd>A description list is perfect for defining terms.</dd>
|
150
|
+
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
|
151
|
+
</dl>
|
152
|
+
</div>
|
153
|
+
|
154
|
+
<div class="push-md--bottom">
|
155
|
+
<code>.block { color: #9b4dca; }</code>
|
156
|
+
</div>
|
157
|
+
|
158
|
+
<pre><code>.block { color: #9b4dca; }</code></pre>
|
159
|
+
|
130
160
|
<blockquote>
|
131
161
|
<p class="flush--bottom">Friends don’t spy; true friendship is about privacy, too.</p>
|
132
162
|
<cite class="txt--sm">– Stephen King</cite>
|
133
163
|
</blockquote>
|
134
164
|
|
135
|
-
<
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
<div class="push-md--bottom">
|
140
|
-
<code>
|
141
|
-
.milligram {
|
142
|
-
color: #9b4dca;
|
143
|
-
}
|
144
|
-
</code>
|
165
|
+
<div>
|
166
|
+
<label for="progress" class="u-display-b txt--bold">Progress</label>
|
167
|
+
<progress id="progress" max="100" value="70">70%</progress>
|
145
168
|
</div>
|
146
169
|
|
147
|
-
<div
|
170
|
+
<div style="height: 55px;">
|
148
171
|
<dialog open>
|
149
172
|
<form method="dialog">
|
150
|
-
<span>
|
173
|
+
<span>This is a native dialog with a close button.</span>
|
151
174
|
<button type="submit" value="dismiss" class="push-xs--left txt--lg">×</button>
|
152
175
|
</form>
|
153
176
|
</dialog>
|
154
177
|
</div>
|
155
|
-
|
156
|
-
<div class="push-md--bottom">
|
157
|
-
<label for="progres" class="u-display-b txt--bold">Progress</label>
|
158
|
-
<progress id="progres" max="100" value="70">70%</progress>
|
159
|
-
</div>
|
160
|
-
|
161
|
-
<hr>
|
162
|
-
|
163
|
-
<ul class="list--unindented">
|
164
|
-
<li>Unordered list item 1</li>
|
165
|
-
<li>Unordered list item 2</li>
|
166
|
-
<li>Unordered list item 3</li>
|
167
|
-
</ul>
|
168
|
-
|
169
|
-
<ol class="list--unindented">
|
170
|
-
<li>Ordered list item 1</li>
|
171
|
-
<li>Ordered list item 2</li>
|
172
|
-
<li>Ordered list item 3</li>
|
173
|
-
</ol>
|
174
|
-
|
175
|
-
<dl>
|
176
|
-
<dt>Description lists</dt>
|
177
|
-
<dd>A description list is perfect for defining terms.</dd>
|
178
|
-
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
|
179
|
-
</dl>
|
180
178
|
</main>
|
data/lib/sass_zero/version.rb
CHANGED
data/screenshot.png
ADDED
Binary file
|
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.2.
|
4
|
+
version: 1.2.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- lazaronixon
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2023-07-
|
11
|
+
date: 2023-07-09 00:00:00.000000000 Z
|
12
12
|
dependencies: []
|
13
13
|
description:
|
14
14
|
email:
|
@@ -63,6 +63,7 @@ files:
|
|
63
63
|
- lib/sass_zero.rb
|
64
64
|
- lib/sass_zero/version.rb
|
65
65
|
- sass-zero.gemspec
|
66
|
+
- screenshot.png
|
66
67
|
homepage: http://github.com/lazaronixon/sass-zero
|
67
68
|
licenses:
|
68
69
|
- MIT
|