BRICKst

Say hi to yet another (S)CSS framework. BRICKst is (heavily) inspired by ZURB's Foundation, takes the best of its code and philosophy, applies it in minimal fashion and some little tweaks, which I found useful.

BRICKst is constantly in development, however slow the progress may be. I'm gradually building smaller projects on it and therefore adding missing features in the meantime.

All code tweaks, little hacks and stuff are appreciated (e.g. in case you find some unfitting solutions).

Homepage & demo in preparation, not available at the moment ([index.html] itself serves as a demo for now).

Installation & Usage

Download or clone this repo. Copy the files over to your project and start building your app with BRICKst.

docs.html is included with references to implemented features and example layouts. Dedicated website with proper docs will come when BRICKst is somehow ready for production.

Development

1. copy the files to your project
2. npm install to fetch dependencies
3. gulp watch for development compilations; starts live reloading server via BrowserSync (browse to http://localhost:3000)
   • compiles SCSS from scss/
   • uglyfies & minifies JS from js/src/
   • adds sourcemaps to both ^
   • optimizes SVGs in img/icons
   • generates webfont icons from ^ to fonts/
4. gulp build for one-time compilation

Todo/Features

• SCSS
  • Table of Contents
  • Split BRICKst into separate _partials (?)
• GRID
  • medium grid
  • small grid
  • offsets
  • centering
  • nestable (needs fixing)
  • block grid
  • responsive block grid
• Typography etc.
  • better typography (with vertical rhytm and aligned baselines) – inspiration
  • nested ol lists with proper numbering
• Forms
  • inputs, textareas, ...
  • focus for buttons
  • input errors/alerts
  • sample Form code for Docs
• Addons
  • basic styles for column highlighting (after grid customization) for easier creation of "guide grid" in Photoshop
• JS (?)
  • column equalizer – http://css-tricks.com/equal-height-blocks-in-rows/ OR https://github.com/liabru/jquery-match-height
  • basic tabs
  • accordion

BRICKst in the Wild

Some of the sites I know about that are using BRICKst:

• allienworks.net & allien.work – of course I build my sites with it ;)
• TAJP – Angular/JS/PHP starter template by Filip Vincůrek
• Cryptocoins – microsite featuring my cryptocurrency icon pack

Author

BRICKst, your web app's first brick, was built by Martin Allien (and many contributors to ZURB's Foundation, in a sense).

• Website: allien.work
• Keybase: martin_allien

Tip me crypto and support further development!

Follow for updates and more stuff:

• Twitter: @AllienWorks

Licence

Released under MIT Licence | Copyright © 2016 Martin Allien