diff --git a/index.html b/index.html index 8d09183..a37b66f 100644 --- a/index.html +++ b/index.html @@ -1,258 +1,259 @@ + + + - - - - - - - + + + MVP.css - Minimalist stylesheet for HTML elements + - - - +
- -

A minimalist stylesheet for HTML elements

-

No class names, no frameworks, just semantic HTML and you're done.

-
-

Download HTML ↗Download MVP.css (9kb) ↗

-

-

PRO TIP Add this code to a new HTML - file:

<link rel="stylesheet" href="https://unpkg.com/mvp.css">

+ +

A minimalist stylesheet for HTML elements

+

No class names, no frameworks, just semantic HTML and you're done.

+
+

+ Download HTML ↗Download MVP.css (10kb) ↗ +

+

+

+ PRO TIP Add this code to a new HTML file:

<link rel="stylesheet" href="https://unpkg.com/mvp.css"> +

-
-
-
-

Simple, reusable components

-

For a clean looking design that doesn't get in the way

-
- - - -
-
-
-
- Quote
- "By far the easiest stylesheet I've ever used. It integrates easily into one all of my - startup projects." -
MVP.css

- Andy Brewer, Author of - MVP.css
-
-
-
-
-
-

Flexibility without complexity

-

A few, clean styling options without all the bells and whistles

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MVP.cssNo CSSCustom 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.

-
-
- Stock photo -
"Uber for X" brainstorming session
-
-
-
-
-

Docs

-

HTML Reference

-
-

MVP.css works with the following HTML elements:

+
+
+
+

Simple, reusable components

+

For a clean looking design that doesn't get in the way

+
+ + + +
+
+
+
+ Quote
+ "By far the easiest stylesheet I've ever used. It integrates easily into one all of my startup projects." +
MVP.css

- Andy Brewer, Author of MVP.css
+
+
+
+
+
+

Flexibility without complexity

+

A few, clean styling options without all the bells and whistles

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MVP.cssNo CSSCustom 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.

+
+
+ Stock photo +
"Uber for X" brainstorming session
+
+
+
+
+

Docs

+

HTML Reference

+ +
+

MVP.css works with the following HTML elements:

+
    +
  • + <a> — text links +
      +
    • <a><b>, <a><strong> — solid link buttons
      • +
    • <a><em>, <a><i> — outlined link buttons
      • +
    +
    • +
  • + <article> — content area with normal styling +
      +
    • <article><aside> — text callout
      • +
    +
    • +
  • + <blockquote> — quote callout
      -
    • <a> — text links -
        -
      • <a><b>, <a><strong> — solid - link buttons -
        • -
      • <a><em>, <a><i> — outlined - link buttons -
        • -
      -
      • -
    • <article> — content area with normal styling -
        -
      • <article><aside> — text callout -
        • -
      -
      • -
    • <blockquote> — quote callout -
        -
      • <blockquote><footer> — quote attribution -
        • -
      -
      • -
    • <body> — default parent element
      • -
    • <button> — form buttons
      • -
    • <code> — inline code highlighting
      • -
    • <details> — default expandable content section -
        -
      • <details><summary> — expandable heading
        • -
      -
      • -
    • <dialog> — popup windows
      • -
    • <div> — unstyled element
      • -
    • <figure> — image callouts -
        -
      • <figure><figcaption> — image callout captions -
        • -
      -
      • -
    • <footer> — footer area
      • -
    • <form> — small form area -
        -
      • <form><input> — short input field
        • -
      • <form><label> — form field labels
        • -
      • <form><select> — dropdown options container -
          -
        • <form><select><option> — dropdown option - items
          • -
        -
        • -
      • <form><textarea> — large input field
        • -
      -
      • -
    • <header> — content area with centered styling
      • -
    • <h1>, <h2>, <h3>, <h4>, - <h5>, <h6> — headings
      • -
    • <hr> — horizontal rule (divider)
      • -
    • <main> — main content area
      • -
    • <mark> — text highlighting
      • -
    • <nav> — top navigation -
        -
      • <nav><ul> — nav links container
        • -
      • <nav><ul><li> — nav link items
        • -
      • <nav><ul><li><ul> — nav dropdown - container
        • -
      • <nav><ul><li><ul><li> — nav dropdown - link items
        • -
      -
      • -
    • <ol> — numbered list container -
        -
      • <ol><li> — numbered list items
        • -
      -
      • -
    • <p> — paragraph tag
      • -
    • <pre> — preformatted text -
        -
      • <pre><code> — code block
        • -
      • <pre><samp> — computer output block
        • -
      -
      • -
    • <samp> — inline computer output
      • -
    • <section> — content area for centered / special content -
        -
      • <section><aside> — content card
        • -
      -
      • -
    • <small> — smaller text
      • -
    • <sup> — raised text (notification bubbles)
      • -
    • <table> — data table -
        -
      • <table><td> — data table cell
        • -
      • <table><th> — data table header cell
        • -
      • <table><thead> — data table header section -
        • -
      • <table><tr> — data table row
        • -
      -
      • -
    • <ul> — unordered list container -
        -
      • <ul><li> — unordered list item
        • -
      -
      • +
    • <blockquote><footer> — quote attribution
      • +
    +
    • +
  • <body> — default parent element
    • +
  • <button> — form buttons
    • +
  • <code> — inline code highlighting
    • +
  • + <details> — default expandable content section +
      +
    • <details><summary> — expandable heading
      • +
    +
    • +
  • <dialog> — popup windows
    • +
  • <div> — unstyled element
    • +
  • + <figure> — image callouts +
      +
    • <figure><figcaption> — image callout captions
      • +
    +
    • +
  • <footer> — footer area
    • +
  • + <form> — small form area +
      +
    • <form><input> — short input field
      • +
    • <form><label> — form field labels
      • +
    • + <form><select> — dropdown options container +
        +
      • <form><select><option> — dropdown option items
        • +
      +
      • +
    • <form><textarea> — large input field
    -
    -

    Modifying the CSS variables

    -

    MVP.css includes a list of CSS variables. Editing these variables will change the styles globally.

    - 
    +
    • +
  • <header> — content area with centered styling
    • +
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> — headings
    • +
  • <hr> — horizontal rule (divider)
    • +
  • <main> — main content area
    • +
  • <mark> — text highlighting
    • +
  • + <nav> — top navigation +
      +
    • <nav><ul> — nav links container
      • +
    • <nav><ul><li> — nav link items
      • +
    • <nav><ul><li><ul> — nav dropdown container
      • +
    • <nav><ul><li><ul><li> — nav dropdown link items
      • +
    +
    • +
  • + <ol> — numbered list container +
      +
    • <ol><li> — numbered list items
      • +
    +
    • +
  • <p> — paragraph tag
    • +
  • + <pre> — preformatted text +
      +
    • <pre><code> — code block
      • +
    • <pre><samp> — computer output block
      • +
    +
    • +
  • <samp> — inline computer output
    • +
  • + <section> — content area for centered / special content +
      +
    • <section><aside> — content card
      • +
    +
    • +
  • <small> — smaller text
    • +
  • <sup> — raised text (notification bubbles)
    • +
  • + <table> — data table +
      +
    • <table><td> — data table cell
      • +
    • <table><th> — data table header cell
      • +
    • <table><thead> — data table header section
      • +
    • <table><tr> — data table row
      • +
    +
    • +
  • + <ul> — unordered list container +
      +
    • <ul><li> — unordered list item
      • +
    +
    • +
+
+

Modifying the CSS variables

+

MVP.css includes a list of CSS variables. Editing these variables will change the styles globally.

+ 
                 
 :root {
     --active-brightness: 0.85;
@@ -281,60 +282,54 @@ 
Modifying the CSS variables
-

Custom styles can be added inside a <style> tag, or at the end of your local mvp.css file

-
-
-
-

Frequently Asked Questions

-
- Why would I use this? -

If you just want to launch already.

-

PRO TIP An MVP is a temporary site, it doesn't have to be and shouldn't be perfect. -

-
-
- What skills will I need? -

Mostly HTML, maybe a hint of CSS if you want to get fancy.

-

CSS        5

-

Design   0

-

HTML     100

-
-
- Is there a minified version? -

No, you don't need one for an MVP.

-
-
- How can I improve my design? -

Here are some helpful resources:

- -
-
- How do I handle a user's dark mode preference? -

By default <html> will force users into light mode. By using <html color-mode="user"> MVP.css will respect the user's dark mode preferences. The original concept and additional tips can be found in this article: https://ryanfeigenbaum.com/dark-mode/

-
-
- What if I don't like the default styles? -

Most styles are editable through CSS variables. You can also add your own styles - inline, at the end of MVP.css or in a new stylesheet.

-

PRO TIP If there are two conflicting CSS styles, the last one will take precedence.

- 
+        
Custom styles can be added inside a <style> tag, or at the end of your local mvp.css file

+
+
+
+

Frequently Asked Questions

+
+ Why would I use this? +

If you just want to launch already.

+

PRO TIP An MVP is a temporary site, it doesn't have to be and shouldn't be perfect.

+
+
+ What skills will I need? +

Mostly HTML, maybe a hint of CSS if you want to get fancy.

+

CSS        5

+

Design   0

+

HTML     100

+
+
+ Is there a minified version? +

No, you don't need one for an MVP.

+
+
+ How can I improve my design? +

Here are some helpful resources:

+ +
+
+ How do I handle a user's dark mode preference? +

+ By default <html> will force users into light mode. By using <html color-mode="user"> MVP.css will respect the user's dark mode preferences. The + original concept and additional tips can be found in this article: https://ryanfeigenbaum.com/dark-mode/ +

+
+
+ What if I don't like the default styles? +

Most styles are editable through CSS variables. You can also add your own styles inline, at the end of MVP.css or in a new stylesheet.

+

PRO TIP If there are two conflicting CSS styles, the last one will take precedence.

+ 
                     
 :root {
     --color-bg: #fff;
@@ -347,113 +342,108 @@ 
Frequently Asked Questions

 }
-
-
- What if I still don't like it? -

That's OK, you probably shouldn't love your MVP. The goal of MVP.css is to help you - feel slightly less embarrased about it.

-

👉 If you - want a CSS framework with more features check out Bulma - ↗ or Tailwind ↗.

-
-
-
-
-
- Idea -

What can you build with MVP.css?

-

Free ideas below ↓

-
-
-
- MVP.css -
- - - - - - - - - - - - - - - -
- -
- -
- - -
+ +
+ What if I still don't like it? +

That's OK, you probably shouldn't love your MVP. The goal of MVP.css is to help you feel slightly less embarrased about it.

+

+ 👉 If you want a CSS framework with more features check out + Bulma ↗ or Tailwind ↗. +

+
+
+
+
+
+ Idea +

What can you build with MVP.css?

+

Free ideas below ↓

+
+
+
+ MVP.css +
+ + + + + + + + + + + + + + + +
+ +
+ +
+ + +
- -
- + +
+ - -

Hello, I am a header of the modal

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ullam at assumenda cum placeat aperiam - ab error, doloribus eligendi sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos - ullam. -

- -
+ +

Hello, I am a header of the modal

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ullam at assumenda cum placeat aperiam ab error, doloribus eligendi sit. Lorem ipsum dolor sit amet consectetur adipisicing + elit. Quos ullam. +

+ +
- - +