Flexible Framework: Introduction

flexible-styles.scss

Customizable SASS

Flexible Framework is an ever-growing collection of useful and customizable SASS (breakpoints, grids, spacing, etc). It is the standardization of repeated patterns in our application development work.

Quick Start

To get started, download the zip or clone the repo on GitHub. Then read the documentation. That's the best place to start.

GitHub Repo

Included Files



flexible_framework/sass
├── _background-color.scss
├── _breakpoint-variables.scss
├── _color-variables.scss
├── _color.scss
├── _display.scss
├── _float.scss
├── _font-size.scss
├── _font-style.scss
├── _font-weight.scss
├── _grid.scss
├── _image-szing.scss
├── _line-height.scss
├── _margin.scss
├── _padding.scss
├── _text-align.scss
├── _text-decoration-lines.scss
├── _text-transform.scss
├── flexible-styles.scss


Requirements

Flexible Framework is modular. Some files can be used on their own. Some of them must be used in conjuction with _breakpoint-variables.scss or _color-variables.scss.

SCSS files that require the code in _breakpoint-variables.scss.

  • _display.scss
  • _float.scss
  • _font-size.scss
  • _grid.scss
  • _image-sizing.scss
  • _margin.scss
  • _padding.scss
  • _text-align.scss

SCSS files that require the code in _color-variables.scss.

  • _background-colors.scss
  • _color.scss

Current Features

Flexible Framework will continue to grow but currently includes the following features:

  • Background Colors: Customizable
  • Breakpoints: Customizable
  • Color Variables: Customizable With Customizable Light & Dark Ranges
  • Displays: Breakpoint Based
  • Floats: Breakpoint Based
  • Font Sizes: Breakpoint Based & Customizable
  • Font & Text Utilities: Line Height, Text Overflow, Font Style, Font Transform, Font Weight
  • Grid Layouts: Breakpoint Based & Customizable
  • Image Sizing: Breakpoint Based & Customizable
  • Margins: Breakpoint Based & Customizable
  • Padding: Breakpoint Based & Customizable
  • Text Alignment: Breakpoint Based
  • Text Colors: Customizable

License

All parts of Flexible Framework are free to use and abuse under the open-source MIT license.