Where am I?
Silva (latin for forest) is a modern Design System created by Ferdy Christant to build beautiful web experiences. It is a styleguide on steroids that aims to solve common design problems in a consistent, precise and predictable way. Silva utilizes modern CSS capabilities to the maximum. An optional Silva.JS layer allows you to build components using future-proof web tech.
Slowly cooked architecture
Silva is the result of two decades of joy and frustration in web development. It is designed to provide a robust yet modular and flexible design system comprising of a powerful core layer of declarative styles, paired with ultra reusable atomics. Best of all, the entire framework is declarative, where you can customize anything with just a few settings.
Forward-looking
Silva embraces the modern web and uses new standard techniques like Flexbox and Picture. It departs from ancient hacky techniques, yet makes sure that important stuff works in all common browsers. Furthermore, Silva intentionally provides no solution for patterns that no longer make sense in a mobile-first world, such as tooltips and carrousels.
Layout is traditionally the most painful area of web development, where common problems are solved time and again in hacky ways. Silva provides powerful, responsive, battle-tested layout solutions that solve layout problems only once.
Silva will not improve your writing, but it will improve everything else about your text. A single high quality digital font that is stylish and legible, paired by a powerful type system will make your next clickbait memorable for minutes.
Utilities are helpful tools that are commonly needed across a design. Not only do they save time, they keep your code base managable and consistent.
Atomics are highly reusable low level elements that can be used to piece together more complex components. Typically, an atomic has many display options to make them suitable to a wide array of design needs. Although entirely optional, atomics make the difference between a styleguide and a Design system.
Components are robust, powerful, high level reusables. Components use Silva's CSS utilities and atomics for rendering, and the light Silva.JS API to add dynamic behavior. Components are built on native technologies that are future-proof and do not lock you into a specific framework.