Link to this headingCSS
https://thecascade.dev/article/least-amount-of-css/
Basic CSS:
}
}
}
CSS Reset:
/* 1. Use a more-intuitive box-sizing model */
}
/* 2. Remove default margin */
}
/* 3. Enable keyword animations */
{
}
}
}
/* 6. Improve media defaults */
}
/* 7. Inherit fonts for form controls */
}
/* 8. Avoid text overflows */
}
/* 9. Improve line wrapping */
}
}
/*
10. Create a root stacking context
*/
}
OPensource UI elements
Cheat Sheet for CSS Selectors
Better UI:
- 60-100 Characters per line. Use the
chunit - line high 1.4
- padding 15px
- Text size 16px
- limit to 2-3 typefaces
- Main body font (serif)
- Code font (monospaced)
- Headers Font (sans serif)
- Limit to 2-3 main colors
Link to this headingFlexbox
https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/
Link to this headingCenter Div
}
}
Link to this headingCSS Frameworks
Easy CSS with transitions
https://picocss.com/
Link to this headingFonts
Link to this headingAnimations
Link to this headingCool CSS Stuff
advanced CSS to give the illusion of shiny Pokemon Cards
https://www.4rknova.com/blog/2025/08/30/foil-sticker
Link to this headingProperties
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-box-trim