Websites by Mark are currently working on a new CSS framework.
Generally we like the Twitter Bootstrap CSS frame work, but we have always felt its reliance on JS/AJAX and the size of code has meant for many sites, a slower user experience.
The Excell CSS framework as come out of the idea of a very streamline CSS only approach.
To use Excell CSS requires simply to add the CSS sheets into any webpage you want to use them. We also recommend using normalize.css to ensure consistency across browsers.
Currently it allows for up to 4 columns across four break points and has built in responsive navigation for mobile sizes.
By only supporting 4 column, 4 break point and mobile css navigation, Excellcss is over 25 times smaller than Bootstrap.
c = container (including row function)
a1 to dq = first letter indicates media break point, number indicates columns with t equalling two thirds and q being three quarters.
Menu support – mt = menu toggle, pm = primary menu
HTML file size: 2.94 KB
Custom CSS size: 0.399 KB
Images: 16.3 KB
Bootstrap framework size (CSS/JS/Fonts etc..) size: 524 KB
Total size: 543.639 KB
HTML file size: 1.57 KB
Custom CSS size: 0.202 KB
Images: 16.3 KB
Excellcss framework size (CSS/JS/Fonts etc..) size: 4.21 KB
Total size: 22.282 KB
As you can see there are some differences between the Bootstrap and Excess CSS versions, but at 25 times smaller Excellcss gives a great start to any project. Best of all as long as the browser is modern the framework removes the need for JS or AJAX support which is known for slowing down websites as well as the users experience.
While Excellcss uses rock solid CSS to drive its grid and navigation, it comes with a ‘use at your own risk’ warning. Also please do not pass Excellcss as your own work and if you like it, please considering linking to this website.
To use Excellcss, simply view the Excellcss sample page and download the html file and three css files.
In the example page we use Normalize to enable consistent browser operation. We did not develop Normalize so it would be wrong to include it in the main Excellcss CSS file.
We also use an addition css file to include our ‘theme’ customisation.
For people looking for speed it is recommended to combine all CSS files into one.
If you use Excellcss in a project we would love to hear your feedback.
With the global growth of mobile devices, find out why your next website should be mobile friendly.
Our WordPress websites make it easy for you to edit and extend your online message whenever you need to.
If you need to sell online we have a range of options to make the process as simple as possible.
With the ever growing social media market, let Websites by Mark show you how to make the best of it.