Designing web pages always feels like a struggle for me. It takes longer than I expect, and I'm never fully satisfied with the result. Bootstrap components don't convince me, and Tailwind feels overwhelming. Using templates feels like cheating, especially since they're rarely optimized for loading times, SEO, or responsiveness.
That's why I'm creating my own library. I want customizable elements in HTML/CSS and Adobe XD or Figma to quickly create eye-catching websites without worrying about design, loading times, or SEO optimization.
Update! 2024-03-07: Ended up Designing all 31 components on paper instead of Adobe XD probably will programm and tweak all components before designing them on Adobe XD. So far the code is awefull. Probably will require some CSS refactoring a better class naming.
This project aims to create a set of high-performance web components, designed for fast loading times and optimized for SEO.
In this stage, sections, components and content elements will be designed using Adobe XD. The goal is to be able to create quick sketches of the sites before programming them and have an overview of all the components.
In this stage the basic HTML5 file structure for SEO will be created and the components will be programmed. Aspects such as responsive sizing on different devices and the creation of useful classes for quick construction of columns, rows and containers, similar to Bootstrap, will be taken into account.
A web page will be developed to search and filter elements, where users will be able to copy the generated code or customize variables such as colors, fonts and container widths.
An online composition canvas will be implemented where users will be able to assemble the code interactively, changing colors and widths of containers with tools such as color pickers and sliders. A preview will be provided to view the result on different devices before downloading the generated code.
| Stage | Completed | Date |
|---|---|---|
| Design of Sections and Components | [✅] | 2024-03-07 |
| Programming | [❌] | YYYY-MM-DD |
| Refactoring CSS | [❌] | YYYY-MM-DD |
| Creation of Web Page to Search / Filter | [❌] | YYYY-MM-DD |
| Creation of Online Composition Canvas | [❌] | YYYY-MM-DD |
The implementation of an online backend and CMS will be considered to allow modification of texts and components without the need to edit code. Aspects such as the user system, hosting and custom domains will be addressed.
The implementation of an LLM (Flame Modeling Language-2) will be explored to generate the site text with artificial intelligence based on the information provided by the user.
Contributions are welcome. If you would like to contribute to the project, please check the issues section to see pending tasks or open a new one if you have any suggestions.