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