CSS Resources & Tools
While working on my first Notion + Super site, AMEtech.solutions, I found myself constantly searching for CSS properties and various code in order to tweak my site. It was only after the long journey to learn CSS and build a new, custom site that Super implemented their AWESOME No-Code Design Platform.
These days 99% of my time is directed towards developing content and consulting and maybe 1% tweaking CSS. Super's no-code design system did away with the need for me to constantly have to tweak code in order to get the look and feel I wanted on my web pages!
It is my hope that the resources and tools I gathered can help others learn this amazing HTML styling language!
Super is a superb platform for learning CSS. The Super App is by far the best live CSS editor that I have encountered and provides users with a platform to instantly know what your CSS code will look like!
The content in this template is the accumulation of months of self-taught discoveries into CSS. I consider myself fluent in CSS and even though I am familiar enough to build websites with Wordpress and Notion + Super Content Management systems I wouldn't consider myself a professional web developer.
Please enjoy this FREE Notion Template full of TONS of useful CSS Resources and Tools!
This FREE Notion Template is broken up into three sections:
- Resources
- Tools
- Super Theme Development
1. Resources
CSS Resources
- CSS References
- Selectors, Background, Functions. List Items, Fonts, Cursors, Animation, Units, PX-EM Converter, Colors, Default Values, Entities, CSS Priority Scheme,
- CSS Properties
- Align, Animations, Background, Border, Box, Column, Counter, Flex, Font, Height, List, Margin, Outline, Overflow, Padding, Page Break, Position, Text, Transform, Transition, Width, Word
- CSS Reference Databases
- CSS Functions, Absolute length units, Relative length units. Position, Color Names, CSS Priority, Combinators, Attributes, CSS Selectors (w3schools), Pseudo, Pseudo Elements, Pseudo-classes, Pseudo-class variations, Default Values, Colors, PX-EM Converter, Units, Animatable Properties, Animation Properties
Style Guides
- BEM = Block, Element, Modifier
- Coding Styleguide Notes
- Style Guidelines
Cheat Sheets
CSS Articles
2. TOOLS
Widgets (Embedded Websites)
NOTE: These 'widgets' are really just embedded websites in Notion. These 'widgets' work in Notion and have, in my experience, displayed perfectly on Super websites as well.
- W3C Cheat Sheet Widget
- ConvertAColor - Hex / RGB / HSL Converter
- EnjoyCSS - CSS3 Generator
- HTMLHelp - CSSCheck - CSS Validator
- CSS Sprite Generator, Editor and Code
- CleanCSS.com - Beautify, Minify, Format and Compress Files & Code
- DevHints.IO - Cheat Sheets for Everything
- CSSmatic - ultimate CSS tools for web designers
- CSS Cheat Sheet
- OverAPI
- HTMLCheatSheet - CSS
- WebSiteSetup - CSS Cheat Sheet
- Style-Dictionary-Play.dev
Online Tools (Links)
- CSS Generators
- CSS Validators
- CSS Lints
- CSS Formatting
- CSS Editors
3. Super Template Development
Theme Development
Inside of the Theme Development section there is a Theme Matrix, Template Starter Kit, CSS Resources (Super CSS Classes, Notion Colors and Code Snippets) and Page Demos. The information within this page may help with future customization of your own Super site.
Theme Matrix
This provides a single place to keep track of all of the free Super themes in their template marketplace. Where possible the duplicate page, CSS stylesheet, html header injection, and relevant information has been provided.
Template Starter Kit
These are from the Super FAQ about developing a custom template.
- Template Starter Kit is the basic code needed to start a custom CSS stylesheet.
- Template Starter (Created by Super) is an overview of the different types of blocks.
- Template Starter with .class selectors highlights the CSS .class selectors for each of the page elements listed in the Template Starter (Created by Super).
CSS Resources
These are various resources listing some of the most commonly used CSS elements such as super-css-classes, notion-colors, and code-snippets.
Page Demos
These are Notion templates found from across the web. Credit to their original creators. When building a site these were useful in providing a robust overview of how the CSS made pages look. This allows for site development that is more generalized and allows for site growth without constant CSS code additions being needed.
Interested in building a website on Super? Take a look at my Notion Website Template for sale on Gumroad!
Interested in building a website on Super? Take a look at my Podcast Booking & Episode Calendar for sale on Gumroad!
Want more Notion templates? Visit my Gumroad store to see more products!
This Notion Template is overflowing with many FREE tools and resources to learn and enhance skills in the HTML styling language CSS (Cascading Style Sheets).