Sabali Co > Framework

Sabali Co Framework

The Sabali Co Framework is a standalone CSS and Javascript/jQuery framework that allows web designers to quickly and efficiently build high speed, small size, dynamic and responsive websites and web pages for blogs, businesses and much more.

While it can be used in conjunction with the Sabali Co CMS, which can be found by clicking here, the Sabali Co Framework can also be used by experienced HTML, CSS, Javascript, PHP and mySQL developers to rapid deploy websites and content with ease while still not compromising functionality.

Download NowSabali Co - Download Icon
Framework - Responsive
Sabali Co - Framework Layouts

Framework Installation

Installing the Sabali Co Framework is extremely easy. The framework also comes preloaded on the CMS and will automatically update to the latest version. You can link to the latest version by simply adding the following piece of code to the bottom of the website:

<script async src="https://www.sabali.co/framework/js/framework.js" type="text/javascript"></script>

To install the framework on your own server to edit as you wish simply upload the framework folder to your public_html root folder. This means it should be placed in the most top level folder that contains the admin folder, the index.php file as well as the templates folder.

Framework JS

var cssId = 'sabalicoframework';

if (!document.getElementById(cssId)) {

var head = document.getElementsByTagName('head')[0];

var link = document.createElement('link');

link.id = cssId;

link.rel = 'stylesheet';

link.type = 'text/css';

link.href = 'https://www.sabali.co/framework/css/skeleton-min.css';

link.media = 'all';

head.appendChild(link);

}

Framework Documentation

Listed below is the most up to date CSS of the Sabali Co Framework with notes and explanations for each section. Feel free to copy and paste whichever sections of the framework you want to use and likewise delete any that you are not using to free up space. Using this documentation you should be able to customize the framework how you see fit.

Normalize CSS

body {

width: 100% !important;

margin: 0px !important;

}

.wrapper {

display: block;

max-width: 1024px;

width: 100%;

margin-left: auto;

margin-right: auto;

}

h1, h2, h3, h4, h5, h6 {

margin: 0px;

padding: 0px;

font-weight: 200;

}

Layouts CSS

.full {

width: 100%;

}

.one-half {

width: 50%;

}

.one-third {

width: 33.33%;

}

.two-thirds {

width: 66.66%;

}

.one-fourth {

width: 25%;

}

.two-fourths {

width: 50%;

}

.three-fourths {

width: 75%;

}

.one-fifth {

width: 20%;

}

.two-fifths {

width: 40%;

}

.three-fifths {

s

width: 60%;

}

.four-fifths {

width: 80%;

}

.one-sixth {

width: 16.66%;

}

.two-sixths {

width: 33.33%;

}

.three-sixths {

width: 50%;

}

.four-sixths {

width: 66.66%;

}

.five-sixths {

width: 82.33%;

}

.full,

.one-half,

.one-third,

.two-thirds,

.one-fourth,

.two-fourths,

.three-fourths,

.one-fifth,

.two-fifths,

.three-fifths,

.four-fifths,

.one-sixth,

.two-sixths,

.three-sixths,

.four-sixths,

.five-sixths {

position: relative;

float: left;

box-sizing: border-box;

overflow: hidden;

margin: 0px !important;

}

.clear {

clear: both;

}

.desktop-clear {

clear: both;

}

.tablet-clear {

display: none;

}

.mobile-clear {

display: none;

}

.no-margin {

margin: 0px !important;

}

.desktop-none {

display: none;

}

Click here to view all the layouts.

Content CSS

.header, .navigation, .content, .footer {

width: 100%;

overflow: hidden;

}

.content {

overflow: hidden;

}

.content-wrapper {

margin-left: auto;

margin-right: auto;

}

Text Formats CSS

a {

text-decoration: none;

}

a:hover {

cursor: pointer !important;

}

a>img {

cursor: pointer !important;

}

bdi {

}

dfn {

font-size: 15px;

font-weight: 600;

}

.caption {

text-align: center;

}

.caption-right, .caption-left {

display: block;

max-width: 400px;

text-align: center;

}

.citation {

text-align: center;

}

.quote {

display: block;

width: 65%;

margin-left: auto;

margin-right: auto;

}

.text-left {

text-align: left;

}

.text-center {

text-align: center;

}

.text-right {

text-align: right;

}

.underline {

text-decoration: underline;

}

.strike {

text-decoration: line-through;

}

.overline {

text-decoration: overline;

}

Image Formats CSS

.image-left {

display: inline-block;

float: left;

margin-left: 35px;

margin-right: 35px;

}

.image-center {

display: block;

margin-left: auto;

margin-right: auto;

}

.image-right {

display: inline-block;

float: right;

margin-left: 35px;

margin-right: 35px;

}

.rounded {

border-radius: 5px;

}

a img:hover {

opacity: .5;

}

.image-vertical-align {

display: table-cell;

width: 100%;

height: auto;

overflow: hidden;

vertical-align: middle;

}

.image-align {

display: block;

margin-left: auto;

margin-right: auto;

vertical-align: middle;

}

Tables CSS

.table-wrapper {

display: block;

width: 95%;

overflow: hidden;

margin-left: auto;

margin-right: auto;

}

table {

max-width: 1024px;

border-collapse: collapse;

border-spacing: 0px;

overflow: hidden;

}

thead th {

}

th {

}

tr {

}

tr a {

}

tr a:hover {

}

tr:nth-child(even) {

}

tr:nth-child(even) a {

}

tr:nth-child(even) a:hover {

}

td {

}

table a {

}

Forms CSS

span.required {

font-size: 13px;

color: #ff0000;

}

input[type="text"] {

}

input[type="password"] {

}

input[type="number"] {

}

input[type="email"] {

}

input[type="file"] {

}

.success-page {

display: block;

width: 50%;

overflow: hidden;

margin-left: auto;

margin-right: auto;

}

Features

This is normally where the Features CSS would be included however, not everyone needs to use all of the features all of the time. Therefore we placed the CSS and responsive CSS for the features in its own section. In order to install a feature simply activate the proper JS script and add the HTML structure along with the CSS code into the proper locations.

Click here to see a full list of features.

Responsive CSS

Check out the Responsive page for a complete list of responsive CSS demonstrations. Included below is the essential responsive coding for the framework. Simply copy and paste the additional feature CSS into the appropriate responsive structure. The responsive coding for the Features is included along with the normal CSS code.

1024px Responsive CSS

@media only screen and (max-width: 1024px) {

.wrapper {

width: 90%;

}

}

850px Responsive CSS

@media only screen and (max-width: 850px) {

/* --- Begin Framework Features CSS 850px --- */

/* --- Framework 850px --- */

.wrapper {

width: 90%;

}

.one-half {

width: 100%;

}

.one-fourth {

width: 50%;

}

.desktop-clear {

display: none;

clear: none;

}

.tablet-clear {

display: block;

clear: both;

}

.desktop-none {

}

.tablet-none {

display: none;

}

/* --- Content 850px --- */

.content {

width: 100%;

}

.content-wrapper {

width: 85%;

}

/* --- Tables 850px --- */

table {

width: 95%;

}

th {

padding: 5px !important;

}

td {

padding: 5px !important;

text-align: center;

}

table a {

margin-left: 5px;

margin-right: 5px;

}

/* --- Content 850px --- */

h1 {

font-size: 28px;

}

h2 {

font-size: 25px;

}

h3 {

font-size: 23px;

}

h4 {

font-size: 20px;

}

.full p,

.one-half p,

.one-third p,

.two-thirds p {

display: block;

width: 85%;

margin-left: auto;

margin-right: auto;

}

/* --- Footer 850px --- */

.footer .one-third {

width: 100%;

}

/* --- Other Sites 850px --- */

.other-sites .one-third {

width: 50%;

}

}

650px Responsive CSS

@media only screen and (max-width: 650px) {

/* --- Framework 650px --- */

.wrapper {

width: 90%;

}

.one-half {

width: 100%;

}

.one-fourth {

width: 50%;

}

.one-fifth {

width: 100%;

}

.desktop-clear {

display: none;

clear: none;

}

.tablet-clear {

display: block;

clear: both;

}

.desktop-none {

display: none;

}

.tablet-none {

display: none;

}

/* --- Content 650px --- */

.content-wrapper {

width: 85%;

}

.content h1 {

font-size: 28px;

}

.content h2 {

font-size: 23px;

}

.content h3 {

font-size: 20px;

}

.content h4 {

font-size: 18px;

}

/* --- Other Sites 650px --- */

.other-sites .one-third {

width: 100%;

}

.website-icon {

width: 55%;

}

}

500px Responsive CSS

@media only screen and (max-width: 500px) {

/* --- Framework 500px --- */

.wrapper {

width: 100%;

}

.one-half,

.one-third,

.two-thirds,

.one-fourth,

.two-fourths,

.three-fourths,

.one-fifth,

.two-fifths,

.three-fifths,

.four-fifths,

.one-sixth,

.two-sixths,

.three-sixths,

.four-sixths,

.five-sixths {

width: 100%;

}

.mobile-clear {

display: block;

clear: both;

}

.tablet-none {

display: none;

}

.mobile-none {

display: none;

}

iframe {

display: block;

width: 95% !important;

margin-left: auto;

margin-right: auto;

}

.resize {

display: block !important;

width: 85%;

margin-left: auto !important;

margin-right: auto !important;

}

/* --- Content --- */

.content-wrapper {

width: 85%;

}

.content h1 {

font-size: 28px;

}

.content h2 {

font-size: 23px;

}

.content h3 {

font-size: 20px;

}

.content h4 {

font-size: 18px;

}

/* --- Image Formats 500px --- */

.image-left, .image-center, .image-right {

display: block;

width: 90%;

margin-left: auto;

margin-right: auto;

}

}

Framework - Create Your Own Website