Brixi
A lightweight highly configurable utility-first CSS framework.
Installation
Install the npm package
npm i -S brixi
Add the startup script to your package.json file
"brixi": "brixi"
Run the script
npm run brixi
Or use the CDN version:
<link href="https://unpkg.com/brixi@^0.8/brixi.min.css" rel="stylesheet" />
Note: the CDN version of Brixi is massive (75kB). It includes
dark:prefix support along with a slew of responsive resizing prefixes. Click here to view the config file.
Configuration
Below is the default config file. Any value can be overridden by adding a brixi.config.js file to your project's root directory.
module.exports = {
outDir: "./brixi",
important: true,
output: "production",
baseUnit: "rem",
features: {
aspectRatios: true,
containers: true,
cursors: true,
flexbox: true,
grid: true,
lineHeight: true,
margin: true,
padding: true,
scroll: true,
shadows: true,
positions: true,
backgrounds: true,
alignment: true,
whitespace: true,
textTransforms: true,
display: true,
opacity: true,
fontColors: true,
fontSizes: true,
fontWeights: true,
fontFamilies: true,
borderRadius: true,
borderWidths: true,
borderColors: true,
borderStyles: true,
},
fonts: {
units: "rem",
families: {
"sans-serif": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif",
serif: "Georgia, Cambria, 'Times New Roman', Times, serif",
mono: "Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
},
weights: {
hairline: 100,
thin: 200,
light: 300,
regular: 400,
medium: 500,
semibold: 600,
bold: 700,
heavy: 800,
black: 900,
},
sizes: {
xs: 0.75,
sm: 0.875,
base: 1,
md: 1.125,
lg: 1.25,
xl: 1.5,
"2xl": 2,
"3xl": 3,
"4xl": 4,
},
},
colors: {
white: "#ffffff",
black: "#000000",
"blue-grey": {
50: "#F8FAFC",
100: "#F1F5F9",
200: "#E2E8F0",
300: "#CBD5E1",
400: "#94A3B8",
500: "#64748B",
600: "#475569",
700: "#334155",
800: "#1E293B",
900: "#0F172A",
},
"cool-grey": {
50: "#F9FAFB",
100: "#F3F4F6",
200: "#E5E7EB",
300: "#D1D5DB",
400: "#9CA3AF",
500: "#6B7280",
600: "#4B5563",
700: "#374151",
800: "#1F2937",
900: "#111827",
},
grey: {
50: "#FAFAFA",
100: "#F4F4F5",
200: "#E4E4E7",
300: "#D4D4D8",
400: "#A1A1AA",
500: "#71717A",
600: "#52525B",
700: "#3F3F46",
800: "#27272A",
900: "#18181B",
},
neutral: {
50: "#FAFAFA",
100: "#F5F5F5",
200: "#E5E5E5",
300: "#D4D4D4",
400: "#A3A3A3",
500: "#737373",
600: "#525252",
700: "#404040",
800: "#262626",
900: "#171717",
},
"warm-grey": {
50: "#FAFAF9",
100: "#F5F5F4",
200: "#E7E5E4",
300: "#D6D3D1",
400: "#A8A29E",
500: "#78716C",
600: "#57534E",
700: "#44403C",
800: "#292524",
900: "#1C1917",
},
red: {
50: "#FEF2F2",
100: "#FEE2E2",
200: "#FECACA",
300: "#FCA5A5",
400: "#F87171",
500: "#EF4444",
600: "#DC2626",
700: "#B91C1C",
800: "#991B1B",
900: "#7F1D1D",
},
orange: {
50: "#FFF7ED",
100: "#FFEDD5",
200: "#FED7AA",
300: "#FDBA74",
400: "#FB923C",
500: "#F97316",
600: "#EA580C",
700: "#C2410C",
800: "#9A3412",
900: "#7C2D12",
},
amber: {
50: "#FFFBEB",
100: "#FEF3C7",
200: "#FDE68A",
300: "#FCD34D",
400: "#FBBF24",
500: "#F59E0B",
600: "#D97706",
700: "#B45309",
800: "#92400E",
900: "#78350F",
},
yellow: {
50: "#FEFCE8",
100: "#FEF9C3",
200: "#FEF08A",
300: "#FDE047",
400: "#FACC15",
500: "#EAB308",
600: "#CA8A04",
700: "#A16207",
800: "#854D0E",
900: "#713F12",
},
lime: {
50: "#F7FEE7",
100: "#ECFCCB",
200: "#D9F99D",
300: "#BEF264",
400: "#A3E635",
500: "#84CC16",
600: "#65A30D",
700: "#4D7C0F",
800: "#3F6212",
900: "#365314",
},
green: {
50: "#F0FDF4",
100: "#DCFCE7",
200: "#BBF7D0",
300: "#86EFAC",
400: "#4ADE80",
500: "#22C55E",
600: "#16A34A",
700: "#15803D",
800: "#166534",
900: "#14532D",
},
emerald: {
50: "#ECFDF5",
100: "#D1FAE5",
200: "#A7F3D0",
300: "#6EE7B7",
400: "#34D399",
500: "#10B981",
600: "#059669",
700: "#047857",
800: "#065F46",
900: "#064E3B",
},
teal: {
50: "#F0FDFA",
100: "#CCFBF1",
200: "#99F6E4",
300: "#5EEAD4",
400: "#2DD4BF",
500: "#14B8A6",
600: "#0D9488",
700: "#0F766E",
800: "#115E59",
900: "#134E4A",
},
cyan: {
50: "#ECFEFF",
100: "#CFFAFE",
200: "#A5F3FC",
300: "#67E8F9",
400: "#22D3EE",
500: "#06B6D4",
600: "#0891B2",
700: "#0E7490",
800: "#155E75",
900: "#164E63",
},
sky: {
50: "#F0F9FF",
100: "#E0F2FE",
200: "#BAE6FD",
300: "#7DD3FC",
400: "#38BDF8",
500: "#0EA5E9",
600: "#0284C7",
700: "#0369A1",
800: "#075985",
900: "#0C4A6E",
},
blue: {
50: "#EFF6FF",
100: "#DBEAFE",
200: "#BFDBFE",
300: "#93C5FD",
400: "#60A5FA",
500: "#3B82F6",
600: "#2563EB",
700: "#1D4ED8",
800: "#1E40AF",
900: "#1E3A8A",
},
indigo: {
50: "#EEF2FF",
100: "#E0E7FF",
200: "#C7D2FE",
300: "#A5B4FC",
400: "#818CF8",
500: "#6366F1",
600: "#4F46E5",
700: "#4338CA",
800: "#3730A3",
900: "#312E81",
},
violet: {
50: "#F5F3FF",
100: "#EDE9FE",
200: "#DDD6FE",
300: "#C4B5FD",
400: "#A78BFA",
500: "#8B5CF6",
600: "#7C3AED",
700: "#6D28D9",
800: "#5B21B6",
900: "#4C1D95",
},
purple: {
50: "#FAF5FF",
100: "#F3E8FF",
200: "#E9D5FF",
300: "#D8B4FE",
400: "#C084FC",
500: "#A855F7",
600: "#9333EA",
700: "#7E22CE",
800: "#6B21A8",
900: "#581C87",
},
fuchsia: {
50: "#FDF4FF",
100: "#FAE8FF",
200: "#F5D0FE",
300: "#F0ABFC",
400: "#E879F9",
500: "#D946EF",
600: "#C026D3",
700: "#A21CAF",
800: "#86198F",
900: "#701A75",
},
pink: {
50: "#FDF2F8",
100: "#FCE7F3",
200: "#FBCFE8",
300: "#F9A8D4",
400: "#F472B6",
500: "#EC4899",
600: "#DB2777",
700: "#BE185D",
800: "#9D174D",
900: "#831843",
},
rose: {
50: "#FFF1F2",
100: "#FFE4E6",
200: "#FECDD3",
300: "#FDA4AF",
400: "#FB7185",
500: "#F43F5E",
600: "#E11D48",
700: "#BE123C",
800: "#9F1239",
900: "#881337",
},
primary: {
50: "var(--blue-50)",
100: "var(--blue-100)",
200: "var(--blue-200)",
300: "var(--blue-300)",
400: "var(--blue-400)",
500: "var(--blue-500)",
600: "var(--blue-600)",
700: "var(--blue-700)",
800: "var(--blue-800)",
900: "var(--blue-900)",
},
success: {
50: "var(--green-50)",
100: "var(--green-100)",
200: "var(--green-200)",
300: "var(--green-300)",
400: "var(--green-400)",
500: "var(--green-500)",
600: "var(--green-600)",
700: "var(--green-700)",
800: "var(--green-800)",
900: "var(--green-900)",
},
danger: {
50: "var(--red-50)",
100: "var(--red-100)",
200: "var(--red-200)",
300: "var(--red-300)",
400: "var(--red-400)",
500: "var(--red-500)",
600: "var(--red-600)",
700: "var(--red-700)",
800: "var(--red-800)",
900: "var(--red-900)",
},
warning: {
50: "var(--amber-50)",
100: "var(--amber-100)",
200: "var(--amber-200)",
300: "var(--amber-300)",
400: "var(--amber-400)",
500: "var(--amber-500)",
600: "var(--amber-600)",
700: "var(--amber-700)",
800: "var(--amber-800)",
900: "var(--amber-900)",
},
},
margins: [0, 0.125, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3, 4, 5, 6],
padding: [0, 0.125, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3, 4, 5, 6],
positions: [0],
borders: {
units: "px",
styles: ["solid", "dashed", "dotted"],
widths: [0, 1, 2],
radius: [0.125, 0.25, 0.5],
},
shadows: {
colors: {
black: "0deg 0% 0%",
},
sizes: {
sm: `
0px 1px 3px hsl(var(--shadow-color) / 0.15)
`,
md: `
0px 2px 2px hsl(var(--shadow-color) / 0.05),
0px 4px 4px hsl(var(--shadow-color) / 0.05),
0px 8px 8px hsl(var(--shadow-color) / 0.1)
`,
lg: `
0px 2px 2px hsl(var(--shadow-color) / 0.05),
0px 4px 4px hsl(var(--shadow-color) / 0.05),
0px 8px 8px hsl(var(--shadow-color) / 0.05),
0px 16px 16px hsl(var(--shadow-color) / 0.05),
0px 32px 32px hsl(var(--shadow-color) / 0.05)
`,
xl: `
0px 2px 2px hsl(var(--shadow-color) / 0.05),
0px 4px 4px hsl(var(--shadow-color) / 0.05),
0px 8px 8px hsl(var(--shadow-color) / 0.05),
0px 16px 16px hsl(var(--shadow-color) / 0.05),
0px 32px 32px hsl(var(--shadow-color) / 0.05),
0px 48px 48px hsl(var(--shadow-color) / 0.05),
0px 64px 64px hsl(var(--shadow-color) / 0.05)
`,
},
},
containers: {
units: "px",
screens: {
320: 320,
411: 411,
768: 768,
1024: 1024,
1280: 1280,
1920: 1920,
},
columns: [2, 3, 4],
},
gaps: [1, 1.5, 2],
easings: {
"in-out": "0.4, 0.0, 0.2, 1",
in: "0.0, 0.0, 0.2, 1",
out: "0.4, 0.0, 1, 1",
bounce: "0.175, 0.885, 0.32, 1.275",
},
aspectRatios: ["16:9", "4:3", "1:1"],
variables: {},
themes: {},
classes: {},
opacity: [0.05, 0.1, 0.3, 0.6, 0.87],
prefixes: {},
};
License
MIT Licensed. Default colors from Tailwind CSS. Shadows based on this blog post by Joshua Comeau.