This project is still not done yet! We will make this library by half of this year and release v1.0.0 soon. Please wait until that time!
🐺Basic CSS library pack
- Install
style-pack
withnpm
npm install --save @backpackr/style-pack
- Import at your project root JS file
// for ES6
import "@backpackr/style-pack";
// for common JS
require("@backpackr/style-pack");
Using jsDelivr for CDN
<script src="https://cdn.jsdelivr.net/gh/backpackr/style-pack/app.js"></script>
If you want specific version, choose one in here
In this part, i will use React.js
for example.
You can use class selector
to set styles like this.
import "@backpackr/style-pack";
export const Button = () => {
return <button className="button__red">This is red button!</button>;
};
This must be just simplest way to use it.
You can use css module
to set styles like this.
import styles from "@backpackr/style-pack/modules/styles.module.css";
export const Button = () => {
return <button className={styles.button__red}>This is red button!</button>;
};
If you use css module
, it will be easy to see what kind of styles you can use. Just console.log()
it.
import styles from "@backpackr/style-pack/modules/styles.module.css";
console.log(styles);
You can set and test this library in the local environment
- Clone
style-pack
git clone https://github.com/backpackr/style-pack.git
- Build it
cd style-pack
npm run build
- Move it to your project and
npm
install by path
cd your/project
npm install ../style-pack
- Import at your project root JS file
// for ES6
import "@backpackr/style-pack";
// for common JS
require("@backpackr/style-pack");
- If your project has
hot-reloading
, there're two choice by usage.
Class selector
cd style-pack
npm run webpack:class
CSS module
cd style-pack
npm run webpack:module
It will make your project to show you changes immediately
- container
- color
- align
- grid
- flex_grid
- radius