<aside> 🏆 START HERE! 🔻👇🏼🔻

CSS Resources and Tools Instructions

</aside>

<aside> <img src="/icons/book_yellow.svg" alt="/icons/book_yellow.svg" width="40px" /> References

CSS Reference

Styleguides

Cheat Sheets

CSS Articles

</aside>

<aside> <img src="/icons/list_red.svg" alt="/icons/list_red.svg" width="40px" /> Discover the secret to achieving fluid, responsive design effortlessly, without the need of breakpoints or media queries.

Fluid Responsive Website Design | Notion + Super

The design system inside constructs fully fluid responsive websites without breakpoints, media queries or JavaScript frameworks using simple CSS. Stop tweaking and find the ebb and flow of harmonious ranges that will adapt and ensure a perfect layout regardless of the user's device or screen size.

</aside>

<aside> <img src="/icons/gear_yellow.svg" alt="/icons/gear_yellow.svg" width="40px" /> Widgets & Online Tools

<aside> ‼️ These 'widgets' are just embedded websites in Notion. They have, in my experience, displayed perfectly on Super websites as well.

</aside>

<aside> <img src="/icons/list_red.svg" alt="/icons/list_red.svg" width="40px" /> This feature-rich Notion template was built to offer a robust pre-made website using Notion as a Content Management System and will work for any service which renders Notion pages into webpages but it is optimized to work with Super.

Notion Website Template

</aside>

<aside> <img src="/icons/color-palette_yellow.svg" alt="/icons/color-palette_yellow.svg" width="40px" /> Super Theme Development

<aside> ⚡ Template Starter Kit Layouts

<aside> <img src="/icons/snippet_blue.svg" alt="/icons/snippet_blue.svg" width="40px" /> These were created using the Template Starter (Created by ⚡Super) and highlights CSS .class selectors for all Notion blocks.

Template Starter with .class selectors

</aside>

<aside> ⚡ These layouts are from the Super FAQ about developing a custom template.

Template Starter Kit Code Snippet

Template Starter (Created by ⚡Super)

</aside>