repository·main·Indexed 20 days ago
https://github.com/louismerlin/concrete.cssA lightweight, classless CSS framework that provides semantic styling for HTML elements without custom classes. Version 3.1.0 includes automatic dark mode support based on system preferences and allows customization via CSS variables for colors, typography, and layout.
concrete.css is a lightweight, classless CSS stylesheet designed for simplicity. It provides a baseline style for HTML elements without requiring specific class names. Key features include:
For JavaScript-based projects using a module bundler, install concrete.css as a dependency via npm and import it into your entry point.
npm install concrete.cssimport 'concrete.css'To use concrete.css in a plain HTML project without a build step, include the stylesheet link directly in your HTML <head> using the Cloudflare CDN.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/concrete.css/3.1.0/concrete.min.css">concrete.css uses a semantic layout based on direct children of the body. The following elements are automatically centered horizontally and constrained by the --main-width variable (plus 20px of padding for mobile responsiveness):
body > header (includes large vertical padding: 8rem top/bottom)body > mainbody > footer (text is centered)Sections within the main element are spaced using padding: 2rem 0 when they follow another section (main section + section).
You can customize the appearance of your site by overriding the global CSS variables defined in the :root selector. These variables control the color scheme, typography, layout width, and corner rounding.
Available variables:
--fg: Foreground color (text, borders, etc.).--bg: Background color.--font: Primary font family.--font-h: Heading font family.--main-width: The maximum width of the header, main, and footer elements.--radius: The border-radius applied to buttons, fieldsets, inputs, and progress bars.:root {
--fg: #333;
--bg: #fafafa;
--font: 'Inter', sans-serif;
--font-h: 'Inter', sans-serif;
--main-width: 800px;
--radius: 4px;
}concrete.css is a classless stylesheet that applies styles directly to standard HTML elements. Below is a list of the elements and their primary styling behaviors:
- a: Uses foreground color.
- blockquote: Left border, no margin, hidden y-overflow.
- button, input[type="button"], input[type="reset"], input[type="submit"]: Inline-block, themed borders/background, pointer cursor. Disabled state uses dashed borders and 'not-allowed' cursor.
- figcaption: Right-aligned, smaller font size, bottom border.
- figure: Full width of section.
- fieldset: Border and border-radius applied.
- footer: Centered text.
- h1-h6: Uses --font-h; specific font sizes applied.
- hr: Solid border.
- img: Max-width 100%, height auto.
- input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], textarea, select: Full width, appearance: none, themed borders/background/font.
- label, legend: Block display, bold, bottom margin.
- nav: Margin 2rem 0; inner ul is horizontal (inline-block) with no bullets/padding.
- pre: Left border, dotted border on other sides, overflow-y hidden.
- pre > code: Block display, smaller font size.
- progress: Block display, themed borders/background.
- table: 100% width, border-spacing 0; th has bottom border and left-align; td has thin bottom border.
- ul: Square list bullets.The following CSS variables are used to drive the styling of the framework. Overriding these in your own stylesheet will update the corresponding elements globally.
:root {
--fg: #111;
--bg: #fff;
--font: Helvetica, Arial, sans-serif;
--font-h: Helvetica, Arial, sans-serif;
--main-width: 640px;
--radius: 0px;
}