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
+27-27Lines changed: 27 additions & 27 deletions
Original file line number
Diff line number
Diff line change
@@ -20,9 +20,9 @@ Check out the live [demo](https://manuel12.github.io/fluent-css/).
20
20
21
21
## Introduction
22
22
23
-
###Brief overview of what the library does:
23
+
A 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 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.
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
27
### How the library was built:
28
28
@@ -38,19 +38,19 @@ Simply clone the repository locally and extract the _fluent.min.css_ file.
38
38
39
39
In order to import FluentCSS, simply add the two library links to the head tag of your index.html
40
40
41
-
<link rel="stylesheet" href="fluent.min.css" />
41
+
<linkrel="stylesheet"href="fluent.min.css" />
42
42
43
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
45
And finally, add the script for the Font Awesome kit (to be able to use Font Awesome icons).
FluentCSS consists of one CSS file: _fluent.min.css_
52
52
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:
53
+
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:
54
54
55
55
### Some custom element styles:
56
56
@@ -88,55 +88,55 @@ In order to use the other styles available, such as having a heading with depth,
88
88
89
89
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
90
91
-
<html>
92
-
<body>
93
-
<h1>My heading</h1>
94
-
</body>
95
-
</html>
91
+
<html>
92
+
<body>
93
+
<h1>My heading</h1>
94
+
</body>
95
+
</html>
96
96
97
97
...that originally looked like this...
98
98
99
99
100
100
101
101
...you need to add the required classes, in this case _.heading-depth_ and _.bg-green_, to the h1 element...
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...
**Note:**custom containers occupy 75% of their parent's width and have white font by default.
137
+
**Note:**Custom containers occupy 75% of their parent's width and have a white font by default.
138
138
139
-
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.
139
+
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.
0 commit comments