Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/macheteHot/unocss-preset-scalpel
https://github.com/macheteHot/unocss-preset-scalpel
Last synced: 15 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/macheteHot/unocss-preset-scalpel
- Owner: macheteHot
- License: mit
- Created: 2021-12-23T20:52:16.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-04-06T20:47:01.000Z (about 1 year ago)
- Last Synced: 2024-06-04T03:04:03.460Z (24 days ago)
- Language: TypeScript
- Size: 17.4 MB
- Stars: 70
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-stars - macheteHot/unocss-preset-scalpel - (TypeScript)
README
unocss-preset-scalpel
Scalpel Preset for UnoCSS
[
](https://npmjs.com/package/unocss-preset-scalpel)
[
](https://nodejs.org/en/about/releases/)
[
](https://github.com/macheteHot/unocss-preset-scalpel/actions/workflows/ci.yml)
>
## Installation
```sh
npm i unocss-preset-scalpel unocss --save-dev # with npm
yarn add unocss-preset-scalpel unocss -D # with yarn
pnpm add unocss-preset-scalpel unocss -D # with pnpm
```
## Usage
```js
import { defineConfig } from 'unocss'
import { presetScalpel } from 'unocss-preset-scalpel'
export default defineConfig({
presets: [
presetScalpel({
// config
}),
],
})
```
## why Scalpel
Atomic css should scalpel-like precision
use any colors and any unit with number
why we need memorize rules? like tailwind css w-1{width: 0.25rem;}
why 1 mean 0.25 if need 0.25rem just write it ! like w-0.25rem
write atomic css like native css width-0.25rem
this preset usually write like native css, use - concat key value like display-flex
of course we has some shortcuts
## shortcuts
#### native css is sooooo long this preset define some shortcuts
| shortcut | mean | desc |
| :------: | :------------: | :---------------------------- |
| m | margin | |
| p | padding | |
| w | width | |
| h | height | |
| t | top | |
| r | right | |
| b | bottom | |
| l | left | |
| x | left and right | |
| y | top and bottom | |
| m- | Minus sign | negative number in some value |
## special unit
#### there are some special units
| unit | mean | desc |
| :--: | :------: | :------------------------- |
| p | % | percent eq % |
| v | variable | usually used for px to rem |
## important
use end with ! className toggle !important
## pseudo
use pseudo before any className
like this
| pseudo | | | |
| :-----------: | :-----------: | :---------------: | :---------: |
| any-link | blank | checked | current |
| default | defined | disabled | drop |
| empty | enabled | first | first-child |
| first-of-type | fullscreen | future | focus |
| focus-visible | focus-within | host | hover |
| indeterminate | in-range | invalid | active |
| last-child | last-of-type | left | link |
| local-link | only-child | only-of-type | optional |
| out-of-range | past | placeholder-shown | read-only |
| read-write | required | right | root |
| target | target-within | user-invalid | valid |
| visite | scope | | |
```html
hover me to transparent
```
### media query
> use media query before any className and pseudo
>
> > the default media query has sm md lg xl
> > like this
```html
hover me to transparent
```
## Configurations
config object like this
```js
// this is preset default value
{
/**
* define color name
*/
colors:{
red: '#f00',
white: '#fff',
black: '#000',
blue: '#00f',
yellow: '#ff0',
transparent: 'transparent',
// diyColor:'#30336b'
},
/**
* the default unit you can omitted
* like width-1 mean this unit ⬇
*/
unit:'px',
/**
* write you like mediaQuery
*/
mediaQueries:{
sm: 'media (min-width: 640px)',
md: 'media (min-width: 768px)',
lg: 'media (min-width: 1024px)',
xl: 'media (min-width: 1280px)',
// supportGrid: 'supports (display: grid)'
},
// set all css has important
important:false,
// ignore some rules like ['flexBasis']
ignoreRules:[],
// convert unit v
vToAny: {
unit: 'rem', // convert v to rem
rootValue: 16, // value ÷ this
unitPrecision: 5,
minPixelValue: 1,
},
}
```
## How to use
- ### width and height
> support shortcut w h
| Class | Properties |
| :------------- | :-------------- |
| w-0 | width:0; |
| w-20 | width:20px; |
| width-20 | width:20px; |
| w-0.25vh | width:0.25vh |
| width-333.333p | width:333.333% |
| w-3.1415 | width:3.1415% |
| width-100v | width:6.25rem |
| h-0 | height:0; |
| height-20 | height:20px; |
| h-20 | height:20px; |
| height-0.25vh | height:0.25vh |
| h-333.333p | height:333.333% |
| height-3.1415 | height:3.1415% |
| h-100v | height:6.25rem |
- ### min max width and height
> add min- or max- before width or height
> support shortcut w h
| Class | Properties |
| :---------------- | :---------------- |
| min-w-0.25vh | min-width:0.25vh |
| min-width-0.25vh | min-width:0.25vh |
| max-h-0.25vh | max-height:0.25vh |
| max-height-0.25vh | max-height:0.25vh |
- ### square
> use square set same width and height
| Class | Properties |
| :------------ | :------------------------------ |
| square-25 | width:25px;
height:25px; |
| square-0.25vh | width:0.25vh;
height:0.25vh |
- ### margin and padding
> set margin and padding with direction
> this value has negative number
> support shortcut m p m- t r b l x y
| Class | Properties |
| :---------- | :------------------------------------------- |
| m-25 | margin:25px; |
| p-25 | padding:25px; |
| m-m-25 | margin:-25px; |
| p-x-999vh | padding-left:999vh;
padding-right:999vh; |
| m-l-0.25rem | margin-right:0.25rem; |
- ### border
> set border with direction
> use border or border-w or border-width
| Class | Properties |
| :--------------- | :------------------------------------------------- |
| border-1 | border-width:1px |
| border-x-3 | border-left-width:3px;
border-right-width:3px; |
| border-l-0 | border-left-width:0; |
| border-r-1.25rem | border-right-width:1.25rem; |
| border-w-2 | border-width:2px; |
| border-width-0 | border-width:0; |
- ### border-style
> set border-style
> support shortcut border
| Class | Properties |
| :----------------- | :------------------- |
| border-style-solid | border-style:solid; |
| border-dotted | border-style:dotted; |
> enum values
| Value | | |
| :----: | :-----: | :----: |
| none | hidden | dotted |
| dashed | solid | double |
| groove | ridge | inset |
| outset | inherit | - |
- ### border-radius
> set border-radius any number and unit
> use br or border-radius
> support shortcut t l r b tl lt tr rt bl lb br rb
| Class | Properties |
| :---------------- | :--------------------------------------------------------------- |
| br-8 | border-radius:8px; |
| border-radius-15% | border-radius:15%; |
| br-t-50% | border-top-left-radius:50%;
border-top-right-radius:50%; |
| br-l-20 | border-top-left-radius:20px;
border-bottom-left-radius:20px; |
| br-bl-3 | border-bottom-left-radius:3px; |
- ### circle
> set border-radius 50% is static preset
| Class | Properties |
| :----- | :----------------- |
| circle | border-radius:50%; |
- ### box-sizing
> set box-sizing
| Class | Properties |
| :--------------------- | :---------------------- |
| box-sizing-content-box | box-sizing:content-box; |
| box-sizing-border-box | box-sizing:border-box; |
- ### color
> Amazing! we can use all color by hex and set opacity, and you can define color name!
> has special value transparent
> use 3-digit and 6-digit and 8-digit (rgba) hex just copy from design draft like figma!! just copy it !
> color has some shortcut
| Shortcut | Desc |
| :------: | :----------: |
| c | color |
| text | color |
| bg | background |
| border-c | border-color |
| border | border-color |
| Class | Properties |
| :------------------ | :---------------------------------- |
| c-red | color:rgba(255, 0, 0, 1); |
| c-transparent | color:transparent; |
| text-f00-25 | background:rgba(255, 0, 0, 0.25); |
| color-#54a0ff | color:rgba(84, 160, 255, 1); |
| bg-#fffc0140 | background:rgba(255, 252, 1, 0.25); |
| background-10ac84 | background:rgba(16, 172, 132, 1); |
| border-000 | background:rgba(0, 0, 0, 1); |
| border-color-000-15 | background:rgba(0, 0, 0, 0.15); |
- ### cursor
> set cursor value
> rule is cursor-\
| Class | Properties |
| :------------- | :-------------- |
| cursor-pointer | cursor:pointer; |
| cursor-no-drop | cursor:no-drop; |
> enum values
| Value | | |
| :----------: | :---------: | :-----------: |
| auto | default | none |
| context-menu | help | pointer |
| progress | wait | cell |
| crosshair | text | vertical-text |
| alias | copy | move |
| no-drop | not-allowed | e-resize |
| n-resize | ne-resize | nw-resize |
| s-resize | se-resize | sw-resize |
| w-resize | ew-resize | ns-resize |
| nesw-resize | nwse-resize | col-resize |
| row-resize | all-scroll | zoom-in |
| zoom-out | grab | grabbing |
- ### display
> set display value
> rule is display-\ or d-\
| Class | Properties |
| :----------- | :------------- |
| d-table | display:table; |
| display-flex | display:flex; |
> enum values
| Value | | |
| :---------: | :---------: | :----------: |
| unset | revert | initial |
| inherit | list-item | table-row |
| table | contents | none |
| flow-root | inline-grid | grid |
| inline-flex | flex | inline-block |
| inline | block | |
- ### flex-basis
> set flex-basis use nonnegative number and unit or native
| Class | Properties |
| :----------------- | :------------------ |
| flex-basis-1 | flex-basis:1px; |
| flex-basis-3.25rem | flex-basis:3.25rem; |
| flex-basis-auto | flex-basis:auto; |
> enum values
| Value | | |
| :-----: | :-----: | :--: |
| initial | inherit | auto |
- ### flex-direction
> set flex-direction
> support shortcut flex
| Class | Properties |
| :------------------------- | :----------------------------- |
| flex-direction-row | flex-direction;row; |
| flex-direction-row-reverse | flex-direction;row-reverse; |
| flex-column | flex-direction;column; |
| flex-column-reverse | flex-direction;column-reverse; |
> enum values
| Value | | | |
| :---: | :---------: | :----: | :------------: |
| row | row-reverse | column | column-reverse |
- ### flex with justify-content and align-items
> set display flex with justify-content with align-items in one className
> rule is flex-\-\
| shortcut | desc |
| :------- | :------------ |
| between | space-between |
| around | space-around |
| evenly | space-evenly |
> enum values
| justify values | align values |
| :------------: | :----------: |
| center | auto |
| start | center |
| end | end |
| flex-start | flex-end |
| flex-end | flex-start |
| left | inherit |
| right | initial |
| space-between | normal |
| between | self-end |
| space-around | self-start |
| around | start |
| space-evenly | stretch |
| evenly | unset |
| stretch | baseline |
| inherit | |
| initial | |
| unset | |
| normal
| Class | Properties |
| :----------------------- | :------------------------------------------------------------------------- |
| flex-center-center | display:flex;
justify-content:center;
align-items:center; |
| flex-flex-start-flex-end | display:flex;
justify-content:flex-start;
align-items:flex-end; |
| flex-between-center | display:flex;
justify-content:space-between;
align-items:center; |
- ### align-items
> set align-items enum values look ⬆
| Class | Properties |
| :--------------------- | :---------------------- |
| align-items-baseline | align-items:baseline; |
| align-items-center | align-items:center; |
| align-items-end | align-items:end; |
| align-items-flex-start | align-items:flex-start; |
- ### justify-content
> set justify-content enum values look ⬆
| Class | Properties |
| :---------------------- | :----------------------------- |
| justify-content-left | justify-content:left; |
| justify-content-between | justify-content:space-between; |
- ### flex-num
> set sets how a flex item will grow or shrink to fit the space available in its flex container.
> like flex-\ or native value
| Class | Properties |
| :-------- | :--------- |
| flex-0 | flex:0; |
| flex-1 | flex:1; |
| flex-999 | flex:999; |
| flex-auto | flex:auto; |
> support native values
| Value | | |
| :---: | :--: | :--: |
| null | auto | none |
- ### flex-shrink and flex-grow
> set flex-shrink or flex-grow
| Class | Properties |
| :------------------ | :------------------- |
| flex-shrink-20 | flex-shrink:20; |
| flex-grow-5 | flex-grow:5; |
| flex-shrink-initial | flex-shrink:initial; |
> support native values
| Value |
| :-----: |
| initial |
| inherit |
- ### flex-wrap
> set flex-wrap
> support shortcut flex
| Class | Properties |
| :------------- | :-------------- |
| flex-wrap-wrap | flex-wrap:wrap; |
> enum values
| Value |
| :----------: |
| inherit |
| initial |
| nowrap |
| wrap |
| wrap-reverse |
- ### font-size
> set font size
> support shortcut fs
| Class | Properties |
| :------------- | :---------------- |
| font-size-12 | flex-wrap:12px; |
| font-size-5rem | flex-wrap:5rem; |
| fs-0.22vh | flex-wrap:0.22vh; |
- ### font-weight
> set font weight
> support shortcut fw
| Class | Properties |
| :----------------- | :------------------ |
| font-weight-bolder | font-weight:bolder; |
| fw-100 | font-weight:100; |
> enum values
| Value | | |
| :-----: | :-----: | :-----: |
| 100 | 200 | 300 |
| 400 | 500 | 600 |
| 700 | 800 | 000 |
| bold | bolder | inherit |
| initial | lighter | normal |
| unset | | |
- ### gap
> set column-gap and row-gap in one className
| Class | Properties |
| :--------- | :------------------------------------- |
| gap-0 | column-gap:0;
row-gap:0; |
| gap-25.5p | column-gap:25.5%;
row-gap:25.5%; |
| gap-15% | column-gap:15%;
row-gap:15%; |
| gap-normal | column-gap:normal;
row-gap:normal; |
> enum values
| Value |
| :-----: |
| unset |
| initial |
| inherit |
| normal |
- ### column-gap
> set column-gap with any number unit or native value
> support shortcut c-gap
| Class | Properties |
| :---------------- | :------------------ |
| column-gap-normal | column-gap:normal; |
| c-gap-0.25cm | column-gap:0.25cm; |
| c-gap-99999 | column-gap:99999px; |
> enum values same [gap](#gap) ⬆️
- ### row-gap
> set row-gap with any number unit or native value
> support shortcut r-gap
> support native value is unset initial inherit normal
| Class | Properties |
| :------------- | :--------------- |
| r-gap-normal | row-gap:normal; |
| row-gap-0.25cm | row-gap:0.25cm; |
| r-gap-99999 | row-gap:99999px; |
> enum values same [gap](#gap) ⬆️
- ### letter-spacing
> set letter spacing use any number and unit
> this value has negative number
| Class | Properties |
| :------------------------- | :------------------------ |
| letter-spacing-3.1415rem | letter-spacing:3.1415rem |
| letter-spacing-m-3.1415rem | letter-spacing:-3.1415rem |
| letter-spacing-9999px | letter-spacing:9999px |
- ### line-height
> set line height use nonnegative number and any unit
> support shortcut lh
| Class | Properties |
| :------------- | :------------------- |
| lh-0.25rem | line-height:0.25rem; |
| line-height-20 | line-height:20px; |
- ### object-fit
> set object file
| Class | Properties |
| :----------------- | :------------------ |
| object-fit-fill | object-fit:fill; |
| object-fit-contain | object-fit:contain; |
> enum values
| Value | | |
| :-----: | :--------: | :-----: |
| fill | contain | cover |
| none | scale-down | inherit |
| initial | revert | unset |
- ### opacity
> set opacity (1 to 100 ) ÷ 100
| Class | Properties |
| :--------- | :----------- |
| opacity-20 | opacity:0.2 |
| opacity-55 | opacity:0.55 |
- ### orientation
> set orientation with any number any unit
> this value has negative number use -m
> support shortcut t r b l -m
| Class | Properties |
| :------------- | :--------------- |
| t-20 | top:20px; |
| bottom-3.14rem | bottom:3.14rem; |
| b-m-3.14rem | bottom:-3.14rem; |
| r-m-60vh | right:-60vh; |
- ### overflow
> set overflow-x or overflow-y
| Class | Properties |
| :---------------- | :----------------- |
| overflow-x-scroll | overflow-x:scroll; |
| overflow-y-auto | overflow-y:auto; |
> enum values
| Value |
| :-----: |
| hidden |
| auto |
| visible |
| scroll |
| inherit |
- ### position
> set position
| Class | Properties |
| :---------------- | :----------------- |
| position-sticky | position:sticky; |
| position-absolute | position:absolute; |
| position-fixed | position:fixed; |
> enum values
| Value | | |
| :-----: | :------: | :----: |
| static | relative | sticky |
| unset | absolute | fixed |
| inherit | initial | - |
- ### text-align
> set text-align
> support shortcut text
| Class | Properties |
| :----------------- | :------------------ |
| text-center | text-align:center; |
| text-align-justify | text-align:justify; |
> enum values
| Value | | |
| :----------: | :----: | :-----: |
| start | end | left |
| right | center | justify |
| match-parent | - | - |
- ### text-align-last
> set text-align-last
> support shortcut text-last
| Class | Properties |
| :-------------------- | :---------------------- |
| text-last-center | text-align-last:center; |
| text-align-last-start | text-align-last:start; |
> enum values
| Value | | |
| :----: | :-----: | :-----: |
| auto | left | right |
| center | justify | start |
| end | initial | inherit |
- ### text-decoration
> set text-decoration
> support shortcut text
| Class | Properties |
| :----------------------- | :------------------------- |
| text-underline | text-decoration:underline; |
| text-decoration-overline | text-decoration:overline; |
> enum values
| Value | | |
| :----------: | :-------: | :------: |
| none | underline | overline |
| line-through | blink | inherit |
- ### text-ellipsis
> set ellipsis support multiline
> support shortcut ellipsis
| Class | Properties |
| :-------------- | :----------------------------------------------------------------------------------------------------------------------------------- |
| ellipsis | overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap |
| ellipsis-2 | overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:2;-webkit-box-orient: vertical; |
| text-ellipsis-5 | overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:5;-webkit-box-orient: vertical; |
- ### user-select
> set user-select
> support shortcut select
| Class | Properties |
| :---------- | :----------- |
| select-auto | select:auto; |
| select-none | select:none; |
> enum values
| Value | | |
| :---: | :-----: | :-----: |
| none | auto | text |
| all | contain | element |
- ### visibility
> set visibility
| Class | Properties |
| :----------------- | :------------------ |
| visibility-visible | visibility:visible; |
| visibility-hidden | visibility:hidden; |
> enum values
| Value | | |
| :-----: | :-----: | :------: |
| visible | hidden | collapse |
| inherit | initial | revert |
| unset | - | - |
- ### word-break
> set word-break
| Class | Properties |
| :------------------- | :-------------------- |
| word-break-break-all | word-break:break-all; |
| word-break-keep-all | word-break:keep-all; |
> enum values
| Value | | |
| :--------: | :-------: | :------: |
| normal | break-all | keep-all |
| break-word | inherit | initial |
| unset | - | - |
- ### z-index
> set z-index with number
> this value has negative number
| Class | Properties |
| :------------ | :------------- |
| z-index-0 | z-index:0; |
| z-index-1 | z-index:1; |
| z-index-m-5 | z-index:-5; |
| z-index-99999 | z-index:99999; |