CSS file structure template
CSS template for typical CSS properties.
/* =========================================== CSS TEMPLATE - CATEGORY INDEX =========================================== 1. Reset & Normalize 2. Variables & Custom Properties 3. Base & Typography 4. Layout & Grid 5. Header & Navigation 6. Main Content 7. Sidebar 8. Footer 9. Forms 10. Buttons 11. Cards & Components 12. Tables 13. Lists 14. Images & Media 15. Icons 16. Animations & Transitions 17. Utilities & Helpers 18. Print Styles 19. Media Queries 20. Browser Specific Fixes =========================================== */ /* =========================================== 1. RESET & NORMALIZE =========================================== */ /* =========================================== 2. VARIABLES & CUSTOM PROPERTIES =========================================== */ /* =========================================== 3. BASE & TYPOGRAPHY =========================================== */ /* =========================================== 4. LAYOUT & GRID =========================================== */ /* =========================================== 5. HEADER & NAVIGATION =========================================== */ /* =========================================== 6. MAIN CONTENT =========================================== */ /* =========================================== 7. SIDEBAR =========================================== */ /* =========================================== 8. FOOTER =========================================== */ /* =========================================== 9. FORMS =========================================== */ /* =========================================== 10. BUTTONS =========================================== */ /* =========================================== 11. CARDS & COMPONENTS =========================================== */ /* =========================================== 12. TABLES =========================================== */ /* =========================================== 13. LISTS =========================================== */ /* =========================================== 14. IMAGES & MEDIA =========================================== */ /* =========================================== 15. ICONS =========================================== */ /* =========================================== 16. ANIMATIONS & TRANSITIONS =========================================== */ /* =========================================== 17. UTILITIES & HELPERS =========================================== */ /* =========================================== 18. PRINT STYLES =========================================== */ /* =========================================== 19. MEDIA QUERIES =========================================== */ /* Small devices (landscape phones, 576px and up) */ /* Medium devices (tablets, 768px and up) */ /* Large devices (desktops, 992px and up) */ /* Extra large devices (large desktops, 1200px and up) */ /* =========================================== 20. BROWSER SPECIFIC FIXES =========================================== */
/* Table of contents 1. General styles 2. Page Layout 2.1 Page structure 2.2 Header 2.3 Content containers 2.4 Footer 2.5 Sidebar 3. Fonts & typography */ /************************ General styles ***********************************/ /* Styling of commonly used elements throughout site */ /************************ End - General styles *****************************/ /************************ Page Layout ***********************************/ /* Layout of page elemenets such as header, footer etc. */ /* 2.1 Page structure */ /* 2.2 Header */ /* 2.3 Content containers */ /* 2.4 Footer */ /* 2.5 Sidebar */ /************************ End - Page Layout *****************************/ /************************ Fonts & typography ***********************************/ /* Font sizes and types throughout site (if different from general styling) */ /************************ End - Fonts & typography *****************************/