Appendix

In the appendix, you can find some references that inspired or gave any input related to any aspects of Spruce CSS or our learning in general.

Creating a framework is a complex task; you need a lot of input. You usually don’t reinvent the wheel; you use the old ideas in a new form. You try to sum up your knowledge in an acceptable format.

Learning modern CSS can be rewarding. Here are some good resources if you want to know more about the concepts and techniques used in Spruce.

Bootstrap - It is the most popular CSS framework. The case is that BS is almost the ultimate truth regarding excellent solutions. Reading its documentation and source code is a good learning exercise.
Layout patterns - A good source of modern layout examples. Spruce CSS doesn’t use a grid system, and we don’t plan to implement one. We use Flexbox, Grid, and some predefined mixin helpers.
Learn Responsive Design - A great resource for modern responsive development. We loved the “Internationalization” section.
Every Layout - An excellent course on layouts. Create responsive designs with fewer (or without) @media breakpoints. Although Spruce uses breakpoints, we try to reduce their use as much as possible. The stack, cluster, sidebar, switcher, reel and center layouts of Spruce are based on these ideas.
SmolCSS - Minimal snippets for modern CSS layouts and components. A comprehensive collection of fantastic CSS solutions.
Form Design Patterns - Forms mean the interaction on any webpage or application. Making them suitable is crucial. Learn more from one of the best books on this topic.
Modern CSS Solutions - An excellent list of modern CSS solutions.
Accessibility for Everyone - A light introduction about accessibility.
Defensive CSS - Practical CSS and design tips that help in building future-proof user interfaces.
WAI-ARIA Authoring Practices - The reference for accessible interactive patterns, which the Spruce UI components follow.
Open Props and Design Tokens - Inspiration for the token-based approach of the style presets.