How to make a CSS framework

We always need simplicity in working with CSS and JavaScript and that's why the developers out there made different frameworks and libraries and API's depending on their needs. CSS and JavaScript frameworks makes its easier and saves lot of time writing the same lines again and again and do a task in few lines of code.

Today, we are going to create a simple library which of course, you can extend based on your needs.There is no strong need at the time of writing this, as there are already lots of libraries available on web.Any one of them can be super-handy to be pick out.But still, we are going to make one as we can stylize t as per our needs and you can use it on your whole website or blog.

Making a CSS library is not a great thing as compared to making a JavaScript library.Since the simple steps are-

Define your own classes in a CSS file.
Use your own starting name to avoid misconception with other libraries.
Minify the library and import it into a document.

With this, we can make a simple CSS3 framework.

Making a CSS file

Lets call our framework 'Cmagz'.So the file name Cmagz.css is made.

-📁Cmagz.css

First we will add the simple properties to html, body,*(all) , * before and after etc.

/*-CMagz.css-*/
html{
    box-sizing: border-box;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-family: Verdana, sans-serif;
    font-size: 10px;
    overflow-x: hidden;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}
body{
margin:0px;
}

So what done is above is we have sized the html in border-box so we can add height and width.To make a ll field compatible, we have hidden the x- scroll bar.

Now we are going to select the element and make them display as block because some or most of the browsers shows them not as block.For example, section.

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
progress,
video {
    display: inline-block;
}

progress {
    vertical-align: baseline;
}

So now we gonna starting with some of the tags and their default values.For example, if you want to add border to <img> tag, then you can add it here below.

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

a:active,
a:hover {
    outline-width: 0;
}

figure {
    margin: 1em 40px;
}

img {
    border-style: none;
}

svg:not(:root) {
    overflow: hidden;
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

button,
input,
select,
textarea {
    font: inherit;
    margin: 0;
}

optgroup {
    font-weight: bold;
}

button,
input {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button,
html [type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: .35em .625em .75em;
}

legend {
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

textarea {
    overflow: auto;
}

[type=checkbox],
[type=radio] {
    padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto;
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.54;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

Stylize the h1-h6 tags.:

h1 {
    font-size: 38px;
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 26px;
}

h4 {
    font-size: 22px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 18px;
}

After that,

.cmagz-image {
    max-width: 100%;
    height: auto;
}
.cmagz-input {
    padding: 5px;
    display: block;
    border: none;
    width: 100%;
}
.cmagz-check,
.cmagz-radio {
    width: 24px;
    height: 24px;
    position: relative;
    top: 6px;
}

Then there you can add some CSS animations.So for that, first we need to make @keyframes like below.

.cmagz-animation-fade {
    animation: fade 2s infinite;
}

@keyframes fade {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

For making this framework more enlightening, we can add much more animations like fade, hide , show, pop-up , disappear, blink etc.Design your own div box, put all CSS code into a file and give a class name like cmagz-divbox.

There are many CSS frameworks available in the market, you can make your own or mix two of them to add same functionality into one!Minify the CSS file to save up the space and import it into document.

Okay, so with that, you can design your own CSS3 framework like this.Any queries?Ask in comments.