Sarah Frisk introduces CSS framework and UI toolkit Chassis.
This summer will mark the release of Chassis, a CSS project I am working on with the jQuery Foundation.
Initially a plan to separate out the CSS of jQuery Mobile and jQuery UI into its own project, Chassis has transformed into a blueprint for an independent CSS framework and UI toolkit.
It will be launched in three phases: the creation of a CSS Framework, followed by the implementation of a UI toolkit, and finally helping to make Chassis usable across a range of projects and frameworks.
Phase 01: CSS framework
The first version of Chassis will be a CSS framework. This will be a bare-bones release that doesn't require JavaScript, which means it will be usable by modern browsers – it will supported back to Internet Explorer 8.
Features that will be part of this initial release include: typography, tables, form elements, buttons, helper classes and a grid system.
It is important to note that jQuery UI and jQuery Mobile will start adopting Chassis during this phase by removing the 'CSS framework' part of their codebase.
Mobile projects will become easier with Chassis
This means that Chassis will become interchangeable with other CSS frameworks that provide similar functionality, making the modular development of jQuery UI or jQuery Mobile projects much easier.
As Chassis will be an independent CSS framework, you'll be able to use it separately as a starting point for your own projects, without requiring jQuery UI or jQuery Mobile.
Phase 02: UI toolkit
The second phase of the Chassis project will be the implementation of UI components and widgets common in jQuery Mobile and jQuery UI.
Often, these components require JavaScript in order to function as expected (as with calendar pop-ups or accordions), but this can also include opinionated visual components that are tied in with the design and don't require JavaScript, such as drop-down navigation or pagination.
With the help of build tools and an SCSS preprocessor, it will be easy to customise Chassis to fit the needs of your particular project. By using BEM as a naming convention and moving away from the 'cascading' part of CSS, we'll make it easier to re-theme Chassis, without having to overwrite styles with increasing specificity or tackling the dreaded !important .
Unlike other UI toolkits, we won't be including the JavaScript implementation of components with Chassis. We're doing this because we don't want to limit users by making Chassis only compatible with jQuery Foundation frameworks - we want to give users the freedom to implement these components in the way that best serves their needs.
Phase 03: Adoption
In order to make Chassis usable for projects that aren't based on jQuery Foundation's frameworks, we'll be working with other developers to make adoption easier.
This includes writing tools to make Chassis usable with Ember.js, AngularJS and other JavaScript plugins and frameworks, creating themes for major CMSs, and creating build tools that help make it easy to adapt Chassis to different development scenarios.
All of this will be made possible through our collaboration with the wider open source community throughout all phases of the Chassis project. The jQuery Foundation and I look forward to revealing more about Chassis in the coming months.
If you're interested in helping out or learning more, please visit css-chassis.com.
Words: Sarah Frisk
Sarah is the project lead for Chassis and a software developer at Portland Webworks. When she’s not coding, Sarah works on her two webcomics. Find out more at sarahfrisk.com. This article was oriignally published in net magazine issue 267.
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
