MFELT - My Front-End Librairy Toolkit

Introduction

MFELT is a css (with a little bit of javascript) librairy. It intend to be very simple to use and very stable (no new version every year that would force you to rewrite your applications).
On the other hand, it doesn't offer to do everything, even coffee. But the essentials are there for most font-end developers.
The principle is that a library should not include things that are rarely or only once done in an application. That's why it doesn't include anything about layouts (html5 with flex and grid is mature enough for that) or sidebars (this is usually a main menu in your application that you'll only do once).
For everything else, I hope you find mfelt useful.

Usage :

1 - Download MFelt and drop it anywhere in your project so that it's accessible by clients (usually assets folder)
2 - Add these lines to the header of your html files or html template for your project

<link href="<your_path_to_assets>/mfelt/css/mfelt.css" rel="stylesheet">
<script src="<your_path_to_assets>/mfelt/js/mfelt.js"></script>

MFELT also comes with icons wich are not documented here. It is a fork of bootstrap icons except that it not includes svg icons. Some examples below shows how it can be used.
Elements in main menu with a * use javascript. Javascript in MFelt is pure js.

Buttons

Base classes

<button class="mf-button">Button</button>
<button class="mf-button green">Button</button>
<button class="mf-button orange">Button</button>
<button class="mf-button red">Button</button>
<button class="mf-button blue">Button</button>
<button class="mf-button black">Button</button>

With disabled attribute

<button class="mf-button" disabled>Button</button>
<button class="mf-button green" disabled>Button</button>
<button class="mf-button orange" disabled>Button</button>
<button class="mf-button red" disabled>Button</button>
<button class="mf-button blue" disabled>Button</button>
<button class="mf-button black" disabled>Button</button>

Adding rounded class

<button class="mf-button rounded">Button</button>
<button class="mf-button green rounded">Button</button>
<button class="mf-button orange rounded">Button</button>
<button class="mf-button red rounded">Button</button>
<button class="mf-button blue rounded">Button</button>
<button class="mf-button black rounded">Button</button>

Sizes

<button class="mf-button large">Large button</button>
<button class="mf-button">Default button</button>
<button class="mf-button small">Small button</button>

Block buttons

Block buttons are full width of their container

<div style='width:33%; background-color: #f8f8f8; padding: 20px;'>
	<input type='submit' class='mf-button block' value="Submit">
</div>
<br>
<div style='width:50%; background-color: #f8f8f8; padding: 20px;'>
	<input type='submit' class='mf-button block' value="Submit">
</div>

Buttons groups

<div class='mf-buttons-group'>
	<button class="mf-button">Button1</button>
	<button class="mf-button">Button2</button>
	<button class="mf-button">Button3</button>
	<button class="mf-button">Button4</button>
</div>

With class="block", the group occupy the width of its container

<div style='width:50%; background-color: #f8f8f8; padding:20px'>
	<div class='mf-buttons-group block'>
		<button class="mf-button">Button1</button>
		<button class="mf-button">Button2</button>
		<button class="mf-button">Button3</button>
	</div>
</div>

Buttons toolbars

<div class='mf-buttons-toolbar'>
	<div class='mf-buttons-group'>
		<button class="mf-button"><span class='mfi mfi-file-earmark-text-fill'></span></button>
		<button class="mf-button"><span class='mfi mfi-save'></span></button>
	</div>
	<button class="mf-button">Button1</button>
	<div class='mf-buttons-group'>
		<button class="mf-button"><span class='mfi mfi-type-bold'></span></button>
		<button class="mf-button"><span class='mfi mfi-type-italic'></span></button>
		<button class="mf-button"><span class='mfi mfi-type-underline'></span></button>
	</div>
	<div class='mf-buttons-group'>
		<button class="mf-button"><span class='mfi mfi-text-left'></span></button>
		<button class="mf-button"><span class='mfi mfi-text-center'></span></button>
		<button class="mf-button"><span class='mfi mfi-text-right'></span></button>
	</div>
</div>

Navbars menus

Navbars are simple to write responsive menus. Its a two levels max menus.
Try reduce the browser window size to see it in action.

<nav class="mf-nav" id="example_navbar">
	<div class="navbar-header">
		<span class="title">
			Active menu title
		</span>
		<button class="toggle-button">
			<span class="mfi mfi-list"></span>
		</button>
	</div>
	<div class="navbar">
		<ul>
			<li class="dropdown">
				<a>
					Dropdown title
				</a>
				<div class="dropdown-content">
					<a href="#example_navbar">Link 1</a>
					<a href="#example_navbar">Link 2</a>
				</div>
			</li>
			<li class="active">
				<a>Active menu entry</a>
			</li>
			<li class="right">
				<a href="#example_navbar">Menu entry on right</a>
			</li>
			<li>
				<a href="#example_navbar">Other on right</a>
			</li>
		</ul>
	</div>
</nav>

Title boxes

A title

A sample content
On multiple lines
For demo purpose

<div class="mf-title-box">
	<span>A title</span>
	<div>
		A sample content<br>
		On multiple lines<br>
		For demo purpose
	</div>
</div>

Forms

Controls and labels

This is applicable with any kind of inputs (email, password, datetime, datetime-local, date, month, time, week, number, url, search, tel, color) Text type input label Select label Select multiple with size Checkboxes

Checkbox 1 Checkbox 2

Checkboxes stacked

Checkbox 1 Checkbox 2

Radios stacked

Radio 1 Radio 2

Choose a color Choose a file Choose a file

Choisir un fichier

<label for="inputText" class="mf-form-label">Text type input label</label>
<input type="text" id='inputText' class="mf-form-control" placeholder="Default input" />

<label for="select" class="mf-form-label">Select label</label>
<select id='select' class="mf-form-control">
	<option value="value1">Value one</option>
	<option value="value2">Value two</option>
	<option value="value3">Value three</option>
</select>
<label for="selectMulti" class="mf-form-label">Select multiple with size</label>
<select id='selectMulti' class="mf-form-control" multiple="" size="3">
	<option value="value1">Value one</option>
	<option value="value2">Value two</option>
	<option value="value3">Value three</option>
	<option value="value4">Value four</option>
</select>

<span class="mf-form-label">Checkboxes</span>
<div class="mf-form-control">
	<input type="checkbox" id="check1" />
	<label for="check1">Checkbox 1</label>
	<input type="checkbox" id="check2" />
	<label for="check2">Checkbox 2</label>
</div>

<span class="mf-form-label">Checkboxes stacked</span>
<div class="mf-form-control stack">
	<input type="checkbox" id="check1stacked" />
	<label for="check1stacked">Checkbox 1</label>
	<input type="checkbox" id="check2stacked" />
	<label for="check2stacked">Checkbox 2</label>
</div>

<span class="mf-form-label">Radios stacked</span>
<div class="mf-form-control stack">
	<input type="radio" id="radio1stacked" name="radioExample"/>
	<label for="radio1stacked">Radio 1</label>
	<input type="radio" id="radio2stacked" name="radioExample"/>
	<label for="radio2stacked">Radio 2</label>
</div>

<label for="color" class="mf-form-label">Choose a color</label>
<input type="color" id='color' class="mf-form-control" />

<label for="file" class="mf-form-label">Choose a file</label>
<input type="file" id='file' class="mf-form-control" />

<span class="mf-form-label">Choose a file</span>
<div class="mf-form-file-control">
  <input type="file" id="fileInput">
  <label for="fileInput">Choisir un fichier</label>
</div>

Inline

Input label

<label for="inputTextInline" class="mf-form-label inline">Input label</label>
<input type="text" id='inputTextInline' class="mf-form-control" placeholder="Default input" />

Input groups

@my-corp.org

Gift

Price

.00

With textarea

<div class='mf-form-input-group'>
	<input type='text' class="mf-form-control" name='myInput' placeholder="write here" />
	<button class="mf-button"><span class="mfi-search"></span></button>
</div>

<div class='mf-form-input-group'>
	<button class="mf-button">Search</button>
	<input type='text' class="mf-form-control" name='myInput' placeholder="write here" />
</div>

<div class='mf-form-input-group'>
	<input type='text' class="mf-form-control" name='myInput' placeholder="Your identifier" />
	<span class="mf-form-input-addon">@my-corp.org</span>
</div>

<label for="selectInGroup" class="mf-form-label">Gift</label>
<div class='mf-form-input-group'>
	<span class="mf-form-input-addon mfi-currency-dollar"></span>
	<select class="mf-form-control" name='myInput' id='selectInGroup'>
		<option value="100">100.00</option>
		<option value="200">200.00</option>
	</select>
</div>

<label for="inputNumberInGroup" class="mf-form-label inline">Price</label>
<div class='mf-form-input-group'>
	<span class="mf-form-input-addon mfi-currency-dollar"></span>
	<input type='number' class="mf-form-control" id='inputNumberInGroup' />
	<span class="mf-form-input-addon">.00</span>
</div>

<div class='mf-form-input-group'>
	<span class="mf-form-input-addon">With textarea</span>
	<textarea class="mf-form-control" id='textareaInGroup'></textarea>
</div>

Modifiers

Disabled text type input label Disabled checkboxes

Checkbox 1 Checkbox 2

Label of an input on error Required select label

<label for="inputTexDisabled" class="mf-form-label">Disabled text type input label</label>
<input type="text" id='inputText' class="mf-form-control" value="A value for information" disabled/>

<span class="mf-form-label">Disabled checkboxes</span>
<div class="mf-form-control disabled">
	<input type="checkbox" id="check11" checked disabled/>
	<label for="check11">Checkbox 1</label>
	<input type="checkbox" id="check12" disabled />
	<label for="check12">Checkbox 2</label>
</div>

<label for="inputTextInError" class="mf-form-label">Label of an input on error</label>
<input type="text" id='inputTextInError' class="mf-form-control error" value="An incorrect value" />

<label for="selectRequired" class="mf-form-label required">Required select label</label>
<select id='selectRequired' class="mf-form-control">
	<option value="value1">Value one</option>
	<option value="value2">Value two</option>
	<option value="value3">Value three</option>
</select>

Alerts

Caution : this is an alert message !

Error : an error occured !

Well done !

Additional info message here

<div class='mf-alert warning'>
	Caution : this is an alert message !
</div>
<div class='mf-alert error'>
	Error : an error occured !
</div>
<div class='mf-alert success'>
	Well done !
</div>
<div class='mf-alert info'>
	Additional info message here
</div>

Alerts with `class="block"`

WARNING

This is an alert message !

ERROR

An error occured !

SUCCESS

Everything is ok

INFORMATION

Additional info message here

<div class='mf-alert block warning'>
	<header>WARNING</header>
	This is an alert message !
</div>
<div class='mf-alert block error'>
	<header>ERROR</header>
	An error occured !
</div>
<div class='mf-alert block success'>
	<header>SUCCESS</header>
	Everything is ok
</div>
<div class='mf-alert block info'>
	<header>INFORMATION</header>
	Additional info message here
</div>

Dismissible alerts

An important information

SUCCESS

A dismissible success message

<div class='mf-alert info dismissible'>
	<div class="mf-alert-dismiss" data-mf-dismiss><span class="mfi-x-lg"></span></div>
	An important information
</div>

<div class='mf-alert block success dismissible'>
	<header>
		SUCCESS
		<div class="mf-alert-dismiss" data-mf-dismiss><span class="mfi-x-lg"></span></div>
	</header>
	A dismissible success message
</div>

Accordions

Header One
Contents One
Header Two
Contents Two
Header Three
Contents Three

<ul class="mf-accordion">
	<li>Header One</li>
	<li>Contents One</li>
	<li>Header Two</li>
	<li>Contents Two</li>
	<li>Header Three</li>
	<li>Contents Three</li>
</ul>

Accordion with attribute data-mf-collapse

Header One
Contents One
Header Two
Contents Two
Header Three
Contents Three

<ul class="mf-accordion" data-mf-collapse>
	<li>Header One</li>
	<li>Contents One</li>
	<li>Header Two</li>
	<li>Contents Two</li>
	<li>Header Three</li>
	<li>Contents Three</li>
</ul>

Tabs

Tab One
Tab Two
Tab Three
Tab Four
Tab Five

Content One
Content One
Content One
Content One

Content Two
Content Two
Content Two
Content Two

Content Four
Content Four
Content Four
Content Four

<div class="mf-tabs">
	<ul>
		<li class="active"><a href="#" data-mf-target="content-one">Tab One</a></li>
		<li><a href="#" data-mf-target="content-two">Tab Two</a></li>
		<li class="disabled">Tab Three</li>
		<li class="right"><a href="#" data-mf-target="content-four">Tab Four</a></li>
		<li class="disabled">Tab Five</li>
	</ul>
	<div id="content-one" class="active">Content One<br>Content One<br>Content One<br>Content One<br></div>
	<div id="content-two">Content Two<br>Content Two<br>Content Two<br>Content Two<br></div>
	<div id="content-four">Content Four<br>Content Four<br>Content Four<br>Content Four<br></div>
</div>

Modals

A simple modal box

<div class="mf-modal" role="dialog" id="modal-example">
	<div class="mf-modal-box">
		<div class="mf-modal-header">
			<div class="mf-modal-title">Modal box example</div>
			<div class="mf-modal-dismiss" data-mf-dismiss><b><span class="mfi-x-lg"></span></b></div>
		</div>
		<div class="mf-modal-content">
			Sample content
		</div>
		<div class="mf-modal-footer">
			<button class="mf-button grey" data-mf-dismiss>Close</button>
			<button class="mf-button blue">Save</button>
		</div>
	</div>
</div>
<button class="mf-button blue" data-mf-toggle-modal data-mf-target="modal-example">Open modal</button>

A modal box with large content

<div class="mf-modal" role="dialog" id="modal-example-with-long-content">
	<div class="mf-modal-box">
		<div class="mf-modal-header">
			<div class="mf-modal-title">Modal box example</div>
			<div class="mf-modal-dismiss" data-mf-dismiss><b><span class="mfi-x-lg"></span></b></div>
		</div>
		<div class="mf-modal-content">
			Very long content Very long content Very long content Very long content<br>
			Very long content Very long content Very long content Very long content<br>
			Very long content Very long content Very long content Very long content<br>
			Very long content Very long content Very long content Very long content<br>
			Very long content Very long content Very long content Very long content<br>
			Very long content Very long content Very long content Very long content<br>
			Very long content Very long content Very long content Very long content<br>
			Very long content Very long content Very long content Very long content<br>
			Very long content Very long content Very long content Very long content<br>
			Very long content Very long content Very long content Very long content<br>
			Very long content Very long content Very long content Very long content<br>
			Very long content Very long content Very long content Very long content<br>
			Very long content Very long content Very long content Very long content<br>
			Very long content Very long content Very long content Very long content<br>
			Very long content Very long content Very long content Very long content<br>
		</div>
		<div class="mf-modal-footer">
			<button class="mf-button grey" data-mf-dismiss>Close</button>
			<button class="mf-button blue">Save</button>
		</div>
	</div>
</div>
<button class="mf-button blue" data-mf-toggle-modal data-mf-target="modal-example-with-long-content">
	Open modal with long content
</button>

A large modal box

<div class="mf-modal" role="dialog" id="modal-example-large">
	<div class="mf-modal-box large">
		<div class="mf-modal-header">
			<div class="mf-modal-title">Modal box example</div>
			<div class="mf-modal-dismiss" data-mf-dismiss><b><span class="mfi-x-lg"></span></b></div>
		</div>
		<div class="mf-modal-content">
			Sample content
		</div>
		<div class="mf-modal-footer">
			<button class="mf-button grey" data-mf-dismiss>Close</button>
			<button class="mf-button blue">Save</button>
		</div>
	</div>
</div>
<button class="mf-button blue" data-mf-toggle-modal data-mf-target="modal-example-large">Open large modal</button>

A very large modal box

<div class="mf-modal" role="dialog" id="modal-example-xlarge">
	<div class="mf-modal-box xlarge">
		<div class="mf-modal-header">
			<div class="mf-modal-title">Modal box example</div>
			<div class="mf-modal-dismiss" data-mf-dismiss><b><span class="mfi-x-lg"></span></b></div>
		</div>
		<div class="mf-modal-content">
			Sample content
		</div>
		<div class="mf-modal-footer">
			<button class="mf-button grey" data-mf-dismiss>Close</button>
			<button class="mf-button blue">Save</button>
		</div>
	</div>
</div>
<button class="mf-button blue" data-mf-toggle-modal data-mf-target="modal-example-xlarge">Open very large modal</button>

Paginations

<nav class="mf-pagination">
	<ul>
		<li><a href="">Previous</a></li>
		<li><a href="">3</a></li>
		<li class="active"><a href="">4</a></li>
		<li><a href="">5</a></li>
		<li class=disabled><a href="">Next</a></li>
	</ul>
</nav>

Sizes

<nav class="mf-pagination large">
	<ul>
		<li><a href="">Previous</a></li>
		<li><a href="">3</a></li>
		<li class="active"><a href="">4</a></li>
		<li><a href="">5</a></li>
		<li class=disabled><a href="">Next</a></li>
	</ul>
</nav>

<nav class="mf-pagination small">
	<ul>
		<li><a href="">Previous</a></li>
		<li><a href="">3</a></li>
		<li class="active"><a href="">4</a></li>
		<li><a href="">5</a></li>
		<li class=disabled><a href="">Next</a></li>
	</ul>
</nav>

Cards

None of header or footer are mandatory

Card title

Card content

<div class='mf-card'>
	<header>Card title</header>
	Card content<br>
	<footer>A footer</footer>
</div>

Colors

MFELT comes with a set of predefined colors you can use by setting classes to html elements. The special feature is that borders, background or text with the same keyword are not exactly the same color, so the rendering is harmonious

Backgrounds

Predefined background colors are usefull because the css classes embed text colors adapted to the luminosity/dakkness of the background

bg-grey-lighter

bg-grey-light

bg-grey

bg-grey-dark

bg-grey-darker

bg-green-lighter

bg-green-light

bg-green

bg-green-dark

bg-green-darker

bg-yellow-lighter

bg-yellow-light

bg-yellow

bg-yellow-dark

bg-yellow-darker

bg-orange-lighter

bg-orange-light

bg-orange

bg-orange-dark

bg-orange-darker

bg-red-lighter

bg-red-light

bg-red

bg-red-dark

bg-red-darker

bg-purple-lighter

bg-purple-light

bg-purple

bg-purple-dark

bg-purple-darker

bg-blue-lighter

bg-blue-light

bg-blue

bg-blue-dark

bg-blue-darker

bg-cyan-lighter

bg-cyan-light

bg-cyan

bg-cyan-dark

bg-cyan-darker

Backgrounds and borders

For the demo, the border width is larger than the default value.
This highlights the difference in colour between background and border of the same class modifier.

bg-grey-lighter
border-grey-lighter

bg-grey-light
border-grey-light

bg-grey
border-grey

bg-grey-dark
border-grey-dark

bg-grey-darker
border-grey-darker

bg-green-lighter
border-green-lighter

bg-green-light
border-green-light

bg-green
border-green

bg-green-dark
border-green-dark

bg-green-darker
border-green-darker

bg-yellow-lighter
border-yellow-lighter

bg-yellow-light
border-yellow-light

bg-yellow
border-yellow

bg-yellow-dark
border-yellow-dark

bg-yellow-darker
border-yellow-darker

bg-orange-lighter
border-orange-lighter

bg-orange-light
border-orange-light

bg-orange
border-orange

bg-orange-dark
border-orange-dark

bg-orange-darker
border-orange-darker

bg-red-lighter
border-red-lighter

bg-red-light
border-red-light

bg-red
border-red

bg-red-dark
border-red-dark

bg-red-darker
border-red-darker

bg-purple-lighter
border-purple-lighter

bg-purple-light
border-purple-light

bg-purple
border-purple

bg-purple-dark
border-purple-dark

bg-purple-darker
border-purple-darker

bg-blue-lighter
border-blue-lighter

bg-blue-light
border-blue-light

bg-blue
border-blue

bg-blue-dark
border-blue-dark

bg-blue-darker
border-blue-darker

bg-cyan-lighter
border-cyan-lighter

bg-cyan-light
border-cyan-light

bg-cyan
border-cyan

bg-cyan-dark
border-cyan-dark

bg-cyan-darker
border-cyan-darker

Borders and texts

border-grey-lighter
txt-grey-lighter

border-grey-light
txt-grey-light

border-grey
txt-grey

border-grey-dark
txt-grey-dark

border-grey-darker
txt-grey-darker

border-green-lighter
txt-green-lighter

border-green-light
txt-green-light

border-green
txt-green

border-green-dark
txt-green-dark

border-green-darker
txt-green-darker

border-yellow-lighter
txt-yellow-lighter

border-yellow-light
txt-yellow-light

border-yellow
txt-yellow

border-yellow-dark
txt-yellow-dark

border-yellow-darker
txt-yellow-darker

border-orange-lighter
txt-orange-lighter

border-orange-light
txt-orange-light

border-orange
txt-orange

border-orange-dark
txt-orange-dark

border-orange-darker
txt-orange-darker

border-red-lighter
txt-red-lighter

border-red-light
txt-red-light

border-red
txt-red

border-red-dark
txt-red-dark

border-red-darker
txt-red-darker

border-purple-lighter
txt-purple-lighter

border-purple-light
txt-purple-light

border-purple
txt-purple

border-purple-dark
txt-purple-dark

border-purple-darker
txt-purple-darker

border-blue-lighter
txt-blue-lighter

border-blue-light
txt-blue-light

border-blue
txt-blue

border-blue-dark
txt-blue-dark

border-blue-darker
txt-blue-darker

border-cyan-lighter
txt-cyan-lighter

border-cyan-light
txt-cyan-light

border-cyan
txt-cyan

border-cyan-dark
txt-cyan-dark

border-cyan-darker
txt-cyan-darker

Introduction

Buttons

Base classes

Sizes

Block buttons

Buttons groups

Buttons toolbars

Navbars menus

Title boxes

Forms

Controls and labels

Inline

Input groups

Modifiers

Alerts

Alerts with class="block"

Dismissible alerts

Accordions

Tabs

Modals

Paginations

Sizes

Cards

Colors

Backgrounds

Backgrounds and borders

Borders and texts

Alerts with `class="block"`