unocss-preset-scalpel

Scalpel Preset for UnoCSS

Installation

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

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

<div class="hover:color-transparent">hover me to transparent</div>

media query

use media query before any className and pseudo

the default media query has sm md lg xl like this

<div class="md@hover:color-transparent">hover me to transparent</div>
<div class="md@color-f00 xl@color-red color-blue"></div>

Configurations

config object like this

// 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-<value>

  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-<value> or d-<value>

  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-<justify>-<align>

  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-<number> 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 ⬆️

• 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 ⬆️

• 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;