Sabalico Framework

The Sabalico 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 Sabalico CMS, the Sabalico 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.

 
Popular Device Screen Sizes
Rank Resolution Device %
1 360x640 Small Phone 22.64%
2 1366x768 Avg. Laptop 11.98%
3 1920x1080 Large Desktop 7.35%
4 375x667 Avg. Phone 5%
5 1440x900 Avg. Desktop 3.17%
6 720x1280 Large Phone 2.74%
Framework Installation

Installing the Sabalico 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 either the top (CSS) or the bottom (JS) of the website:

Sabalico - Framework
 

CSS Delivery

<link rel="stylesheet" type="text/css" href="https://framework.sabali.co/framework.min.css">
 

JS Delivery (Optimized)

<script async src="https://framework.sabali.co/framework.js"></script>
Ready to Deploy Website
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Internal Stylesheets --> <style> </style> <!-- External Stylesheets --> <!--<link rel="stylesheet" type="text/css" href="https://framework.sabali.co/css/style.css">--> <title>HTML Website Template</title> </head> <body> <!-- Scripts --> <script async src="https://framework.sabali.co/framework.js"></script> </body> </html> 
Add Features →
Responsive Layouts

The Sabalico Layout system involves grids and blocks that are laid in based on fractions and percentages. This allows for very easy responsive code that also makes designing websites simple.

 

The layout system is broken into fractions between 1 (full) and 1/6. You can use the blocks within each fraction or you can feel free to lay it out however you feel like.

 
Sabalico Responsive

Example:

<div class="row"><div class="one-half left"><div class="layout-block"><p>1/2</p></div></div><div class="one-half right"><div class="layout-block"><p>1/2</p></div></div></div>

Automatic Spacing:

Adding the class "left", "right", or "middle" where appropriate will space the interior padding of the blocks accordingly based on a predetermined scale.

1/2

1/2

View Layouts →
Device Screen Breakpoints

The @media element of CSS is useful for creating responsive designs. For example, in order to display CSS for extra large devices such as large laptops and desktops, with resolutions of 1200px and up you would use the following CSS code:

Example:

@media only screen and (min-width: 1200px) { }