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/modulesyarn add @booleon/modulesExamples
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
- background
- border
- container
- cursor
- filter
- flex
- font
- gradient
- grid
- outline
- shadow
- sizing
- spacing
- transform
- transition
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 |