Introduce
Peach is a CSS
style library similar to TailwindCSS
, with built-in commonly used CSS classes, support for sass/less
to overwrite existing variables, and custom style names
Installation
npm install @fish-ui/peach
Usage
css
@import '@fish-ui/peach'; /* peach核心css */
@import '@fish-ui/peach/normalize'; /* normalize样式重置 */
sass
@import '@fish-ui/peach/sass'; /* peach核心css */
@import '@fish-ui/peach/normalize'; /* normalize样式重置 */
@import '@fish-ui/peach/sass/mixin'; /* mixins */
js
import '@fish-ui/peach/index.css'; // peach核心css
import '@fish-ui/peach/normalize.css'; /// 可选:normalize样式重置
html template
<div class="mt100 pt10 flex-between bg-white z999">
<div class="text-align-left color-333 font18 relative">
left content
</div>
<div class="text-align-right color-white">
right content
</div>
</div>
reference
class
-
mt10
+mr10
+mb10
+ml10
+m10
, range:-100
~100
-
pt10
+pr10
+pb10
+pl10
+p10
, range:-100
~100
-
font8
, range:8
~50
-
relative
+absolute
+fixed
+sticky
-
z999
+z9999
-
flex
+flex-center
+flex-align-center
+flex-between
+flex-between
+center
-
w100
+h100
ellipsis
mixins
multiple-ellpsis
License
Licensed under MIT
Copyright (c) 2023 crazyfish
Keywords
css
sass
less
ui
utils