⚠️ We don't want to steal the content of Tailwind, which is why Flora CSS does not have any original class belonging to Tailwind. For example, we don't have any class like ring or divide.
<link rel="stylesheet" type="text/css" href="flora.min.css">
<head>
<link rel="stylesheet" type="text/css" href="flora.color.css">
<link rel="stylesheet" type="text/css" href="flora.opacity.css">
<link rel="stylesheet" type="text/css" href="flora.background.css">
</head>
It is strongly recommended to include the flora.color.css module in your projects.
This property defines where the position of the background image is fixed.
| Class name | Properties |
|---|---|
| bg_fixed | background-attachment: fixed; |
| bg_local | background-attachment: local; |
| bg_scroll | background-attachment: scroll; |
Use bg_fixed to fix the background image relative to the viewport.
<div class="bg_fixed" style="background-image: url(...);"></div>
Use bg_local so that the background moves with the content of the associated element. So if the element is scrolling, the background will scroll with.
<div class="bg_local" style="background-image: url(...);"></div>
Use bg_scroll so that the background does not scroll with the content of the element.
<div class="bg_scroll" style="background-image: url(...);"></div>
This property defines how the background of an element extends below the border box, fill box, or content box.
| Class name | Properties |
|---|---|
| bg_clip_border | background-clip: border-box; |
| bg_clip_content | background-clip: content-box; |
| bg_clip_padding | background-clip: padding-box; |
| bg_clip_text | background-clip: text; |
Use bg_clip_border to have the background extend to the outer edge of the border.
<div class="bg_clip_border border_dashed border_purple_70 border_10 bg_blue_30">👋 Hi !</div>
The background is limited to the content box.
<div class="bg_clip_content border_dashed border_purple_70 border_10 bg_blue_30">👋 Hi !</div>
No background is drawn in the border box. The background extends to the edge of the fill box.
<div class="bg_clip_padding border_dashed border_purple_70 border_10 bg_blue_30">👋 Hi !</div>
The background is limited to the foreground text.
<div class="text_7xl font_bold">
<span class="bg_clip_text gradient_t_r from_turquoise_50 to_green_20">Hello World !</span>
</div>
This property allows you to define the color used for the background of an element.
To know the list of all the colors, go to the category : 🎨 Color Pallet
| Class name | Properties |
|---|---|
| bg_{color} | background-color: {color}; |
Control the background color of an element using bg_{color}
<div class="bg_red_30">...</div>
Some Example :
This property is used to define the position of the background.
| Class name | Properties |
|---|---|
| bg_bottom | background-position: bottom; |
| bg_center | background-position: center; |
| bg_left | background-position: left; |
| bg_left_bottom | background-position: left bottom; |
| bg_right | background-position: right; |
| bg_right_bottom | background-position: right bottom; |
| bg_right_top | background-position: right top; |
| bg_top | background-position: top; |
This property defines how images used in the background are repeated.
| Class name | Properties |
|---|---|
| bg_repeat | background-repeat: repeat; |
| bg_no_repeat | background-repeat: no-repeat; |
| bg_repeat_x | background-repeat: repeat-x; |
| bg_repeat_y | background-repeat: repeat-y; |
| bg_repeat_round | background-repeat: round; |
| bg_repeat_space | background-repeat: space; |
The image is repeated as many times as necessary to cover the area dedicated to the background. The last image will be cropped if necessary.
<div class="bg_repeat" style="background-image: url(...)"></div>
There is no repeat of the image.
<div class="bg_no_repeat" style="background-image: url(...)"></div>
The image is repeated only on the X axis.
<div class="bg_repeat_x" style="background-image: url(...)"></div>
The image is repeated only on the Y axis.
<div class="bg_repeat_y" style="background-image: url(...)"></div>
The image is repeated as much as possible and is stretched as necessary so that there is no cropping or space remaining. As soon as there is room to add an image, the others are compressed to make room for it.
<div class="bg_repeat_round" style="background-image: url(...)"></div>
The image is repeated as much as possible without cropping. The first and last image are next to the edges of the clip, and spaces are evenly distributed between the images.
<div class="bg_repeat_space" style="background-image: url(...)"></div>
This property defines the size of the background images.
| Class name | Properties |
|---|---|
| bg_auto | background-size: auto; |
| bg_contain | background-size: contain; |
| bg_cover | background-size: cover; |
Resize the background image so that its proportions are maintained.
<div class="bg_auto" style="background-image: url(...)"></div>
Resize the image so that it is as large as possible and the image maintains its proportions.
<div class="bg_contain" style="background-image: url(...)"></div>
The image is resized to be as large as possible and to maintain its proportions.
<div class="bg_cover" style="background-image: url(...)"></div>
This property allows you to define the color used for the border of an element.
To know the list of all the colors, go to the category : 🎨 Color Pallet
| Class name | Properties |
|---|---|
| bg_{color} | border-color: {color}; |
| bg_{position}_{color} | border-{position}-color: {color}; |
Control the border color of an element using border_{color}
<div class="border_red_30">...</div>
Some Example :
You can also change the color of a particular border in this way : border_{position}_{color}
<div class="border_top_red_30 border_left_blue_30 border_right_green_30 border_bottom_purple_30">...</div>
This property allows you to define rounded corners for the border of an element.
| Class name | Properties |
|---|---|
| radius_2xs | border-radius: 0.1rem; |
| radius_xs | border-radius: 0.15rem; |
| radius_s | border-radius: 0.25rem; |
| radius_m | border-radius: 0.35rem; |
| radius_l | border-radius: 0.5rem; |
| radius_xl | border-radius: 0.75rem; |
| radius_2xl | border-radius: 1rem; |
| radius_3xl | border-radius: 1.25rem; |
| radius_4xl | border-radius: 1.5rem; |
| radius_1 | border-radius: 1px; |
| radius_2 | border-radius: 2px; |
| radius_3 | border-radius: 3px; |
| radius_4 | border-radius: 4px; |
| radius_5 | border-radius: 5px; |
| radius_6 | border-radius: 6px; |
| radius_7 | border-radius: 7px; |
| radius_8 | border-radius: 8px; |
| radius_9 | border-radius: 9px; |
| radius_10 | border-radius: 10px; |
| radius_full | border-radius: 9999px; |
| radius_none | border-radius: none; |
<div class="radius_10">...</div>
Some example of element using different sizes of radius.
This property allows you to define the style of the lines used for the borders.
| Class name | Properties |
|---|---|
| border_solid | border-style: solid; |
| border_dashed | border-style: dashed; |
| border_dotted | border-style: dotted; |
| border_double | border-style: double; |
| border_none | border-style: none; |
<div class="border_solid">...</div>
<div class="border_dashed">...</div>
<div class="border_dotted">...</div>
<div class="border_double">...</div>
Some example of element using different styles of border.
This property defines the width of the border of an element.
| Class name | Properties |
|---|---|
| border_{size} | border-width: {size}px; |
| border_{position}_{size} | border-{position}-width: {size}px; |
<div class="border_3">...</div>
<div class="border_5">...</div>
<div class="border_10">...</div>
<div class="border_t_10 border_b_7">...</div>
Some example of element using different sizes of border.