Style Framework Documentation

Before we get started, let's make one thing perfectly clear. The style framework is not in any way a way to tell you how to write your code. The style framework is a set of tools to help you build the best applications you can. If you don't like the way something is, change it. There is a reason why this framework isn't an NPM package and instead part of your project. These are your tools now!


The first place you are going to want to customize are the varible. There are some default values in place and those are a good place to start, but if you have an existing project or if you are using a third-party library like Bootstrap, Material Design, or Foundation, you may want to update the variables with their values so you can improve your development experience. If you have values that you use regularly throught our site or application, it is highly recommended that you add them here to maximize their reuse and minimize maintenance time.


Functions are exactly as they sound. They are bits of programming to improve your development experience. Functions usually take input and return a value. If you're not a "coder", don't worry. Feel free to use what we've got and copy and paste from your favorite tutorials as you go.


Mixins are abstractions of commonly used code. At first they may feel a little like functions, but the values they return are actual CSS. Simply put, functions return values, mixins return CSS. If you find yourself re-writing the same set of CSS rules over and over again, you may want to consider a mixin. You'll see how cool they are in a second. The biggest take-away is that you can write clean, consistant (DRY) CSS with the help of these tools.

Share the Wealth

If you have an idea for the framework or have some frequently used tools that you feel would be a good fit for these tools, feel free to contact me via email, twitter, LinkedIn, GitHub, or however you can and share your ideas. Thanks!