CSS Organization Explanation:

00 Includes (I-C-D)

Any css included css via @import goes here. This way WP Rocket can compile and minify everything into a single CSS sheet. NOTE: the imported css files will need to have their file names changed when updated for WP Rocket to process the latest version. Otherwise it will keep loading the last version saved to cache. Adding a serial number e.g. “001”, “002” … “004” etc. will cause WP Rocket & WP engine to load a new version.

01 Root Variables (V-R-S)

The variable are handled next along with their media queries to handle space and type scaling across for different sizes at the beginning of the main CSS. Follow a mobile first approach and then move upwards in screen size via media queries. There is no CSS section for mobile only. This keeps each element together as components with their respective media query section right after and indented.

02 Fallbacks (F-B-K)

This is were we set the defaults root styles for the theme. These change per theme and are not meant to be universal styles across themes. This way you do not have to keep overriding a the same CSS parameter each time e.g “font-style”, “font-weight” etc.

03 Base Styling (B-S-E)

CSS styling for the more rudimentary common HTML tags and elements: Colors, Lists, Headings, Forms, Lists etc.

04 Components (C-M-P)

More complicated elements go here: header, pages, posts, custom posts, blocks etc.

05 Plugins (P-L-G)

Finally any plugin CSS wether loaded via plugin (WooCommerce, Gravity Forms) or coded in the theme (Swiper Slider, JS Effects).

The following CSS Table of Contents is be added to the top of each theme.

06 Accessibility (A-C-B)

Accessibility CSS overrides for when we cant add the .srt class to the code and must hide text for screen readers with CSS.

/*!
Theme Name: JJROD DOCKS
Theme URI: http://jjrod.com
Author: jjrod.com
Version: 1.00
*/

/*----------------------------------------------------------------------------------------------------------------------------
>>> TABLE OF CONTENTS <<<  * NOTE: (C-L-D) = Category Codes. Type these with no spaces while search for faster locating *
FRAMEWORK 2024-12-11
------------------------------------------------------------------------------------------------------------------------------

00 Includes (I-C-D)
    - 00 Theme Specific Includes (T-H-M)
    - 01 Framework (F-R-M)
    - 02 Media Query Reference (M-Q-R)
01 Root Variables (V-R-S)
    - 00 Branding Variables (B-V-R)
    - 01 Fonts (B-V-T)
    - 02 Type Scale (B-V-S)
    - 03 Grid Container Widths Variables (B-V-C)
    - 04 Spacing Variables (B-V-S)
02 Fallbacks (F-B-K)
    - 00 Fallback Styles (F-B-S)
    - 01 Fallback Gutenberg Resets (F-B-G)
03 Base Styling (B-S-E)
    - 00 Colors (B-S-O)
    - 01 Typography (B-S-T)
    - 02 Links (B-S-A)
    - 03 Buttons (B-S-B)
    - 04 Forms (B-S-F)
    - 05 Lists (B-S-L)
    - 06 Blockquote (B-S-Q)
    - 07 Captions (B-S-C)
04 Components (C-M-P)
    - 00 Unique Elements & Classes (U-N-Q)
    - 01 Navigation (M-S-T)
    - 02 Modals (C-M-M)
    - 03 Search Elements (S-C-H)
    - 04 Icons (I-C-N)
    - 05 Accordions & Toggles (A-C-N)
    - 06 Pages (P-G-S)
    - 07 Blog & Posts (B-L-G)
    - 08 Custom Posts Types (C-P-T)
    - 09 Blocks (B-K-S)
    - 10 Widgets (W-G-T)
    - 11 Galleries (G-L-L)
    - 12 Footer (F-T-R)
05 Plugins (P-L-G)
    - Swiper (S-W-P)
    - Scroll Reveal (S-C-R)
    - Learn Dash (D-S-H)
    - WooFunnels (W-F-N)
    - Woocommerce (W-O-C)
    - Gravity Forms (G-R-V)
    - WPSL (W-S-L)
06 Accessibility (A-C-B)
    - 00 Screen Reader Text Overrides (S-R-T)
----------------------------------------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------------------------------------
>>> Note Marker Legend <<< FRAMEWORK 2024-07-18
------------------------------------------------------------------------------------------------------------------------------

    /****************************************************************************
    *****************************************************************************
    00 Main Section
    *****************************************************************************
    ****************************************************************************/

    /*---------------------------------------------------------------------------
    Sub Section
    ---------------------------------------------------------------------------*/

    /* Sub Section Part
    -----------------------------------------------*/

    /* Note text..... */