Kyle Fontenot

Photo of Kyle Fontenot

Forten

Forten is my proprietary lightweight (S)CSS framework inpired by Milligram, with SCSS modularity, Javascript independence, B.E.M. naming schemes, and a semi-flat aesthetic.

Coming in a ~15kb size, Forten utilizes SCSS for a low cost implementation. A flexible percentage-based flexbox grid system breaks the 12-column system, while still offering familiarity. This framework embraces B.E.M. so that users can instantly identify the differences between element classes, modifying classes, and parent-dependent classes. Lastly, the framework doesn't rely on Javascript at all! Forten is still a work-in-progress.

Screenshot of Kyle's Forten CSS framework demonstration

Under The Hood

The entire framework is composed of SCSS (or Sass), aiming to abstract repetition and keeping it dry as possible. Similar to Bootstrap, Bulma, and Milligram, I used modular imports (defined by using the "_Module.scss" pneumonic). The grid/column system was inspired by Milligram, which at the time had a major leg up on Bootstrap because it used flexbox. Forten and Milligram use a percentage-based column system.

Everything else otuside of the flexbox foundation is created with an opinionated style for all elements. This was never full finished, especially because I moved my focus more on learning Javascript and eventually React.