sass-zero 1.1.6 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4fe9da1ccaf5fbc04d1681efbe93e41526f727adc32be83ebb1682f8fd4df961
-  data.tar.gz: d7aded8f5516caa5ae57c307f755630d591d4c5f33a85308710d382a9848e376
+  metadata.gz: ba90537c1863378335ab5d75f4bbec2b40cadfbfe9a411ef8e9eecea7cd61b05
+  data.tar.gz: 60bd88b0235a72815efabf572dcd74e84d80e89e76cf62d8c11b22a9745aeee7
 SHA512:
-  metadata.gz: a6ecefd8d3c7ac214b0afe5ef25171a703e704fe8480c3be010ec681cde5003d43c7fe4e7e849ee5650b389307dbb381e7d8e2225f2cbf89f4865aa8c66063a6
-  data.tar.gz: a79e1322722d6bfe2fe3b91b16e24c500f4a00297e42607011f2257250b0e07c55b04abc2851ce443d2b2a6f95862e48300e180ae386553ed222ba6f26ad0b6a
+  metadata.gz: aa3f62f922ef34285d8e76a20dd36ee5b5efedcda713bed5fce70781fc3e7007adc1ba32bdd487285ea09ae602c6691edb1d1338f01dfcb82b8cd66f597e6611
+  data.tar.gz: 9f72e0f2ef60bccdf82009276a423ede2c88be2ba3a9e238a05060bd82e47c8e168a382977230644f7616c125ddd6145913cc967b9f738407034db0f1bcabdb9

data/.sass-zero-references.scss

@@ -1,5 +1,5 @@
 // *******************************************************************
-// borders.scss
+// Borders
 // *******************************************************************
 
 $rounded-none: 0;
@@ -19,7 +19,7 @@ $border-4: 4px;
 $border-8: 8px;
 
 // *******************************************************************
-// breakpoints.scss
+// Breakpoints
 // *******************************************************************
 
 $breakpoint-sm:  640px;
@@ -29,7 +29,7 @@ $breakpoint-xl:  1280px;
 $breakpoint-2xl: 1536px;
 
 // *******************************************************************
-// colors.scss
+// Colors
 // *******************************************************************
 
 $transparent: transparent;
@@ -281,7 +281,7 @@ $blue-gray-800: #1e293b;
 $blue-gray-900: #0f172a;
 
 // *******************************************************************
-// effects.scss
+// Effects
 // *******************************************************************
 
 $shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.05);
@@ -310,7 +310,7 @@ $opacity-95:  0.95;
 $opacity-100: 1;
 
 // *******************************************************************
-// filters.scss
+// Filters
 // *******************************************************************
 
 $blur-none: blur(0);
@@ -373,7 +373,7 @@ $sepia-0: sepia(0);
 $sepia:   sepia(100%);
 
 // *******************************************************************
-// flex.scss
+// Flex
 // *******************************************************************
 
 $flex-1:       1 1 0%;   // Allow grow and shrink, ignoring its initial size.
@@ -388,7 +388,7 @@ $flex-shrink-0: 0;
 $flex-shrink:   1;
 
 // *******************************************************************
-// grid.scss
+// Grid
 // *******************************************************************
 
 $grid-cols-1:    repeat(1, minmax(0, 1fr));
@@ -437,18 +437,8 @@ $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.scss
+// Height
 // *******************************************************************
 
 $h-auto:   auto;
@@ -487,7 +477,7 @@ $max-h-max:    max-content;
 $max-h-fit:    fit-content;
 
 // *******************************************************************
-// sizing.scss
+// Sizing
 // *******************************************************************
 
 $size-px: 1px;
@@ -523,7 +513,7 @@ $size-80: 20rem;
 $size-96: 24rem;
 
 // *******************************************************************
-// transform.scss
+// Transform
 // *******************************************************************
 
 $scale-0:   0;
@@ -563,7 +553,7 @@ $skew-6:  6deg;
 $skew-12: 12deg;
 
 // *******************************************************************
-// transition.scss
+// Transition
 // *******************************************************************
 
 $transition-none:      none;
@@ -598,7 +588,7 @@ $ease-out:    cubic-bezier(0, 0, 0.2, 1);
 $ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
 
 // *******************************************************************
-// typography.scss
+// Typography
 // *******************************************************************
 
 $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;
 $tracking-widest:  0.1em;
 
 // *******************************************************************
-// width.scss
+// Width
 // *******************************************************************
 
 $w-auto:   auto;
@@ -713,7 +703,7 @@ $max-w-max:  max-content;
 $max-w-fit:  fit-content;
 
 // *******************************************************************
-// zindex.scss
+// Zindex
 // *******************************************************************
 
 $z-auto: auto;
@@ -725,7 +715,7 @@ $z-40:   40;
 $z-50:   50;
 
 // *******************************************************************
-// mixins.scss
+// Mixins
 // *******************************************************************
 
 @mixin antialiased {}

data/Gemfile.lock

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

data/README.md

@@ -21,77 +21,89 @@ 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)
+- [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)
+- [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)
-- [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)
+- [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)
+- [Mixins](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/_mixins.scss)
 
 ### Utility classes
 
-- [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)
-- [Container](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/container.scss)
-- [Flex Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/flex.scss)
-- [Layout Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/layout.scss)
-- [List Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/list.scss)
-- [Margin Pull](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/pull.scss)
-- [Margin Push](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/push.scss)
-- [Margin Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/flush.scss)
-- [Padding](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/pad.scss)
-- [Padding Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/unpad.scss)
-- [Position Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/position.scss)
-- [Text Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/text.scss)
-
-### Breadboard
-
-- [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/breadboard.scss)
-- [Example](https://github.com/lazaronixon/sass-zero/blob/master/example.html)
+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)
+- [Container](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_container.scss)
+- [Flex Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_flex.scss)
+- [Layout Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_layout.scss)
+- [List Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_list.scss)
+- [Margin Pull](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_pull.scss)
+- [Margin Push](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_push.scss)
+- [Margin Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_flush.scss)
+- [Padding](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_pad.scss)
+- [Padding Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_unpad.scss)
+- [Position Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_position.scss)
+- [Text Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_text.scss)
 
 ## Breadboard
 
-This is an optional black-and-white theme that you can use as design foundation.
+This is an optional grayscale theme that you can use as design foundation.
 
-![screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/sass-zero-screenshot-3.png)
+- [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)
+- [Example](https://github.com/lazaronixon/sass-zero/blob/master/example.html)
 
 ## Using variables
 
-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):
+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):
 
 ```scss
 @import "sass-zero/variables";
 
 .block {
-  color: $red-300;
+  color: $rose-500;
+
+  &__element_one {
+    color: $fuchsia-500;
+  }
 
-  &__element {
-    color: $red-400;
+  &__element_two {
+    color: $purple-500;
   }
 
   &--modifier {
-    color: $red-500;
+    color: $violet-500;
   }
 }
 ```
 
 ```html
+<div class="block">
+  <div class="block__element_one" />
+  <div class="block__element_two" />
+</div>
+
 <div class="block block--modifier">
-  <div class="block__element" />
+  <div class="block__element_one" />
+  <div class="block__element_two" />
 </div>
 ```
 
@@ -102,10 +114,34 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
 1. Copy `.sass-zero-references.scss` to the root of your application.
 2. Install [SCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss).
 
-### Atom/TextMate
+### Pulsar/TextMate
 
 1. Copy `.sass-zero-references.scss` to the root of your application.
 
+## Customization
+
+### Breadboard
+
+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:
+
+```css
+*= require sass-zero/base
+*= require sass-zero/utilities
+```
+
+### Variables
+
+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";
+@import "sass-zero/variables/breakpoints";
+@import "design-system/colors";
+...
+```
+
 ## 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/{mixins.scss → _mixins.scss}

@@ -1,7 +1,4 @@
-@import "variables/border";
-@import "variables/effects";
 @import "variables/sizing";
-@import "variables/zindex";
 
 @mixin antialiased {
   -webkit-font-smoothing: antialiased;
@@ -39,7 +36,7 @@
   padding-right: $padding-x;
   padding-left: $padding-x;
   margin-right: auto;
-  margin-left:  auto;
+  margin-left: auto;
 }
 
 @mixin gradient($direction, $from, $to: transparent, $via: null) {