https://github.com/a2nt/webpack-bootstrap-ui-kit

This UI Kit allows you to build Bootstrap webapp with some extra UI features.
https://github.com/a2nt/webpack-bootstrap-ui-kit

bootstrap silverstripe vanilla-js webpack

Last synced: 7 days ago
JSON representation

This UI Kit allows you to build Bootstrap webapp with some extra UI features.

• Host: GitHub
• URL: https://github.com/a2nt/webpack-bootstrap-ui-kit
• Owner: a2nt
• License: bsd-2-clause
• Created: 2019-06-08T15:08:30.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-07-01T09:53:03.000Z (5 months ago)
• Last Synced: 2024-09-30T12:17:33.468Z (about 2 months ago)
• Topics: bootstrap, silverstripe, vanilla-js, webpack
• Language: JavaScript
• Homepage:
• Size: 36.3 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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.

# 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