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.
| 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% |
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:
CSS Delivery
<link rel="stylesheet" type="text/css" href="https://sabalico.dev/framework.min.css">JS Delivery (Optimized)
<script async src="https://sabalico.dev/framework.js"></script> <!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://sabalico.dev/css/style.css">--> <title>HTML Website Template</title> </head> <body> <!-- Scripts --> <script async src="https://sabalico.dev/framework.js"></script> </body> </html> 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.
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
0-480px
481-768px
769-1024px
1024-1200px +
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) { }
