sass-zero 1.2.0 → 1.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ba90537c1863378335ab5d75f4bbec2b40cadfbfe9a411ef8e9eecea7cd61b05
-  data.tar.gz: 60bd88b0235a72815efabf572dcd74e84d80e89e76cf62d8c11b22a9745aeee7
+  metadata.gz: f7f05e20af5e4a52e6185beed33e25344e260fa78c2f187921b0b7701db2c6b9
+  data.tar.gz: 909717b4652838d63db482582f4e2b77aeb0f48be60f0fda8ad810d190fd53e3
 SHA512:
-  metadata.gz: aa3f62f922ef34285d8e76a20dd36ee5b5efedcda713bed5fce70781fc3e7007adc1ba32bdd487285ea09ae602c6691edb1d1338f01dfcb82b8cd66f597e6611
-  data.tar.gz: 9f72e0f2ef60bccdf82009276a423ede2c88be2ba3a9e238a05060bd82e47c8e168a382977230644f7616c125ddd6145913cc967b9f738407034db0f1bcabdb9
+  metadata.gz: 3966527028e6ea03365fd5e38c38528807749acf34a49b48601c5fd36ccdc0aace2f5e1bb4944c61fa76d8d92366e51af8fdf43cc158be99583feb9ac9ac8767
+  data.tar.gz: 62a7f6214a40c498dcbb54908480f09824cb72359566326c18a567ae6d7df11c9527b529ab92c1616d0a2aa368161310468f60c231622bf5a1c0966cd5b3bd84

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    sass-zero (1.2.0)
+    sass-zero (1.2.1)
 
 GEM
   remote: https://rubygems.org/

data/README.md

@@ -65,10 +65,10 @@ This can be useful for dealing with similar components, and positioning.
 
 ## Breadboard
 
-This is an optional grayscale theme that you can use as design foundation.
+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.
 
 - [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/breadboard.scss)
-- [Screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/sass-zero-screenshot-3.png)
+- [Screenshot](screenshot.png)
 - [Example](https://github.com/lazaronixon/sass-zero/blob/master/example.html)
 
 ## Using variables
@@ -124,11 +124,12 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
 
 When you are sure about the style of your application you should make a copy of `breadboard.scss` and customize fonts, borders, and colors.
 
-You will need to remove the original breadboard from application.css:
+You will need to replace the original breadboard in application.css:
 
 ```css
 *= require sass-zero/base
 *= require sass-zero/utilities
+*= require design-system/breadboard
 ```
 
 ### Variables
@@ -142,6 +143,10 @@ Instead of using the default variables you can add more or change the existents,
 ...
 ```
 
+## References
+
+[The 35 CSS properties you must know to do 80% of the work](https://github.com/lazaronixon/css-properties-counter)
+
 ## Development
 
 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).

data/app/assets/stylesheets/sass-zero/breadboard.scss

@@ -7,10 +7,11 @@ $radius-primary:   $rounded;
 $radius-secondary: $rounded;
 
 :root {
-  --color-bg--main:      #{$white};
-  --color-bg--surface:   #{$gray-100};
+  --color-bg--main:      #{$gray-100};
+  --color-bg--surface:   #{$white};
   --color-bg--highlight: #{$gray-200};
-  --color-primary:       #{$gray-900};
+  --color-border:        #{$gray-300};
+  --color-primary:       #{$gray-800};
   --color-text:          #{$gray-900};
 }
 
@@ -19,11 +20,16 @@ $radius-secondary: $rounded;
     --color-bg--main:      #{$gray-900};
     --color-bg--surface:   #{$gray-800};
     --color-bg--highlight: #{$gray-700};
+    --color-border:        #{$gray-600};
     --color-primary:       #{$white};
     --color-text:          #{$white};
   }
 }
 
+*, ::before, ::after {
+  border-color: var(--color-border);
+}
+
 html {
   accent-color: var(--color-primary);
   background: var(--color-bg--main);
@@ -42,11 +48,11 @@ html {
   &--primary {
     background-color: var(--color-primary);
     border-color: var(--color-primary);
-    color: var(--color-bg--main);
+    color: var(--color-bg--surface);
   }
 
   &--secondary {
-    background-color: var(--color-bg--main);
+    background-color: var(--color-bg--surface);
     border-color: var(--color-primary);
   }
 
@@ -73,7 +79,7 @@ html {
 .input {
   appearance: none;
   resize: none;
-  background-color: var(--color-bg--main);
+  background-color: var(--color-bg--surface);
   border-radius: $radius-secondary;
   border-width: $border;
   padding: $size-2 $size-3;
@@ -94,8 +100,8 @@ html {
   }
 }
 
-.popup-menu {
-  background-color: var(--color-bg--main);
+.dropdown {
+  background-color: var(--color-bg--surface);
   border-width: $border; border-radius: $radius-primary;
   padding: $size-3 $size-4;
   box-shadow: $shadow-lg;
@@ -113,7 +119,7 @@ blockquote {
 }
 
 code {
-  background-color: var(--color-bg--surface);
+  background-color: var(--color-bg--main);
   border-radius: $rounded;
   font-size: $text-sm;
   padding: $size-1;
@@ -121,7 +127,7 @@ code {
 }
 
 pre {
-  background-color: var(--color-bg--surface);
+  background-color: var(--color-bg--main);
   border-left-width: $border-4;
   overflow-y: hidden;
 
@@ -189,7 +195,7 @@ table, progress, blockquote, figure, pre, menu, ul, ol, dl, p {
 }
 
 dialog {
-  background-color: var(--color-bg--main);
+  background-color: var(--color-bg--surface);
   border-width: $border; border-radius: $radius-primary;
   padding: $size-3 $size-4;
   box-shadow: $shadow-lg;
@@ -201,7 +207,7 @@ dialog::backdrop {
 }
 
 progress {
-  background-color: var(--color-bg--surface);
+  background-color: var(--color-bg--main);
 }
 
 @include progress-bar {

data/app/assets/stylesheets/sass-zero/utilities/_container.scss

@@ -6,31 +6,31 @@
 }
 
 @media (min-width: $breakpoint-sm) {
-  .container {
+  .container--sm {
     max-width: $breakpoint-sm;
   }
 }
 
 @media (min-width: $breakpoint-md) {
-  .container {
+  .container--md {
     max-width: $breakpoint-md;
   }
 }
 
 @media (min-width: $breakpoint-lg) {
-  .container {
+  .container--lg {
     max-width: $breakpoint-lg;
   }
 }
 
 @media (min-width: $breakpoint-xl) {
-  .container {
+  .container--xl {
     max-width: $breakpoint-xl;
   }
 }
 
 @media (min-width: $breakpoint-2xl) {
-  .container {
+  .container--2xl {
     max-width: $breakpoint-2xl;
   }
 }

data/example.html

@@ -1,42 +1,49 @@
-<main class="container">
-  <p>The base type is 1.6rem (16px) over 1.6 line height (24px)</p>
-  <a href="#" class="txt--underline">Anchor</a>
-  <em>Emphasis</em>
-  <small>Small</small>
-  <strong>Strong</strong>
-  <u>Underline</u>
-  <kbd>CTRL+C</kbd>
-  <mark>Highlighted text</mark>
-  <h1>Heading</h1>
-  <h2>Heading</h2>
-  <h3>Heading</h3>
-  <h4>Heading</h4>
-  <h5>Heading</h5>
-  <h6>Heading</h6>
-
-  <button class="btn btn--primary">Button Primary</button>
-  <button class="btn btn--secondary">Button Secondary</button>
-  <button class="btn btn--tertiary">Button Tertiary</button>
-
-  <a href="#" class="btn btn--secondary">Link Button</a>
-
-  <input type="submit" value="Submit Button" class="btn btn--secondary" />
-
-  <details class="u-position-context">
-    <summary class="btn btn--secondary">Popup Button</summary>
-    <div class="popup-menu push-xs--top u-position--right">
-      <ul class="list--unindented u-nowrap flush">
-        <li>Unordered list item 1</li>
-        <li>Unordered list item 2</li>
-        <li>Unordered list item 3</li>
-      </ul>
+<main class="container container--lg" style="background-color: var(--color-bg--surface);">
+  <div class="push-md--bottom">
+    <div class="push-sm--bottom">
+      <p>The base type is 1.6rem (16px) over 1.6 line height (24px)</p>
+      <a href="#" class="txt--underline">Anchor</a>
+      <em>Emphasis</em>
+      <small>Small</small>
+      <strong>Strong</strong>
+      <u>Underline</u>
+      <kbd>CTRL+C</kbd>
+      <mark>Highlighted text</mark>
+    </div>
+
+    <h1>Heading</h1>
+    <h2>Heading</h2>
+    <h3>Heading</h3>
+    <h4>Heading</h4>
+    <h5>Heading</h5>
+    <h6>Heading</h6>
+  </div>
+
+  <div class="push-md--bottom">
+    <div class="push-xs--bottom">
+      <button class="btn btn--primary">Button Primary</button>
+      <button class="btn btn--secondary">Button Secondary</button>
+      <button class="btn btn--tertiary">Button Tertiary</button>
     </div>
-  </details>
 
-  <button class="btn btn--secondary"><span class="btn__icon bx bx-plus"></span> Icon Button</button>
-  <button class="btn btn--secondary btn--small">Small Button</button>
+    <a href="#" class="btn btn--secondary">Link Button</a>
 
-  <hr>
+    <input type="submit" value="Submit Button" class="btn btn--secondary" />
+
+    <details class="u-position-context">
+      <summary class="btn btn--secondary">Dropdown Button</summary>
+      <div class="dropdown push-xs--top u-position--right">
+        <ul class="list--unindented u-nowrap flush">
+          <li>Unordered list item 1</li>
+          <li>Unordered list item 2</li>
+          <li>Unordered list item 3</li>
+        </ul>
+      </div>
+    </details>
+
+    <button class="btn btn--secondary"><span class="btn__icon bx bx-plus"></span> Icon Button</button>
+    <button class="btn btn--secondary btn--small">Small Button</button>
+  </div>
 
   <form class="push-md--bottom">
     <label for="nameField" class="u-display-b txt--bold">Name</label>
@@ -100,9 +107,7 @@
     <input type="submit" value="Send" class="btn btn--primary">
   </form>
 
-  <hr>
-
-  <table>
+  <table class="push-md--bottom">
     <thead>
       <tr>
         <th>Name</th>
@@ -127,54 +132,47 @@
     </tbody>
   </table>
 
+  <div class="push-md--bottom">
+    <ul class="list--unindented">
+      <li>Unordered list item 1</li>
+      <li>Unordered list item 2</li>
+      <li>Unordered list item 3</li>
+    </ul>
+
+    <ol class="list--unindented">
+      <li>Ordered list item 1</li>
+      <li>Ordered list item 2</li>
+      <li>Ordered list item 3</li>
+    </ol>
+
+    <dl>
+      <dd>A description list is perfect for defining terms.</dd>
+      <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
+    </dl>
+  </div>
+
+  <div class="push-md--bottom">
+    <code>.block { color: #9b4dca; }</code>
+  </div>
+
+  <pre><code>.block { color: #9b4dca; }</code></pre>
+
   <blockquote>
     <p class="flush--bottom">Friends don’t spy; true friendship is about privacy, too.</p>
     <cite class="txt--sm">– Stephen King</cite>
   </blockquote>
 
-  <pre><code>.milligram {
-  color: #9b4dca;
-}</code></pre>
-
-  <div class="push-md--bottom">
-    <code>
-    .milligram {
-      color: #9b4dca;
-    }
-    </code>
+  <div>
+    <label for="progress" class="u-display-b txt--bold">Progress</label>
+    <progress id="progress" max="100" value="70">70%</progress>
   </div>
 
-  <div class="push-md--bottom" style="height: 55px;">
+  <div style="height: 55px;">
     <dialog open>
       <form method="dialog">
-        <span>User was successfully created.</span>
+        <span>This is a native dialog with a close button.</span>
         <button type="submit" value="dismiss" class="push-xs--left txt--lg">&times;</button>
       </form>
     </dialog>
   </div>
-
-  <div class="push-md--bottom">
-    <label for="progres" class="u-display-b txt--bold">Progress</label>
-    <progress id="progres" max="100" value="70">70%</progress>
-  </div>
-
-  <hr>
-
-  <ul class="list--unindented">
-    <li>Unordered list item 1</li>
-    <li>Unordered list item 2</li>
-    <li>Unordered list item 3</li>
-  </ul>
-
-  <ol class="list--unindented">
-    <li>Ordered list item 1</li>
-    <li>Ordered list item 2</li>
-    <li>Ordered list item 3</li>
-  </ol>
-
-  <dl>
-    <dt>Description lists</dt>
-    <dd>A description list is perfect for defining terms.</dd>
-    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
-  </dl>
 </main>

data/lib/sass_zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "1.2.0"
+    VERSION = "1.2.1"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sass-zero
 version: !ruby/object:Gem::Version
-  version: 1.2.0
+  version: 1.2.1
 platform: ruby
 authors:
 - lazaronixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-07-07 00:00:00.000000000 Z
+date: 2023-07-09 00:00:00.000000000 Z
 dependencies: []
 description:
 email:
@@ -63,6 +63,7 @@ files:
 - lib/sass_zero.rb
 - lib/sass_zero/version.rb
 - sass-zero.gemspec
+- screenshot.png
 homepage: http://github.com/lazaronixon/sass-zero
 licenses:
 - MIT