sass-zero 0.0.15 → 0.0.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 47d35302ba2723cb777011a6bfa1c894bdafaf377a61c7e7d4af315a1f21a0f2
-  data.tar.gz: d54d3f3eee2afb89cab063c746e895c9ba58bdf0398e48c161fc09fccb42a3ca
+  metadata.gz: 8c28fb1cfc92cea251c2e6c5ca5f45057744151bff8d0e20e9931d3ee7dd325d
+  data.tar.gz: b42892bb9448cf55e25e14eceefd5c6ccc629b15bdb91d06a075722e4a3df81e
 SHA512:
-  metadata.gz: '09f602335ec3c316cc335888f6509a08bb252f859fbd23b2549d3ace7349a925e7a79f0760991e416da9f26fc483f0c27afb1402dd2b9251380ee2e9e5cf26f4'
-  data.tar.gz: 30833cac34f6c06e55d00d00635f5a5d0740a41212e6613fcc85a63178327e8b305decc2fc7be1cf622a94cdd9c533743eb387ffcae261aadc8eea18123926ba
+  metadata.gz: 3db2f05373c83d233c362e399e717f089e7517ed2a8c1e6274a5606043865aa3039e071b795154d45619b737f5c950150de041fe9a27c615dd5ce644d92be5d2
+  data.tar.gz: b0d676cd0a8f8610ad4d47ffb4c4928a43aa296c422c3c68dd7a2bcb4333d0b325ee1664f59146ee465fcf5d91c97903b05cbfe12c8a89a3fde8d61b39f31b5d

data/README.md

@@ -2,11 +2,7 @@
 
 SASS-ZERO is a css framework that brings concepts from [tailwindcss](https://tailwindcss.com) and [milligram](https://milligram.io) but with ideas from [BEM](http://getbem.com/naming), [Refactoring UI](https://refactoringui.com/book) and [Shape UP](https://basecamp.com/shapeup).
 
-### Tailwindcss
-
-"Instead of hand-picking values from a limitless pool any time you need to make a decision, start with a smaller set of options." - [Refactoring UI](https://refactoringui.com/book).
-
-SASS-ZERO use font, color, spacing, border and etc from [tailwindcss](https://tailwindcss.com) but instead the utility-first approach we use [sass variables](https://sass-lang.com/documentation/variables).
+![screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/Screenshot_2020-02-26+Routeend.png)
 
 ### Milligram
 
@@ -14,32 +10,53 @@ SASS-ZERO use font, color, spacing, border and etc from [tailwindcss](https://ta
 
 SASS-ZERO comes with a basic grayscale theme that help you to bring your ideas to life, questions about font, color, spacing and layout can be resolved after the raw affordances.
 
+### Tailwindcss
+
+"Instead of hand-picking values from a limitless pool any time you need to make a decision, start with a smaller set of options." - [Refactoring UI](https://refactoringui.com/book).
+
+SASS-ZERO use font, color, spacing, border and etc from [tailwindcss](https://tailwindcss.com) but instead the utility-first approach we use [sass variables](https://sass-lang.com/documentation/variables).
+
 ### BEM
 
 I believe that html is code, therefore it should be named and scoped as well. Developers need to be good with naming things, css is another oportunity to practice.
 
+### Shape UP
+
+SASS-ZERO comes with a implict flow from Shape UP, Find Elemens -> Create Affordance -> Make it Beautiful.
+
 ### Refactoring UI
 
 Developers should be able to produce your own design, [Refactoring UI](https://refactoringui.com/book) is the book for that.
 
-### Shape UP
+### Breadboard Theme
+
+- [Example](https://github.com/lazaronixon/sass-zero/blob/master/Example.html)
+- [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/base/breadboard.scss)
+
+### Variables
+
+- [Border](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/border.scss)
+- [Breakpoint](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/breakpoints.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)
+- [Spacing](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/spacing.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)
+- [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)
 
-SASS-ZERO comes with a implict flow from Shape UP, Find Elemens -> Create Affordance -> Make it Beautiful.
 
 ### Utilities
 
-- [Margin Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/flush.scss)
 - [Margin Push](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/push.scss)
 - [Margin Pull](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/pull.scss)
+- [Margin Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/flush.scss)
 - [Padding Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/unpad.scss)
 - [Text Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/text.scss)
 - [Layout Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/layout.scss)
 
-
-### Breadboard Theme - [Just HTML](https://github.com/lazaronixon/sass-zero/blob/master/Example.html)
-
-![screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/Screenshot_2020-02-18+Routeend.png)
-
 ## Installation
 
 Add this to your application's Gemfile:
@@ -64,36 +81,28 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
 @import "sass-zero/variables";
 @import "sass-zero/mixins";
 
-// Block
-.block { color: $red-300; }
-
-// Element
-.block__elem { color: $red-400; }
+.block {
+  color: $red-300;
 
-// Modifier
-.block--mod .block__elem { color: $red-200; }
-
-.block__elem--mod { color: $red-500; }
+  &__elem {
+    color: $red-400;
+  }
 
+  &--mod {
+    color: $red-500;
+  }
+}
 ```
 
 ## References
 
-[SASS](https://sass-lang.com)
-
-[Tailwindcss](https://tailwindcss.com)
-
-[Milligram](https://milligram.io)
-
-[BEM](http://getbem.com/naming)
-
-[Refactoring UI](https://refactoringui.com/book)
-
-[Shape UP](https://basecamp.com/shapeup)
-
-[Zondicons](http://www.zondicons.com)
-
-[Inline SVG](https://github.com/jamesmartin/inline_svg)
+- [SASS](https://sass-lang.com)
+- [Tailwindcss](https://tailwindcss.com)
+- [Milligram](https://milligram.io)
+- [BEM](http://getbem.com/naming)
+- [Refactoring UI](https://refactoringui.com/book)
+- [Shape UP](https://basecamp.com/shapeup)
+- [Hero Icons](https://github.com/refactoringui/heroicons)
 
 ## License
 

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

@@ -1,11 +1,11 @@
 @import "sass-zero/variables";
 @import "sass-zero/mixins";
 
-$breadboard-primary:           $gray-900;
-$breadboard-color:             $gray-700;
-$breadboard-border:            $gray-400;
-$breadboard-border-control:    $gray-300;
-$breadboard-background:        $gray-200;
+$breadboard-primary:        $gray-900;
+$breadboard-color:          $gray-700;
+$breadboard-border:         $gray-400;
+$breadboard-border-control: $gray-300;
+$breadboard-background:     $gray-200;
 
 html {
   background-color: $white;
@@ -50,30 +50,30 @@ input[type='submit'] {
 }
 
 .btn {
-  &--primary {
+  &.btn--primary {
     background-color: $breadboard-primary;
     border-color: $breadboard-primary;
     color: $white;
   }
 
-  &--secondary {
+  &.btn--secondary {
     background-color: $white;
     border-color: $breadboard-primary;
   }
 
-  &--tertiary {
+  &.btn--tertiary {
     background-color: transparent;
     border-color: transparent;
   }
 
-  &--with-icon {
+  &.btn--with-icon {
     padding-left: $size-8;
     background-position: $size-2 center;
     background-repeat: no-repeat;
     background-size: $size-5 auto;
   }
 
-  &--small {
+  &.btn--small {
     font-size: $text-sm;
     padding-top:  0.35rem;
     padding-bottom: 0.35rem;
@@ -135,6 +135,7 @@ select {
 
   &:focus {
     border-color: $breadboard-color;
+    outline: 0;
   }
 }
 

data/lib/sass/zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "0.0.15"
+    VERSION = "0.0.16"
   end
 end

data/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sass-zero",
-	"version": "0.0.15",
+	"version": "0.0.16",
 	"description": "A CSS framework for rapid UI development based on tailwindcss, miligram and BEM.",
 	"homepage": "https://github.com/lazaronixon/sass-zero",
 	"repository": "lazaronixon/sass-zero",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sass-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.15
+  version: 0.0.16
 platform: ruby
 authors:
 - lazaronixon
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-02-26 00:00:00.000000000 Z
+date: 2020-02-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: autoprefixer-rails