MVP.css – Minimalist Stylesheet for HTML Elements

MVP.css – Minimalist Stylesheet for HTML Elements andybrewer.github.io3 months ago in #Dev Love53

Simple, reusable components For a clean looking design that doesn’t get in the way “By far the easiest stylesheet I’ve ever used. It integrates easily into one all of my startup projects.” Flexibility without complexity A few, clean styling options without all the bells and whistles MVP.css No CSS Custom CSS Mobile friendly ✓ ✓ ✓ Works out of the box ✓ ✓ ∅ Easy to customize ✓ ✓ ∅ Only semantic HTML ✓ ✓ ∅ No class names ✓ ✓ ∅ Perfect for an MVP ✓ ∅ ∅ A decent MVP in no time More building and less designing with “set and forget” styling. “Uber for X” brainstorming session Docs HTML Reference MVP.css works with the following HTML elements: — text links , — solid link buttons , — outlined link buttons — content area with normal styling — text callout — quote callout — quote attribution — default parent element — form buttons — inline code highlighting — default expandable content section — expandable heading — unstyled element — image callouts — image callout captions — footer area — small form area — short input field — form field labels — dropdown options container — dropdown option items — large input field — content area with centered styling , , , , , — headings — horizontal rule (divider) — main content area — text highlighting — top navigation — nav links container — nav link items — nav dropdown container — nav dropdown link items — numbered list container — numbered list items — paragraph tag — preformatted text — code block — computer output block — inline computer output — content area for centered / special content — content card — smaller text — raised text (notification bubbles) — data table — data table cell — data table header cell — data table header section — data table row — unordered list container — unordered list item Modifying the CSS variables MVP.css includes a list of CSS variables. Editing these variables will change the styles globally. :root {   –border-radius: 5px;   –box-shadow: 2px 2px 10px;   –color: #118bee;   –color-accent: #118bee0b;   –color-bg: #fff;   –color-bg-secondary: #e9e9e9;   –color-secondary: #920de9;   –color-secondary-accent: #920de90b;   –color-shadow: #f4f4f4;  » Read More

Like to keep reading?

This article first appeared on If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply