9 ms·

Show HN: MVP.css – Minimalist stylesheet for HTML elements

471 points by awb 7y ago

bluejekyll 7y ago
> 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 7y ago
  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_ 7y ago
    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.”
meesterdude 7y ago
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 7y ago
  I've used Milligram.io in the past too. Basically the same idea.
  - meesterdude 7y ago
    Milligram does not look like a classless framework - maybe class-lite?
quickthrower2 7y ago
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!
kevmo314 7y ago
> "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 7y ago
  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.
- airstrike 7y ago
  Also love the link to "HTML GUide" pointing to https://www.w3schools.com/TAGS/ref_byfunc.asp https://www.w3schools.com/TAGS/ref_byfunc.asp
glacials 7y ago
For anyone else who's hunting all over for a rendered example, just open devtools -- the site dogfoods itself.
deft 7y ago
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 7y ago
  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.
bArray 7y ago
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 7y ago
  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 7y ago
    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%3A%2F%2Fandybrewer.github.io%2Fmvp%2F&tab=mobile https://developers.google.com/speed/pagespeed/insights/?url=...
daxfohl 7y ago
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.
jake-low 7y ago
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/
- deleted 7y ago
  [deleted]
- oxalorg 7y ago
  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 7y ago
    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 7y ago
      Thanks! I'm loving MVP.css as well and might just end up using it for my next site. ^_^
- mrec 7y ago
  I think it undermines the semanticity of the markup though. A hyperlink isn't supposed to render as a button, or vice versa. If this was just a bolded word in normal inline link text, the button presentation would be very unwelcome.
jrandm 7y ago
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/
thunderbong 7y ago
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
FailMore 7y ago
Excellent
ww520 7y ago
This is great. Work on different device dimensions. The text on mobile is scaled nicely and legible.
axegon_ 7y ago
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!
holler 7y ago
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/samp https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sa...
- jrandm 7y ago
  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 7y ago
    <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 7y ago
      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.
blueset 7y ago
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.
pachico 7y ago
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.
d3sandoval 7y ago
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.
- nkozyra 7y ago
  I think that's inherently covered by the name 'mvp.' Now that of course depends heavily on what you consider to be minimally viable but there's generally not an expectation of professional design work. If you're the kind of person who reached for bootstrap or material UI or other not semantic, boilerplate frameworks this might be appealing.
- danso 7y ago
  I don’t even know what the author means. Design is hard stuff.
  - deleted 7y ago
    [deleted]
  - throwaway55554 7y ago
    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 7y ago
      We are talking about MVPs here though...
- awb 7y ago
  Author here. I'm a designer and it wasn't meant to be denigrating, but more of a statement that launching is hard and that it's OK to be embarrassed by the design of your MVP so you should ideally put very little time into it and more time on the core value of your product. I can see how that doesn't come across the way I worded it though. I'll try to wordsmith that line. Thanks for the feedback!
myfonj 7y ago
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
- rident 7y ago
  Classics right there! We've got a long linage of this kinda stuff now from browser resets to full stylesheets to well specified content just for testing any of the above on. I love it! Simple. Consistent. And now more powerful than ever with the help of variables. Might be fun to take all the w3 core styles rebuild them with modern CSS features. Maybe add some HTML5 elements to the test docs as well.
  - myfonj 7y ago
    Yes, it feels somewhat natural to craft this kind of style sheet. As I've just found out [1], there is even more of those than I'd expect. [1] @dohliam's excellent "Drop-in Minimal CSS" collection mentioned here https://news.ycombinator.com/item?id=22683281 https://news.ycombinator.com/item?id=22683281
- tenaciousDaniel 7y ago
  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 7y ago
    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).
dohliam 7y ago
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
- wmeredith 7y ago
  Shameless self-promotion: would you mind adding my classless style sheet? https://wmeredith.github.io/MercuryCSS/ https://wmeredith.github.io/MercuryCSS/ EDIT: Ha! I should have checked first. It was added in Feb 2018 :)
- gyrgtyn 7y ago
  https://github.com/css-pkg/style.css https://github.com/css-pkg/style.css
  - dohliam 7y ago
    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/vendor/style.min.css https://github.com/dohliam/dropin-minimal-css/blob/gh-pages/...
    - gyrgtyn 7y ago
      sorry! i did cmd-f search the readme. guess i messed up somehow.
- mstade 7y ago
  This is perfect, I've been looking for something like this – thank you!
- jypepin 7y ago
  This is awesome thanks for doing that!
fevangelou 7y ago
@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 7y ago
  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.
rickdeveloper 7y ago
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/prefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
thrownaway954 7y ago
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 7y ago
  The dropdown looks fine to me, also on firefox
  - thrownaway954 7y ago
    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 7y ago
      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.
      - thrownaway954 7y ago
        so call me a jerk... i failing to see why would i use this instead of something like bootstrap or tailwinds. where exactly does this "fit". is this something i use in adjacent to other css framework or on it's own. i'm very confused.
      - cfv 7y ago
        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.
    - progre 7y ago
      Yeah, same for me, looks fine.
jujodi 7y ago
Everywhere that you said "Design" on the website maybe you should say "Style"
deleted 7y ago
[deleted]
Blaiz0r 7y ago
This is exactly what every project should start with, instead of wasting time and bytes on a framework.
subpixel 7y ago
Is the quickstart template supposed to render? It loads as a txt file for me.
- awb 7y ago
  It's so you can copy/paste the HTML into a local project rather than downloading it.
projektfu 7y ago
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.
arkanciscan 7y ago
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 7y ago
  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"
- runarberg 7y ago
  CSS frameworks—I hear—are mainly aimed at individuals or small teams with a proof of concept, demos or other quick short lived projects that don’t need custom designs, or for small teams that don’t have a skilled designer and just need the thing to look well enough. That said I have had to defend non-framework CSS to other front end developers in the wild, who insist that material design, bootstrap or whatever is worth writing all this CSS your self.
jypepin 7y ago
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.
heavyset_go 7y ago
I really like this. Thanks for sharing it and releasing it under a free license!
naasking 7y ago
Neat. Picnic CSS is similar in spirit [1]. [1] https://picnicss.com/ https://picnicss.com/

471 points by awb 7y ago

> 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 7y ago
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_ 7y ago
  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.”

meesterdude 7y ago

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 7y ago
I've used Milligram.io in the past too. Basically the same idea.
- meesterdude 7y ago
  Milligram does not look like a classless framework - maybe class-lite?

quickthrower2 7y ago

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!

kevmo314 7y ago

> "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 7y ago
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.
airstrike 7y ago
Also love the link to "HTML GUide" pointing to https://www.w3schools.com/TAGS/ref_byfunc.asp https://www.w3schools.com/TAGS/ref_byfunc.asp

glacials 7y ago

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

deft 7y ago

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 7y ago
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.

bArray 7y ago

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 7y ago
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 7y ago
  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%3A%2F%2Fandybrewer.github.io%2Fmvp%2F&tab=mobile https://developers.google.com/speed/pagespeed/insights/?url=...

daxfohl 7y ago

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.

jake-low 7y ago

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/

deleted 7y ago
[deleted]
oxalorg 7y ago
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 7y ago
  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 7y ago
    Thanks! I'm loving MVP.css as well and might just end up using it for my next site. ^_^
mrec 7y ago
I think it undermines the semanticity of the markup though. A hyperlink isn't supposed to render as a button, or vice versa. If this was just a bolded word in normal inline link text, the button presentation would be very unwelcome.

jrandm 7y ago

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/

thunderbong 7y ago

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

FailMore 7y ago

Excellent

ww520 7y ago

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

axegon_ 7y ago

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!

holler 7y ago

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/samp https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sa...

jrandm 7y ago
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 7y ago
  <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 7y ago
    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.

blueset 7y ago

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.

pachico 7y ago

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.

d3sandoval 7y ago

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.

nkozyra 7y ago
I think that's inherently covered by the name 'mvp.' Now that of course depends heavily on what you consider to be minimally viable but there's generally not an expectation of professional design work. If you're the kind of person who reached for bootstrap or material UI or other not semantic, boilerplate frameworks this might be appealing.
danso 7y ago
I don’t even know what the author means. Design is hard stuff.
- deleted 7y ago
  [deleted]
- throwaway55554 7y ago
  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 7y ago
    We are talking about MVPs here though...
awb 7y ago
Author here. I'm a designer and it wasn't meant to be denigrating, but more of a statement that launching is hard and that it's OK to be embarrassed by the design of your MVP so you should ideally put very little time into it and more time on the core value of your product. I can see how that doesn't come across the way I worded it though. I'll try to wordsmith that line. Thanks for the feedback!

myfonj 7y ago

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

rident 7y ago
Classics right there! We've got a long linage of this kinda stuff now from browser resets to full stylesheets to well specified content just for testing any of the above on. I love it! Simple. Consistent. And now more powerful than ever with the help of variables. Might be fun to take all the w3 core styles rebuild them with modern CSS features. Maybe add some HTML5 elements to the test docs as well.
- myfonj 7y ago
  Yes, it feels somewhat natural to craft this kind of style sheet. As I've just found out [1], there is even more of those than I'd expect. [1] @dohliam's excellent "Drop-in Minimal CSS" collection mentioned here https://news.ycombinator.com/item?id=22683281 https://news.ycombinator.com/item?id=22683281
tenaciousDaniel 7y ago
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 7y ago
  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).

dohliam 7y ago

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

wmeredith 7y ago
Shameless self-promotion: would you mind adding my classless style sheet? https://wmeredith.github.io/MercuryCSS/ https://wmeredith.github.io/MercuryCSS/ EDIT: Ha! I should have checked first. It was added in Feb 2018 :)
gyrgtyn 7y ago
https://github.com/css-pkg/style.css https://github.com/css-pkg/style.css
- dohliam 7y ago
  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/vendor/style.min.css https://github.com/dohliam/dropin-minimal-css/blob/gh-pages/...
  - gyrgtyn 7y ago
    sorry! i did cmd-f search the readme. guess i messed up somehow.
mstade 7y ago
This is perfect, I've been looking for something like this – thank you!
jypepin 7y ago
This is awesome thanks for doing that!

fevangelou 7y ago

@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 7y ago
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.

rickdeveloper 7y ago

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/prefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...

thrownaway954 7y ago

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 7y ago
The dropdown looks fine to me, also on firefox
- thrownaway954 7y ago
  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 7y ago
    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.
    - thrownaway954 7y ago
      so call me a jerk... i failing to see why would i use this instead of something like bootstrap or tailwinds. where exactly does this "fit". is this something i use in adjacent to other css framework or on it's own. i'm very confused.
    - cfv 7y ago
      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.
  - progre 7y ago
    Yeah, same for me, looks fine.

jujodi 7y ago

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

deleted 7y ago

[deleted]

Blaiz0r 7y ago

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

subpixel 7y ago

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

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

projektfu 7y ago

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.

arkanciscan 7y ago

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 7y ago
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"
runarberg 7y ago
CSS frameworks—I hear—are mainly aimed at individuals or small teams with a proof of concept, demos or other quick short lived projects that don’t need custom designs, or for small teams that don’t have a skilled designer and just need the thing to look well enough. That said I have had to defend non-framework CSS to other front end developers in the wild, who insist that material design, bootstrap or whatever is worth writing all this CSS your self.

jypepin 7y ago

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.

heavyset_go 7y ago

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

naasking 7y ago

Neat. Picnic CSS is similar in spirit [1]. [1] https://picnicss.com/ https://picnicss.com/