This is a fun little project experimenting with using semantic selectors to build a component library. The idea is simple, instead of using class="button loading" to make a loading button, you would use a markup like:
<button>
<span role="alert">Loading...</span>
</button>This way, the developer is forced to use descriptive HTML and the styles applied to each component will match the semantics.
On top of this, I wanted to practice web design and creating a cohesive design skills. Using the colors of a mango as inspiration, I created a few themes.
You can check out the installation guide but you can use the jsDelivr CDN or install the project in NPM (npm install mango-ui-components).
<!-- place this in your head tag -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/mango-ui-components@1.0.0/dist/mango.css"
/>
<!-- place this at the end of your body tag -->
<script src="https://cdn.jsdelivr.net/npm/mango-ui-components@1.0.0/dist/mango.js"></script>import "node_modules/mango-ui-components/dist/mango.css";.
│
├── src/ # all styles and scripts for components
│ ├── components/ # SCSS files for component styles
│ ├── helpers/ # SCSS files for helper classes
│ ├── js/ # JS files for components
│ ├── tokens/ # Design tokens that components/ uses
│ │ ├── themes/ # Holds the Mango UI themes (SCSS)
│ │ │ ├── _palette.scss # Definition of all of the colors
│ │ │ └── ... # SCSS files that link tokens to components
│ │ └── ... # Other design token files
│ ├── main.scss # Builds the mango.css stylesheet
│ └── utils.scss # Holds utility functions for referencing colors
├── site/ # Mini repo for building the docs site
└── assets/ # Fonts and icons held here
I'd mostly like to use this project to learn more about accessibility and web design. There are a few common web patterns that aren't possible without JavaScript that I haven't gotten to yet. Specificially, it would be cool if I could complete the components listed in ARIA's design patterns.