This UI Kit allows you to build Bootstrap webapp with some extra UI features.
Go to file
2021-09-10 00:50:09 +02:00
dist IMPR: Animate SVG fontawesome 2021-09-08 22:45:02 +02:00
src UPD: Minor updates 2021-09-09 16:48:44 +02:00
thirdparty IMPR: Minor fixtures 2021-03-22 02:57:49 +07:00
.editorconfig Editorconfig 2021-09-10 00:50:09 +02:00
.eslintignore FIX: js liniting 2019-12-10 20:23:32 +07:00
.gitignore Replace npm with pnpm 2020-05-14 23:12:22 +07:00
.npmrc Replace npm with pnpm 2020-05-14 23:00:45 +07:00
babel.config.json FIX: Fallback page loading 2021-03-30 12:43:22 +07:00
eslint.config.json IMPR: linting updates 2021-01-31 18:57:22 +07:00
LICENSE Initial commit 2019-06-08 22:20:51 +07:00
package.json IMPR: Animate SVG fontawesome 2021-09-08 22:40:48 +02:00
README.md IMPR: apollo + mocking service worker 2021-02-13 00:57:33 +07:00
sass-lint.yml FIX: linting 2021-08-18 20:38:12 +02:00
webpack.config.common.js IMPR: Build update 2021-08-11 19:17:10 +02:00
webpack.config.js IMPR: Build update 2021-08-11 19:17:10 +02:00
webpack.config.serve.js IMPR: Build update 2021-08-11 19:17:10 +02:00
webpack.yml IMPR: Namespaces refactoring 2021-03-15 03:46:04 +07:00

webpack-bootstrap-ui-kit

Webpack Bootstrap 4 UI Demo

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

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