mflx v2.0.1

mflx version 2.0.1

-removed v- prefixed commands like v-space-around. -updated node-sass dependency.

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.

<div class="flx(wrap) middle space-around is-6">
		<button class="btn(small) is-info">A button</button>
		<button class="btn is-error">Button</button>
		<button class="btn(normal) is-warning"></button>
		<input class="btn(large) is-white" type="submit" name="nothing">
		<button class="btn(xlarge) is-black is-round">A button</button>
</div>

btn, btn(), and btn(normal) are synonyms for the same normal size. availible classes are is-primary, is-white, is-black, is-secondary, is-warning, is-info, is-error, is-success, is-round. primary, secondary, black and white are availible as accessible classes for your conveniance. so far the behavior is consistent accross button, submit and anchor tags.

Margin and Padding Utilities

This CSS code defines a set of custom properties for margin and padding intervals, named --mp-1-setting through --mp-5-setting. These properties are then used to create utility classes for setting margin and padding values in increments of corresponding --mp-(x)-setting variable setting

Custom Properties:

• --mp-1-setting to --mp-5-setting: Custom properties representing different margin and padding intervals, ranging from 0.25rem to 2rem.

Margin Classes:

• .mt-1 to .mt-5: Sets margin-bottom in increments of the corresponding --mp-(x)-setting variable setting
• .mb-1 to .mb-5: Sets margin-bottom in increments of the corresponding --mp-(x)-setting variable setting
• .ml-1 to .ml-5: Sets margin-left in increments of the corresponding --mp-(x)-setting variable setting
• .mr-1 to .mr-5: Sets margin-right in increments of the corresponding --mp-(x)-setting variable setting

Padding Classes:

• .pb-1 to .pb-5: Sets padding-bottom in increments of the corresponding --mp-(x)-setting variable setting
• .pl-1 to .pl-5: Sets padding-left in increments of the corresponding --mp-(x)-setting variable setting
• .pr-1 to .pr-5: Sets padding-right in increments of the corresponding --mp-(x)-setting variable setting
• .pt-1 to .pt-5: Sets padding-top in increments of the corresponding --mp-(x)-setting variable setting

Each class is named according to the property it sets (m for margin, p for padding) and the direction or axis (t for top, b for bottom, l for left, r for right), followed by a number indicating the interval.

For example, .mt-3 sets a margin-top value based on the third predefined interval (--mp-3-setting). This structure provides a systematic way for developers to apply consistent spacing throughout their project by using these utility classes.

Dark Mode:

there is a new dark mode filter which inverts the color styles to a simple dark mode. set --ez-dark-theme:0; like so to turn off, or 1 to turn on. this feature maybe buggy and if you don't want your items to be inverted, simply invert the colors again. by default, img and video tags retain their original colors.