CSS Framework
Build your websites faster, smarter and more efficient with this very light-weight CSS framework developed for the public usage.
Include CSS framework via CDN
<!-- Complete CSS framework -->
<!-- Utility only - CSS framework -->
<!-- Colors only (All color variants for font, background, brands) - CSS framework -->
Usage
As per your website design requirements and needs, include any of the above CSS frameworks.
Stability
Our CSS framework files are served through the world class fast, reliable and automated CDN. This service is stable and always available online forever, even when the project creator removes the files from their own storage server.
Introduction
Since it is a open source project, we don't want to name it branded like Wikimint CSS framework. We simply call it CSS Framework. This CSS framework is a open source project developed and published by Wikimint Developer, an initiative developers community lead by Selvakumaran Krishnan.
CSS framework provides browser default style properties which are most commonly used by almost all websites. Main purpose of this project is to get rid of inline CSS. In some circumstances, we may have to add inline CSS somewhere. Since, this CSS framework provides all default style properties, we can build our own website templates and layouts too, which are up to our own creativity level.
By including this light weight CSS framework, you will not find any design conflict with your existing styles or CSS files. In fact, once you included our CSS framework, you don't have to add any other additional CSS files, as this CSS framework itself is enough to design and build an entire website.
Documentation
In this section, you will learn how to use and work with CSS framework with examples of all style properties one by one.
Assuming that you have included the complete CSS framework file, we give below explainations on each style properties with demonstration.
Font Size
Font sizes from 1px to 20px continuously and 25px, 30px, 35px, 40px, 45px, 50px, 55px and 60px are defined in the CSS framework. Let's see an example how to write class attribute to elements below:
CODE WITH PREVIEW15px font size
20px font size
35px font size
50px font size
60px font size
15px font size
20px font size
35px font size
50px font size
60px font size
Font Weight
Font weight property includes all available values like 100, 200, 300, 400, 500, 600, 700, 800 and 900.
CODE WITH PREVIEWFont weight is 100
Font weight is 200
Font weight is 300
Font weight is 400
Font weight is 500
Font weight is 600
Font weight is 700
Font weight is 800
Font weight is 900
Font weight is 200
Font weight is 300
Font weight is 400
Font weight is 500
Font weight is 600
Font weight is 700
Font weight is 800
Font weight is 900
Coloring
We defined 8 basic colors and named them as primary, secondary, info, success, warning, danger, dark and light. All these 8 colors are included by default in utility as well as complete CSS framework files.
In this example let's understand how to apply coloring for text, background and border.
CODE WITH PREVIEWIn this sentence, text color is light, background color is primary and border color is warning.
In this sentence, text color is light, background color is secondary and border color is primary.
In this sentence, text color is light, background color is secondary and border color is danger.
In this sentence, text color is light, background color is success and border color is danger.
In this sentence, text color is dark, background color is warning and border color is secondary.
In this sentence, text color is light, background color is danger and border color is success.
In this sentence, text color is primary, background color is light and border color is success.
In this sentence, text color is light, background color is dark and border color is info.
In this sentence, text color is light, background color is primary and border color is warning.
In this sentence, text color is light, background color is secondary and border color is primary.
In this sentence, text color is light, background color is secondary and border color is danger.
In this sentence, text color is light, background color is success and border color is danger.
In this sentence, text color is dark, background color is warning and border color is secondary.
In this sentence, text color is light, background color is danger and border color is success.
In this sentence, text color is primary, background color is light and border color is success.
In this sentence, text color is light, background color is dark and border color is info.
Text Decoration
For text decoration, the following style properties are defined with the class names as shown below:
/*TEXT DECORATION*/
.td-auto {text-decoration: auto;}
.td-blink {text-decoration: blink;}
.td-dashed {text-decoration: dashed;}
.td-dotted {text-decoration: dotted;}
.td-double {text-decoration: double;}
.td-line-through {text-decoration: line-through;}
.td-none {text-decoration: none;}
.td-revert {text-decoration: revert;}
.td-overline {text-decoration: overline;}
.td-solid {text-decoration: solid;}
.td-underline {text-decoration: underline;}
.td-wavy {text-decoration: wavy;}
Let's see some example to understand how to use text decoration properties in your HTML elements.
CODE WITH EXAMPLELine throughOverlineUnderline
Display Properties
For displaying the content, the following style properties are defined with the class names as shown below:
/* DISPLAY PROPERTIES*/
.d-none {display: none;}
.d-block {display: block;}
.d-flex {display: flex;}
.d-table {display: table;}
.d-grid {display: grid;}
.d-contents {display: contents;}
.d-iblock {display: inline-block;}
.d-iflex {display: inline-flex;}
.d-itable {display: inline-table;}
.d-igrid {display: inline-grid;}
Position Properties
For positioning the elements and contents, the following style properties are defined with the class names as shown below:
/* POSITION PROPERTIES*/
.p-absolute{position:absolute;}
.p-fixed{position:fixed;}
.p-relative{position:relative;}
.p-static{position:static;}
.p-sticky{position:sticky;}
.p-revert{position:revert;}
Float Properties
With regard to floating functionalities, the following style properties are defined with the class names as shown below:
/*FLOAT PROPERTIES*/
.f-left {float : left;}
.f-right {float : right;}
.f-none {float : none;}
.f-revert {float : revert;}
.f-iend {float : inline-end;}
.f-istart {float : inline-start;}
Opacity Properties
For opacity, the following style properties are defined with the class names as shown below:
/*OPACITY PROPERTIES*/
.op-01 {opacity: 0.1;}
.op-02 {opacity: 0.2;}
.op-03 {opacity: 0.3;}
.op-04 {opacity: 0.4;}
.op-05 {opacity: 0.5;}
.op-06 {opacity: 0.6;}
.op-07 {opacity: 0.7;}
.op-08 {opacity: 0.8;}
.op-09 {opacity: 0.9;}
.op-1, .op-10 {opacity: 1;}
In the class attribute, use op-01 for lower opacity value and op-1 for higher opacity value.
Full Reference
As much as possible, we have given explaination on how to use the CSS framework and how to write class attributes to get desired website design. We have explained with examples and some attributes and properties cannot be explained with demonstration. Therefore, we have given complete code reference here where you can understand what class attribute defines what style properties.
Post a Comment
0 Comments