FED-UI

The small front-end framework for developing responsive web applications.

Minimum requirements:

• Node v14.16.0 or later
• NPM v6.14.11 or later

Install

Install the framework using NPM (Node Package Manager). Before installing, remember to include a .gitignore file in the root of your project folder to prevent the node_modules directory being added to version control.

https://www.npmjs.com/package/@frontend-ui/fed-ui

Remember to create a package.json file in your project.

$ npm init -y

Install the framework:

$ npm install @frontend-ui/fed-ui

Once installed the framework will be added to the node_modules directory in your project folder and listed as a dependency in the package.json file.

To install a specific version:

$ npm install @frontend-ui/[email protected]

Adding the framework to your project

Now that the framework has been installed, it can now be imported into your project. Open your SCSS main file and import the framework from the node_modules directory using the @use rule. The file path will be relative to where the node_modules directory is located in relation to your main SCSS file.

// Your SCSS main file

@use '../../node_modules/@frontend-ui/fed-ui/src/scss/index';

Save the file and compile your SCSS code to output the CSS with the framework included.

Default Variables

The framework has a number of default variables. These can be overwritten if needed to apply your own styling.

Every SCSS variable includes the !default flag allowing you to override the variables with your own SCSS variable values without modifying the core source code.

// Set the default font 
$body-font: "Nunito", Helvetica Neue, Helvetica, Arial, sans-serif;
// Set the default body background color of the page
$body-bg: $white !default;
// Set the default body color of the page
$body-color: $grey-dark !default;

// Default link colour
$link-color: inherit !default;

// Underline colour under the heading (if applied)
$heading-underline-color: $orange !default;

// Margin between headings and paragraphs
$spacing: 1.2rem !default;

// Section padding setting the min and max values for browsers that provide support
$section-padding-block: min(20vh, 2rem) !default;

// Button padding
$btn-padding: 1rem 2rem !default;

// Primary button
$btn-primary-bg: $blue !default;
$btn-primary-color: $white !default;
$btn-primary-border: 1px solid $blue !default;
$btn-primary-hover-bg: lighten($blue, 10%) !default;
$btn-primary-hover-color: $white !default;
$btn-primary-hover-color-border: lighten($blue, 10%) !default;

// Secondary button
$btn-secondary-bg: $grey-dark !default;
$btn-secondary-color: $white !default;
$btn-secondary-border: 1px solid $grey-dark !default;
$btn-secondary-hover-bg: lighten($grey-dark, 10%) !default;
$btn-secondary-hover-color: $white !default;
$btn-secondary-hover-color-border: lighten($grey-dark, 10%) !default;

// Success button
$btn-success-bg: $green !default;
$btn-success-color: $white !default;
$btn-success-border: 1px solid $green !default;
$btn-success-hover-bg: lighten($green, 10%) !default;
$btn-success-hover-color: $white !default;
$btn-success-hover-color-border: lighten($green, 10%) !default;

// Active button
$btn-active-bg: darken($blue, 10%) !default;
$btn-active-color: $white !default;
$btn-active-color-border: darken($blue, 10%) !default;

// Footer
$footer-padding: 2rem 0;

Customise

Whenever possible, avoid modifying core framework files. For SCSS, that means creating your own stylesheet that imports the framework so you can modify and extend it.

Here's the example of how your own SCSS file may look where we can override the default variables:

// Required
@use '../../node_modules/@frontend-ui/fed-ui/src/scss/variables/variables' with (

    // Default variable overrides
    $body-bg: #000,
    $btn-primary-bg: #efefef

);

// Optional 
@use '../../node_modules/@frontend-ui/fed-ui/src/scss/core/base';

// Optional components imported
@use '../../node_modules/@frontend-ui/fed-ui/src/scss/components/button';
// etc.

Your custom variables can be moved into a separate SCSS partial. In this example, our custom variables are placed into a partial named _custom-variables.scss but you can name this whatever you would like.

// src/scss/variables/_custom-variables.scss

// Override default variables of the framework
@use '../../node_modules/@frontend-ui/fed-ui/src/scss/variables/variables' with (
    
    $body-bg: #000,
    $btn-primary-bg: #efefef

);

The main SCSS file, named custom.scss in our example, will need to be updated to import this partial using the @use instruction.

// src/scss/custom.scss

// Variables
@use 'src/scss/variables/custom-variables';

// Optional 
@use '../../node_modules/@frontend-ui/fed-ui/src/scss/core/base';

// Optional components imported
@use '../../node_modules/@frontend-ui/fed-ui/src/scss/components/button';
// etc.

The file structure in our example will look like this:

your-project /
  fonts /
      font-file.eot
      font-file.svg
      font-file.ttf
      font-file.woff
      font-file.woff2
  src /
      scss /
        custom.scss
        variables /
            _custom-vaiables.scss
  
  node_modules /
  .gitignore
  package.json

Components

You may not want to include the full framework in your project. For that reason, you can choose to install only the components you want.

Core (Reset)

The Core contains the initial reset code for your HTML elements, such as setting the font-size and box-sizing. Within your custom SCSS file, import the Core component like so:

@use '../../node_modules/@frontend-ui/fed-ui/src/scss/core/font';
@use '../../node_modules/@frontend-ui/fed-ui/src/scss/core/base';

You will need to also import the Font component currently to use only apply the Core component in your project.

Container

Containers horizontally add padding to your content. Use the .fui-container as a wrapper around your content to provide padding to the left and right of your content.

To import the .fui-container class selector, import the _layout.scss SCSS partial.

@use '../../node_modules/@frontend-ui/fed-ui/src/scss/core/layout';

Wrap your content using the container.

<main role="main">

    <div class="fui-container">

        <!-- Your content here -->

    </div>

</main>

Typography

All typography styling can be found within the core/_typography.scss partial.

@use '../../node_modules/@frontend-ui/fed-ui/src/scss/core/typography';

To set a small underline under each heading, add the following classes to your heading tags:

<h1 class="fui-heading fui-heading--underline"> ... </h1>

Grid (Flexbox)

The responsive, mobile-first grid is built using flexbox using a series of containers, rows, and columns to layout and align content.

Import the Grid component into your SCSS file:

@use '../../node_modules/@frontend-ui/fed-ui/src/scss/core/grid';

Update the HTML code to apply the grid structure:

<div class="fui-grid-container">
    
    <div class="fui-grid-row">
        <div class="fui-grid-col">

            <!-- Your content here -->

        </div>
    </div>

    <div class="fui-grid-row">
        <div class="fui-grid-col">
            
            <!-- Your content here -->
        
        </div>
        <div class="fui-grid-col">

            <!-- Your content here -->

        </div>
    </div>

    <div class="fui-grid-row">
        <div class="fui-grid-col">

            <!-- Your content here -->

        </div>
        <div class="fui-grid-col">

            <!-- Your content here -->

        </div>
        <div class="fui-grid-col">

            <!-- Your content here -->

        </div>
    </div>

To increase the size of the rows across the screen, add the .fui-grid-row--fluid modifier class to the row:

<div class="fui-grid-row fui-grid-row--fluid"> ... </div>

To extend this further and remove the horizontal padding on the left and right of the row, apply the fui-grid-row--fluid-full-width modifier class also.

<div class="fui-grid-row fui-grid-row--fluid fui-grid-row--fluid-full-width"> ... </div>

Section

The HTML5 <section> element represents a standalone section of the page. Sections should always have a heading and will be full-width of their parent container.

Adding the .fui-container as a wrapper around the content of the <section> within your page will provide the horizontal padding to the left and right. The <section> element will manage the vertical padding by default.

This is specified within the _base.scss partial so only the Core of the framework needs to be imported.

<main role="main">

    <h1>Page Heading</h1>

    <section>
        <div class="fui-container">

            <h2>Section Heading</h2>

            <!-- Your content here -->

        </div>
    </section>

</main>

Button

To import a Button component:

@use '../../node_modules/@frontend-ui/fed-ui/src/scss/components/button';

Remember to add the type attribute to the button element to prevent the button default being submit and to prevent the button refreshing the page when clicked.

Each button should apply the CSS classes for styling and a js-hook class to apply any JavaScript code to separate styling and functionality.

<button type="button" class="fui-btn js-fui-btn">Button</button>

Classes can be applied to a link to resemble a button element. If a link is used, please remember to include the role attribute.

<a href="https://www.example.com" role="button" type="button" class="fui-btn fui-btn--primary">Button</a>

To select all buttons with the js-hook class applied, use the querySelectorAll() document method. You will need to loop over all the button elements to apply functionality to the button that's clicked. This example below will show how to toggle the active class on/off for each button clicked:

const btn = document.querySelectorAll('.js-fui-btn');

// Loop through all buttons and toggle the active class on or off
btn.forEach(button => {
    button.addEventListener('click', function() {
    
        // Remove the active class from all buttons
        btn.forEach(activeButton => activeButton.classList.remove('fui-btn--active'));
    
        // Add the active class to the button being clicked
        this.classList.add('fui-btn--active');
    });
});

The button component has the following modifier classes:

<button type="button" class="fui-btn">Button</button>

<!-- Add the JavaScript hook to apply JavaScript code to the button -->
<button type="button" class="fui-btn js-fui-btn">Button</button>

<!-- Primary button -->
<button type="button" class="fui-btn fui-btn--primary">Button</button>

<!-- Secondary button -->
<button type="button" class="fui-btn fui-btn--secondary">Button</button>

<!-- Success button -->
<button type="button" class="fui-btn fui-btn--success">Button</button>

<!-- Set the button to show as active, you will need JavaScript to be used -->
<button type="button" class="fui-btn js-fui-btn fui-btn--active">Button</button>

<!-- Set the button to be 100% full width -->
<button type="button" class="fui-btn fui-btn--full-width">Button</button>

<!-- Curved button -->
<button type="button" class="fui-btn fui-btn--curved">Button</button>

<!-- Rounded button -->
<button type="button" class="fui-btn fui-btn--rounded">Button</button>

Setting up your SCSS project

Setting up your own SCSS project is very simple. Begin by creating a new project folder and generating a package.json file.

$ npm init -y

Install the sass NPM (Node Package Manager) package as a devDependency:

$ npm install sass --save-dev

Create a script within your package.json file to run the build and compile your SCSS code into CSS.

"scripts": {
  "compile": "sass src/scss/custom.scss dist/css/index.css"
},

Your project directory should look something like this:

your-project /
  src /
    scss /
      custom.scss

Compile your SCSS code by running the NPM script:

$ npm run compile

When you run the build and compile your SCSS code, your file structure will look like this:

your-project /
  dist /
    css /
      index.css

  src /
    scss /
      custom.scss

You can now install the framework using NPM (Node Package Manager).

Clone the repository

You may want to clone the repository to contribute towards this open-source project.

$ git clone https://github.com/frontend-ui/fed-ui.git

$ cd fed-ui
$ npm install

Compile the framework

The framework is built using dart sass. To compile the framework if changes are made to the core code, the compile script is executed using NPM (Node Package Manager):

$ npm run compile