This UI Kit allows you to build Bootstrap webapp with some extra UI features.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
Tony Air 307f250c08 UPD: UI maps 3 days ago
dist UPD: UI maps 3 days ago
src UPD: UI maps 3 days ago
thirdparty IMPR: Minor fixtures 2 years ago
.editorconfig Editorconfig 1 year ago
.eslintignore IMPR: standard linting 5 months ago
.gitignore Replace npm with pnpm 2 years ago
.npmrc FIX: .npmrc 10 months ago
LICENSE Initial commit 3 years ago
README.md UPD: README.md 1 year ago
babel.config.json FIX: Fallback page loading 2 years ago
eslint.config.json IMPR: linting updates 2 years ago
package.json UPD: UI maps 3 days ago
sass-lint.yml Minor improvements 3 months ago
webpack.config.common.js UPD: node_modules upgrades 11 months ago
webpack.config.js IMPR: Add build notification 4 months ago
webpack.config.serve.js UPD: Minor 7 months ago
webpack.yml UPD: node_modules upgrades 11 months ago

README.md

webpack-bootstrap-ui-kit

Webpack Bootstrap 5 UI Kit

This UI Kit allows you to build Bootstrap 5 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.

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.

Demo

https://rawcdn.githack.com/a2nt/webpack-bootstrap-ui-kit/master/dist/index.html

Quick Start

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

Clone and setup quick start repository:

git clone https://github.com/a2nt/webpack-bootstrap-ui-kit-quick-start.git

cd ./webpack-bootstrap-ui-kit-quick-start

pnpm install

Edit files at ./src

Start development server at http://127.0.0.1:3001

yarn start

Define your GraphQL mocks at src/mocks/handlers.js

Build your files to ./dist:

yarn build

Directory structure

src/ - your sources

-- src/scss/_variables.scss - specific app variables

-- src/scss/_layout.scss - specific app style

-- src/html - HTML templates

-- src/js/_events.js - app events definitions

-- src/js/_layout.js - app events definitions

-- src/js/_components - ui components

-- src/img - some example images

dist/ - compiled scipts after "yarn build"

You can open dist/index.html to see demo