Home
Basics
Introduction Adding styles Selectors Headings and Text Lists Links Tables Colors Background Box Model Fonts Icons Display Position Overflow Align Images Tool tips FlexAdvanced
Shadows Rounded Corners Units Specificity Responsive design Media Queries Grid Animations Psuedo elements CSS variables and functions SASS and SCSSMiscellaneous
CSS Templates CSS Interview QnACSS templates
Let us see how to create a template similar to https://themes.semicolonweb.com/html/canvas/index.htmlSome 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"); } });
logo
searchicon
hamburdericon
menu
logo
searchicon
Doubts
- Why clear:both is used
- :root vs *
- how the arrow is displayed in menu? why \e99a is translated to arrow
Web development and Automation testing
solutions delivered!!