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 -->
<link href="https://cdn.jsdelivr.net/gh/wikimint/[email protected]/public/framework/css/complete.min.css" rel="stylesheet" />
<!-- Utility only - CSS framework -->
<link href="https://cdn.jsdelivr.net/gh/wikimint/[email protected]/public/framework/css/utility.min.css" rel="stylesheet" />
<!-- Colors only (All color variants for font, background, brands) - CSS framework -->
<link href="https://cdn.jsdelivr.net/gh/wikimint/[email protected]/public/framework/css/colors.min.css" rel="stylesheet" />

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 PREVIEW

15px 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 PREVIEW
Font 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 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

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 PREVIEW

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.

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 EXAMPLE
Line through
Overline
Underline
Line through
Overline
Underline

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