You have access to the colors from the html and change the background color with the _bg attribute.
Exemples:
ubblegum<div _bg="red">I'm a red div</div>
<div _bg="green">I'm a green div</div>
<div _bg="blue">I'm a blue div</div>Results:
But you can also use colors in many places, such as on text, alerts etc...
Exemples:
<h4 _font="red">I'm a red text</h4>
<div _alert="purple">I'm a purple alert</div>
<button _btn="amber outline">I'm a amber button</button>Results:
For color list, refer here
| Value | Description |
|---|---|
| [color] | you can use all colors |
You also have a way to add margins simply with _margin
Exemple:
<div _margin="0">Margin 0</div>
<div _margin="1">Margin 1</div>
<div _margin="2">Margin 2</div>
<div _margin="3">Margin 3</div>
<div _margin="4">Margin 4</div>
<div _margin="5">Margin 5</div>
<div _margin="6">Margin 6</div>
<div _margin="7">Margin 7</div>
<div _margin="8">Margin 8</div>
<div _margin="9">Margin 9</div>
<div _margin="10">Margin 10</div>Results:
You can precise the direction with the first letter prefix
Exemple:
<div _margin="l-5">Margin left 5</div>
<div _margin="t-5">Margin top 5</div>
<div _margin="r-5">Margin right 5</div>
<div _margin="b-5">Margin bottom 5</div>| Value | Description |
|---|---|
| 0..10 | 0 through 10 (or logic limitation) |
| l-0..10 | left marge |
| r-0..10 | right marge |
| t-0..10 | top marge |
| b-0..10 | bottom marge |
| x-0..10 | left & right marge |
| y-0..10 | top & down marge |
| md:0..10 | breakpoints is available |
Padding too with attribute _padding
Exemple:
<div _padding="0">Padding 0</div>
<div _padding="1">Padding 1</div>
<div _padding="2">Padding 2</div>
<div _padding="3">Padding 3</div>
<div _padding="4">Padding 4</div>
<div _padding="5">Padding 5</div>
<div _padding="6">Padding 6</div>
<div _padding="7">Padding 7</div>
<div _padding="8">Padding 8</div>
<div _padding="9">Padding 9</div>
<div _padding="10">Padding 10</div>Results:
The value of the margin or padding is alway the value x5, so a margin 5 is a 25px marge.
You can precise the direction with the first letter prefix
Exemple:
<div _padding="l-5">Padding left 5</div>
<div _padding="t-5">Padding top 5</div>
<div _padding="r-5">Padding right 5</div>
<div _padding="b-5">Padding bottom 5</div>| Value | Description |
|---|---|
| 0..10 | 0 through 10 (or logic limitation) |
| l-0..10 | left marge |
| r-0..10 | right marge |
| t-0..10 | top marge |
| b-0..10 | bottom marge |
| x-0..10 | left & right marge |
| y-0..10 | top & down marge |
| md:0..10 | breakpoints is available |
You have the possibility to format your titles and texts to the desired size.
Exemples:
<h1>I'm a header 1</h1>
<p _font="h1">I'm a header 1 too</p>
<h3>I'm a header 3</h3>
<p _font="h3">I'm a header 3 too</p>
<h5>I'm a header 5</h5>
<p _font="h5">I'm a header 5 too</p>Result:
I'm a header 1 too
I'm a header 3 too
I'm a header 5 too
| Value | Description |
|---|---|
| h1..h6 | Header 1 to 6 |
You can change the text alignement
<p _font="left">I'm a left text</p>
<p _font="right">I'm a right text</p>
<p _font="center">I'm a centered text</p>
<p _font="justify">I'm a justify text</p>Result:
I'm a left text
I'm a right text
I'm a centered text
I'm a justify text
| Value | Description |
|---|---|
| left | left text alignement |
| right | right text alignement |
| center | center text alignement |
| justify | justify text alignement |
You can change the text transform
<p _font="upper">I'm a uppercase text</p>
<!-- can use upper and uppercase -->
<p _font="lower">I'm a lowercase text</p>
<!-- can use lower and lowercase -->
<p _font="capitalize">I'm a capitalized text</p>
<!-- can use cap, capital and capitalize -->Result:
I'm a uppercase text
I'm a lowercase text
I'm a capitalized text
| Value | Description |
|---|---|
| upper, uppercase | upper text transformation |
| lower, lowercase | lower text transformation |
| cap, capital, capitalize | capitalize text transformation |
You can change the font weight
<p _font="bold">I'm a bold text</p>
<p _font="bolder">I'm a bolder text</p>
<p _font="lighter">I'm a light text</p>
<p _font="normal">I'm a light text</p>Result:
I'm a bold text
I'm a bolder text
I'm a light text
I'm a light text
| Value | Description |
|---|---|
| bold | bold font weight |
| bolder | bolder font weight |
| lighter | lighter font weight |
| normal | normal font weight |
You can change the font decoration
<p _decoration="del">I'm a deleted text</p>
<p _decoration="underline">I'm a underlined text</p>
<a href="#" _decoration="none">I'm a none underlined link</a>Result:
I'm a deleted text
I'm a underlined text
| Value | Description |
|---|---|
| del, linethrough | deleted text decoration |
| underline | underlined text decoration |
| none | none decorated text decoration |
You can change to italic
Exemple:
<p _font="italic">I'm an italic text</p>Result:
I'm an italic text
You can change highlight some text
I'm a <span _font="mark">highlighted</span> text
<!-- you can use highlight value too -->Result:
I'm a highlighted text
You can choose to show or hide something width some attributes
Exemples:
<div _show="true">I'm a visible div</div>
<div _show="false">I'm a non visible div</div>
<div _hide="true">I'm a non visible div</div>
<div _hide="false">I'm a visible div</div>
<!-- More logical exemple -->
<div _hide="md:false lg:true">I'm a non visible div</div>Results:
Some of the most used flexbox attributes and values is available
For make your container flex, you can use the attribute _display, see more here about.
<div _display="flex">
<!-- Your content -->
</div>
<!-- Dont forget rows are flexboxes too -->
<div _row>
<!-- Your content -->
</div><div _display="flex" _direction="row"></div>
<!-- This is the default value-->
<div _display="flex" _direction="reverse"></div>
<div _display="flex" _direction="col"></div>
<div _display="flex" _direction="col reverse"></div>| Value | Description |
|---|---|
| row | flex direction: row |
| reverse | flex direction: row-reverse |
| col, column | flex direction: column |
| col reverse | flex direction: column-reverse |
<div _display="flex" _wrap="wrap"></div>
<!-- This is the default value-->
<div _display="flex" _wrap="nowrap"></div>
<div _display="flex" _wrap="reverse"></div>| Value | Description |
|---|---|
| wrap | flex wrap: wrap |
| nowrap | flex wrap: nowrap |
| reverse, wrap-reverse | flex wrap: wrap-reverse |
<div _display="flex" _justify="start"></div>
<!-- This is the default value-->
<div _display="flex" _justify="end"></div>
<div _display="flex" _justify="center"></div>
<div _display="flex" _justify="around"></div>
<div _display="flex" _justify="between"></div>
<div _display="flex" _justify="evenly"></div>| Value | Description |
|---|---|
| start | justify content: start |
| end | justify content: end |
| center | justify content: center |
| around | justify content: space-around |
| between | justify content: space-between |
| evenly | justify content: space-evenly |
<div _display="flex" _items="stretch"></div>
<div _display="flex" _items="start"></div>
<div _display="flex" _items="end"></div>
<div _display="flex" _items="center"></div>
<div _display="flex" _items="baseline"></div>| Value | Description |
|---|---|
| stretch | align items: stretch |
| start | align items: start |
| end | align items: end |
| center | align items: center |
| baseline | align items: baseline |
<div _display="flex" _content="normal"></div>
<!-- This is the default value-->
<div _display="flex" _content="start"></div>
<div _display="flex" _content="end"></div>
<div _display="flex" _content="center"></div>
<div _display="flex" _content="between"></div>
<div _display="flex" _content="around"></div>
<div _display="flex" _content="evenly"></div>
<div _display="flex" _content="stretch"></div>| Value | Description |
|---|---|
| normal | align content: normal |
| start | align content: start |
| end | align content: end |
| center | align content: center |
| between | align content: space-between |
| around | align content: space-around |
| evenly | align content: space-evenly |
| stretch | align content: stretch |
Your can add some border-radius with attribute _round
Exemples:
<div _round>I'am a default rounded div</div>
<div _round="0">I'am a none rounded div</div>
<div _round="1">I'am a 1 rounded div</div>
<div _round="2">I'am a 2 rounded div</div>
<div _round="3">I'am a 3 rounded div</div>
<div _round="4">I'am a 4 rounded div</div>
<div _round="5">I'am a 5 rounded div</div>
<div _round="6">I'am a 6 rounded div</div>
<div _round="7">I'am a 7 rounded div</div>
<div _round="8">I'am a 8 rounded div</div>
<div _round="9">I'am a 9 rounded div</div>
<div _round="10">I'am a 10 rounded div</div>
<div _round="full">I'am a full rounded div</div>Results:
| Value | Description |
|---|---|
| 0..10 | 5px x size border-radius |
| full, circle | 100% border-radius |
Your can add some shadows with attribute _shadow
Exemples:
<div _shadow>I'am a default shadowed div</div>
<div _shadow="0">I'am a none shadowed div</div>
<div _shadow="1">I'am a 1 shadowed div</div>
<div _shadow="2">I'am a 2 shadowed div</div>
<div _shadow="3">I'am a 3 shadowed div</div>
<div _shadow="4">I'am a 4 shadowed div</div>
<div _shadow="5">I'am a 5 shadowed div</div>
<div _shadow="6">I'am a 6 shadowed div</div>
<div _shadow="7">I'am a 7 shadowed div</div>
<div _shadow="8">I'am a 8 shadowed div</div>
<div _shadow="9">I'am a 9 shadowed div</div>
<div _shadow="10">I'am a 10 shadowed div</div>Results:
You can add _responsive attribute to your images for make them responsive
<img src="https://picsum.photos/600/300" />
<img _responsive src="https://picsum.photos/600/300" />