FWP

FWP stands for "Framework for Web Pages". It is an open-source lightweight front-end framework designed for building modern, responsive web pages.

Features

FWP provides the following features:

• Grid system: A flexible and customizable grid system to create responsive layouts.
• Typography: A set of typography styles that can be easily customized.
• Buttons: A collection of customizable buttons styles.
• Forms: A set of form styles with validation and error messages.
• Icons: A collection of customizable icons based on Font Awesome.
• Responsive utilities: A set of classes to hide, show or adjust elements on different screen sizes.
• CSS variables: A collection of variables to easily customize the style of the framework.

Getting started

To get started with FWP, you can either:

1. Download the lastest release from the Github repository.
2. Install it via npm:

npm install fwp

Then, you need to include the FWP styles in your HTML file:

<link rel="stylesheet" href="path/to/fwp.min.css">

You can also include the JS file if you want to use the FWP form validation:

<script src="path/to/fwp.min.js"></script>

Examples

Grid system

<div class="fw-row">
  <div class="fw-col fw-col-md-6 fw-col-lg-3">Column 1</div>
  <div class="fw-col fw-col-md-6 fw-col-lg-3">Column 2</div>
  <div class="fw-col fw-col-md-6 fw-col-lg-3">Column 3</div>
  <div class="fw-col fw-col-md-6 fw-col-lg-3">Column 4</div>
</div>

Buttons

<button class="fw-btn">Default button</button>
<button class="fw-btn fw-btn-primary">Primary button</button>
<button class="fw-btn fw-btn-success">Success button</button>
<button class="fw-btn fw-btn-warning">Warning button</button>
<button class="fw-btn fw-btn-danger">Danger button</button>

Forms

<form>
  <div class="fw-form-group">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" class="fw-form-control" required>
  </div>
  <div class="fw-form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" class="fw-form-control" required>
  </div>
  <div class="fw-form-group">
    <label for="password">Password</label>
    <input type="password" id="password" name="password" class="fw-form-control" minlength="8" required>
    <div class="fw-form-feedback">Password must be at least 8 characters long.</div>
  </div>
  <button type="submit" class="fw-btn fw-btn-primary">Submit</button>
</form>

Icons

<i class="fw-icon fas fa-envelope"></i>
<i class="fw-icon fas fa-phone"></i>
<i class="fw-icon fas fa-map-marker-alt"></i>

Documentation

For a complete documentation of FWP, please visit the Github repository: https://github.com/username/fwp