Excell CSS framework
Websites by Mark are currently working on a new CSS framework.
Generally, we like the Twitter Bootstrap CSS framework, 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 coming 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 breakpoint and mobile CSS navigation, Excellcss is over 25 times smaller than Bootstrap.
c = container (including row function)
a1 to dq = first letter indicates media breakpoint, the 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 user’s experience.
Can I use Excellcss in my projects (commercial and personal)?
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.
Why 3 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.
We would love to hear from you
If you use Excellcss in a project we would love to hear your feedback.