@bernatfortet/global-styles

Global Styles for styled-components

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
011May 10, 2021Aug 7, 2018Minified + gzip package size for @bernatfortet/global-styles in KB

Readme

Terminology

  • styleName => referrs to Style Property names width, height, color, fontSize, etc...
  • propKey => Referrs to the JSX property that gets passed down. w, h, sz, fs, bg
  • propKey can return a keyArray like sz => [w, h]
  • propValues can be of:
    • type number w={200}
    • type string h='auto'
    • type array maxw={[200, 500]}
    • type object fs={{ sm:200, lg: 400 }}

Thoughts

// size sets width: 200, height 200, // w: overrides width with media queries?

// media queries // start with large in web or start with smallest up to 578? // the most common way of defining responsivness stuff is to start with the samllest size, mobile // but I still want to define web // 2 ways to go about it // w={100} = default / no media query / xlg // w={[200, 400]} sm, and md sizes // I think overrides are nice // w={[200, 400]} => first is default, afterwards it starts from the bottom?

/*

given sz:200, w={50} w:[100, 200] For that i need is to parse each prop sz is keyArray gives me

{width: 200px } {height: 200px }

NEXT w is value array { width: 50 } { media-query:...: { width:100px }} { media-query:...: { width:200px }} { media-query:...: { maxHeight:100px }} { media-query:...: { maxHeight:200px }}

media queries will be combined, inside objects will merged

*/

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.