Fortune is a modern and modular CSS Framework that emphasizes (extensive) use of CSS variables. With the introduction and the , CSS variables (combined with CSS Grid and Flexbox) make building and shipping beautiful web-based UIs possible with just few configurations.
Fortune specializes in helping developers write beautiful UIs for their websites and web apps fast using util CSS classes. And there are several kinds of classes––abstract classes that influence the margin and padding, component classes which construct a common CSS component e.g. a button, modifiers which update aspects of a CSS component, and state modifiers which induce a state (like psuedo-selectors)
Rather than attempt to do too much trail-blazing, Fortune apprecaites previous and existing CSS frameworks such as ... and ... and aims to build on their successes and fill in where possible. No CSS framework will work for 100% of all developer needs, but Fortune tries to to address making modern CSS more intuitive and flexible than hard-coding (e.g. imperative CSS). With CSS variables at its core, Fortune is intended to address a wide spectrum of designs due to its adaptable engineering.
One intersting benefit to experimenting with Fortune is that the entire project can be used without a build-process, meaning both the development and production version of Fortune can be used as-is without intervention whatsoever. Fortune can both teach best practices with CSS and aid developers in creating beautiful websites fast without the same overhead as conventional CSS.
Because CSS and util classes can become hard to manage in fluid projects that have rapid-changing contraints, rather than just focusing on CSS variables to address design challenges, Fortune is a proponent of Vue-component-based custom elements that can be used to both obscure the implementation classes that compose an CSS component, making updating and managing UI componets defined in the DOM intutive and light to maintain.
Despite SASS, Compass, and others having first-class tooling when it comes to frontend web development, CSS variables offers some new and interesting possibilities for how frontend developers can think about websites and web apps. CSS variables which have xx% support on major browsers on mobile and yy% support on major browsers on desktop, means developers can leverage Fortune as a first-class citizen for building for the web.
In programming, there are two (simple) steps to a program being run: compile-time and runtime. Compile-time represents the moment at which a compiler interprets source code and outputs a desired result. The process of Sass transforming input to output files via e.g. --watch is the compile-time, more-or-less being hidden because of it's automatic nature.
Runtime however offers new possibilities; that being that we can now update our UI (in more than one place) WHILE our website or web app is being rendered in the client. That means we update the values of our CSS variables and have those changes propogate throughout the website either before––which is nothing new––or whilst being viewed––this is new!
While this is (on a technical level) possible with JavaScript, Fortune argues that it's the wrong spec for the job! JavaScript can however be used to update the value of a CSS variable––as supposed to update all values in our rendered CSS––and have the changes propogate through and through. This is a kind of reactive programming, where updating something once is reflected in other places, too!