index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Qore CSS Modern Demo</title>
    
    <!-- CSS LOADING ORDER AND RATIONALE:
         1. variables.css: CSS custom properties loaded first to establish design system
         2. core CSS: Main framework styles that depend on variables
         3. External icons: Unicons for visual enhancement without framework dependency
         
         This order prevents FOUC and ensures proper variable inheritance -->
    <link rel="stylesheet" href="variables.css">
    <link rel="stylesheet" href="core.5c7df4d0.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iconscout/unicons@release/css/line.css">
</head>
<body>
    <!-- HERO SECTION DEMONSTRATION
         Purpose: Showcases primary layout utilities and responsive design patterns
         
         Class Strategy Explained:
         - col center: Vertical flexbox layout with centered alignment
         - pad15: Consistent padding using design system spacing scale
         - wide80: Constrains content width to 80% for optimal reading line length
         - textCenter: Centers text content for hero presentation
         - row center: Horizontal flexbox for button group layout
         
         This pattern demonstrates the framework's utility-first approach -->
    <header class="col center pad15">
        <div class="wide80 center">
            <h1 class="textCenter margin15">Modern Web Design</h1>
            <p class="textCenter explainer">Built with Qore CSS - A modern, flexible CSS framework</p>
            <div class="row center margin25">
                <button class="margin15">Get Started</button>
                <button class="margin15">Learn More</button>
            </div>
        </div>
    </header>

    <!-- FEATURES GRID SECTION
         Purpose: Demonstrates grid system capabilities and component styling
         
         Grid System Rationale:
         - grid3: Creates 3-column responsive grid that adapts to mobile
         - card: Applies elevation, borders, and spacing for component definition
         - sq15: Icon sizing utility using consistent scale (15 units)
         - itemText: Typography class for secondary content styling
         
         This section showcases both layout utilities and component patterns -->
    <main class="center col pad15">
        <div class="wide80 center">
            <h2 class="textCenter margin25">Framework Features</h2>
            <div class="grid3 margin25">
                <!-- RESPONSIVE DESIGN FEATURE CARD
                     Demonstrates mobile-first approach and grid flexibility -->
                <div class="card pad15 textCenter">
                    <i class="uil uil-mobile-android sq15 margin10" aria-hidden="true"></i><!-- decorative icon hidden from screen readers -->
                    <h3 class="margin10">Responsive</h3>
                    <p class="itemText">Mobile-first design with flexible grid system and responsive utilities.</p>
                </div>

                <!-- CUSTOMIZATION FEATURE CARD
                     Highlights CSS variable system and theming capabilities -->
                <div class="card pad15 textCenter">
                    <i class="uil uil-palette sq15 margin10" aria-hidden="true"></i><!-- decorative icon hidden from screen readers -->
                    <h3 class="margin10">Customizable</h3>
                    <p class="itemText">Easy theming with CSS variables and comprehensive design tokens.</p>
                </div>

                <!-- PERFORMANCE FEATURE CARD
                     Emphasizes framework optimization and loading efficiency -->
                <div class="card pad15 textCenter">
                    <i class="uil uil-rocket sq15 margin10" aria-hidden="true"></i><!-- decorative icon hidden from screen readers -->
                    <h3 class="margin10">Performance</h3>
                    <p class="itemText">Lightweight and optimized for fast loading and smooth interactions.</p>
                </div>

                <!-- Feature Card 4 -->
                <div class="card pad15 textCenter">
                    <i class="uil uil-cube sq15 margin10" aria-hidden="true"></i><!-- decorative icon hidden from screen readers -->
                    <h3 class="margin10">Modular</h3>
                    <p class="itemText">Component-based architecture with reusable utility classes.</p>
                </div>

                <!-- Feature Card 5 -->
                <div class="card pad15 textCenter">
                    <i class="uil uil-shield-check sq15 margin10" aria-hidden="true"></i><!-- decorative icon hidden from screen readers -->
                    <h3 class="margin10">Accessible</h3>
                    <p class="itemText">Built with accessibility in mind, WCAG compliant color contrasts.</p>
                </div>

                <!-- Feature Card 6 -->
                <div class="card pad15 textCenter">
                    <i class="uil uil-code-branch sq15 margin10" aria-hidden="true"></i><!-- decorative icon hidden from screen readers -->
                    <h3 class="margin10">Modern</h3>
                    <p class="itemText">Uses latest CSS features including Grid, Flexbox, and Custom Properties.</p>
                </div>
            </div>
        </div>

        <!-- Component Showcase -->
        <section class="wide80 center margin30">
            <h2 class="textCenter margin25">Component Showcase</h2>

            <!-- Buttons -->
            <div class="margin25">
                <h3 class="textCenter margin15">Buttons</h3>
                <div class="row center evenly margin15">
                    <button class="margin10">Primary</button>
                    <button class="margin10">Secondary</button>
                    <button class="margin10">Success</button>
                    <button class="margin10">Warning</button>
                    <button class="margin10">Danger</button>
                </div>
            </div>

            <!-- Cards -->
            <div class="margin25">
                <h3 class="textCenter margin15">Cards & Layout</h3>
                <div class="grid2 margin15">
                    <div class="card pad15">
                        <h4 class="textCenter margin10">Standard Card</h4>
                        <p class="itemText margin10">This is a standard card with padding and rounded corners.</p>
                        <div class="textCenter">
                            <button class="margin10">Action</button>
                        </div>
                    </div>
                    <div class="card pad15">
                        <h4 class="textCenter margin10">Feature Card</h4>
                        <p class="itemText margin10">This card demonstrates the card component styling system.</p>
                        <div class="textCenter">
                            <button class="margin10">Learn More</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Form Elements -->
            <div class="margin25">
                <h3 class="textCenter margin15">Form Elements</h3>
                <div class="card pad15">
                    <form id="contactForm" class="col center" onsubmit="return validateForm(event)" aria-label="Contact form">
                        <div class="row center margin15">
                            <div class="wide50 pad10">
                                <label for="nameInput" class="textCenter margin5">Name</label> <!-- adds for attribute to link label with input for accessibility -->

                                <input id="nameInput" type="text" placeholder="Enter your name" required aria-label="Your name"> <!-- adds required attribute and aria label for accessibility without changing classes -->
                            </div>
                            <div class="wide50 pad10">
                                <label for="emailInput" class="textCenter margin5">Email</label> <!-- adds for attribute to connect label to email input -->
                                <input id="emailInput" type="email" placeholder="Enter your email" required aria-label="Your email"> <!-- adds required attribute and aria label without altering classes -->

                            </div>
                        </div>
                        <div class="wide100 pad10 margin15">
                            <label for="messageInput" class="textCenter margin5">Message</label> <!-- adds for attribute to match textarea id for accessibility -->

                            <textarea id="messageInput" rows="4" placeholder="Enter your message" required aria-label="Your message"></textarea> <!-- adds required attribute and aria label while keeping styling -->

                        </div>
                        <button class="margin15">Send Message</button>
                    </form>
                </div>
            </div>

            <!-- Typography -->
            <div class="margin25">
                <h3 class="textCenter margin15">Typography</h3>
                <div class="card pad15 textCenter">
                    <h1 class="margin10">Heading 1</h1>
                    <h2 class="margin10">Heading 2</h2>
                    <h3 class="margin10">Heading 3</h3>
                    <p class="itemText margin10">This is a paragraph demonstrating the typography system built into Qore CSS.</p>
                    <p class="itemText margin10"><strong>Bold text</strong> and <em>italic text</em> are also supported with proper contrast ratios.</p>
                </div>
            </div>
        </section>
        <!-- Utilities Showcase -->
        <section class="wide80 center margin30"><!-- Container for utility demonstrations -->
            <h2 class="textCenter margin25">Utilities Showcase</h2><!-- Section header -->

            <!-- Color & Typography Utilities -->
            <div class="margin25"><!-- Color utility group -->
                <h3 class="textCenter margin15">Color & Typography</h3>
                <div class="grid6 margin15"><!-- Grid for color boxes -->
                    <div class="bright pad5 textDark margin5">bright</div><!-- Bright background example -->
                    <div class="dark pad5 textLight margin5">dark</div><!-- Dark background with light text -->
                    <div class="darkest pad5 textLight margin5">darkest</div><!-- Darkest background -->
                    <div class="lightest pad5 textDark margin5">lightest</div><!-- Lightest background -->
                    <div class="green pad5 textLight margin5">green</div><!-- Button green background -->
                    <div class="cardWhite pad5 textDark margin5">cardWhite</div><!-- White card style -->
                </div>
                <div class="margin15"><!-- Text color utilities -->
                    <span class="textLight dark pad5 margin5">textLight</span><!-- Light text on dark -->
                    <span class="textDark lightest pad5 margin5">textDark</span><!-- Dark text on light -->
                    <span class="textLeft pad5 margin5">textLeft</span><!-- Left aligned text -->
                </div>
            </div>

            <!-- Flex Alignment Utilities -->
            <div class="margin25"><!-- Flex alignment group -->
                <h3 class="textCenter margin15">Flex Alignment</h3>
                <div class="row around card pad5 margin10"><div class="pad5">around</div><div class="pad5">around</div><div class="pad5">around</div></div><!-- space-around demo -->
                <div class="row start card pad5 margin10"><div class="pad5">start</div><div class="pad5">start</div></div><!-- flex-start justify -->
                <div class="row end card pad5 margin10"><div class="pad5">end</div><div class="pad5">end</div></div><!-- flex-end justify -->
                <div class="row spaceBetween card pad5 margin10"><div class="pad5">spaceBetween</div><div class="pad5">spaceBetween</div></div><!-- space-between demo -->
                <div class="row spaceAround card pad5 margin10"><div class="pad5">spaceAround</div><div class="pad5">spaceAround</div></div><!-- space-around demo -->
                <div class="row spaceEvenly card pad5 margin10"><div class="pad5">spaceEvenly</div><div class="pad5">spaceEvenly</div></div><!-- space-evenly demo -->
                <div class="row centerAlign card pad5 margin10"><div class="pad5">centerAlign</div></div><!-- align-items center -->
                <div class="row card pad5 margin10"><div class="pad5 centerAlignSelf">centerAlignSelf</div></div><!-- align-self center -->
                <div class="row justifyCenter card pad5 margin10"><div class="pad5">justifyCenter</div><div class="pad5">justifyCenter</div></div><!-- justify-content center -->
                <div class="row flexStart card pad5 margin10"><div class="pad5">flexStart</div><div class="pad5">flexStart</div></div><!-- align-items flex-start -->
                <div class="row flexEnd card pad5 margin10"><div class="pad5">flexEnd</div><div class="pad5">flexEnd</div></div><!-- align-items flex-end -->
                <div class="row top card pad5 margin10"><div class="pad5">top</div><div class="pad5">top</div></div><!-- top alignment -->
            </div>

            <!-- Width Utilities -->
            <div class="margin25"><!-- Width demonstration group -->
                <h3 class="textCenter margin15">Width Utilities</h3>
                <div class="row margin10" style="flex-wrap:wrap;"><!-- flex-wrap ensures boxes wrap -->
                    <div class="col10 card pad5 margin5">col10</div>
                    <div class="col15 card pad5 margin5">col15</div>
                    <div class="col20 card pad5 margin5">col20</div>
                    <div class="col25 card pad5 margin5">col25</div>
                    <div class="col30 card pad5 margin5">col30</div>
                    <div class="col33 card pad5 margin5">col33</div>
                    <div class="col35 card pad5 margin5">col35</div>
                    <div class="col40 card pad5 margin5">col40</div>
                    <div class="col45 card pad5 margin5">col45</div>
                    <div class="col50 card pad5 margin5">col50</div>
                    <div class="col55 card pad5 margin5">col55</div>
                    <div class="col60 card pad5 margin5">col60</div>
                    <div class="col65 card pad5 margin5">col65</div>
                    <div class="col66 card pad5 margin5">col66</div>
                    <div class="col70 card pad5 margin5">col70</div>
                    <div class="col75 card pad5 margin5">col75</div>
                    <div class="col80 card pad5 margin5">col80</div>
                    <div class="col85 card pad5 margin5">col85</div>
                    <div class="col90 card pad5 margin5">col90</div>
                    <div class="col95 card pad5 margin5">col95</div>
                    <div class="col100 card pad5 margin5">col100</div>
                    <div class="fullWidth card pad5 margin5">fullWidth</div>
                </div>
                <div class="row margin10" style="flex-wrap:wrap;">
                    <div class="wide20 card pad5 margin5">wide20</div>
                    <div class="wide25 card pad5 margin5">wide25</div>
                    <div class="wide33 card pad5 margin5">wide33</div>
                    <div class="wide40 card pad5 margin5">wide40</div>
                    <div class="wide60 card pad5 margin5">wide60</div>
                    <div class="wide66 card pad5 margin5">wide66</div>
                    <div class="wide70 card pad5 margin5">wide70</div>
                    <div class="wide75 card pad5 margin5">wide75</div>
                    <div class="wide90 card pad5 margin5">wide90</div>
                    <div class="wide25toWide90 card pad5 margin5">wide25toWide90</div>
                    <div class="wide50toWide90 card pad5 margin5">wide50toWide90</div>
                    <div class="wide60toWide90 card pad5 margin5">wide60toWide90</div>
                </div>
            </div>

            <!-- Grid Utilities -->
            <div class="margin25"><!-- Grid demonstration group -->
                <h3 class="textCenter margin15">Grid Systems</h3>
                <div class="grid5 margin10">
                    <div class="gridItem card pad5">grid5</div>
                    <div class="gridItem card pad5">grid5</div>
                    <div class="gridItem card pad5">grid5</div>
                    <div class="gridItem card pad5">grid5</div>
                    <div class="gridItem card pad5">grid5</div>
                </div><!-- grid5 demo -->
                <div class="grid6 margin10">
                    <div class="gridItem card pad5">grid6</div>
                    <div class="gridItem card pad5">grid6</div>
                    <div class="gridItem card pad5">grid6</div>
                    <div class="gridItem card pad5">grid6</div>
                    <div class="gridItem card pad5">grid6</div>
                    <div class="gridItem card pad5">grid6</div>
                </div><!-- grid6 demo -->
                <div class="gridx margin10">
                    <div class="gridItem card pad5">gridx</div>
                    <div class="gridItem card pad5">gridx</div>
                    <div class="gridItem card pad5">gridx</div>
                </div><!-- responsive gridx demo -->
                <div class="gridx2 margin10">
                    <div class="gridItem card pad5">gridx2</div>
                    <div class="gridItem card pad5">gridx2</div>
                </div><!-- responsive gridx2 demo -->
            </div>

            <!-- Spacing Utilities -->
            <div class="margin25"><!-- Spacing demonstration group -->
                <h3 class="textCenter margin15">Spacing</h3>
                <div class="pad5 card margin10">pad5</div><!-- Padding utility -->
                <div class="hid margin10">hid</div><!-- Hidden spacer -->
                <div class="hid2 margin10">hid2</div><!-- Hidden spacer -->
                <div class="hid3 margin10">hid3</div><!-- Hidden spacer -->
                <div class="hid4 margin10">hid4</div><!-- Hidden spacer -->
                <div class="hid6 margin10">hid6</div><!-- Hidden spacer -->
                <div class="hid18 margin10">hid18</div><!-- Hidden spacer -->
                <div class="hid23 margin10">hid23</div><!-- Hidden spacer -->
            </div>

            <!-- Responsive Visibility Utilities -->
            <div class="margin25"><!-- Responsive visibility group -->
                <h3 class="textCenter margin15">Responsive Visibility</h3>
                <div class="desktop card pad5 margin10">desktop</div><!-- Desktop only -->
                <div class="mobile card pad5 margin10">mobile</div><!-- Mobile only -->
                <div class="footerDesktop card pad5 margin10">footerDesktop</div><!-- Desktop footer only -->
                <div class="footerMobile card pad5 margin10">footerMobile</div><!-- Mobile footer only -->
                <div class="smallHide card pad5 margin10">smallHide</div><!-- Hidden on small screens -->
                <div class="smallHideFlex card pad5 margin10">smallHideFlex</div><!-- Flex hidden on small -->
                <div class="smallShow card pad5 margin10">smallShow</div><!-- Show on small only -->
                <div class="noPrint card pad5 margin10">noPrint</div><!-- Excluded from print -->
                <div class="hidden card pad5 margin10">hidden</div><!-- Always hidden -->
                <div class="showRow card pad5 margin10">showRow</div><!-- Row visible on large screens -->
                <div class="mobileRow row card pad5 margin10"><div class="pad5">mobileRow</div><div class="pad5">mobileRow</div></div><!-- Mobile row layout -->
                <div class="reverseRow row card pad5 margin10"><div class="pad5">reverseRow1</div><div class="pad5">reverseRow2</div></div><!-- Reversed row -->
                <div class="column card pad5 margin10">column</div><!-- Full width column -->
                <div class="sinister card pad5 margin10">sinister</div><!-- Mobile full width via media query -->
            </div>

            <!-- Menu and CTA -->
            <div class="margin25"><!-- Menu and CTA group -->
                <h3 class="textCenter margin15">Menu & CTA</h3>
                <div class="menuBox margin10"><!-- Container for dropdown menu -->
                    <div class="menu pad5">Menu</div><!-- Menu trigger -->
                    <div id="menu-drop" class="dropdown-content"><a href="#" class="noDecorate pad5">Link</a></div><!-- Dropdown content -->
                </div>
                <div class="CTA margin10 textCenter"><h2><a class="noDecorate" href="#">CTA</a></h2></div><!-- Glow CTA -->
            </div>

            <!-- Miscellaneous Utilities -->
            <div class="margin25"><!-- Misc utilities group -->
                <h3 class="textCenter margin15">Miscellaneous</h3>
                <img src="qore.png" class="cardImage margin10" alt="Qore CSS logo"><!-- alt text clarifies the logo for screen readers --><!-- cardImage utility -->
                <div class="offer margin10">offer</div><!-- Promotional offer -->
                <ul class="offerlist margin10"><li>offerlist</li></ul><!-- Bulleted list style -->
                <form class="item-form margin10"><button class="item-button margin5">item-button</button></form><!-- Form utilities -->
                <hr class="quoteHr margin10"><!-- Styled horizontal rule -->
                <div class="obscure pad5 margin10">obscure</div><!-- Glass morphism effect -->
                <a class="stripe-button-el margin10" href="#">stripe-button-el</a><!-- Stripe button style -->
                <i class="uil uil-star icon margin5" aria-hidden="true"></i><!-- Icon filter utility, decorative so hidden from screen readers -->
                <i class="uil uil-star icon iconLarge margin5" aria-hidden="true"></i><!-- Large icon, decorative so hidden from screen readers -->
                <div class="ue-sidebar-container margin10">ue-sidebar-container</div><!-- Sidebar container -->
            </div>

            <!-- Max Width Utilities -->
            <div class="margin25"><!-- Max width group -->
                <h3 class="textCenter margin15">Max Width</h3>
                <div class="maxWidth600 card pad5 margin10">maxWidth600</div><!-- 600px max width -->
                <div class="maxWidth800 card pad5 margin10">maxWidth800</div><!-- 800px max width -->
                <div class="maxWidth1200 card pad5 margin10">maxWidth1200</div><!-- 1200px max width -->
            </div>
        </section>

        <!-- Stats Section -->
        <section class="wide80 center margin30">
            <div class="grid4 margin25">
                <div class="card pad15 textCenter">
                    <div class="margin10"><h2>50+</h2></div>
                    <div class="itemText">Utility Classes</div>
                </div>
                <div class="card pad15 textCenter">
                    <div class="margin10"><h2>12kb</h2></div>
                    <div class="itemText">Minified Size</div>
                </div>
                <div class="card pad15 textCenter">
                    <div class="margin10"><h2>100%</h2></div>
                    <div class="itemText">Responsive</div>
                </div>
                <div class="card pad15 textCenter">
                    <div class="margin10"><h2>A+</h2></div>
                    <div class="itemText">Accessibility</div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="center pad15">
        <div class="wide80 center">
            <div class="row between margin15">
                <div>
                    <h4 class="margin10">Qore CSS</h4>
                    <p class="itemText">Modern CSS Framework</p>
                </div>
                <div class="row center">
                    <i class="uil uil-github sq15 margin5" aria-hidden="true"></i><!-- decorative social icon -->
                    <i class="uil uil-twitter sq15 margin5" aria-hidden="true"></i><!-- decorative social icon -->
                    <i class="uil uil-linkedin sq15 margin5" aria-hidden="true"></i><!-- decorative social icon -->
                </div>
            </div>
            <div class="textCenter">
                <p class="itemText">&copy; 2024 Qore CSS. Built with modern web standards.</p>
            </div>
        </div>
    </footer>
    <script>
        function validateForm(event){ console.log(`validateForm is running with ${event.type}`); try { const nameField=document.getElementById('nameInput'); const emailField=document.getElementById('emailInput'); const msgField=document.getElementById('messageInput'); const allFilled=nameField.value.trim() && emailField.value.trim() && msgField.value.trim(); if(allFilled){ console.log(`validateForm is returning true`); return true; } alert('Please complete all fields.'); console.log(`validateForm is returning false`); return false; } catch(err){ console.error('validateForm failed:', err.message); return false; } } // provides minimal client-side validation without altering styling
    </script>
</body>
</html>