sass-zero 1.1.7 → 1.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 114ed05332fe9df3860360aadec6045faaa8e260fe8f67e0c013683929577b01
-  data.tar.gz: 72b2ab1ad8d57e93762ff9e314c0fb3139dcbd7d2fcab8e206a8c48628eea8b4
+  metadata.gz: f7f05e20af5e4a52e6185beed33e25344e260fa78c2f187921b0b7701db2c6b9
+  data.tar.gz: 909717b4652838d63db482582f4e2b77aeb0f48be60f0fda8ad810d190fd53e3
 SHA512:
-  metadata.gz: c1472582db52dba68bf6bde60c1cbe2146ada491d39d83271a3a24f8005e2a60b52e75d01a3bcd9066f89a13b40df228bf95219546173783e5cc1da5f6d96b89
-  data.tar.gz: bfd43f33caa510c7a675acb957c215dc74e3e95339f2da0a4937886bc5296004ae626bed236d428a6c007b5e32b3b0ad21879930b2e49da4a3a39065a16a18d1
+  metadata.gz: 3966527028e6ea03365fd5e38c38528807749acf34a49b48601c5fd36ccdc0aace2f5e1bb4944c61fa76d8d92366e51af8fdf43cc158be99583feb9ac9ac8767
+  data.tar.gz: 62a7f6214a40c498dcbb54908480f09824cb72359566326c18a567ae6d7df11c9527b529ab92c1616d0a2aa368161310468f60c231622bf5a1c0966cd5b3bd84

data/.sass-zero-references.scss

@@ -437,16 +437,6 @@ $row-span-5:    span 5 / span 5;
 $row-span-6:    span 6 / span 6;
 $row-span-full: calc(1 / -1);
 
-$auto-cols-auto: auto;
-$auto-cols-min:  min-content;
-$auto-cols-max:  max-content;
-$auto-cols-fr:   minmax(0, 1fr);
-
-$auto-rows-auto: auto;
-$auto-rows-min:  min-content;
-$auto-rows-max:  max-content;
-$auto-rows-fr:   minmax(0, 1fr);
-
 // *******************************************************************
 // Height
 // *******************************************************************

data/Gemfile.lock

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

data/README.md

@@ -21,29 +21,33 @@ Add these lines to your application.css:
 
 ### Variables
 
+Instead of hand-picking values from a limitless pool any time you need to make a decision, start with a smaller set of options.
+
 #### Essential
 
 - [Border](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_border.scss)
 - [Colors](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_colors.scss)
 - [Effects](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_effects.scss)
-- [Flex](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_flex.scss)
-- [Grid](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_grid.scss)
 - [Height](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_height.scss)
 - [Sizing](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_sizing.scss)
 - [Typography](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_typography.scss)
 - [Width](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_width.scss)
+- [Z-Index](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_zindex.scss)
 
 #### Others
 
 - [Breakpoints](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_breakpoints.scss)
 - [Filters](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_filters.scss)
+- [Flex](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_flex.scss)
+- [Grid](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_grid.scss)
 - [Transform](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_transform.scss)
 - [Transition](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_transition.scss)
-- [Z-Index](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_zindex.scss)
 - [Mixins](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/_mixins.scss)
 
 ### Utility classes
 
+This can be useful for dealing with similar components, and positioning.
+
 - [Align](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_align.scss)
 - [Animation](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_animation.scss)
 - [Border](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_border.scss)
@@ -61,10 +65,10 @@ Add these lines to your application.css:
 
 ## Breadboard
 
-This is an optional black-and-white 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
@@ -92,6 +96,11 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
 ```
 
 ```html
+<div class="block">
+  <div class="block__element_one" />
+  <div class="block__element_two" />
+</div>
+
 <div class="block block--modifier">
   <div class="block__element_one" />
   <div class="block__element_two" />
@@ -115,16 +124,17 @@ 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 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
 
-Instead of using the default variables you can add or change variables, I recommend you make a copy of `_variables.scss` to your application and change it as you want.
+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.
 
 ```scss
 @import "sass-zero/variables/border";
@@ -133,6 +143,10 @@ Instead of using the default variables you can add or change variables, I recomm
 ...
 ```
 
+## 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/app/assets/stylesheets/sass-zero/variables/_breakpoints.scss

@@ -3,8 +3,8 @@
 // Five breakpoints inspired by common device resolutions.
 // @media (min-width: $breakpoint-md) {   }
 // *******************************************************************
-$breakpoint-sm:  640px;
-$breakpoint-md:  768px;
-$breakpoint-lg:  1024px;
-$breakpoint-xl:  1280px;
-$breakpoint-2xl: 1536px;
+$breakpoint-sm:  640px  !default;
+$breakpoint-md:  768px  !default;
+$breakpoint-lg:  1024px !default;
+$breakpoint-xl:  1280px !default;
+$breakpoint-2xl: 1536px !default;

data/app/assets/stylesheets/sass-zero/variables/_grid.scss

@@ -63,23 +63,3 @@ $row-span-4:    span 4 / span 4;
 $row-span-5:    span 5 / span 5;
 $row-span-6:    span 6 / span 6;
 $row-span-full: calc(1 / -1);
-
-// *******************************************************************
-// Grid Auto Columns
-// Variables for controlling the size of implicitly-created grid columns.
-// grid-auto-columns: $auto-cols-auto;
-// *******************************************************************
-$auto-cols-auto: auto;
-$auto-cols-min:  min-content;
-$auto-cols-max:  max-content;
-$auto-cols-fr:   minmax(0, 1fr);
-
-// *******************************************************************
-// Grid Auto Rows
-// Variables for controlling the size of implicitly-created grid rows.
-// grid-auto-rows: $auto-rows-auto;
-// *******************************************************************
-$auto-rows-auto: auto;
-$auto-rows-min:  min-content;
-$auto-rows-max:  max-content;
-$auto-rows-fr:   minmax(0, 1fr);

data/app/assets/stylesheets/sass-zero/variables/_typography.scss

@@ -3,9 +3,9 @@
 // Variables for controlling the font family of an element.
 // font-family: $font-sans;
 // *******************************************************************
-$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";
-$font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-$font-mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+$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" !default;
+$font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !default;
+$font-mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 
 // *******************************************************************
 // Font Size

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.1.7"
+    VERSION = "1.2.1"
   end
 end

data/sass-zero.gemspec

@@ -5,7 +5,7 @@ Gem::Specification.new do |spec|
   spec.version       = Sass::Zero::VERSION
   spec.authors       = ["lazaronixon"]
   spec.email         = ["lazaronixon@hotmail.com"]
-  spec.summary       = "A CSS framework for rapid UI development based on tailwindcss, miligram and BEM."
+  spec.summary       = "A CSS framework for custom UI development."
   spec.homepage      = "http://github.com/lazaronixon/sass-zero"
   spec.license       = "MIT"
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sass-zero
 version: !ruby/object:Gem::Version
-  version: 1.1.7
+  version: 1.2.1
 platform: ruby
 authors:
 - lazaronixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-07-05 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
@@ -85,6 +86,5 @@ requirements: []
 rubygems_version: 3.3.7
 signing_key:
 specification_version: 4
-summary: A CSS framework for rapid UI development based on tailwindcss, miligram and
-  BEM.
+summary: A CSS framework for custom UI development.
 test_files: []