
Show HN: MVP.css – Minimalist stylesheet for HTML elements - awb
https://github.com/andybrewer/mvp
======
myfonj
Isn't this the exact usage CSS was intended for?

Also for reference, behold W3C Core Styles (since 1997):
[https://www.w3.org/StyleSheets/Core/](https://www.w3.org/StyleSheets/Core/)

    
    
        https://www.w3.org/StyleSheets/Core/Oldstyle.css
        https://www.w3.org/StyleSheets/Core/Modernist.css
        https://www.w3.org/StyleSheets/Core/Midnight.css
        https://www.w3.org/StyleSheets/Core/Ultramarine.css
        https://www.w3.org/StyleSheets/Core/Swiss.css
        https://www.w3.org/StyleSheets/Core/Chocolate.css
        https://www.w3.org/StyleSheets/Core/Traditional.css
        https://www.w3.org/StyleSheets/Core/Steely.css

~~~
tenaciousDaniel
It never fails to amaze me that I've been doing this for a decade, and I keep
learning things that seem basic at first glance. I have literally never heard
of this at all.

~~~
rhizome
Right? All of the starting from scratch I've done! All of the projects I've
put off because style is one of the first things I've have to decide on (e.g.
blogs).

------
d3sandoval
This is a great idea but the sentence on the demo / example page really irks
me, "cross design off your list and get back to working on the hard stuff"

I think I know what you mean but I can't help but feel like that sentence is
denigrating the work of an entire discipline that _also_ works on "hard stuff"
like figuring out how to address user need with usable interfaces.

~~~
danso
I don’t even know what the author means. Design _is_ hard stuff.

~~~
throwaway55554
Exactly. Every time I have to do UI work for personal projects (I almost never
do it for pro projects), they look like a-ess-ess. Design is very hard. I try
to copy the looks of things I like and I get the rough feel of it, but the
details, man. The detail and the subtle things. That's where the pros who know
how to do UI earn their worth.

~~~
mosselman
We are talking about MVPs here though...

------
jake-low
The markup for the callout buttons/links on the example page [0] is just <a
href="#"><em>Button text</em></a> (for outlined) and <a
href="#"><strong>Button text</strong></a> (for filled). That's a pretty
creative solution that I definitely haven't seen before.

Giving opinionated styles to unclassed HTML elements is definitely not the
right fit for every website. But, given this project's goal of being a
minimalist, quick-start stylesheet that requires no classes, I think this use
of `a em` and `a strong` selectors to create button-y links is pretty
ingenious.

[0]: [https://andybrewer.github.io/mvp/](https://andybrewer.github.io/mvp/)

~~~
oxalorg
That is indeed truly creative. Props to the author.

I wanted to solve a similar problem when creating sakura.css [0], but I
decided to not implement it and keep it even simpler.

[0]: [https://github.com/oxalorg/sakura](https://github.com/oxalorg/sakura)

~~~
awb
I wasn't aware of Sakura until now, but several people here and Reddit
mentioned it. I love it's simplicity as well. Great job!

~~~
oxalorg
Thanks! I'm loving MVP.css as well and might just end up using it for my next
site. ^_^

------
dohliam
Great work! I've added this to the list at dropin-minimal-css [0], so you can
compare this with other minimal classless frameworks here [1].

(Hint: if you use the bookmarklet, you can quickly preview how MVP.css looks
when applied to any HTML page.)

[0]: [https://github.com/dohliam/dropin-minimal-
css](https://github.com/dohliam/dropin-minimal-css) [1]:
[https://dohliam.github.io/dropin-minimal-
css/?mvp](https://dohliam.github.io/dropin-minimal-css/?mvp)

~~~
gyrgtyn
[https://github.com/css-pkg/style.css](https://github.com/css-pkg/style.css)

~~~
dohliam
Thanks for the suggestion! This has actually been included in the list for a
while [0].

[0]: [https://github.com/dohliam/dropin-minimal-css/blob/gh-
pages/...](https://github.com/dohliam/dropin-minimal-css/blob/gh-
pages/vendor/style.min.css)

~~~
gyrgtyn
sorry! i did cmd-f search the readme. guess i messed up somehow.

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

> \- Andy Brewer, Author of MVP.css

Haha, that sold me.

~~~
40four
Just thinking the same thing. Got A good laugh out of that!

However, it seriously looks like this could be pretty useful. I’m lazy, and
the idea of just writing some semantic markup and have it look great out of
the box is very appealing. Especially for a random toy project, where I want
to put as little effort into the front end design as possible.

------
fevangelou
@awb Your approach is smart and the HTML is a breeze to read. What a fresh
change from the class-itis of frameworks like Tailwind!

Although the targeting is MVPs as you also mention on the site, it could
_possibly_ evolve to a very powerful HTML/CSS framework, far more than setting
up a MVP :)

What I'd like to throw in as an idea is that in a future v2 of mvp.css you
could consider using custom HTML tags to allow for inserting new tags in the
mix for better positioning/layout, typography and more.

Again, this is just an idea. If anyone's to learn 200 CSS classes to use
something like Tailwind (et al), they might as well learn custom (prefixed)
HTML tags that potentially make more sense.

And as for search engines, technically speaking it doesn't matter to them if
you use custom HTML. SEO-wise, if one wants to be Google-friendly, it's either
way preferable to use structured data over semantic HTML.

~~~
awb
Thanks for the feedback!

> you could consider using custom HTML tags to allow for inserting new tags in
> the mix for better positioning/layout, typography and more.

That might work for another stylesheet project, but I'm trying to keep MVP.css
as "add and forget" as possible without having to learn anything unique.

------
jrandm
I suggest giving a link to the _rendered_ version of the quickstart sheet or
some other "at a glance" list of the rendered elements.

While I appreciate the dogfooding and clever presentation style, it's adding
some unnecessary steps when I want to see how you chose to style specific
elements.

Regardless of how you feel about Bootstrap, I think their documentation[0]
does this well. water.css[1] linked in another reply here does it even better
(admittedly it's less complex).

[0]:
[https://getbootstrap.com/docs/4.4/components/alerts/](https://getbootstrap.com/docs/4.4/components/alerts/)

[1]:
[https://kognise.github.io/water.css/](https://kognise.github.io/water.css/)

------
holler
Wow, over a decade doing frontend and TIL: <samp>, used to enclose inline text
which represents sample (or quoted) output from a computer program. Its
contents are typically rendered using the browser's default monospaced font.

[https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/sa...](https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/samp)

~~~
jrandm
I'm guessing because they were inconsistently supported by browsers, because
me too!

I was even more surprised to see it in the HTML 4.01 spec, but if you look it
makes more sense. I'll quote every mention of it here but the table of
contents line:

    
    
        9.2.1 Phrase elements: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, and ACRONYM
        
        <!ENTITY % phrase "EM | STRONG | DFN | CODE |
                           SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >
        
        SAMP:
            Designates sample output from programs, scripts, etc.
    

CODE is equally well defined -- neither even mention monospace!

> The other phrase elements have particular significance in technical
> documents

HTML never ceases to amaze me. This also explains why I still prefer <pre>
even though I can never remember why it's <pre> and not <code>.

Almost forgot the link:
[https://www.w3.org/TR/html401/struct/text.html#h-9.2.1](https://www.w3.org/TR/html401/struct/text.html#h-9.2.1)

~~~
tannhaeuser
<pre> is for preformatted text such that whitespace characters in it including
tabs are preserved, whereas it's collapsed/whitespace-normalized at other
places. <code> is for semantically denoting a span or block as "programming
language code", which might or might not have whitespace characters preserved.
You typically use <code><pre>...</pre></code> for a code block, and just
<code>...</code> for an inline code span.

Edit: props for citing the actual HTML 4.01 SGML DTD!

~~~
jrandm
Thank you for laying that out clearly!

I pointed out the irony of not giving an example|intended use in a technical
document because if a line or two like that was in the HTML 4.01 specification
I probably would have written more-correct HTML since sometime in the early-
mid ~2000s. I guess I'm glad my reading comprehension has improved but it also
shows pretty clearly why it's the _old_ spec.

------
glacials
For anyone else who's hunting all over for a rendered example, just open
devtools -- the site dogfoods itself.

------
thunderbong
This is is really nice.

I usually go for water.css [0] which had been posted in Show HN here earlier
[1].

But the use of <section> and <asides> really helps in placing elements one
beside another.

Will try this for sure.

[0]:
[https://kognise.github.io/water.css/](https://kognise.github.io/water.css/)

[1]:
[https://news.ycombinator.com/item?id=19593866](https://news.ycombinator.com/item?id=19593866)

------
meesterdude
If you're interested in more of this, there's also cssbed.com which has a
bunch of different classless CSS themes you can browse

~~~
ser0
I've used Milligram.io in the past too. Basically the same idea.

~~~
meesterdude
Milligram does not look like a classless framework - maybe class-lite?

------
rickdeveloper
This is really cool. I'm amazed the demo page is 100% written in HTML without
additional CSS (apart from MVP.css, of course).

Two things I think could be improved:

1\. You should consider using a CDN instead of GitHub pages to host the
stylesheet on the demo template. Here is an example [0].

2\. In the future it might be cool to explore the `prefers-color-scheme` media
query so pages are responsive to color schemes too [1].

[0]
[https://cdn.jsdelivr.net/gh/andybrewer/mvp/mvp.css](https://cdn.jsdelivr.net/gh/andybrewer/mvp/mvp.css)

[1] [https://developer.mozilla.org/en-
US/docs/Web/CSS/@media/pref...](https://developer.mozilla.org/en-
US/docs/Web/CSS/@media/prefers-color-scheme)

------
jypepin
I think this is great.

Remember the days when you simply had to add bootstrap to your website to make
it look great?

Now I feel like anytime I start a new project and want to add some simple,
light styling, it is just impossible to find anything. bootstrap is pretty
convoluted and I can't figure out which bootstrap lib to use with react, and
everything else seems to be built for the next facebook.

I just want something simple with some form elements and layouts pre designed
and easy to modify.

------
bArray
KISS - Keep It Simple Stupid

Half the reason why most websites look awful is because somebody tried to be
too clever and missed an edge case. Basic HTML renders fine in most cases.

~~~
williamdclt
Basic HTML guarantees that your page will load in <1s for your users, and that
they'll leave it just as fast.

(this is a jest of course, you can have a fast and pleasing website, but pure
HTML only gives one)

~~~
awb
The project site itself gets a 100/100 for mobile & desktop on Google Page
Speed Insights.

[https://developers.google.com/speed/pagespeed/insights/?url=...](https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fandybrewer.github.io%2Fmvp%2F&tab=mobile)

------
quickthrower2
This is classy! I've been looking for someone to create a SMALL css
"framework" for this kind of thing, and here it is. Thanks!

------
deft
So cool. I hate how I have to add so much markup to my basic html just to get
bulma looking good, I don't know what I'm doing as a designer but I have an
idea of the layout I want. This is going to save me a lot of time scrolling
through bulma docs looking for whatever weird combination of divs and classes
I need to make a 'card' or a good looking button.

~~~
rozhok
Haha, I'm doing the same thing! Just looking for example similar to mine and
then copypaste a ton of div's with arcane classes.

------
pachico
I find this project wonderful. Front-end has become sophisticated and the
learning curve to someone like me, who does only backend projects, is too
steep to have a decent knowledge. Nevertheless, many times I need a front-end
facade for my ideas and this seems to do the trick.

------
blueset
Very glad to see another classless CSS stylesheet appeared! It’d be great if
there is a rendered sample of each element next to the tag in the listing, and
also some sample full pages with rendered results.

Maybe a better RTL support could be added as an extension in later versions.

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

Ok, it got me hook on the just use the standard tags concept, but the above
quote implies, this shouldn’t go into production.

Is that accurate?

~~~
awb
You can definitely put it into production. It's just not a "pixel-perfect,
cross-browser, fully tested on all devices back to iPhone 4" kind of
stylesheet. It's a "looks decent with no effort" kind of stylesheet.

It's more to help you launch quickly so you can test an idea, like a
hackathon, side project or MVP.

~~~
andrei_says_
For many it’s usually “back to IE11 on the locked windows 7 workstations of
all financial, insurance etc. institutions I want for a client.”

------
daxfohl
I was just thinking about looking for something like this for a new internal
site for a customer. No fuss, this is exactly what I need.

------
arkanciscan
I don't understand why people use css frameworks. This stylesheet will make
your site look like this other site. Cool, but what if I want to make my site
look different than other sites? Then I have to override a lot of over
specific selectors and make my own CSS even harder to read/write.

~~~
Ghjklov
This is for when "shit I just want my website to look good like those other
websites I see on the web but I don't know how or don't want to put in too
much effort"

------
Blaiz0r
This is exactly what every project should start with, instead of wasting time
and bytes on a framework.

------
ww520
This is great. Work on different device dimensions. The text on mobile is
scaled nicely and legible.

------
jujodi
Everywhere that you said "Design" on the website maybe you should say "Style"

------
heavyset_go
I really like this. Thanks for sharing it and releasing it under a free
license!

------
projektfu
I really like it but on my iPhone SE the section with the table gets cropped
and is not scrollable, which is a common problem on mobile for me.

------
naasking
Neat. Picnic CSS is similar in spirit [1].

[1] [https://picnicss.com/](https://picnicss.com/)

------
subpixel
Is the quickstart template supposed to render? It loads as a txt file for me.

~~~
awb
It's so you can copy/paste the HTML into a local project rather than
downloading it.

------
axegon_
Immediately starred(even if I never use it)!!! I love that more and more
people are making these simplistic and minimalistic frontend stylesheets and
steering clear of the whole "REACT EVERYTHING! HTML BAD CSS BAD!" mentality
and those 40mb javascript files! Thank you!

------
thrownaway954
maybe i'm missing something here, but I see 2 fails here.

1\. i'm using firefox and the select dropdown isn't styled so it looks like
the plain old unstyled select.

2\. i don't see anywhere on the page where it shows all of the elements and
what they will look like as an example, like bootstrap does. that example form
at the bottom doesn't cut it as far as i'm concerned.

~~~
progre
The dropdown looks fine to me, also on firefox

~~~
thrownaway954
This is what I'm seeing. I took this with Lightshot on Chrome.

[http://prntscr.com/rml1xf](http://prntscr.com/rml1xf)

Lightshot what you're seeing, maybe i'm crazy.

~~~
awb
Yeah, when in doubt I tried not to mess with the default styling too much.
There might be some nice tweaks I could make to it though.

~~~
cfv
Hi awb! I added a PR for a simple change making the inputs a bit more uniform.
I really like this! Thanks for letting us all chip in.

------
FailMore
Excellent

