Minimalist Front-end Framework – bwb

Category: Frameworks , Javascript , Recommended | November 26, 2020
Author: crqblog
Views Total: 22 views
Official Page: Go to website
Last Update: November 26, 2020
License: MIT

Preview:

Minimalist Front-end Framework – bwb

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:

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

You Might Be Interested In:


Leave a Reply