Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
minimalist.min.css
✓ <link rel="stylesheet" href="/path/to/node_modules/minimalist/dist/minimalist.min.css">
✗ <link href="minimalist.css" type="text/css">
For production, link to the minified CSS directly in your HTML `<head>` from a build output or CDN. Ensure `rel='stylesheet'` and `href` are correct.
@import
✓ @import 'minimalist/dist/minimalist.min.css';
✗ @import url('minimalist.css');
When using a CSS preprocessor like Sass/Less or PostCSS, you can `@import` the framework into your main stylesheet. Adjust path based on your project structure and build setup.
CDN
✓ <link rel="stylesheet" href="https://unpkg.com/minimalist@1.0.0/dist/minimalist.min.css">
For quick prototyping or when not using a build tool, you can link to a CDN version. Always specify the version to prevent unexpected breaking changes.
This quickstart demonstrates how to include Minimalist via CDN and apply simple OOCSS-inspired classes for basic page elements, forms, and a card component.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minimalist Quickstart</title>
<!-- Link to the Minimalist CSS framework -->
<link rel="stylesheet" href="https://unpkg.com/minimalist@1.0.0/dist/minimalist.min.css">
<style>
/* Custom styles to demonstrate interaction with minimalist defaults */
body {
padding: 20px;
max-width: 960px;
margin: 0 auto;
font-family: sans-serif;
}
.card {
border: 1px solid #eee;
padding: 15px;
margin-bottom: 20px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.btn--primary {
background-color: #007bff;
color: white;
padding: 8px 15px;
border-radius: 4px;
text-decoration: none;
display: inline-block;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Welcome to Minimalist!</h1>
<p>This is a basic page showcasing how Minimalist provides sensible defaults for typography and layout without heavy opinions.</p>
<section class="card">
<h2>A Card Component</h2>
<p>Minimalist, being an OOCSS framework, encourages defining reusable structural classes. This card demonstrates how a simple class provides a consistent container.</p>
<a href="#" class="btn--primary">Learn More</a>
</section>
<form>
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Your Name">
<label for="message">Message:</label>
<textarea id="message" rows="5" placeholder="Your message..."></textarea>
<button type="submit" class="btn--primary">Submit</button>
</form>
<footer>
<p>© 2026 Minimalist Example</p>
</footer>
</body>
</html>
Debug
Known issues
gotchaMinimalist, like all global CSS frameworks, operates in the global scope. This means its base styles and utility classes can potentially conflict with existing custom CSS or other libraries if class names overlap or element selectors are too broad.fixPrefix your custom classes (e.g., `my-app-button`) or wrap your application in a unique ID/class to scope your styles more narrowly. Inspect browser developer tools to identify specificity conflicts.
affects: >=1.0.0
breakingWhile at version 1.0.0, major version bumps (e.g., v1 to v2) are likely to introduce breaking changes in class names, variables, or base element styling. Always review the release notes carefully before upgrading.fixRefer to the official release notes and migration guides for the specific version you are upgrading to. Implement a visual regression testing pipeline for critical updates.
affects: N/A (future versions)
gotchaAs a 'micro-framework' following OOCSS, Minimalist aims for a small footprint. This means it might intentionally lack certain complex UI components or extensive responsive utilities found in larger frameworks. Expect to build on top of its foundation.fixPlan to supplement Minimalist with custom CSS for complex components or use a separate, modular library for specific needs (e.g., a modal library). Treat Minimalist as a starting point, not a complete UI solution.
affects: >=1.0.0
Errors
Common errors & fixes
Styles from Minimalist are not applying to my elements.
Incorrect CSS file path, missing `<link>` tag, or higher specificity custom styles overriding Minimalist.
fixDouble-check the `href` attribute in your `<link>` tag. Ensure the file path is correct relative to your HTML or build output. Use browser developer tools to inspect the element and verify if Minimalist styles are present but overridden by higher specificity rules. Consider placing your custom CSS after the Minimalist link.
My existing CSS styles are being overridden by Minimalist.
Minimalist's base styles or utility classes are applying to elements targeted by your custom CSS with lower specificity.
fixIf Minimalist's styles are too opinionated for a specific element, increase the specificity of your custom CSS (e.g., add more class selectors, use an ID). Alternatively, use Minimalist's utility classes to achieve the desired look or override its classes directly if necessary, being mindful of OOCSS principles.
Audit
Dependencies
No dependency data recorded yet.