Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/CarcajadaArtificial/lunchbox

Component Library 🍱 for Deno πŸ¦• Fresh πŸ‹
https://github.com/CarcajadaArtificial/lunchbox

css deno deno-fresh denoland scss typescript

Last synced: 14 days ago
JSON representation

Component Library 🍱 for Deno πŸ¦• Fresh πŸ‹

Awesome Lists containing this project

README 

        
# 🍱 Lunchbox



`` Hello ( Β΄ Ο‰ ` )γƒŽοΎž `` Welcome to 🍱 Lunchbox. So... you're into Deno πŸ¦• Fresh

πŸ‹? Damn, me too. I've found myself using nothing but Fresh for most of my web

dev projects. But I'm not that much of a user of existing web component

libraries. Even though I respect these, I'm more of a _do-it-yourself_ kind of

guy. That is why I created Lunchbox, and I couldn't help creating an opinionated

product that is built to have my dream features.



## Ideas behind the library



Alright, so what are these features? Instead of listing what can _technically_

be done with this library, the way to describe it is by its core ideas.



### Based on [Atomic Design](https://atomicdesign.bradfrost.com/table-of-contents/)



Shoutout to [Brad Frost](https://bradfrost.com/), thank you for this great piece

of work. A popular concept about modularity in design systems is to consider

them inherently hierarchical. In this, I strongly disagree because atoms are of

no less importance than organisms. But I do agree that they have one

fundamentally different characteristic. Atoms are components only made by

nature's _subatomic particles_ a.k.a. pure HTML Elements. Am I stretching too

far with the atomic analogy?



### Trivial HTML good practices



Component libraries are usually ambiguous about how they handle inner logic,

creating the need to _find out how does it do X_. For example, some might have

only one component for both `` and ``, which might change

depending on a prop. "Or was it something else? Wait, what was the name of the

class that changes when it's a TextArea?" Having it closer to the HTML Element

logic makes the inner logic of the components really obvious and apparent.



Let's take as an example the `` component. When using it you're expected

to use the best practices with it, plus additional features. These best

practices are multidisciplinary. The field of UX foments the use of a label and

a contextual error message to guide the user. That gives us the props

``. These features are not native to the simple

`` HTEML element, it must work together with other elements. It is in

this next area where the good practices aren't forgotten. Like nesting the input

inside a label element (``). Finally, every visual

element inside the component was designed to maintain a perfect vertical rhythm

for good aesthetic practices even in the aesthetics of the interface.



### Configure anything easily



Let us continue with the example of the `` component. As a very strict

rule, all components must be able to render a useful default state without any

defined prop. so simply using `` will create a functional input field

even without a label or anything. Likewise, styles and CSS classes are optional

and can be removed with the universal prop `nostyles`.



Also, additional classes can be appended simply by adding a class to the

component. Having `` will add the class `"x"` to the

`` element inside it. Every HTML Element and framework component that

make up a particular component will be called a _"piece"_. Every piece of every

component can be referenced using the universal component `fwd`. This is an

oversimplified html code for the `` component:



```jsx



  

    

      

    

     {/* Component's main element */}

  

  



```



The piece name is used in the CSS classes and in the `fwd` prop

(`` tag.

2. Add `id="lunchbox-body"` to the `