Hello👋

Are you about to start a new Webflow project? But don’t know where to start or what all to look out for in the beginning?

Start here!

The checklist

• [ ] Responsive design (you need to know how everything scales down and make sure it does so in proportion)

• [ ] Page wrapper

  • [ ] Don’t style it a lot
  • [ ] Keep overflow hidden here to keep the page from scrolling horizontally

• [ ] Sections

  • [ ] Account for common properties all sections might need to have. For example, all sections might have to be relative because some have full width background images that need to be absolute
  • [ ] Make them flex box and centre aligned so that on bigger breakpoints they don’t push your container to the side by default
  • [ ] If you know there are going to be combo classes used to change properties like the background colour in the future, you could make them here too

• [ ] Section padding

  • [ ] Ideally keep them in rem, but pixels work too
  • [ ] Keep default padding the one that’s most commonly used
  • [ ] Make your padding reduce in proportion for smaller breakpoints
  • [ ] Account for all different section paddings that exist throughout your project and make combo classes accordingly

• [ ] Containers

  • [ ] Give them a max width for each breakpoint. Suggested max widths:
    • Desktop 1040 px
    • Tab 688 px
    • Landscape 500 px
    • Mobile 312 px
  • [ ] Make it a flex box and give it the most commonly used orientation
  • [ ] Make combo classes for other orientations that you may need to use

• [ ] Colour swatches based on the colours in your style guide

• [ ] Text styles

  • [ ] Account for all sizes mentioned in your style guide - headings, paragraphs, captions, text below images, tags, etc.
  • [ ] Keep desktop sizes in rem by dividing it by 16. Look here for more info.
  • [ ] Smaller screen sizes can have pixel values that reduce in proportion as their screen widths don’t vary as much as desktop sizes do
  • [ ] Account for the following too:
    • font
    • weight
    • colour
    • line height
    • style

• [ ] Rich text for CMS pages