Flexible Framework

Growing & Useful SASS

Over the years I have developed an ever-growing collection of useful and customizable SASS. I finally decided to clean it up, document it and put it on GitHub. There is more to be added, but the first shareable version is done. Below are the basic goals/features of the code. For more information please click through to the documentation.

Documentation

Media Queries

• Set breakpoints in one place for all of the SASS code.

Grid System

As of this writing (Dec 09, 2018), the transition to Flexbox and CSS Grid is in full force. But it is not complete for those who need to support slightly older browsers. So, as the web completes its transition to that brave new world, I feel a good old-fashioned grid system can still be useful (also, I want documentation for my older projects).

• Set various column layouts for the grid system.
• Automatically generate column classes for each breakpoint.
• Control the margin and gutter for each breakpoint through padding and margin classes.
• Classes for display and float properties.

Margins & Padding

• Set sizes for margins and padding in one place.
• Automatically generate margin and padding classes based on those settings.

Colors

• Set 8 base colors plus black and white.
• Set the percentages to lighten and darken those colors.
• Use the base colors and their variations for all of the SASS code.
• Automatically generate background color classes for all colors and variations.
• Automatically generate text color classes for all colors and variations.

Miscellaneous

• Font-Sizes.
• Font-Style.
• Font-Weight.
• Image Sizing.
• Text-Align.
• Text-Decoration-Line.
• Text-Transform.

Documentation