1.0.1 • Published 6 years ago
sportstg-bluekit v1.0.1
SportSTG Bluekit UI Framework (SCSS)
Please create PR (Pull Request) to this branch
├── gulpfile.js
├── public
| └── index.html
├── server.js
├── src
| ├── App.js
| ├── components
| | ├── Calendar
| | | └── EventWrapper
| | | ├── EventWrapper.js
| | | └── EventWrapper.scss
| | └── Global
| | └── InputBox
| | ├── InputBox.js
| | └── InputBox.scss
| ├── componentsIndex.js
| └── index.js
└── webpack.config.js
How to use
- npm install sportstg-bluekit@latest --save
- import CSS
import 'sportstg-bluekit/dist/css/sportstg-bluekit.css'
- Example for
InputBox
import PasswordField from 'sportstg-bluekit/lib/components/Common/InputBox'
Development
Things to know before start
To keep these files nice and clean, please follow ESlint and JavaScript Style Guide Rules
- Airbnb JavaScript Style Guide
- ESlint
How to contribute
1. Gulp config & directory structure creation
Open gulp.js
createBlueKit({
...
paths: [
....
'./components/Button', // << Add your component directory
],
})
Create JS file
- Create new
folder
and name it following your project name/component name undercomponents
- Create new
folder
and name it following by yourComponent
name Example:Button
- Create new
file
and name it following by yourComponent
name Example:Button.js
Then you'll have /components/Button/Button.js
Create Styles file
- Create new
file.scss
and name it following by yourComponent
name inside yourComponent
folder Example:Button.scss
Then you'll have/components/Button/Button.scss
Eventually, you'll have something like this
| ├── components
| | ├── Global // Your Project folder
| | | └── Button // Your Component folder
| | | ├── Button.js // Your Component file
| | | └── Button.scss // Your Style file (SCSS)
2. Get it running
Before run production make sure you've installed `npm install -g serve`
npm run start
// Run Production environmentnpm run dev
// Run Development environmentnpm run build
// Build package components files