Flexible Framework

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 at Phillip Gore Design.

Quick Start

To get started, download the zip or clone the repo. Documentation and details can be found at Phillip Gore Design: Flexible Framework. That's the best place to start.

Included Files

flexible_framework/sass
├── _background-color.scss
├── _breakpoint-variables.scss
├── _color-variables.scss
├── _color.scss
├── _custom.scss
├── _display.scss
├── _float.scss
├── _font-size.scss
├── _font-style.scss
├── _font-weight.scss
├── _grid.scss
├── _image-szing.scss
├── _line-height.scss
├── _margin.scss
├── _normalize.scss // Reset code from github.com/necolas/normalize.css. (You may wish to check for an updated version)
├── _padding.scss
├── _text-align.scss
├── _text-decoration-lines.scss
├── _text-transform.scss
├── _typography.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.scssor _color-variables.scss.

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

• _custom.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.

Acknowledgement

Flexible Framework was created by Phillip Gore Design.