About The Project
Inspired by Dave Gamache's framework of the same name, this is my personal attempt at creating a reusable, mobile-first infrastructure for my web projects.
My version of Skeleton focuses mainly on the CSS grid, establishing an extensive list of utility classes that can applied right in HTML to dictate an element's placement across multiple breakpoints. Additionally, this framework creates an inheritance-based default spacing scale, where modifying the base value cascades across the entire framework, in an effort to eliminate as many "magic numbers" in the CSS as possible.
Finally, no visual characteristics are applied through the skeleton, like fonts or colors. This allows for per-project themes, styles, or entire design systems to be built on top of it with ease.
The Grid
Differing from Gamache's skeleton, this skeleton's grid utilizes the CSS grid property. Any container can be given the grid class to enable grid layout. It begins as 4 columns on mobile and expands to 12 columns starting at medium screen sizes. Utility classes assigned in the HTML to direct children of the container is how you assign placement, in a mobile-first approach. All direct children of the grid must have at least one class assigned, or they will default to spanning a single column across every breakpoint.