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
76 lines (75 loc) • 1.68 kB
JavaScript
export const defaultConfig = {
sizes: {
margin: {
small: "1rem",
medium: "2rem",
large: "5vh",
extraLarge: "20px",
},
padding: {
small: "0.5rem",
medium: "1rem",
large: "4vh",
extraLarge: "15px",
},
width: {
small: "50%",
medium: "300px",
large: "100%",
extraLarge: "50vw",
},
height: {
small: "100px",
medium: "200px",
large: "400px",
extraLarge: "75vh",
},
position: {
small: "0.5rem",
medium: "1rem",
large: "2rem",
extraLarge: "5rem",
},
border: {
small: "1px",
medium: "2px",
large: "4px",
extraLarge: "8px",
},
borderRadius: {
small: "4px",
medium: "8px",
large: "16px",
extraLarge: "32px",
},
},
borderStyles: ["solid", "dashed", "dotted"],
colors: [
{ red: "#FF0000" },
{ "gradient-red": "linear-gradient(to right, #FF0000, #FF7F7F)" },
{ "transparent-green": "rgba(0, 255, 0, 0.5)" },
{ green: "#00FF00" },
{ blue: "#0000FF" },
],
breakpoints: {
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
},
ColorGeneration: true,
BackgroundGeneration: true,
PaddingGeneration: true,
MarginGeneration: true,
FlexboxGeneration: true,
heightWidthGeneration: true,
positionStyleGeneration: true,
borderGeneration: true,
breakpointsGeneration: true,
colorPrefixName: "text",
widthPrefixName: "w",
heightPrefixName: "h",
backgroundColorPrefix: "bg",
styleDirname: "dist",
styleFilename: "style.css",
};