booleon/modules
Key value entries of CSS
Booleon modules are a pre-defined entry of css with keys that can be static (string) or dynamic (RegEx).
Get Started
Instalation
npm i @booleon/modules
yarn add @booleon/modules
Examples
Key also can be Symbol whose value will be instantiated as a new RegExp() to be matched.
export const background = {
[sym<'bg_color_COLOR'>('bg_color_(.*)')]: (value: string) =>
`background-color:${handleColor(value)};`,
bg_img: (value: string) => `background-image:url(${value});`,
bg_transparent: () => 'background-color:transparent;',
bg_repeat: () => 'background-repeat:repeat;',
bg_norepeat: () => 'background-repeat:no-repeat;',
bg_auto: () => 'background-size:auto;',
bg_cover: () => 'background-size:cover;',
bg_contain: () => 'background-size:contain;',
bg_fixed: () => 'background-attachment:fixed;',
bg_local: () => 'background-attachment:local;',
bg_scroll: () => 'background-attachment:scroll;',
};
Available Modules
animation
| ani_name_`NAME` |
ani_duration_`TIME` |
ani_iteration_`NUMBER` |
ani_iteration_infinite |
ani_pause |
| ani_play |
ani_forwards |
ani_backwards |
ani_linear |
ani_ease |
| ani_ease_in |
ani_ease_out |
ani_ease_in_out |
background
| bg_`COLOR` |
bg_img |
bg_transparent |
bg_repeat |
bg_norepeat |
| bg_auto |
bg_cover |
bg_contain |
bg_fixed |
bg_local |
| bg_scroll |
border
| bd_`SIZE_STYLE_COLOR` |
bdt_`SIZE_STYLE_COLOR` |
bdb_`SIZE_STYLE_COLOR` |
bdl_`SIZE_STYLE_COLOR` |
bdr_`SIZE_STYLE_COLOR` |
| bdx_`SIZE_STYLE_COLOR` |
bdy_`SIZE_STYLE_COLOR` |
bd_color_`COLOR` |
bdt_color_`COLOR` |
bdb_color_`COLOR` |
| bdl_color_`COLOR` |
bdr_color_`COLOR` |
bdx_color_`COLOR` |
bdy_color_`COLOR` |
bd_width_`NUMBER` |
| bdt_width_`NUMBER` |
bdb_width_`NUMBER` |
bdl_width_`NUMBER` |
bdr_width_`NUMBER` |
bdx_width_`NUMBER` |
| bdy_width_`NUMBER` |
bd_radius_`VALUE` |
bdtr_radius_`VALUE` |
bdtl_radius_`VALUE` |
bdt_radius_`VALUE` |
| bdbr_radius_`VALUE` |
bdbl_radius_`VALUE` |
bdb_radius_`VALUE` |
bdl_radius_`VALUE` |
bdr_radius_`VALUE` |
| bd_style_none |
bd_style_hidden |
bd_style_dotted |
bd_style_dashed |
bd_style_solid |
| bd_style_double |
bd_style_groove |
bd_style_ridge |
bd_style_inset |
bd_style_outset |
| bd_style_initial |
bd_style_inherit |
bdt_style_none |
bdt_style_hidden |
bdt_style_dotted |
| bdt_style_dashed |
bdt_style_solid |
bdt_style_double |
bdt_style_groove |
bdt_style_ridge |
| bdt_style_inset |
bdt_style_outset |
bdt_style_initial |
bdt_style_inherit |
bdb_style_none |
| bdb_style_hidden |
bdb_style_dotted |
bdb_style_dashed |
bdb_style_solid |
bdb_style_double |
| bdb_style_groove |
bdb_style_ridge |
bdb_style_inset |
bdb_style_outset |
bdb_style_initial |
| bdb_style_inherit |
bdl_style_none |
bdl_style_hidden |
bdl_style_dotted |
bdl_style_dashed |
| bdl_style_solid |
bdl_style_double |
bdl_style_groove |
bdl_style_ridge |
bdl_style_inset |
| bdl_style_outset |
bdl_style_initial |
bdl_style_inherit |
bdr_style_none |
bdr_style_hidden |
| bdr_style_dotted |
bdr_style_dashed |
bdr_style_solid |
bdr_style_double |
bdr_style_groove |
| bdr_style_ridge |
bdr_style_inset |
bdr_style_outset |
bdr_style_initial |
bdr_style_inherit |
| bdx_style_none |
bdx_style_hidden |
bdx_style_dotted |
bdx_style_dashed |
bdx_style_solid |
| bdx_style_double |
bdx_style_groove |
bdx_style_ridge |
bdx_style_inset |
bdx_style_outset |
| bdx_style_initial |
bdx_style_inherit |
bdy_style_none |
bdy_style_hidden |
bdy_style_dotted |
| bdy_style_dashed |
bdy_style_solid |
bdy_style_double |
bdy_style_groove |
bdy_style_ridge |
| bdy_style_inset |
bdy_style_outset |
bdy_style_initial |
bdy_style_inherit |
bd_collapse |
| bd_separate |
bd_none |
bdt_none |
bdb_none |
bdl_none |
| bdr_none |
bdx_none |
bdy_none |
container
| z_`NUMBER` |
op_`NUMBER` |
top_`NUMBER` |
bottom_`NUMBER` |
left_`NUMBER` |
| right_`NUMBER` |
z_max |
z_auto |
sc_auto |
sc_hidden |
| sc_visible |
scy_auto |
scy_hidden |
scy_visible |
scx_auto |
| scx_hidden |
scx_visible |
fixed |
absolute |
relative |
| sticky |
top |
right |
bottom |
left |
| inset |
inset_x |
inset_y |
fit_contain |
fit_cover |
| fit_fill |
fit_none |
hidden |
visible |
invisible |
| noappearance |
rz_none |
rz |
rzy |
rzx |
| content |
cursor
| cr_auto |
cr_default |
cr_pointer |
cr_wait |
cr_text |
| cr_move |
cr_disallowed |
cr_cross |
cr_grabbing |
cr_help |
| cry_resize |
cra_resize |
crb_resize |
crx_resize |
cr_no_drop |
| cr_none |
cr_progress |
cr_zoom_in |
cr_zoom_out |
cr_noevents |
| cr_events |
cr_url |
filter
| fl_blur_`SIZE` |
fl_brightness_`SIZE` |
fl_contrast_`SIZE` |
fl_grayscale_`SIZE` |
fl_hue_`SIZE` |
| fl_opacity_`SIZE` |
fl_saturate_`SIZE` |
fl_sepia_`SIZE` |
fl_sd_`SIZE` |
fl_invert |
flex
| flex |
wrap |
no_wrap |
reverse_wrap |
grow |
| col |
row |
row_reverse |
col_reverse |
main_between |
| main_around |
main_evenly |
main_center |
cross_center |
main_stretch |
| cross_stretch |
main_start |
cross_start |
main_end |
cross_end |
font
| ft_border_`COLOR` |
ft_color_`COLOR` |
ft_size_`NUMBER` |
ft_spacing_`NUMBER` |
ft_height_`NUMBER` |
| ft_family_`FAMILY` |
ft_family_sans |
ft_family_serif |
ft_family_mono |
ft_select_none |
| ft_select_auto |
ft_select_text |
ft_select_contain |
ft_select_all |
ft_select_inherit |
| ft_select_initial |
ft_select_unset |
ft_align_left |
ft_align_right |
ft_align_center |
| ft_align_justify |
ft_align_initial |
ft_align_inherit |
ft_transform_none |
ft_transform_normal |
| ft_transform_capitalize |
ft_transform_uppercase |
ft_transform_lowercase |
ft_transform_initial |
ft_transform_inherit |
| ft_italic |
ft_weight_lightest |
ft_weight_lighter |
ft_weight_light |
ft_weight_normal |
| ft_weight_medium |
ft_weight_semibold |
ft_weight_bold |
ft_weight_bolder |
ft_weight_black |
| li_none |
li_disc |
li_decimal |
li_inside |
li_outside |
| ft_underline |
ft_line_through |
ft_no_underline |
ft_wrap_space |
ft_wrap_word |
| ft_wrap_letter |
ft_no_wrap |
ft_truncate |
gradient
| gx_`COLOR` |
gy_`COLOR` |
gt_`COLOR` |
gb_`COLOR` |
gl_`COLOR` |
| gr_`COLOR` |
grid
| rows_`FRACTIONS` |
cols_`FRACTIONS` |
area_`AREA` |
cols_span_`NUMBER` |
rows_span_`NUMBER` |
| cols_start_`NUMBER` |
cols_end_`NUMBER` |
rows_start_`NUMBER` |
rows_end_`NUMBER` |
grid |
| areas |
outline
| ol_color_`COLOR` |
ol_width_`NUMBER` |
ol_none |
ol_style_auto |
ol_style_none |
| ol_style_dotted |
ol_style_dashed |
ol_style_solid |
ol_style_double |
ol_style_groove |
| ol_style_ridge |
ol_style_inset |
ol_style_outset |
ol_style_inherit |
ol_style_initial |
| ol_style_unset |
shadow
| sd_1 |
sd_2 |
sd_3 |
sd_4 |
sd_6 |
| sd_8 |
sd_9 |
sd_12 |
sd_16 |
sd_24 |
| sdi_1 |
sdi_2 |
sdi_3 |
sdi_4 |
sdi_6 |
| sdi_8 |
sdi_9 |
sdi_12 |
sdi_16 |
sdi_24 |
sizing
| h_`NUMBER` |
h_max_`NUMBER` |
h_min_`NUMBER` |
h_min_`NUMBER` |
w_`NUMBER` |
| w_max_`NUMBER` |
w_min_`NUMBER` |
w_min_`NUMBER` |
h_full |
h_max_full |
| h_min_full |
h_auto |
h_max_auto |
h_min_auto |
h_screen |
| h_max_screen |
h_min_screen |
w_full |
w_max_full |
w_min_full |
| w_auto |
w_max_auto |
w_min_auto |
w_screen |
w_max_screen |
| w_min_screen |
spacing
| m_`NUMBER` |
mt_`NUMBER` |
mb_`NUMBER` |
ml_`NUMBER` |
mr_`NUMBER` |
| mx_`NUMBER` |
my_`NUMBER` |
p_`NUMBER` |
pt_`NUMBER` |
pb_`NUMBER` |
| pl_`NUMBER` |
pr_`NUMBER` |
px_`NUMBER` |
py_`NUMBER` |
m_auto |
| mt_auto |
mb_auto |
ml_auto |
mr_auto |
mx_auto |
| my_auto |
transform
| tf_sl_`NUMBER` |
tf_slx_`NUMBER` |
tf_sly_`NUMBER` |
tf_rt_`NUMBER` |
tf_sk_`NUMBER` |
| tf_skx_`NUMBER` |
tf_sky_`NUMBER` |
tf_tl_`NUMBER` |
tf_tlx_`NUMBER` |
tf_tly_`NUMBER` |
| tf_ori_`VALUE` |
transition
| ts_delay_`TIME` |
ts_duration_`TIME` |
ts |
ts_none |
ts_all |
| ts_colors |
ts_opacity |
ts_shadow |
ts_transform |
ts_ease_linear |
| ts_ease_in |
ts_ease_out |
ts_ease_in_out |