Skip to content

A CSS library inspired by the styles of the Duolingo and Font Awesome websites.

License

Notifications You must be signed in to change notification settings

manuel12/fluent-css

Repository files navigation

FluentCSS

A CSS library inspired by the styles of the Duolingo and Font Awesome websites.

Check out the live demo.

Introduction

A Brief overview of what the library does:

Inspired by the styles of the Duolingo and Font Awesome websites, I wanted to create a library that would immediately improve the look of a website when imported but also provide the user with utility classes to alter the styles of the different elements in use.

Disclainer: I don't any rigths to Duolingo or Font Awesome. Duolingo images or icons used are not monetized in any way.

How the library was built:

FluentCSS was built using plain CSS and Font Awesome icons.

Download

How to download the library:

Simply clone the repository locally and extract the fluent.min.css file.

How to import the library:

In order to import FluentCSS, simply add the two library links to the head tag of your index.html

This is, of course, assuming the styles are in the root of your project; if they are not, then modify their paths accordingly.

And finally, add the script for the Font Awesome kit (to be able to use Font Awesome icons).

<script src="https://kit.fontawesome.com/d0731b8ace.js" crossorigin="anonymous"></script>

What's included in the library

FluentCSS consists of one CSS file: fluent.min.css

The fluent.min.css file includes boilerplate stylings that will apply immediately as soon as the library is imported; it also contains some custom element styles like 'main container' or 'basic container' that serve as building blocks for your application; further utility classes regarding margin, padding, width, and height; and color classes to style text, background, and border colors:

Some custom element styles:

  • Main container
  • Basic container
  • Depth container
  • Heading with depth
  • Heading with round corners
  • Submit button
  • Icon buttons

Some general style utilities

  • Display styles
  • Margin styles
  • Padding styles
  • Width styles
  • Height styles
  • Text styles
  • Font-size styles

Custom Colors

  • Background colors
  • Border colors
  • Text colors

Usage

Adding classes to elements

After importing FluentCSS and reloading, you should see changes applied to the document. The standard background will be added; the font family and color will be updated; input elements, buttons, tables, and ordered and unordered lists will also be automatically updated.

In order to use the other styles available, such as having a heading with depth, or with darker borders, styling buttons as social or music buttons, and so on, you will need to add the class of the style you want to add to the element you want to change.

So for example, if you have a heading element that you want to update to a heading with depth and also give it a different background color...

             

My heading

         

...that originally looked like this...

Heading example

...you need to add the required classes, in this case .heading-depth and .bg-green, to the h1 element...

             

My heading

         

...so that it ends up looking like this:

Heading example

Custom containers

One of the most important classes provided by FluentCSS is the .main-container class. With this class, you can create containers that are padded, bordered, and margined. All the examples in the "Examples" section of this README file are contained in custom containers. In order to make a normal div into a custom container, you just have to add the class .main-container to such an element. As an example, we have a restaurant reservation system that is wrapped in a div...

     

Restaurant Reservation System

      ...    

...and currently looks like this...

Heading example

...add the .main-container and .bg-blue classes to such a div in order to change it to a custom container with a blue background...

     

Restaurant Reservation System

      ...    

...and it will end up looking like this:

Heading example

Note: Custom containers occupy 75% of their parent's width and have a white font by default.

In order to see how to apply any of the different styling examples, simply load the index.html that comes with the library and check the source code to see how each element was implemented.

Examples

Headings with depth

Headers example

Headings with round corners

Headers example

Headings with dark borders

Headers example

Form elements

Headers example

Button using width classes

Button using width classes

Social buttons

Social buttons

Sound buttons

Sound buttons

Tables, ordered and unordered lists

Headers example

About

A CSS library inspired by the styles of the Duolingo and Font Awesome websites.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •