A new responsive CSS Framework with no JavaScript.

Project Zerojs-CSS

Originally Posted 23/06/2019, Updated - 05/08/2019.

For years now we have all been designing new websites using set tools at hand, no matter which back-end technologies we all use, up front Bootstrap usually wins out for the appearance, aided by JQuery for added control over the interface.

Sometimes though, it is all that little too heavy handed for a small website, and do you not get fed up of all the div bloat - stuffing numerous classes for the responsive design.

We wanted something more;

  1. An easily implemented responsive design,
  2. Cleaner leaner HTML source code, reduced style bloat,
  3. Achieve most of the day to day visuals with just CSS alone?

So for some time now we have wanted to develop our own CSS framework, taking advantage of the features of CSS3 and HTML5 alone.

As part of our Friday Dev Time" we have now started working on the project, and laid down some groundwork. Simply put, we want a minimal CSS framework that includes;

  • CSS to be less than 4KB minified download size,
  • Content First before navigation source structure,
  • Use Flexbox for layout positioning,
  • Is not another Bootstrap clone visually,
  • Clean looks, possibly resembling Material Design,
  • Colours from Google's Material Colour System,
  • Material Icon Set, just to complete the trio,

We also want to have plug-in components with examples such as;

  • Hero Panels,
  • Carousels,
  • Collapsibles,
  • Drop Down Buttons,
  • Pop-Overs,
  • Badges,
  • Modal Dialogs,
  • Card Panels - with reveals,

For even faster web development, we wish to have a range of pre-created templates for;

  • Headers styles,
  • Content layout, single column, 50/50 split, left/right handed dual column, Holy Grail layout,
  • Footer styles.

Will it be possible? Well good progress has been made so far

We put together a browser reset/normalise to start with a clean base. Upon which we started styling the standard HTML elements.
We have also created a Carousel, Collapsibles with and without lists, and a Drop-Down component, although more testing is required.

We will post a page showing examples and documenting our progress shortly.