CSS templates

Let us see how to create a template similar to https://themes.semicolonweb.com/html/canvas/index.html

Some important global styles

• *,::after,::before - box-sizing:border-box
• body - line-height:1.5;color:black;font-family:lato,sans-serif;text-align:center;
• define css variables - e.g. text-align: var(--bs-body-text-align);
• :active - outline:0!important

• Start with mobile design first
• Apply animations to body
• body contains div.wrapper, fixed position elements like go to top, scripts
• div.wrapper - width:100%, margin:0, position:relative, background-color:white
• wrapper contains header, one or more sections and footer
• header - It contains logo, search and hamburger.
  • for header - align-items:center and display:flex
  • Apply margin-right:auto to logo. Remaining children (search and hamburger) are pushed to right and rest of the space is set as margin-right for logo
  • Push the primary menu child to next row by setting flex-basis to 100% and flex-wrap property on parent to wrap.
  • After clicking on search icon, show the search box overlapping existing elements. So search form must have z-index more than header wrapper and position being absolute.
  • To show icons, use fontawesome.com as explained at using icons
  • To show items based on viewport size, use media query - @media (min-width: 576px) and set display to block.
  • set background to 0 0 or transparent for header and set the margin-top of next section to -100 so that header will be shown image. Also set the position of header to fixed.
  • To shrink header, you can animate height property after scroll event occurs

    
    
    $(window).scroll(function() {    
        var scrollBy = $(window).scrollTop();
    
        if (scrollBy >= 500) {
            $("header").addClass("solid");
        } else {
            $("header").removeClass("solid");
        }
    });
    
    

Doubts

• Why clear:both is used
• :root vs *
• how the arrow is displayed in menu? why \e99a is translated to arrow