You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+8-6Lines changed: 8 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -24,6 +24,8 @@ A Brief overview of what the library does:
24
24
25
25
Inspired by the styles of the [Duolingo](https://www.duolingo.com/learn) and [Font Awesome](https://fontawesome.com/) 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.
26
26
27
+
_Disclainer: I don't any rigths to Duolingo or Font Awesome. Duolingo images or icons used are not monetized in any way._
28
+
27
29
### How the library was built:
28
30
29
31
FluentCSS was built using plain CSS and Font Awesome icons.
@@ -38,13 +40,13 @@ Simply clone the repository locally and extract the _fluent.min.css_ file.
38
40
39
41
In order to import FluentCSS, simply add the two library links to the head tag of your index.html
40
42
41
-
<linkrel="stylesheet"href="fluent.min.css" />
43
+
<linkrel="stylesheet"href="fluent.min.css" />
42
44
43
45
_This is, of course, assuming the styles are in the root of your project; if they are not, then modify their paths accordingly._
44
46
45
47
And finally, add the script for the Font Awesome kit (to be able to use Font Awesome icons).
@@ -88,7 +90,7 @@ In order to use the other styles available, such as having a heading with depth,
88
90
89
91
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...
90
92
91
-
<html>
93
+
<html>
92
94
<body>
93
95
<h1>My heading</h1>
94
96
</body>
@@ -100,7 +102,7 @@ So for example, if you have a heading element that you want to update to a headi
100
102
101
103
...you need to add the required classes, in this case _.heading-depth_ and _.bg-green_, to the h1 element...
102
104
103
-
<html>
105
+
<html>
104
106
<body>
105
107
<h1class="heading-depth bg-green">My heading</h1>
106
108
</body>
@@ -114,7 +116,7 @@ So for example, if you have a heading element that you want to update to a headi
114
116
115
117
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...
116
118
117
-
<div>
119
+
<div>
118
120
<h1>Restaurant Reservation System</h1>
119
121
...
120
122
</div>
@@ -125,7 +127,7 @@ One of the most important classes provided by FluentCSS is the _.main-container_
125
127
126
128
...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...
0 commit comments