Documentation

1. Introduction

Welcome to the Flare Framework documentation. This framework offers a simple, flexible way to build responsive, mobile-first websites. Below is a detailed guide to using the layout systems, components, and forms provided by the framework.

2. Installation

To integrate the FlareFramework into your project, there are two options:

2.1 Download

Steps:

Clone the repository
First, clone the repository to your system:
git clone https://github.com/ChristianSeip/Flare-Framework.git
Install dependencies
Navigate to the project directory and install the necessary dependencies with npm:
npm install
Start the development environment
To start the development environment and see changes live in the browser, run the following command:
npm start
This will automatically open your default browser and load the project in development mode.
Create a production build
To compile the framework for use in a production environment, use the following command:
npm run build
This will generate an optimized version of the CSS and JS files in the dist folder, which you can include in your project.

2.2 Include CSS and JavaScript

After creating the production build, you can include the compiled files in your project.

Steps:

Include CSS and JavaScript
Add the following lines to the <head> and <body> sections of your HTML file:
<link rel="stylesheet" href="dist/style.css">
<script src="dist/bundle.js"></script>

2.3 Build Scripts and Test Environment

The framework also provides some useful scripts to ease the development process:

npm run start Starts the development environment with Webpack and opens the application in the browser.
npm run build Creates a production build of the framework.
npm run test Runs end-to-end tests using Cypress.

3. Typography

FlareFramework provides a set of utility classes for text formatting, alignment, and decoration to help you style and customize text in your web projects. Below are the available classes and examples.

3.1 Text Alignment

Use alignment classes to control the horizontal alignment of text.

This text is centered and bold.

<div class="text-center text-bold">This text is centered and bold.</div>

3.2 Text Decoration

These classes add decoration to the text such as underline or strike-through.

This text is underlined.

<div class="text-underline">This text is underlined.</div>

This text is struck through.

<div class="text-strike">This text is struck through.</div>

3.3 Text Transformation

Use transformation classes to change the case of text.

This text is uppercase.

<div class="text-uppercase">This text is uppercase.</div>

THIS TEXT IS LOWERCASE.

<div class="text-lowercase">THIS TEXT IS LOWERCASE.</div>

this text is capitalized.

<div class="text-capitalize">this text is capitalized.</div>

3.4 Text Emphasis

These classes add emphasis or change the appearance of text, such as making it bold, muted, or highlighted.

This text is bold.

<div class="text-bold">This text is bold.</div>

This text is italic.

<div class="text-italic">This text is italic.</div>

This text is muted.

<div class="text-muted">This text is muted.</div>

This text is highlighted.

<div class="text-highlight">This text is highlighted.</div>

3.5 Text Size

This text is smaller than usual.

<div class="text-small">This text is smaller than usual.</div>

This is a leading text.

<div class="text-lead">This is a leading text.</div>

4. Layout

4.1 Grid-System

The Grid-System in the FlareFramework is based on Flexbox and is designed to help you create responsive layouts. The system uses rows and columns to organize content, allowing flexible and adaptive designs.

4.1.1 Rows

To create a grid layout, start by defining a row using the .row class. This class creates a horizontal container that holds the columns.

<div class="row">
  <!-- Columns go here -->
</div>

4.1.2 Columns

Within a row, you can define columns using the .col class. Columns in a row will automatically take equal space by default.

<div class="row">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
</div>

Column 1

Column 2

4.1.3 Specific Column Widths

You can define specific column widths using classes like .col-2, .col-3, .col-4, .col-6, and .col-12. The number in the class name represents the fraction of the row's width the column will take, based on a 12-column grid.

<div class="row">
  <div class="col col-2">col-2</div>
  <div class="col col-2">col-2</div>
  <div class="col col-2">col-2</div>
  <div class="col col-2">col-2</div>
  <div class="col col-2">col-2</div>
  <div class="col col-2">col-2</div>
</div>

<div class="row">
  <div class="col col-3">col-3</div>
  <div class="col col-3">col-3</div>
  <div class="col col-3">col-3</div>
  <div class="col col-3">col-3</div>
</div>

<div class="row">
  <div class="col col-4">col-4</div>
  <div class="col col-4">col-4</div>
  <div class="col col-4">col-4</div>
</div>

<div class="row">
  <div class="col col-6">col-6</div>
  <div class="col col-6">col-6</div>
</div>

<div class="row">
  <div class="col col-12">col-12</div>
</div>

col-2

col-3

col-4

col-6

col-12

4.1.4 Nesting Columns

You can nest rows and columns inside each other to create more complex layouts. A nested row and column are just a regular .row and .col inside a column.

<div class="row">
  <div class="col-6">
    Parent Column
    <div class="row">
      <div class="col-6">Nested Column 1</div>
      <div class="col-6">Nested Column 2</div>
    </div>
  </div>
</div>

Parent Column

Nested Column 1

Nested Column 2

4.2 Flexbox-System

The Flexbox system in the FlareFramework helps you align elements flexibly and dynamically. You can use different classes to control the behavior of elements both horizontally and vertically.

4.2.1 Flexbox Display

The .d-flex class ensures that the element is displayed as a Flexbox. There are also other classes to control the display behavior of elements. code>.d-flex: Sets the element to display: flex

<div class="d-flex">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Item 1

Item 2

4.2.2 Justify Content

The .justify-content-* classes allow you to control the horizontal alignment of elements in a Flexbox:

.justify-content-start: Aligns elements at the start (left).
.justify-content-center: Centers the elements.
.justify-content-end: Aligns elements at the end (right).

<div class="d-flex justify-content-center">
  <div>Centered Item</div>
</div>

Centered Item

4.2.3 Align Items

The .align-items-* classes allow you to control the vertical alignment of elements in a Flexbox:

.align-items-start: Aligns elements at the top.
.align-items-center: Vertically centers the elements.
.align-items-end: Aligns elements at the bottom.

<div class="d-flex align-items-center" style="height: 100px;">
  <div>Vertically Centered</div>
</div>

Vertically Centered

4.3 Spacing

In the FlareFramework, spacing is controlled using the following Margin and Padding classes. These allow you to add space around (margin) or inside (padding) elements.

4.3.1 Margin Classes

The following classes control the margin of elements:

Class	Description
`.m-1`	XS margin
`.m-2`	S margin
`.m-3`	M margin
`.m-4`	L margin
`.m-5`	XL margin
`.m-6`	XXL margin

4.3.2 Margin by Direction

You can apply margin to specific sides of an element:

Class	Description
`.mt-1 to .mt-6`	Top margin
`.mb-1 to .mb-6`	Bottom margin
`.ml-1 to .ml-6`	Left margin
`.mr-1 to .mr-6`	Right margin

4.3.3 Padding Classes

The following classes control the padding of elements:

Class	Description
`.p-1`	XS padding
`.p-2`	S padding
`.p-3`	M padding
`.p-4`	L padding
`.p-5`	XL padding
`.p-6`	XXL padding

4.3.4 Padding by Direction

Just like margin, padding can also be applied to specific sides of an element:

Class	Description
`.pt-1 to .pt-6`	Top padding
`.pb-1 to .pb-6`	Bottom padding
`.pl-1 to .pl-6`	Left padding
`.pr-1 to .pr-6`	Right padding

4.4 Display

The FlareFramework includes various classes to control the display properties of elements, helping you manage visibility, layout structure, and element size. These classes provide control over whether elements are displayed, how they are sized, and how they fit into the layout.

4.4.1 Visibility

You can control whether an element is visible or hidden using the following display classes:

Class	Description
`.d-none`	Hides the element entirely
`.d-md-none`	Hides the element on small screens (<768px)
`.d-md-block`	Displays the element as a block-level item on small screens (<768px)
`.d-block`	Displays the element as a block-level item
`.d-inline`	Displays the element as an inline element
`.d-inline-block`	Displays the element as an inline block element

<div class="d-none">This element is hidden</div>
<div class="d-block">This element is a block</div>

This element is a block

4.4.2 Width Classes

To control the width of elements, use the following width utility classes:

Class	Description
`.w-100`	Sets width to 100%
`.w-75`	Sets width to 75%
`.w-50`	Sets width to 50%
`.w-25`	Sets width to 25%
`.w-auto`	Sets width to auto, based on content

<div class="w-50">This element takes 50% width</div>

This element takes 50% width

5. Components

Components in FlareFramework provide a set of reusable UI elements that can be easily customized and integrated into your projects.

5.1 Buttons

Buttons are essential interactive elements in any web project. The FlareFramework offers a variety of button styles for different use cases.

5.1.1 Basic Button

The basic button uses the .btn class. You can add additional classes to change the button's size, style, and behavior.

<button class="btn">Basic Button</button>

5.1.2 Button Sizes

You can adjust the size of buttons using .btn-sm for smaller buttons and .btn-lg for larger buttons.

Class	Description
`.btn-sm`	Small button
`.btn-lg`	Large button

<button class="btn btn-sm">Small Button</button>
<button class="btn btn-lg">Large Button</button>

5.1.3 Button Colors

Buttons can be styled with different colors using the following classes:

Class	Description
`.btn-primary`	Primary button style
`.btn-secondary`	Secondary button style
`.btn-warning`	Warning button style
`.btn-info`	Info button style
`.btn-danger`	Danger button style

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-info">Info Button</button>
<button class="btn btn-warning">Warning Button</button>
<button class="btn btn-danger">Danger Button</button>

5.1.4 Outlined Buttons

Outlined buttons use a transparent background and a colored border. You can apply the outlined style using the .btn-* classes along with the -outlined suffix.

Class	Description
`.btn-primary-outlined`	Primary outlined button
`.btn-secondary-outlined`	Secondary outlined button
`.btn-info-outlined`	Info outlined button
`.btn-warning-outlined`	Warning outlined button
`.btn-danger-outlined`	Danger outlined button

<button class="btn btn-primary-outlined">Primary Outlined</button>
<button class="btn btn-secondary-outlined">Secondary Outlined</button>
<button class="btn btn-info-outlined">Info Outlined</button>
<button class="btn btn-warning-outlined">Warning Outlined</button>
<button class="btn btn-danger-outlined">Danger Outlined</button>

5.1.5 Disabled Buttons

To disable a button, add the .btn-disabled class. This will make the button non-clickable and apply a disabled styling.

<button class="btn btn-disabled">Disabled Button</button>

5.2 Alerts

Alerts are used to notify users about important messages. FlareFramework provides several styles of alerts.

5.2.1 Basic Alert

Alerts can be created using the .alert class along with specific classes for different types of alerts.

<div class="alert info-message">This is an info alert</div>

This is an info alert

5.2.2 Alert Types

You can choose from several types of alerts, such as info, success, warning, and danger. These types are controlled with the following classes:

Class	Description
`.info-message`	Informational alert
`.success-message`	Success alert
`.warning-message`	Warning alert
`.danger-message`	Danger alert

<div class="alert success-message">Success! Your operation was successful.</div>
<div class="alert danger-message">Error! Something went wrong.</div>

Success! Your operation was successful.

Error! Something went wrong.

5.2.3 Dismissible Alerts

To make an alert dismissible, you can add a close button inside the alert. You can use JavaScript to hide the alert when the close button is clicked.

<div class="alert info-message">
  This is a dismissible alert
  <button class="btn btn-sm btn-danger" onclick="this.parentElement.style.display='none';">Close</button>
</div>

This is a dismissible alert

5.3 Modals

Modals are used to display content in a layered popup window. FlareFramework provides a simple way to create modals.

5.3.1 Basic Modal

To create a modal, use the .modal and .modal-content classes. You can open and close the modal with JavaScript.

<div class="modal">
  <div class="modal-content">
    <span class="modal-close" onclick="FlareFramework.closeModal(this);">×</span>
    <p>Modal content goes here.</p>
  </div>
</div>

5.4 Dropdowns

Dropdowns are menus that allow users to select from multiple options. They can be toggled using JavaScript.

5.4.1 Basic Dropdown

To create a dropdown, use the .dropdown-content class. You can toggle the visibility of the dropdown using FlareFramework.toggleDropdown().

<div class="dropdown">
  <button class="btn" onclick="FlareFramework.toggleDropdown(this);">Toggle Dropdown</button>
  <div class="dropdown-content" style="display:none;">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
  </div>
</div>

5.5 Badges

Badges are small inline elements used to highlight important information, such as notifications or counts. They can be applied to buttons, links, or other UI elements.

5.5.1 Basic Badge

To create a badge, use the .badge class along with a color class like .badge-primary or .badge-danger.

<span class="badge badge-primary">New</span>

New

5.5.2 Badge Colors

Badges come in different color variations, similar to buttons and alerts.

Class	Description
`.badge-primary`	Primary badge
`.badge-secondary`	Secondary badge
`.badge-info`	Info badge
`.badge-success`	Success badge
`.badge-warning`	Warning badge
`.badge-danger`	Danger badge

5.6 Tooltips

Tooltips provide additional context or information when users hover over an element. You can use tooltips to show short messages.

5.6.1 Basic Tooltip

To create a tooltip, use the .tooltip class and add the .tooltip-text class inside for the tooltip message.

<div class="tooltip">
Hover me
  <span class="tooltip-text">Tooltip message here</span>
</div>

5.7 Accordion

The Accordion component allows you to toggle the visibility of content sections, creating a collapsible UI element.

5.7.1 Basic Accordion

To create an accordion, use a button to trigger the visibility of a content panel. The button should use the FlareFramework.toggleAccordion() function, and the content is wrapped in a .panel div that is initially hidden.

<section class="pb-6">
  <h2>Accordion</h2>
  <button class="btn btn-primary" onclick="FlareFramework.toggleAccordion(this)" id="accordion-button-1">Section 1</button>
  <div class="panel d-none" id="accordion-content-1">
    <p>Panel content 1</p>
  </div>
</section>

5.8 Lists

Lists in FlareFramework can be customized in various ways using different classes. You can control list styles, markers, alignment, and much more. Below are the options and classes you can use to customize your lists.

5.8.1 Unordered List

By default, unordered lists use the disc style for list markers. You can change the marker style using various classes like .list-style-circle or .list-style-square.

List item 1
List item 2
List item 3

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

Available Classes for Unordered Lists:

.list-style-circle – Changes the marker to a circle.
.list-style-square – Changes the marker to a square.
.list-style-none – Removes the marker and left padding.

5.8.2 Ordered List

Ordered lists use numeric markers by default. You can change the numbering style using classes like .list-style-alpha or .list-style-decimal.

List item 1
List item 2
List item 3

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

Available Classes for Ordered Lists:

.list-style-decimal – Default numeric marker.
.list-style-alpha – Changes the marker to lowercase letters (a, b, c).

5.8.3 Inline List

To display a list of items inline, you can use the .inline-list class. This removes the default list styling and arranges the list items horizontally with gaps between them.

List item 1
List item 2
List item 3

<ul class="inline-list">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

5.8.4 Removing Padding and Margins

If you need to remove the default padding or margin of lists, you can use the .list-style-none class or manually set the padding and margin to zero.

.list-style-none {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

5.9 Tables

5.9.1 Basic Table

Header 1	Header 2	Header 3
Row 1, Cell 1	Row 1, Cell 2	Row 1, Cell 3
Row 2, Cell 1	Row 2, Cell 2	Row 2, Cell 3

<table class="table-responsive">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
      <td>Row 1, Cell 3</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
      <td>Row 2, Cell 3</td>
    </tr>
  </tbody>
</table>

5.9.2 Striped Table

Header 1	Header 2	Header 3
Row 1, Cell 1	Row 1, Cell 2	Row 1, Cell 3
Row 2, Cell 1	Row 2, Cell 2	Row 2, Cell 3

<table class="table-striped table-responsive">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
      <td>Row 1, Cell 3</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
      <td>Row 2, Cell 3</td>
    </tr>
  </tbody>
</table>

5.10 Cards

Cards are flexible containers that can contain various types of content like text, images, or other HTML elements.

5.10.1 Basic Card

Card Title

This is the content of the card. It can contain text, images or other HTML elements.

Card Footer

<div class="card">
  <div class="card-header">Card Title</div>
  <div class="card-body">
    This is the content of the card. It can contain text, images or other HTML elements.
  </div>
  <div class="card-footer">Card Footer</div>
</div>

6. Forms

Forms in FlareFramework are designed to be simple and flexible, allowing you to create various types of forms with minimal effort. Here are the key components and classes for creating and styling forms.

6.1 Basic Form Structure

A typical form in FlareFramework is built using .form-group to group form controls and labels together. The .input class is applied to all input elements to ensure consistent styling.

<form>
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" class="input" placeholder="Enter your name">
  </div>
</form>

6.2 Form Groups

The .form-group class is used to wrap individual form controls (e.g., input fields, labels, and hints).

<div class="form-group">
  <label for="email">Email</label>
  <input type="email" id="email" class="input" placeholder="Enter your email">
</div>

6.3 Form Rows

The .form-row class is used to create a horizontal arrangement of form controls, ideal for displaying multiple inputs in a single row.

First Name

Last Name

<div class="form-row">
  <div class="form-group">
    <label for="first-name">First Name</label>
    <input type="text" id="first-name" class="input">
  </div>
  <div class="form-group">
    <label for="last-name">Last Name</label>
    <input type="text" id="last-name" class="input">
  </div>
</div>

6.4 Input Types

You can apply the .input class to different types of inputs, including text fields, email inputs, and password inputs.

Password

<div class="form-group">
  <label for="password">Password</label>
  <input type="password" id="password" class="input" placeholder="Enter your password">
</div>

6.5 Textarea

For larger text input, use the <textarea> element along with the .input class for consistent styling.

Message

<div class="form-group">
  <label for="message">Message</label>
  <textarea id="message" class="input" rows="4" placeholder="Enter your message"></textarea>
</div>

6.6 Select Menus

Use the <select> element with the .input class for dropdown menus.

Options

<div class="form-group">
  <label for="options">Options</label>
  <select id="options" class="input">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
</div>

6.7 Checkbox and Radio Inputs

For checkboxes and radio buttons, use the .form-options class to style the group of options.

Choose an option:

Option 1 Option 2 Option 3

<div class="form-group">
  <label>Choose an option:</label>
  <div class="form-options">
    <label><input type="radio" name="option" value="1"> Option 1</label>
    <label><input type="radio" name="option" value="2"> Option 2</label>
    <label><input type="radio" name="option" value="3"> Option 3</label>
  </div>
</div>

Select your preferences:

Preference 1 Preference 2 Preference 3

<div class="form-group">
  <label>Select your preferences:</label>
  <div class="form-options">
    <label><input type="checkbox" name="preference" value="1"> Preference 1</label>
    <label><input type="checkbox" name="preference" value="2"> Preference 2</label>
    <label><input type="checkbox" name="preference" value="3"> Preference 3</label>
  </div>
</div>

6.8 Fieldset and Legend

Use the <fieldset> and <legend> elements to group related form controls together, providing a semantically meaningful grouping of inputs.

Personal Information Date of Birth

<fieldset class="form-group">
  <legend>Personal Information</legend>
  <label for="dob">Date of Birth</label>
  <input type="date" id="dob" class="input">
</fieldset>

6.9 Input Validation

The .input-hint class is used to provide feedback or hints below input fields. You can customize the hint text to indicate whether the input is valid or invalid.

Username Username must be unique

<div class="form-group">
  <label for="username">Username</label>
  <input type="text" id="username" class="input">
  <span class="input-hint">Username must be unique</span>
</div>

Author: Christian Seip | 2024-10-30 20:42

Documentation

1. Introduction

2. Installation

2.1 Download

Steps:

2.2 Include CSS and JavaScript

Steps:

2.3 Build Scripts and Test Environment

3. Typography

3.1 Text Alignment

3.2 Text Decoration

3.3 Text Transformation

3.4 Text Emphasis

3.5 Text Size

4. Layout

4.1 Grid-System

4.1.1 Rows

4.1.2 Columns

4.1.3 Specific Column Widths

4.1.4 Nesting Columns

4.2 Flexbox-System

4.2.1 Flexbox Display

4.2.2 Justify Content

4.2.3 Align Items

4.3 Spacing

4.3.1 Margin Classes

4.3.2 Margin by Direction

4.3.3 Padding Classes

4.3.4 Padding by Direction

4.4 Display

4.4.1 Visibility

4.4.2 Width Classes

5. Components

5.1 Buttons

5.1.1 Basic Button

5.1.2 Button Sizes

5.1.3 Button Colors

5.1.4 Outlined Buttons

5.1.5 Disabled Buttons

5.2 Alerts

5.2.1 Basic Alert

5.2.2 Alert Types

5.2.3 Dismissible Alerts

5.3 Modals

5.3.1 Basic Modal

5.4 Dropdowns

5.4.1 Basic Dropdown

5.5 Badges

5.5.1 Basic Badge

5.5.2 Badge Colors

5.6 Tooltips

5.6.1 Basic Tooltip

5.6.2 Tooltip Behavior

5.7 Accordion

5.7.1 Basic Accordion

5.8 Lists

5.8.1 Unordered List

Available Classes for Unordered Lists:

5.8.2 Ordered List

Available Classes for Ordered Lists:

5.8.3 Inline List

5.8.4 Removing Padding and Margins

5.9 Tables

5.9.1 Basic Table

5.9.2 Striped Table

5.10 Cards

5.10.1 Basic Card

6. Forms

6.1 Basic Form Structure

6.2 Form Groups

6.3 Form Rows

6.4 Input Types

6.5 Textarea

6.6 Select Menus

6.7 Checkbox and Radio Inputs

6.8 Fieldset and Legend

6.9 Input Validation