1.0.0 • Published 2 years ago

mdaisy v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

mDaisy

###DaisyUI now with mflx positioning!

#Usage For components please refer to DaisyUI:

📘 Documents + Examples

See the official site: [ daisyui.com/components →] ###below is the documention for mflx:

basically this is a barebones wrapper for flexbox and makes it more conveniant to style items and create grid layouts

<div class="flx(wrap,column) top left"> 
    <div></div>
</div>

as you can see, flx() takes a maximum of 2 arguments exactly as shown. options are wrap, nowrap, and column, but more complex positioning can be applied if you have children that also have class flx() as shown below.

<div class="flx(wrap) middle space-around">
    <div class="flx(wrap)">
        <div class="item1">listItem</div>
    </div>
</div>

flx() can also be written as flx.

also you can do columns! syntax uses "is" like in bulma, and you can say anywhere from is-1 to is-12 like in bulma you can also say is-full, is-quarter, is-three-quarters, is-third, is-two-thirds. is-fluid is basically setting the min-width of your container to 0, which allows you to have text wrap. use this when you don't need a specific container size but need text and other things to wrap.

<div class="flx(wrap) center space-around is-12">
    <div class="flx(wrap) is-6">
        <div class="item1">listItem</div>
    </div>
    <div class="flx(wrap) is-half">
        <div class="item1">listItem</div>
    </div>
</div>

flx(column), or any other syntax that contains column has a weird behavior when you apply the .left class for alignment. the up down directions are now inverted. to avoid confusion, simply prefix with col- (i.e. col-top). note that space-around, space-between, and space-evenly now work in the y direction and they also have prefixes which are there to help you differentiate your positions flx(column) containers from your other flx containers. if you need to space items around in the x-direction, use flx or any other flx container without column in the syntax.

offsets are not included yet and they work with the class flx() and without. you can create invisible divs to create the desired offset for the time being.

--buttons have been removed in favor for Daisy UI buttons and color pallete customization.--