sass-zero 0.0.7 → 0.0.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ccee9665f00b1ba28fbb1e6df9ceeea1fd2708f5df730e3800e359fa4cca4810
-  data.tar.gz: 196433c044083bdc7f7c59ca29488912b40f193e422cc915c6cb8b0f94eff645
+  metadata.gz: b8631e5b390b1f408efb48fa52a82d827fac519de79196186657a7bb9cb78f89
+  data.tar.gz: c442aed4313df6a9c38eabcc09b91f58aba35b119a642ce8066afc1f2256299a
 SHA512:
-  metadata.gz: e9ff04f0a4f10534e756c6901f3ba8cae1c7f207ee5d3987909594497957c4ab9775b194cbe3e91499dad42f00d630c78d611c838cb1a23c116d9b84e02f2f4d
-  data.tar.gz: 800e4861177112cc2b8383c75239bdeb4f12cfcf74de11747804a71c2946efdb5682eeb2c20fd82efb7ef0b8bf56552ce674f5fe03ce0189bb894d84a8c3fe71
+  metadata.gz: a01828471f62a35179356c6f34778b3da850743a398ed9690e618e59a1f6d2317d5af36a48ba674878d7607364a0a3536e687f987c49543dbf3ed48b114b93d1
+  data.tar.gz: e2a2f7f576a6dae2d3dbea1f048854c577716f0684960587188ec09ff2e2b47ed0b4cb099c984913e62978ceada3e7332cd3f8042dada9637fa4dc12d75ca2da

data/README.md

@@ -1,51 +1,80 @@
-# Sass::Zero
+# SASS-ZERO
 
-Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/sass/zero`. To experiment with that code, run `bin/console` for an interactive prompt.
+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).
 
-TODO: Delete this and the text above, and describe your gem
+### 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).
 
-## Installation
+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).
+
+### Milligram
+"Programmers don’t need a pixel-perfect design to start implementing. All they need are endpoints: input elements, buttons, places where stored data should appear. These affordances are the core of a user interface design." - [Shape UP](https://basecamp.com/shapeup/3.2-chapter-10#affordances-before-pixel-perfect-screens).
+
+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.
+
+### 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.
+
+### Refactoring UI
+Developers should be able to produce your own design, [Refactoring UI](https://refactoringui.com/book) is the book for that.
 
-Add this line to your application's Gemfile:
+### Shape UP
+SASS-ZERO comes with a implict flow from Shape UP, Find Elemens -> Create Affordance -> Make it Beautiful.
 
-Gemfile
+### Breadboard Theme (Just HTML)
+![screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/Screenshot_2020-02-17+Routeend.png)
+
+## Installation
+
+Add this to your application's Gemfile:
 
 ```ruby
 gem 'sass-zero'
 gem 'autoprefixer-rails'
 ```
 
-application.css
+## Usage
+
+Add this line to your application.css:
 
 ```css
  *= require sass-zero/base
 ```
 
-somefile.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";
 @import "sass-zero/mixins";
+
+// Block
+.block { color: $red-300; }
+
+// Element
+.block__elem { color: $red-400; }
+
+
+// Modifier
+.block--mod .block__elem { color: $red-200; }
+
+.block__elem--mod { color: $red-500; }
+
 ```
 
-## Usage
+## References
 
-TODO: Write usage instructions here
+[SASS](https://sass-lang.com)
 
-## Development
+[Tailwindcss](https://tailwindcss.com)
 
-After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake test` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+[Milligram](https://milligram.io)
 
-To install this gem onto your local machine, run `bundle exec rake install`. 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 tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+[BEM](http://getbem.com/naming)
 
-## Contributing
+[Refactoring UI](https://refactoringui.com/book)
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/lazaronixon/sass-zero. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+[Shape UP](https://basecamp.com/shapeup)
 
 ## License
 
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
-
-## Code of Conduct
-
-Everyone interacting in the Sass::Zero project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/[USERNAME]/sass-zero/blob/master/CODE_OF_CONDUCT.md).

data/lib/sass/zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "0.0.7"
+    VERSION = "0.0.8"
   end
 end

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

@@ -7,6 +7,8 @@ $breadboard-300: $gray-300 !default;
 $breadboard-700: $gray-700 !default;
 $breadboard-900: $gray-900 !default;
 
+$breadboard-svg-fill: "%23a0aec0" !default;
+
 html {
   background-color: $breadboard-bg;
   color: $breadboard-700;
@@ -19,7 +21,8 @@ body {
 }
 
 blockquote {
-  border-left: $border-4 solid $breadboard-300;
+  border-color:  $breadboard-300;
+  border-left-width: $border-4;
   padding: $size-3 $size-4;
 
   *:last-child {
@@ -60,7 +63,8 @@ code {
 
 pre {
 	background: $breadboard-200;
-	border-left: $border-4 solid $breadboard-900;
+  border-color: $breadboard-900;
+	border-left-width: $border-4;
 	overflow-y: hidden;
 
 	& > code {
@@ -72,7 +76,8 @@ pre {
 }
 
 hr {
-  border-top: $border solid $breadboard-300;
+  border-color: $breadboard-300;
+  border-top-width: $border;
   margin: $size-4 $size-0;
 }
 
@@ -93,40 +98,75 @@ input:not([type]),
 textarea,
 select {
   appearance: none;
-  background-color: $breadboard-200;
-  border: $border solid $breadboard-200;
+  border-color: $breadboard-300;
   border-radius: $rounded;
+  border-width: $border;
   display: block;
-  line-height: $leading-tight;
-  padding: $size-3 $size-4;
+  padding: $size-2 $size-3;
   width: $size-full;
 
   &:focus {
-    background-color: $breadboard-bg;
-    border-color: $breadboard-300;
-    outline: 0;
+    border-color: $breadboard-700;
   }
 }
 
-select {
-	background: $breadboard-200 url('data:image/svg+xml;utf8,<svg width="16" height="16" style="fill: %23#{str-slice(ie-hex-str($breadboard-700), 4)};" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path></svg>') center right $size-2 no-repeat;
-  padding-right: $size-8;
-}
-
-textarea {
-  min-height: $size-24;
+select:not([multiple]) {
+	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{$breadboard-svg-fill}"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"/></svg>');
+  background-position: right $size-2 center;
+  background-repeat: no-repeat;
+  background-size: $size-6;
+  padding-right: $size-10;
 }
 
 label, legend {
   display: block;
-  font-size: $text-xs;
-  font-weight: $font-bold;
-  letter-spacing: $tracking-wide;
   margin-bottom: $size-1;
 }
 
+input[type='checkbox'],
+input[type='radio'] {
+  appearance: none;
+  background-origin: border-box;
+  border-color: $breadboard-300;
+  border-width: $border;
+  color: $breadboard-900;
+	display: inline-block;
+  margin-bottom: -2.5px;
+  height: $size-4;
+  width: $size-4;
+
+  &:checked {
+    border-color: transparent;
+    background-color: currentColor;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+}
+
+input[type='checkbox'] {
+  border-radius: $rounded;
+
+  &:checked {
+    background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z"/></svg>');
+  }
+}
+
+input[type='radio'] {
+  border-radius: $rounded-full;
+
+  &:checked {
+    background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>');
+  }
+}
+
+.label-inline {
+	display: inline-block;
+	margin-left: $size-1;
+}
+
 a {
 	color: $breadboard-900;
+  cursor: pointer;
   font-weight: $font-medium;
 	text-decoration: underline;
 
@@ -154,7 +194,7 @@ fieldset,
 input,
 select,
 textarea {
-  margin-bottom: $size-3;
+  margin-bottom: $size-4;
 }
 
 blockquote,
@@ -166,7 +206,7 @@ p,
 pre,
 table,
 ul {
-  margin-bottom: $size-4;
+  margin-bottom: $size-6;
 }
 
 table {
@@ -174,7 +214,8 @@ table {
 }
 
 td, th {
-  border-bottom: $border solid $breadboard-300;
+  border-color: $breadboard-300;
+  border-bottom-width: $border;
   padding: $size-2 $size-4;
   text-align: left;
 }

data/vendor/assets/stylesheets/sass-zero/variables/typography.scss

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sass-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.7
+  version: 0.0.8
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-02-17 00:00:00.000000000 Z
+date: 2020-02-19 00:00:00.000000000 Z
 dependencies: []
 description: SASS-ZERO is a CSS framework that provides a basic grayscale theme to
   create raw affordance and after that, you can make it beautiful with our constrained
@@ -21,7 +21,6 @@ extra_rdoc_files: []
 files:
 - ".gitignore"
 - Gemfile
-- Gemfile.lock
 - README.md
 - lib/sass/zero.rb
 - lib/sass/zero/version.rb

data/Gemfile.lock

@@ -1,17 +0,0 @@
-PATH
-  remote: .
-  specs:
-    sass-zero (0.0.1)
-
-GEM
-  remote: https://rubygems.org/
-  specs:
-
-PLATFORMS
-  ruby
-
-DEPENDENCIES
-  sass-zero!
-
-BUNDLED WITH
-   1.17.3