cssclasscrafter
Version:
CSSClassCrafter is an npm library that enables developers to dynamically generate CSS classes based on user-defined configuration files. With a simple JSON format for specifying styles, it streamlines the styling process, allowing for easy customization a
74 lines (63 loc) • 4.11 kB
JavaScript
// flexboxClasses.mjs
export function flexboxClasses() {
return [
{ class: 'd-flex', property: 'display', value: 'flex' },
{ class: 'd-inline-flex', property: 'display', value: 'inline-flex' },
{ class: 'd-none', property: 'display', value: 'none' },
{ class: 'd-inline', property: 'display', value: 'inline' },
{ class: 'd-inline-block', property: 'display', value: 'inline-block' },
{ class: 'd-block', property: 'display', value: 'block' },
// Flex direction
{ class: 'flex-row', property: 'flex-direction', value: 'row' },
{ class: 'flex-row-reverse', property: 'flex-direction', value: 'row-reverse' },
{ class: 'flex-column', property: 'flex-direction', value: 'column' },
{ class: 'flex-column-reverse', property: 'flex-direction', value: 'column-reverse' },
// Justify content
{ class: 'justify-start', property: 'justify-content', value: 'flex-start' },
{ class: 'justify-center', property: 'justify-content', value: 'center' },
{ class: 'justify-end', property: 'justify-content', value: 'flex-end' },
{ class: 'justify-between', property: 'justify-content', value: 'space-between' },
{ class: 'justify-around', property: 'justify-content', value: 'space-around' },
{ class: 'justify-evenly', property: 'justify-content', value: 'space-evenly' },
// Align items
{ class: 'align-start', property: 'align-items', value: 'flex-start' },
{ class: 'align-center', property: 'align-items', value: 'center' },
{ class: 'align-end', property: 'align-items', value: 'flex-end' },
{ class: 'align-baseline', property: 'align-items', value: 'baseline' },
{ class: 'align-stretch', property: 'align-items', value: 'stretch' },
// Align self
{ class: 'align-self-start', property: 'align-self', value: 'flex-start' },
{ class: 'align-self-end', property: 'align-self', value: 'flex-end' },
{ class: 'align-self-center', property: 'align-self', value: 'center' },
{ class: 'align-self-baseline', property: 'align-self', value: 'baseline' },
{ class: 'align-self-stretch', property: 'align-self', value: 'stretch' },
// Align content
{ class: 'content-start', property: 'align-content', value: 'flex-start' },
{ class: 'content-center', property: 'align-content', value: 'center' },
{ class: 'content-end', property: 'align-content', value: 'flex-end' },
{ class: 'content-between', property: 'align-content', value: 'space-between' },
{ class: 'content-around', property: 'align-content', value: 'space-around' },
{ class: 'content-stretch', property: 'align-content', value: 'stretch' },
// Flex wrap
{ class: 'flex-wrap', property: 'flex-wrap', value: 'wrap' },
{ class: 'flex-nowrap', property: 'flex-wrap', value: 'nowrap' },
{ class: 'flex-wrap-reverse', property: 'flex-wrap', value: 'wrap-reverse' },
// Flex grow and shrink
{ class: 'flex-grow', property: 'flex-grow', value: '1' },
{ class: 'flex-grow-0', property: 'flex-grow', value: '0' },
{ class: 'flex-shrink', property: 'flex-shrink', value: '1' },
{ class: 'flex-shrink-0', property: 'flex-shrink', value: '0' },
// Order
{ class: 'order-first', property: 'order', value: '-1' },
{ class: 'order-last', property: 'order', value: '9999' },
{ class: 'order-none', property: 'order', value: '0' },
{ class: 'order-1', property: 'order', value: '1' },
{ class: 'order-2', property: 'order', value: '2' },
{ class: 'order-3', property: 'order', value: '3' },
// Gap
{ class: 'gap-1', property: 'gap', value: '0.25rem' },
{ class: 'gap-2', property: 'gap', value: '0.5rem' },
{ class: 'gap-4', property: 'gap', value: '1rem' },
{ class: 'gap-8', property: 'gap', value: '2rem' }
];
}