davidpsteinman / django-flexbox-theme

A modern, lightweight & responsive CSS styleguide based on Flexbox.

Django Flexbox Theme

• A modern, lightweight & responsive styleguide based on Flexbox, designed for Wharton CAOS apps, and created for Django projects.
• Created to be a starting point or guide, not a complete UI framework.
• Easily customizable.

Preview

This is just an example, not necessarily the official template of the theme.

Browser Support

• This styleguide supports all browsers colored green here (on the canIuse site). For Example: this theme should not be used with IE 11 (and below) or Safari 8 (and below). If you need something with more backwards compatibility, checkout Django Base Theme.

Grid By

• Solved by Flexbox by Philip Walton

Other Features and/or Guides Included

• A combo of SASS Boilerplate by Hugo Giraudel and SMACSS architecture by Jonathan Snook (the former is similar to the latter in many ways already)
• BEM (naming convention only)
• Harry Roberts' CSS Guidelines (here & there)

Components

• Typography
• Buttons
• Forms
• Lists
• Tables
• Off-canvas nav
• Grid
• Sticky Footer
• Vertically Aligned Items
• Input Addons

Django Helpers

• Template Blocks
• PIP Installable

pip install git+https://github.com/wharton/Django-Flexbox-Theme --upgrade

Task Management

1) Gulp

• Gulp
• An example gulpfile is included in this theme

2) CSS Extensions

The gulpfile includes tasks for SASS, PostCSS or both.

• SASS
• PostCSS

Font Icons

• Font Awesome

Performance

Grade "A" score using the YSlow Web Page Analyzer.

Wharton Branding Included

• Wharton Logo (SVG Format)
• Wharton Colors
• Helvetica Neue and Palatino Linotype served via Fonts.com