webpack-bootstrap-ui-kit/README.md

68 lines
1.5 KiB
Markdown
Raw Normal View History

2019-06-08 17:10:16 +02:00
# webpack-bootstrap-ui-kit
2020-05-14 18:00:45 +02:00
2021-09-13 02:25:13 +02:00
Webpack Bootstrap 5 UI Kit
2019-06-08 17:10:16 +02:00
2021-09-13 02:25:13 +02:00
This UI Kit allows you to build Bootstrap 5 webapp with some extra UI features.
2019-06-08 17:10:16 +02:00
It's easy to extend and easy to convert HTML templates to CMS templates.
2021-09-13 02:30:37 +02:00
Note: I prefer using vanilla JS with minimal external dependencies to reach higher loading speed.
There's no jQuery and no React, but it can be connected optionally.
2021-09-13 02:25:13 +02:00
2019-06-08 17:10:16 +02:00
# Demo
2020-05-14 18:00:45 +02:00
2019-06-08 18:06:59 +02:00
https://rawcdn.githack.com/a2nt/webpack-bootstrap-ui-kit/master/dist/index.html
2019-06-08 17:10:16 +02:00
2019-12-10 14:32:06 +01:00
# Quick Start
2020-05-14 18:00:45 +02:00
## Requirements:
- node
- yarn
- pnpm package manager
https://pnpm.js.org/en/installation
Note: You can use npm package manager, but this one will save your disc space. Replace pnpm commands with npm if you prefer npm
2019-12-10 14:34:26 +01:00
## Clone and setup quick start repository:
2019-12-10 14:32:06 +01:00
git clone https://github.com/a2nt/webpack-bootstrap-ui-kit-quick-start.git
2019-12-10 14:34:26 +01:00
2019-12-10 14:32:06 +01:00
cd ./webpack-bootstrap-ui-kit-quick-start
2019-12-10 14:34:26 +01:00
2020-05-14 18:00:45 +02:00
pnpm install
2019-06-08 17:10:16 +02:00
2019-12-10 14:35:00 +01:00
## Edit files at ./src
2019-12-10 14:34:26 +01:00
2021-02-12 18:57:33 +01:00
## Start development server at http://127.0.0.1:3001
2019-12-10 14:34:26 +01:00
2019-12-10 14:32:06 +01:00
yarn start
2019-06-08 17:10:16 +02:00
2021-02-12 18:57:33 +01:00
Define your GraphQL mocks at src/mocks/handlers.js
2019-12-10 14:34:26 +01:00
## Build your files to ./dist:
2019-06-08 17:10:16 +02:00
yarn build
## Directory structure
2020-05-14 18:00:45 +02:00
src/ - your sources
2019-06-08 17:10:16 +02:00
2020-05-14 18:00:45 +02:00
-- src/scss/\_variables.scss - specific app variables
2019-06-08 17:10:16 +02:00
2020-05-14 18:00:45 +02:00
-- src/scss/\_layout.scss - specific app style
2019-06-08 17:10:16 +02:00
-- src/html - HTML templates
2020-05-14 18:00:45 +02:00
-- src/js/\_events.js - app events definitions
2019-06-08 17:10:16 +02:00
2020-05-14 18:00:45 +02:00
-- src/js/\_layout.js - app events definitions
2019-06-08 17:10:16 +02:00
2020-05-14 18:00:45 +02:00
-- src/js/\_components - ui components
2019-06-08 17:10:16 +02:00
-- src/img - some example images
dist/ - compiled scipts after "yarn build"
You can open dist/index.html to see demo