Instructions

Fluid Design

The site uses fluid design based on the font size of the body. Please keep this in mind when making changes to the template.

What this means: Every part of this website is fully responsive and adjusts to the screen's width. It has been crafted to be scalable and ensure a perfect and consistent experience on all devices. For this reason, please follow the following advice:

  • Never change the font size of the body.

  • If you wish to change the size of a typographic element, please refer to its respective tag in the Styleguide. For instance, Paragraph, Paragraph accent, Big Headline, etc.

  • If you want to change or add padding, margin, or typography size, prefer using the "em" unit to ensure the overall proportion of your website remains flawless.

  • Use the "px" unit for small elements or elements you don't want to scale throughout viewports. In this design, the font size of the paragraphs is fixed.

  • By using the "em" unit, you'll most likely not have to worry about responsiveness; it should scale automatically throughout all viewports for easy and fast editing. Be sure to check for more complexe designs, mostly for vertical screens.

  • Please use the "Is Padding" tag to add consistent horizontal paddings to your containers.

  • The website uses a 12-column grid. Don't hesitate to use the column classes to create your own layouts if needed. Check the Styleguide utility tab for more information.

Seamless Preloader+Page transition

To avoid the content of the site to pop before the Preloader shows, please follow these steps:

  • Before publishing the site for production, be sure to set the display of the 'Preloader' block to 'Block'.

  • Enter the 'Preloader' Block by double clicking on it.

  • Select the 'Preloader' Block, set its display to 'Block'.

  • Save and publish your work.

Header Variations

As working with huge typography can be challenging, I created two variations of the home hero section.
Use it to display your brand in the best way possible.

Help + Feedback

If you need any help or have any remarks or want to leave feedback, don't hesitate to contact me: fi@specimen.studio

I am happy to assist you and would like to know how I can improve your experience.