Simple open-source CSS framework that is suitable especially for the beginners in the field of frontend web development, to help them make their projects in a fast way as possible, so it allows you to focus on the code more than the style anymore.
FastHelpers framework will save a lot of time for you in adding some frequently duplicated styles for many of the elements in your App.
I have collected most of these styles and limited them precisely in some classes to maintain the flexibility of working with these classes, also I add some special helper classes for your App theme color and dark mode, and by using them you can produce multiple themes in a very easy way as I will show you below, also you can control day and dark mode easily.
Note: Again I say that this framework matches the beginners in the field than the professional geeks because definitely there are many professional frameworks you can use and also advanced ways in controlling themes better than the way I use in this framework, but you can use this framework as a good start step for your projects until you deep learning in the other techniques.
- More re-usable and maintainability.
- Easy to use and understand the classes names.
- Highly flexibility.
- Familiar with the usage of bootstrap framework and can work with it perfectly.
- Depending on the name of the framework (FastHelpers). It has speed, fast and flexible helper classes that are named precisely to match the name of each style.
- Very important feature: while it has important helper classes that are grouped together in one collection called [FastHelpers Theme Classes (FHTC)], these helper themes classes will help you to make different and multiple themes for your website in no time, plus they have in the same collection another helper themes classes special for dark mode.
- Some knowledge of how to manipulate with DOM in javascript.
- Some knowledge of jQuery, because I depend on it to control and render the themes switchers, but it is optional for you as you can use vanilla JS to get same result.
- Good understanding of CSS.
- If you use bootstrap framework, so it is preferred to add the fasthelpers files after the bootstrap import
<link />and after importing the style of the App itself, like the image below.
This order of links will reduce the number of (!important) flags that you may use in the fasthelpers classes to enforce the browser to depend on the style from the fasthelpers files. You may don't need to any (!important) flags if you follow this order of links.
.upper {text-transform: uppercase} /*Uppercase for the text*/
.underline {text-decoration: underline} /*Add underline for the text*/
.par {margin: 15px 0; font-size: 18px; font-weight: bold; color: #727586; line-height: 1.6}
/*
- Special class for any paragraph that enhance most of requirements you need for any paragraph.
- You may need to use the (padding) helper class to add some padding to your paragraph.
- Change the color of the paragraph as you want.
*/
.shadow {box-shadow: 0 0 16px rgba(0, 0, 0, .1)}
/*
- Add box-shadow for your box.
- Suitable for Paragraphs boxes.
- The style of the shadow follows the material design rules, preferred to use it as shown above to have best experience.
*/
.bold {font-weight: bold} /*Increase the font weight of the text*/
.border {border: 1px solid #ddd} /*Add small border to your element*/
.list {background: transparent; border: none; font-size: 16px}
/*
- Suitable for using with the elements that have bootstrap class (list-group-item) to remove the white background of these elements and remove the border.
*/
- Before adding
listhelper class
- After adding
listhelper class
.padding {padding: 10px} /*Add some padding to your element*/
.radius {border-radius: 15px} /*Add some border-radius for your element*/
.margin-bt {margin-bottom: 15px} /*Add 15px margin bottom for your element*/
.relative {position: relative} /*Add position relative for your element*/
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,.6);
z-index: 1
}
/*
- This helper class is most suitable if you want to add a background-image to your section element, so you may need an overlay above this background-image to enhance its appearance.
- You may need to add (relative) helper class to the parent of the element that has this helper class to get the right effect.
*/
- Before adding
overlayhelper class
- After adding
overlayhelper class
background-image has a dark overlay now that makes its appearance better than before.
.transition,
.transition:before,
.transition:hover::before {
transition: all .4s linear;
-webkit-transition: all .4s linear;
-moz-transition: all .4s linear;
-o-transition: all .4s linear
}
/*
- Adding this helper class to your element, makes it has some transition for itself or for its before element or for its before element when hovering on it also.
*/
.before::before {
width: 100%;
height: 100%;
top: 0;
left: auto;
right: 0px;
position: absolute;
border-radius: 15px;
content: '';
opacity: 0
}
.before:hover::before {opacity: 1}
/*
- Add a box element as a before element on its parent element.
- Its opacity equals to 0 until you hover on its parent element.
- You may need to add (relative) class to the element that has this helper class to get the right effect.
*/
.cursor {cursor: pointer} /*Change the mouse pointer to cursor for specific element*/
.line-through {position: relative; z-index: 5}
.line-through span {
width: 250px;
height: 12px;
display: block;
margin: auto;
position: relative;
bottom: 20px;
opacity: .4;
z-index: -1;
}
/*
- Make a line through the element.
- You MUST use a (span) element inside the element that has this helper class to get the right effect.
- If you don't use the fasthelpers theme classes with the (span) inside the element, you may need to add a background-color for this (span) as you want to be able to show it.
*/
.line-below::before {
content: "";
position: absolute;
bottom: -5px;
width: 66px;
height: 2px;
background: #ddd
}
/*
- Add incomplete line below the text that has this class.
- You may need to add (relative) helper class to the element that has this helper class to get the right effect.
*/
.section-padd {padding: 40px 0} /*Preferred to use with section elements to add 40px padding top and bottom for customizing the distance between sections*/
.high-height {height: 400px} /*Add height 400px to your element*/
.middle-content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
/*
- Center the content inside any element.
- You may need to use the bootstrap class (text-center) with this helper class to have the right effect.
- You may need to add (relative) helper class to the parent of the element that has this helper class to get the right effect.
*/
/*Colors Helper Classes*/
.grey {color: #ddd} /*Add grey color to the text*/
.dark-grey {color: #222} /*Add dark grey color to the text*/
.white-color {color: #fff} /*Add white color to the text*/
.white-bg {background: #fff} /*Add white background to the element*/
.white-color-hvr:hover {color: #fff} /*Add white color to the text when hovering on it*/
.white-bg-hvr:hover {background: #fff} /*Add white background to the element when hovering on it*/
-
Before anything you may need to use the mechanism that I follow to be able to switch between multiple themes easily without any disturbance.
-
- You need to add tools menu that allows you to choose between options of switch themes and modes like the image below.
-
- Also you may need to take a look at the structure of the tools menu as
htmlcode, if you want to follow my way in switching the themes.
- Also you may need to take a look at the structure of the tools menu as
I depend on the data-theme attribute to be able to manipulate with the switchers of the themes easily, as you can see I made 3 different themes colors, each theme has its own file with the same fasthelpers theme classes but with different values of colors and background-colors, and I followed a stable pattern to name these themes files. To explain more I named the files as:- the color name of each theme then a dash sign (-) then the word of (theme), and I added additional name (default) to the default theme of the App to can distinguish it from the rest of themes, then I added each theme file name with its full url path inside the
data-themeattribute.-
- At the top of the page I added the default theme
<link />, and I will depend on it to switch between themes later.
- At the top of the page I added the default theme
I added into the fasthelpers theme classes file all the colors and background-colors that belong to this theme only. don't forget to add this link after the link of the fasthelpers itself and the bootstrap link as I showed in the perfect order before.
-
- Then the Javascript part comes, I will use jQuery here to control the themes switching color mechanism, the function to switch theme color is very easy.
When clicking on any colors inside the tools menu, the function search about link element that has
hrefattribute containing this word (-theme) then replace the url of thishrefwith the url of the chosen theme, and this is how to switch between themes, while the new theme will be replaced instead of the old current theme depending on changing the url of each theme file, so the new theme will be applied in your App with its special colors that are saved inside the fasthelpers theme classes.-
- The most important thing that I still haven't talked about is that you MUST add the required fasthelper theme class to each element that you need it to follow the theme rules, for example, you will need to add
theme-colorhelper class to any element you need to apply the theme color on it, another example if you want to add the theme background to your element you will need to addtheme-bghelper class to it, and so on.
- The most important thing that I still haven't talked about is that you MUST add the required fasthelper theme class to each element that you need it to follow the theme rules, for example, you will need to add
-
- Then, the function of switching the modes from day to dark or dark to day will be like the image below:
I moved all the fasthelpers dark mode classes from the fasthelpers theme classes file to another isolated file called (dark-mode), then when the user clicks on the night icon, the function will search about link element that has
hrefcontaining-themeand inject the dark mode file after this link in the order of the code as shown in the function, and when clicking on the day icon the dark mode file will be removed from the DOM.-
- You may notice in the previous dark mode function that we added to each element that has
text-for-darkclass another class calleddark-colorand added to each element hasbox-for-darkclass another class calleddark-boxwhen switching to the dark mode, that means if you need any text to be colored with a different color suitable for the dark mode you may need to addtext-for-darkhelper class to it in order to match the dark mode function and if you need any element to be colored with a different background-color suitable for the dark mode you may need to addbox-for-darkhelper class to it in order to match the dark mode function, and you may notice thatdark-boxanddark-colorhelper classes will be removed from any elements in the DOM after clicking on the day icon, to return the elements to their normal style.
- You may notice in the previous dark mode function that we added to each element that has
Note: The way above of switching theme colors or theme modes is optional, you don't have to use it anymore, and you can use any way else that leads to the same result, but the next point of the explanation of each fasthelper theme class is the important point and you have to use it as shown below to get the right effect.
-
-
Now I will explain each fasthelper theme class and each dark mode class individually like I do with the normal fasthelpers classes before, and I will add some components examples that has a combination of multiple helper classes from the framework which will be useful to use it directly as a ready fast element.
.theme-color {color: var(--main-color)}
/*
- Add this class for a text to get the theme color.
*/
.theme-bg {background: linear-gradient(to left, var(--main-color) 0%, var(--second-color) 100%)}
/*
- Add this class for an element to get the theme background color.
*/
.theme-bg-hvr:hover {background: linear-gradient(to top, var(--main-color) 0%, var(--second-color) 100%)}
/*
- Add this class for an element to get the theme background color when hovering on it.
*/
.theme-color-hvr:hover {color: var(--main-color)}
/*
- Add this class for a text to get the theme color when hovering on it.
*/
.theme-border {border: 1px solid var(--main-color)}
/*
- Add this class for an element to get a border that colored with the theme color.
*/
.theme-text-shw {text-shadow: 0 0 20px /*rgba(var(--second-color) >> in rgb syntax, 0.6)*/}
/*
- Add this class for a text to get a text-shadow that colored with the theme color.
*/
.theme-box-shw {box-shadow: 0px 2px 10px 0px var(--main-color)}
/*
- Add this class for an element to get a box shadow that colored with the theme color*/
.theme-box-shw-hvr:hover {box-shadow: 0 0 3px 2px /*rgb(var(--main-color) >> in rgb syntax, .8)*/}
/*
- Add this class for an element to get a box shadow that colored with the theme color when hovering on it.
*/
.before-bg:before {background: linear-gradient(to top,var(--main-color) 0%, var(--second-color) 100%)}
/*
- Add this class for an element you want its before element to get the theme background color.
*/
.before-bg:hover::before {background: linear-gradient(to top, var(--main-color) 0%, var(--second-color) 100%)}
/*
- Add this class for an element you want its before element to get the theme background color when hovering on the element.
*/
/*Dark Mode Classes*/
body {background-color: #121212}
.par {color: #b1b1b1}
.dark-color {color: #f7f7f7}
.dark-box {background: #222}
.shadow {box-shadow: 0 0 16px rgba(126, 126, 126, .6)}
/*
{body} >> will have this background #121212.
{.par} >> any element has (par) class in the normal mode, its texts color will be changed to #b1b1b1 in the dark mode.
{.dark-color} >> this class is a dynamic class, you don't need to add it manually to any text in your App, but to trigger it automatically when switching to dark mode you MUST add to the text that you want to use this helper class with it in the dark mode another class called (text-for-dark), so the text will get the color of #f7f7f7
{.dark-box} >> this class is a dynamic class, you don't need to add it manually to any element in your App, but to trigger it automatically when switching to dark mode you MUST add to the element that you want to use this helper class with it in the dark mode another class called (box-for-dark), so the element will get the background color of #f7f7f7
{.shadow} >> any element that has (shadow) class in the normal mode, its box shadow will be changed to have a color with rgba(126, 126, 126, .6) in the dark mode.
Note: Every color and background color used in the dark mode is chosen precisely depending on the material design rules.
*/
- Component Example 1:
<div class="service theme-box-shw before before-bg text-center transition cursor padding radius relative box-for-dark">
<div class="service-img padding border relative img-circle">
<img src="images/services/2.png" alt="service-clipart" class="center-block">
</div>
<h4 class="upper dark-grey text-for-dark relative">Free Cpanels & CMS</h4>
<p class="par relative">What you search about it, is existed with CMS and Cpanels, you can now reach the ultimate power of control.</p>
<button class="btn btn-lg theme-bg theme-color-hvr white-color border white-bg-hvr relative transition">Show More</button>
</div>
Results:
- Day Mode
- Day Mode when hovering on the Component
- Dark Mode
- Dark Mode when hovering on the Component
- Component Example 2:
<div class="feature relative theme-box-shw-hvr transition padding radius shadow box-for-dark">
<span class="logo theme-bg radius"><i class="fas fa-robot fa-2x white-color"></i></span>
<h4 class="upper dark-grey text-for-dark">Advanced Functionality</h4>
<p class="par">We have several stetion all over the world, unlimted speed, spaces for sure and Storage.</p>
<span class="theme-color read cursor">Read More <i class="fas fa-arrow-right"></i></span>
</div>
Results:
- Day Mode
- Day Mode when hovering on the Component
- Dark Mode
- Dark Mode when hovering on the Component
- Component Example 3:
<div class="box">
<h4 class="h3 theme-color upper">Perfect Plan Suitable for you is important.</h4>
<p class="par shadow padding box-for-dark radius">Choosing Suitable Plan is very important to save the usability and flexability of your website mechanism, also you need to be active with any kinds of updated Plans, we have a great newer Plans everyday, so don't miss it.</p>
</div>
Results:
- Day Mode
- Dark Mode
This is the starting version of the framework, I will enhance it in the next versions by adding more classes, using different techniques to build the framework like (SASS) and adding some other features that absolutely will improve the performance.
- CSS
-
I made a full responsive hosting website that is depended totally on bootstrap framework and my own fasthelpers framework.
Licensed under the MIT License