Minimalist Front-end Framework – bwb

Preview:

Description:

bwb (basic webpage builder) is an ultra-light front-end framework that comes with a set of most commonly used UI components for faster web development.

How to use it:

1. Download the package and insert the following files into the document.

<link rel="stylesheet" href="css/style.css" />
<script src="js/plugins.js"></script>

2. Create a dark or light top navigation bar.

<div class="navbar-theme-dark">
  <a href="https://www.cssscript.com/">CSSScript</a>
  ...
</div>
<div class="navbar-theme-light">
  <a href="https://www.cssscript.com/">CSSScript</a>
  ...
</div>

3. Create an off-canvas navigation bar with a hamburger toggle button.

<div id="sidenav" class="sidenav">
  <a href="jsvascript:void(0)" class="closebtn" onclick="closenav()">&times;</a>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</div>
<span style="font-size:30px;cursor:pointer" onclick="opennav()">&#9776;</span>

4. Create a basic layout for the main content.

<div class="row">
  <div class="container">
    Main Content Here
  </div>
</div>

5. Create a Jumbotron to showcase hero content.

<div class="inbox">
  Hero Content Here
</div>

6. Create info/success/warning alerts.

<div class="bar bar-warning">
  Warning Message Here
</div>
<div class="bar bar-information">
  Info Message Here
</div>
<div class="bar bar-done">
  Success Message Here
</div>

7. Attach a popover to an element.

<div class="info" onclick="info()">
  Click Me
  <span class="infotext" id="info">Popover Content Here</span>
</div>>

8. Display a snackbar on the screen.

<div id="snackbar">Hello <strong>World</strong>!</div>

snackbar()

9. Create an input field.

<input type="focus" placeholder=""cssscript">

Changelog:

v3.5 (01/17/2021)

• Fix bugs & new features

v3.4 (12/30/2020)

• Updated CSS

v3.3 (12/09/2020)

• Updated CSS

v3.2 (12/07/2020)

• Updated CSS

v3.1 (12/04/2020)

• Updated CSS

v2.z (11/30/2020)

• Updated CSS

v2.9 (11/26/2020)

• Updated CSS

v2.8 (11/24/2020)

• Updated CSS

v2.1 (11/22/2020)

• Updated

v1.4.7 (11/04/2020)

• Update style.css

v1.4.5 (11/04/2020)

• Update style.css

v1.4.3 (10/29/2020)

• CSS updated