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-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -22,7 +22,7 @@ Check out the live [demo](https://manuel12.github.io/fluent-css/).
22
22
23
23
### Brief overview of what the library does:
24
24
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 inmeditaly improve the look of a website when imported, but also provided the user with utility classes to alter the stylings of the different elements in use.
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 provided the user with utility classes to alter the styles of the different elements in use.
26
26
27
27
### How the library was built:
28
28
@@ -36,19 +36,19 @@ Simply clone the repository locally and extract the _fluent.min.css_ file.
36
36
37
37
### How to import the library:
38
38
39
-
In order to import FluentCSS simply add the two library links on the head tag of your index.html
39
+
In order to import FluentCSS, simply add the two library links to the head tag of your index.html
40
40
41
41
<link rel="stylesheet" href="fluent.min.css" />
42
42
43
-
_This is of course assuming the styles are in the root of your project, if they are not then modify their paths accodingly._
43
+
_This is, of course, assuming the styles are in the root of your project; if they are not, then modify their paths accordingly._
44
44
45
-
And finally add the script for the Font Awesome kit (to be able to use FontAwesome Icons).
45
+
And finally, add the script for the Font Awesome kit (to be able to use Font Awesome icons).
FluentCSS consists of 1 CSS file: _fluent.min.css_
51
+
FluentCSS consists of one CSS file: _fluent.min.css_
52
52
53
53
The _fluent.min.css_ file includes boilerplate stylings that will apply inmediatly as soon as 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 colors classes to style text, background and border colors:
54
54
@@ -82,7 +82,7 @@ The _fluent.min.css_ file includes boilerplate stylings that will apply inmediat
82
82
83
83
### Adding classes to elements
84
84
85
-
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, ordered and unordered lists will also be automatically updated.
85
+
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.
86
86
87
87
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.
88
88
@@ -94,7 +94,7 @@ So for example, if you have a heading element that you want to update to a headi
94
94
</body>
95
95
</html>
96
96
97
-
...that originally looks like this...
97
+
...that originally looked like this...
98
98
99
99

100
100
@@ -112,7 +112,7 @@ So for example, if you have a heading element that you want to update to a headi
112
112
113
113
### Custom containers
114
114
115
-
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...
115
+
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...
0 commit comments