CSS Blade update - GZIP info

My CSS Framework, CSS Blade, is in its final days of development. The code is fairly complete. I have divided it into three sections:

1.  Initialize section is a total of four files:
   1. Font Awesome loader ... I am fixing this to a local load of Font Awesome v4.7 with only one font (the WOTF2 version)
   2. Tokens ... this is a file of variables and color class names and the initial themes for Light and Dark mode
   3. Fonts and Theme ... this loads all the fonts for the website (sans, serif, and mono) and full theme for the website
   4. Initial setup and modern normalize with an emphasis on class-less CSS for HTML tags
    
2. Core section is a total of six files:
   1. Main Core goes beyond the normalize with opiniated CSS for all other HTML tags
   2. Layout has all of the CSS for major layout elements (typically semantic HTML tags) ... essentially handling the CSS for all content containers ... note that none of the containers have any margins or padding. My CSS framework has an extensive set of spacing utilities.
   3. Flexbox based grid has excellent syntax with breakpoints that match another popular CSS Framework. They got it right and I decided to have the same breakpoints. Unfortunately, I also chose a slightly different direction on the implementation of flexbox. Based on a 12 column layout with more flexible offsets.
   4. Horizontal navigation (responsive) ... I added this to the core since a horizontal menu is a typical feature of websites. Mine features multi-level submenus, with optional support for HTML (making it a mega-menu). The horizontal navigation bar supports three distinct areas: a logo area (brand), menu (right of brand) and a third "right" area. The right area can contact any elements but would be more typically used for a search function.
   5. Buttons and borders. I added this to the core since the vast majority of websites use both buttons and borders. The buttons and borders support a minimal nine buttons in four "types" and layout styles.
   6. Utilities is mainly an extensive collection of spacing – both margin and padding.
3. Optional modules. There are three initially with more to follow:
   1. Simple footer. I've designed the simple footer in sections that can be added or removed. In my testing, I've used it with a Contact Us form and map, a long social media button bar, "legals" links, Copyright bar with designer link. There is also a superb looking HR divider ... I use it to separate all other footer content from the copyright bar.
   2. Sidebar (vertical menu), it's fully integrated with my CSS Framework and fluid. It fill the entire height space between the top of the page and the footer. There are two main sections, the top is the typical vertical menu, the bottom is closest to the footer and would be typically be used for a logout button or a featured set of social buttons.
   3. Forms, near and dear to my heart. The classes for the forms create an excellent look, attractive and effective. Input, select and textareas can contain icons left or right. Placeholders have better visual acuity.

I've spend some time cleaning up each file, replacing individual class definitions with pseudo-classes where appropriate and verifying all classes (or pseudo-classes) are used and required.

Then came time to check all the file sizes ... in Raw, Minified, and GZip versions. A few surprises that I wasn't expecting. I discovered that if you use a raw CSS file for your design and your server supports gzip compression, you will reduce the server load by slightly more than 73% (on average). If you use a minified CSS file for your design and your server gzip compression, you will reduce the server load by about 83%. Either way, it's a significant compression.

My CSS framework, CSS Blade, complete is 80Kb raw, 58Kb minified, and 14Kb Gzip'd.

The kicker here is that the above is my stuff. I also load Font Awesome. Despite doing everything I can to cut down on the Font Awesome package, all I can do is 106Kb minified. Gzip does not further compress this package, the impact is actually to make it slightly larger (by less than 1%). I'm rethinking using Font Awesome. For the contributions it makes to my CSS framework, I'd like a much smaller icon package.