not-breakpoints and hover

luismidevmx · Apr 24, 2021 · 409af97 · 409af97
1 parent 98e76cc
commit 409af97
Show file tree

Hide file tree

Showing 16 changed files with 490 additions and 82 deletions.
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,3 @@
+node_modules
+docs
+examples
diff --git a/README.md b/README.md
@@ -42,11 +42,20 @@ this do not provide prefixes, because nib and postcss are written for make it
 
 ## Get started
 
+### Install
 ```
 npm i -D stylus-kit
 ```
 
-import the plugin for the compiler
+### import the plugin for the compiler
+
+#### using terminal
+
+```
+npx stylus index.styl -u node_modules/stylus-kit
+```
+
+#### Javascript
 
 ```js
 const stylus = require('stylus')
@@ -58,6 +67,19 @@ stylus(readFileSync('./index.styl', 'utf-8'), {
 }).render(console.error, console.log)
 ```
 
+#### Webpack
+
+```js
+{
+  loader: 'stylus-loader',
+  options: {
+    stylusOptions: {
+      use: ['stylus-kit']
+    }
+  }
+}
+```
+
 add the library in your index.styl
 
 ```stylus

diff --git a/docs/breakpoints.md b/docs/breakpoints.md
@@ -2,7 +2,7 @@
 
 # Breakpoints
 
-They are the bootstrap names, defined with 300px's intervals.
+They are the bootstrap names, defined with 500px's intervals.
 
 You can use bootstrap values also, see ()
 
@@ -25,12 +25,12 @@ yields
 .responsive-color {
   color: #2d88ff;
 }
-@media screen and (min-width: 300px) {
+@media screen and (min-width: 500px) {
   .responsive-color {
     color: #1da1f2;
   }
 }
-@media screen and (min-width: 600px) {
+@media screen and (min-width: 700px) {
   .responsive-color {
     color: #f90;
   }
@@ -40,13 +40,32 @@ yields
     color: #78c257;
   }
 }
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 1100px) {
   .responsive-color {
     color: #ff5a5f;
   }
 }
 ```
 
+### changing to max-width
+
+you only need to prefix them with `not-`
+
+```stylus
+.responsive-color
+  not-sm color twitter
+```
+
+yields
+
+```css
+@media screen and (max-width: 500px) {
+  .responsive-color {
+    color: #1da1f2;
+  }
+}
+```
+
 ### font-size
 
 if you will modify the font-size to control em and rem units, you can pass only the font-size
@@ -66,7 +85,7 @@ yields
 body {
   font-size: 12px;
 }
-@media screen and (min-width: 600px) {
+@media screen and (min-width: 700px) {
   body {
     font-size: 14px;
   }
@@ -76,7 +95,7 @@ body {
     font-size: 16px;
   }
 }
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 1100px) {
   body {
     font-size: 18px;
   }
@@ -110,7 +129,7 @@ yields
   background: #405de6;
   color: #5b51d8;
 }
-@media screen and (min-width: 600px) {
+@media screen and (min-width: 700px) {
   .responsive-color {
     background: #c13584;
     color: #f56040;
@@ -138,19 +157,19 @@ yields
                     'foo bar' auto \/\
                      2fr 1fr
 
-  // another mixins
+  // other mixins
   xl inset 25px
 ```
 
 yields
 
 ```css
-@media screen and (min-width: 300px) {
+@media screen and (min-width: 500px) {
   .awesome-grid {
     display: none;
   }
 }
-@media screen and (min-width: 600px) {
+@media screen and (min-width: 700px) {
   .awesome-grid {
     background: url('/my/path.jpg') no-repeat cover center center fixed;
   }
@@ -160,7 +179,7 @@ yields
     grid-template: 'faz faz' 60px 'foo bar' auto/2fr 1fr;
   }
 }
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 1100px) {
   .awesome-grid {
     top: 25px;
     left: 25px;
@@ -172,13 +191,15 @@ yields
 
 ```stylus
 measures.breakpoints.sm
-// => 300px
+// => 500px
 measures.breakpoints.md
-// => 600px
+// => 700px
 measures.breakpoints.lg
 // => 900px
 measures.breakpoints.xl
-// => 1200px
+// => 1100px
+measures.breakpoints.xxl
+// => 1400px
 ```
 
 ### redifining them
@@ -187,7 +208,7 @@ stylus-kit includes the file with bootstrap measures
 
 ```stylus
 measures = yaml('stylus-kit/yml/measures.bootstrap.yml', { hash: true })
-// => { "breakpoints": { "sm": 576px, "md": 768px, "lg": 992px, "xl": 1200px } }
+// => { "breakpoints": { "sm": 576px, "md": 768px, "lg": 992px, "xl": 1100px } }
 ```
 
 or define your own ones

diff --git a/docs/colors.md b/docs/colors.md
@@ -42,6 +42,10 @@ available:
 `airbnb`, `airbnb-rausch`, `airbnb`, `airbnb-babu`, `airbnb-arches`, `airbnb-hof`,
 `airbnb-foggy`, `amazon`, `android`, `angular`, `angular-red`, `angular-dark`, `apple`
 
+### D
+
+`discord`
+
 ### F
 
 `facebook`, `facebook-old`, `facebook-grey`
@@ -80,8 +84,8 @@ available:
 
 ### T
 
-`twitter`, `twitter-black`, `twitter-gray`, `twitter-light-gray`, `twitter-extra-light-gray`,
-`twitter-extra-extra-light-gray`
+`telegram`, `twitter`, `twitter-black`, `twitter-gray`, `twitter-light-gray`,
+`twitter-extra-light-gray`, `twitter-extra-extra-light-gray`
 
 ### V
 

diff --git a/examples/index.styl b/examples/index.styl
@@ -1,19 +1,27 @@
 @require stylus-kit
-
-.faz
-  grid-template-columns map(1..5, @(a){ (a)fr })
-
-.foo
-  odd-numbers filter(1..10, @(a){ a % 2 })
-
-.bar
-  z-index reduce(1..5, @(a, b){ '%s%s' % (a b) })
-  background-color facebook
 
-.faz
-  some-lists concat(1..9, range(10, 100, 10), range(100, 1001, 100))
+f(str)
+  warn('nueva func')
+  ans = split('{', str)
+  ans = map(ans, @(x){split('}', x)})
+  ans = map(ans, @(x){
+    p('.............')
+    p(x)
+
+    x0 = lookup(x[0])
+
+    p(x[0])
+
+    x
+  })
+  p(ans)
+  ans
 
-my-hash = yaml('stylus-kit/yml/measures.bootstrap.yml', { hash: true })
-// zip(('width' 'height' 'color'), (4em 5em cyan))
+padd = 1rem
+padd2 = padd * 2
 
-p(my-hash.breakpoints)
+div
+  padding padd2
+  height calc(100vw - 4em + 3px)
+  width 'calc(50% - %s)' % padd2
+  --str f('padd vale {padd} y padd2 vale {padd2}')