Usage
Evo is an open-source project under the MIT License.
Evo Method
Evo makes it faster, more efficient, and fun to design with HTML. You can use it alone and in its purest form. But, it was developed to work alongside other frameworks such as Bootstrap 3.
Evo augments the Bootstrap 3 framework. Bootstrap is fantastic, and being able to build on something familiar and proven such as Bootstrap gave Evo's creators the confidence and peace-of-mind to pursue creating the design system framework.
Over time, the Evo designers noticed that developers working with Bootstrap never edited the Bootstrap themes via the SASS variables, as was intended. They simply connected to the Bootstrap stylesheet and then overrode the Bootstrap styles with their own classes.
Given this, and the rise of frameworks such as Tachyons, Evo invested in creating a library of functional CSS classes that could easily be incorporated natively into the HTML. Tachyons focuses on the power of functional CSS, and validated that this is a viable approach. Evo borrows some concepts from Tachyons, extending some concepts further, or forging new approaches in other areas.
The functional CSS added benefit of making it easier for more junior developers to design in-browser, and also made QA easier because of how visible the semantic CSS classes are when inspecting web pages.
The semantic CSS is spelled out in plain language rather than abbreviated to acronyms, because although it makes the code "look" more tidy with less letters, Evo requires less of a learning curve to infer what the underlying function of margin-right-10 does vs. mr10. Since Evo was in part created to be more friendly to junior developers or designers and even project managers, spelling out the classes seemed more advantageous. This same optimization also assists with bringing other team members onto a project, from initial onboarding to final QA. The functional CSS and atomic design decrease effort of changing a design after production release. You can even just articulate it verbally over the phone; "Please make the header 1 size bigger", so then it goes from text-size-6 to text-size-7. Boom, done.
Evo also bakes-in a modular scale of sizes based on the golden ratio, although we doubled the number of steps in the scale so the size jumps are smaller. The scale is relative, so that space-5 is smaller than space-6, but the user may not know the specific value for either -5 or -6, just that it's a relatively different, and if you try -7 or -8 you'll get a smooth increase in size. The modular scale is entirely optimized for eye-balling a design while developing, which is a key feature for doing away with the soul-crushing need for creating pixel specs.
To minimize the need to leave the coding format, helpful assets are provided such as placeholder images, icons, colors, and font styles. Change the design of elements simply by changing their class names. Make buttons bigger or smaller, adjust text styles, colors, etc.
Different levels of documentation exist. At the top-level is the "Pure Evo" index page, which acts as a general style guide for the Evo framework. It's also acts as a directory, with links to individual documentation pages organized into 20+ UI groups with over 1000+ CSS style functions. Code comments are generously sprinkled within the HTML and SCSS source code, helping to organize each document. Code comments offer clues for the curious developer who wants more insight and instruction into a particular chunk of code.
Demostrations show how to mix various Evo elements to create interesting styles, and educate on possible usage. The CSS classes themselves are semantically written to convey functionality and intent.
Evo bridges a real-time collaboration amongst a small team of a designer + a developer, and maybe a product manager. The team can even site side-by-size to create new designs directly in-browser, or do so individually and pass the files around. So if you can, please find a positive, motivated partner with complimentary skills and huddle together over a screen!