devsnorte / puto-framework

Vue nude HTML framework powered by putoness
https://puto-framework.netlify.com/
MIT License
19 stars 10 forks source link

Create basic component to generate grid system #9

Closed iagocavalcante closed 5 years ago

oskar-kupski-elpassion commented 5 years ago

Hi there @iagocavalcante , I could help you with this issue, but could you elaborate about required functionality and how it should work?

iagocavalcante commented 5 years ago

I'm off for a few days, @lubien can you please describe this issue ?

lubien commented 5 years ago

Hi there @iagocavalcante , I could help you with this issue, but could you elaborate about required functionality and how it should work?

Basically since this is a HTML-only framework we need custom components to make a grid system that just put classes on divs.

Assume the grid size is 24. Something like:

<PRow>
    <PCol :size="12">
        A
    </PCol>

    <PCol :size="12">
        B
    </PCol>
</PRow>

But keep in mind to support props like :size-xs, :size-sm, :size-md and :size-xl.

To be complete honest we still don't know how would this be best but at least a draft would be nice.

Try to base your code into real world grids like bootstrap and bulma.

Personally I enjoy total size 24, bootstrap uses 12 iirc. What you think about it @iagocavalcante ?

lubien commented 5 years ago

As for the classes for now how about puto-row, puto-col-12, puto-col-xs-12...?