Thank you for your interest in our Awesome CSS Framework.
This product is to help you on your web design tasks every day.
We are web / mobile designers and we have created this framework to serve our own purpose in the begining. But along the way we added a lot of things to have this awesome product to present.
The framework consist of 607 css classes:
-
padding
-
margin
-
width and height
-
font size
-
font weight
-
opacity
For every property (padding, margin, dimensions) there are 43 classes. And aditional classes for the other properties.
With a total of 607 classes so far, and even more to come in the future, you won’t start a new project without using the framework.
To use the framework is easy enough for a beginner too:
A. Setting up on a HTML website:
1. download the AwesomeCSSFramework.css file and place it in your project assets folder
2. include the file in all the pages, for example, if your file is in assets/css folder,
<span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>head<span style="box-sizing: inherit; color: mediumblue;">></span></span> <span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px; color: brown;"><span style="box-sizing: inherit; color: mediumblue;">...</span></span> <span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>link<span style="box-sizing: inherit; color: red;"> rel<span style="box-sizing: inherit; color: mediumblue;">="stylesheet"</span> type<span style="box-sizing: inherit; color: mediumblue;">="text/css"</span> href<span style="box-sizing: inherit; color: mediumblue;">="assets/css/AwesomeCSSFramework.css"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span> <span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px; color: brown;"><span style="box-sizing: inherit; color: mediumblue;">...</span></span> <span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/head<span style="box-sizing: inherit; color: mediumblue;">></span></span>
3. In your HTML file all you need to do is to include desired classes for an element. Example:
<p class="p-l-20 p-t-10>Hello Awesome!</p>
This will add a paragraph with 20 pixels padding left and 10 pixels top. similar to:
p { padding-left: 20px;
padding-top: 10px; }
You can see how much time we did saved. And less code is written for the same action.
For a HTML based website, you need to call the file in every page, in the head section (step 2).
B. Setting with a WordPress theme
1. download the AwesomeCSSFramework.css file and place it in your theme assets folder
2. In functions.php file, add the reference to the framework file:
wp_enqueue_style('AwesomeCSSFramework', get_template_directory_uri() .'/assets/css/AwesomeCSSFramework.css',false,'1.1','all');
3. In your HTML file all you need to do is to include desired classes for an element. Example:
<p class="p-l-20 p-t-10>Hello Awesome!</p>
C. PHP based website (Codeigniter, Laravel) and any other type (HTML based head)
1. Supossing you’ve got a main head / header.php file included in every file of the project, you can include the framework similar to HTML based website (A):
<span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>head<span style="box-sizing: inherit; color: mediumblue;">></span></span> <span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px; color: brown;"><span style="box-sizing: inherit; color: mediumblue;">...</span></span> <span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>link<span style="box-sizing: inherit; color: red;"> rel<span style="box-sizing: inherit; color: mediumblue;">="stylesheet"</span> type<span style="box-sizing: inherit; color: mediumblue;">="text/css"</span> href<span style="box-sizing: inherit; color: mediumblue;">="assets/css/AwesomeCSSFramework.css"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span> <span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px; color: brown;"><span style="box-sizing: inherit; color: mediumblue;">...</span></span> <span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/head<span style="box-sizing: inherit; color: mediumblue;">></span></span>
/Awesome CSS Framework/
-
/Padding 43 classes/
.p-0 {
padding: 0px;
}
.p-5 {
padding: 5px;
}
.p-10 {
padding: 10px;
}
...
.p-215 {
padding: 215px;
}
-
/Padding Top 43 classes/
.p-t-0 {
padding-top: 0px;
}
.p-t-5 {
padding-top: 5px;
}
...
.p-t-215 {
padding-top: 215px;
}
-
/Padding Right 43 classes/
-
-
/Padding Bottom 43 classes/
-
-
/Padding Left 43 classes/
-
-
/Margin 43 classes/
-
-
/Margin Top 43 classes/
-
-
/Margin Right 43 classes/
-
-
/Margin Bottom 43 classes/
-
-
/Margin Left 43 classes/
-
-
/Height 43 classes/
-
-
/Width 43 classes/
-
-
/Font Size 70 classes/
-
-
/Font Weight 10 classes/
-
-
/Opacity 11 classes/
-
We’ve got a tool created by our team, a tool that generates all the framework after we submit names for the classes. On your request and with no extra charge, we can easily change the names of every class after you purchase the product.
You don’t like p-b-20 for a 20px padding bottom, on your request we can call it whatever, pad-bo-20 if you want.
All the requests should be directed through our profile contact form or our help page https://help.pssthemes.com.