acstll / deprecated-css Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 42 KB

Highly opinionated atomic CSS toolkit

JavaScript 0.75% CSS 99.25%

deprecated-css's People

Contributors

Watchers

deprecated-css's Issues

Move `measure` to size.css

How about we generate this sh*t

{
  "breakpoints": [
    "40em",
    "60em",
    "85em"
  ],
  "sizes": [
    0.7,
    0.8,
    1.2,
    1.8,
    2.4,
    3.2
  ],
  "leading": [
    "calc(20 / 14)",
    "calc(24 / 16)",
    "calc(32 / 24)",
    "calc(36 / 36)",
    "calc(52 / 48)",
    "calc(75 / 64)"
  ],
  "tracking": [
    "-0.025em",
    "0.033em"
  ],
  "spacing": [
    0.5,
    1,
    1.5,
    2,
    6,
    8,
    10,
    13,
    15
  ],
  "colors": [
    "#0C0C0C",
    "#FFFFFF",
    "#AAAAAA"
  ],
  "alpha": [
    "",
    [1, 2, 3, 4]
  ],
  "time": [
    100,
    300,
    600,
    900
  ],
  "delay": [

  ],
  "aspect-ratio": {
    "square": "1 / 1",
    "landscape": "16 / 9",
    "portrait": "9 / 16"
  },
  "measure": {
    "default": "",
    "narrow": "",
    "wide": ""
  },
  "containers": {
    "default": "60rem"
  },
  "transitions": {},
  "widths": {

  },
  "heights": {

  },
  "settings": {
    "modules": {
      "objeft-fit": true
    },
    "helpers": true,
    "columns": 12
  }
}

Add degit.json file

It was nice just cloning this…

[
    {
        "action": "remove",
        "files": [".gitignore", "README.md", "package.json"]
    }
]

Usage instructions could be:

Clone repo with npx degit acstll/deprecated-css styles
Move postcss.config.js to wherever works for you
Install postcss plugins if needed

npm i -D postcss-preset-env postcss-import postcss-calc postcss-object-fit-images cssnano

Write some more documentation

list of classes > CSS
class naming conventions
justify design decisions (why -md at the end, etc.?)

Add full unit to `v`s, as in max-h-100v

Sometimes you could mix axis, you could do:

.max-w-100vh { max-width: 100vh; }

Improve flex module

add .nowrap
rename .flex-n to grow-n and make 1, 2 and 3

Think about switching to abbreviated names or having both

Consider changing the h- prefix for helper

h- is being used for height so it can be weird.

Maybe u- for "utility"?

Remove `deprecated-css` from import paths in main.css

`measure-none` instead of `max-w-none`

Improve overflow module

add scroll
put webkit-prefixed in a separate class

px0-* is broken

https://github.com/acstll/deprecated-css/blob/master/modules/spacing.css#L188

Helper to hide input

To keep it focusable https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

.h-hide-input-responsibly {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

Use `ch` units in measure variables

https://github.com/acstll/deprecated-css/blob/master/variables.css#L41-L43

Fix broken .w-n/12

It's missing calc() 😭

Rename `lead-1` to `lead-0`?

Add .list-style-none somewhere, remove list reset

Try and find a way to make base leading (now --lead-3) explicit

Add mt-auto, useful for `flex-direction: column` cases

Revisit setting unitless --ratio

See https://every-layout.dev/rudiments/modular-scale/

I understand Edge's bug is about unitless values inside calc…

acstll / deprecated-css Goto Github PK

deprecated-css's People

Contributors

Watchers

deprecated-css's Issues

Recommend Projects

Recommend Topics

Recommend Org