css-styles

A set of my css styles used in different projects, including react-native, miniprogram(taro / uni-app) and web(react / vue).

English | 简体中文

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

• Using nvm, node lts, npm lts and yarn is recommended.

  • Follow the links below and install nvm first

    • nvm for Mac/Linux
    • nvm-windows
    • Using Homebrew to install nvm on Mac is NOT recommended

  • Then install node lts in terminal / command line

    # for now, lts version is 10.16.3
    # last updated: 2019.09.17
    nvm install 10.16.3

  • Globally update npm to lts and install yarn

    npm i -g npm@lts
    npm i -g yarn

  • If you are Chinese, maybe you should set mirrors

• Git is also required.
  • git for Windows/Linux
  • Using Homebrew to install git on Mac is recommended.

Installing

yarn add @modyqyw/css-styles
# or
npm i @modyqyw/css-styles

Usage

• taro / uni-app

Import miniprogram/global.scss as global styles using absolute import.

// projectName/src/app.tsx
// projectName/src/app.js
// projectName/src/main.ts
// projectName/src/main.js
import '@modyqyw/css-styles/miniprogram/global.scss'

Import miniprogram/vars.scss to use preset colors using relative import.

// projectName/src/vars.scss
@import "../node_modules/@modyqyw/css-styles/miniprogram/vars.scss";

• react / vue

Import web/global.scss as global styles.

import '@modyqyw/css-styles/web/global.scss'

Import web/vars.scss to use preset colors.

@import "~@modyqyw/css-styles/web/vars.scss";

• react native

Import react-native/global to get preset colors, typography and layouts.

import { colors, typography, layouts } from '@modyqyw/css-styles/react-native/global'
// or
// import gStyles from '@modyqyw/css-styles/react-native/global'

Running the tests

No tests now. Pull requests are welcome.

Features

• Preset layouts
• Preset typography
• Preset colors, two styles - Material Design and Ant Design
• Use class to add almost all styles
• High scalability

Contributing

Please read CONTRIBUTING.md for details on code of conduct, and the process for submitting pull requests.

Versioning

Use SemVer for versioning. For the versions available, see the releases on this repository.

Authors

• Rui Wu - Initial work - ModyQyW

See also the list of contributors who participated in this project.

License

MIT

Copyright (c) 2019-present ModyQyW

Acknowledgments

• Material Design
• Ant Design
• ElementUI
• ColorUI
• ReactNativeElements
• NativeBase
• TaroUI