Style guide for building a responsive website
Here is a list of things that I learned for building a responsive website when I was building a WordPress portfolio project:
The site
1 ) Understand the site hierarchy (sitemap tree structure) which is the arrangement of all your web pages.
2 ) Understand the position of the landing page in the site hierarchy.
#1 Landing page on the first level of the sitemap – be aware of that the landing page is the root page of site-map tree, and it is the first page through which that users normally reach to your website by tying your domain in the browser, then navigate to other pages from there.
#2 Landing page on the first level of the sitemap – you might have the landing page on the second level of the sitemap tree, it provides a second way for users to get back to the landing page while navigate through your website.
The screen sizes, screen resolution and <html> element
3 ) Understand the relationship between the following :
#1 Screen sizes, screen resolution
#2 Browser viewport (which is the window portion of a browser for displaying an html document, it doesn’t include the address bar portion of a browser).
#3 <html> element
Web API
4 ) Understand the DOM tree structure & CSSOM
The page
5 ) Understand that a page is 3 dimensional – it can have i) x-axis, ii) y-axis, and iii) z-axis.
The original point is the top left corner of the browser viewport, and the page can grow toward right, bottom & inside of the viewport.
Also, if there’re elements that are positioned absolute/fixed/sticky in a page, be aware that the changes on the DOM structure of that page.
CSS box
6) Box
#1 Box-sizing: border-box/content
#2 Box modal – content, padding, border, margin
#3 Background size – not including margin
#4 Margin collapsing vertically – i) between the parent and child element, ii) Between sibling elements
#5 Building block box types –
*inline box
*block box
*inline-block box (without a line break)
*table box (with a line break)
*none box (display: none)
*flex box
*grid box
#6 grouping & nesting
*block(s) in block – modal box, flex box, grid box, box with float elements
*inline in block
*flex in flex
*grid in grid
*pseudo elements in parent element
#7 positioning
*static, relative, absolute, sticky
*z-index
*transformX, transformY etc.
*float
*flex-direction
*grid-area, grid-template-areas, grid-template
*margin: 0 auto;
#8 Visibility
*visibility: visible/hidden/collapse
*overflow
*min/max width/height
#9 Spacing – margin, padding, line-height
Text
7)
*Line-box
*Tex-align
*Letter-spacing
*Font-family, font-size, font-style, font-weight, color
*Pseudo-elements (::first-line, ::first-letter)
Units
8) vw, vh, %, rem, em
Image
9 ) …
Color (Palette )
10 ) …
Media Query
11 ) Mobile-first design
Appendix
12 ) Use of global/local CSS variable,
13 ) Using CSS class to write not repeated CSS code, which is similar to using class in back-end language
14 ) Mix and match font-family, font-size, font-style & color to create text visual hierarchy.