Build Documentation
All Storyhouse sites in 2024 will be built on the back of this framework of styling. While each site will be different due to the design and technical requirements of each project, we are looking to create an underlying method of structuring a website. Here are the main terms you will see as you create pages in Webflow, please read and remember that anychanges made to styles have site wide repercussions. Thanks.
Section
Standard holder, 2% padding at desktop and 5% at all other breakpoints, combo classes to control top and bottom padding, background colour and positioning. 100vh combo class makes it a fullscreen section
Container
The first layer inside a section. Set at 1300px max width and for items to cascade down with 18px between each row
Holder
The standard wrap for all items that need spacing, placing or aligning. Holder is the main class, combos are used for any character limits and flex box activities. Each project should review how many combo classes are at use and should standardise where possible (using 4pt multiples)
Grid
How we structure adjacent elements. Grid is the standard 1:1 and then combo classes used to create alternative layouts. Similar note to Holder, each project should be sure to standardise the Grid Experience where possible
Spacer
A div block styling to help create space between elements. Combo class sets the dimension if it's more than 36px
Identifier
A div block styling that creates a small rectangular block used for subject matter or categorising, just place text inside and leave unstyled so div block can handle all CSS. Combo class used to dictate colour, can work as div or link block, just check the hover states after the colours have been changed
Block
This is an internal display block that has no hover effect, used for feature lists and variation in design. Standard class has a white background, it has a dark and image combo class. Best used with a grid inside to align and arrange elements
Link Block
How all the link blocks look. Internal padding 18px (site standard where possible). The basic block is dark with a light hover. Combo class 'image' sets image background, combo class 'light' inverts background, use holders to style internal elements like text and icons
Icon Holder
36px rounded holder for SVG code, has a primary alternate and can be styled for links. It also has a32px variant styled via a combo class 32 (this can be reduced if a larger difference is preferred)
HTML embed
A baseline svg holder that is to be used inside a styled div which will pass down height, width and colour properties (if styling is set to 'currentcolor')
Brand Link
A link wrapper that is used for third party logos, client roll etc. It is set to desaturate the image (unstyled) inside it) and then hover to full colour.
Image
The baseline set for an image is 100% width of parent and 300px tall. Combo classes S,M, L and XL set different heights (which are adjusted for legibility at different breakpoints). Combo class absolute makes it the full space of parent (which must be set to relative)
Darken
A div block that acts as an overlay over absolute images to provide text contrast. Set the transparency accordingly for the desired effect
Paragraph
The baseline size of text is set via the body (all pages) tag. XS paragraph and XXS paragraph are classes used for small subtitle text that isn't an H value. It can be put into brand colours via combo class primary or secondary. L paragraph is a class used for larger text that, again, isn't an H value (testimonial quotes etc)
Title
There are a few title sizes that can be used to enlarge H values at certain points of the page, styled as below
Video
A styled div that sets the parameters for the video player class of video within it. Set with a simple hover effect as standard
FAQ
A styled div that holds all the elements for an accordion. Copy and paste and style as you need to, remember to change the animation if you add any new elements
Rich Text
The baseline rich text block which inherits the universal text styles, to be used for blog content, it has a combo class of White for use on darker backgrounds
Button
The baseline styling for buttons they have four variants which can be styled in the section below
Hide On Mobile
A combo class used on anything, hides the element from mobile landscape down
Nav Bar
A styled section used for the top navigation on each page, when starting a project this will need styling and making into a symbol to be re-used on all pages. Use variants if the project scope requires it
Announcement
A top div block that is absolute and disappears as the page scrolls. Useful for simple text and link, could be restyled using a link block if it serves one purpose, the basic version has space for CTA and a social link block
Slider
The slider is imagined simply with a height setting that adjusts down the breakpoints. For standard testimonials use a Holder with a Top Bottom Split combo class to put quote text above a person's name. For more complex testimonial frames use a Grid and then Holders to arrange and align