Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Basic.css – Classless CSS Starter File

github.com

Post reply on HN
Print view View original

31–40 of 68 posts

Re: Show HN: Basic.css – Classless CSS Starter File

#31

Post by chrismorgan »

reaperducer wrote: post #26
marvinblum wrote: post #21

I do like these frameworks. Far more sites should use one of those or the principle behind them. My page [1] uses concrete [2] and has a page load of 125kb (including my picture) and loads in less than one second. I don't need all that bloat that comes with a lot of pages (checkout wired.com for a negative example). The cards of this one look neat, but in case I need something like that I would add it myself to concr…

and has a page load of 125kb (including my picture) Imagine what you could get it down to if you just wrote CSS instead of using a framework.

11.5KB of CSS, looks like you could probably take it to under 1KB. But the biggest weight is the 93KB 460×460 avatar image which is used in a 100×100 circle. That can be reduced to an decent JPEG of about 10KB without even shrinking it to 100×100. At 100×100 (low-DPI displays), it’s under 5KB. I’d probably go for a single 200×200 image weighing about 8KB.

If you wanted to make that page really fast, you’d inline all the CSS and the avatar image, and get it under 14KB so that the entire HTTP message could be transmitted in one TCP packet.

Re: Show HN: Basic.css – Classless CSS Starter File

#32

Post by awb »

hidiegomariani wrote: post #24

another one i'm using for my site [1] is tacit[2] it's pretty basic but it works well - although i've been trying to find a well structured, well designed css framework with no classes - I haven't found one of my liking, I think the best way would be to use something very minimal like tailwindcss [3] which i still have to try [1] https://golang.cafe [2] https://github.com/yegor256/tacit [3] https://tailwindcss.com

> i've been trying to find a well structured, well designed css framework with no classes - I haven't found one of my liking

Give MVP.css a try: https://andybrewer.github.io/mvp/

It had some good community support (2.5k stargazers and about a dozen contributes).

(disclaimer: I'm the author)

Re: Show HN: Basic.css – Classless CSS Starter File

#33

Post by awb »

elicash wrote: post #12
duopixel wrote: post #6

Thank you! Brevity in code is underappreciated. People think it is about file size (and it partially is) but it is mostly about understanding what the code does so that you can extend it in the way that you want. This looks like a true foundation, unlike the namesake framework which is building on top of an existing buildings.

Another advantage is speed. I did a proof-of-concept last week with MVP.css and it was so quickly put together that it was almost as convenient as from writing the content in a Google Doc (where I use borderless tables for the columns). Google Docs are usually my second step in the process, as I don't like to get feedback on sketches, but this might be it now. (My first step is that I sketch on receipt paper, it's th…

Author of MVP.css here. Glad you liked it! If you'd like to share the site you built I'd love to take a look.

Re: Show HN: Basic.css – Classless CSS Starter File

#35

Post by VWWHFSfQ »

torstenvl wrote: post #17
rsoto wrote: post #4

This feels weird. Classes exist for a reason. When I read the title, I thought about a kind of CSS reset, but what I'm seeing is also a template/grid framework? The weird part is that by wrapping an article within a section now I'm designing with columns (which btw, it seems there's no way to control them). And section > article turns out to be the suggested semantics for a blog. It's a nice effort, but what I'd look…

Seems like it would be awesome if HTML allowed you to set a default element and then use as a shorthand for You could be "classless" to the extent of being semantic and succinct but without having to misappropriate elements.

why not just write

Re: Show HN: Basic.css – Classless CSS Starter File

#36

Post by woofie11 »

parhamn wrote: post #19
chrismorgan wrote: post #5

One thing I consistently dislike in these efforts is the misappropriation of HTML tags with certain semantics. In this instance, the elements should not be articles: they’re not complete, standalone items. To be sure, as https://html.spec.whatwg.org/multipage/sections.html#article... says, there’s subjectivity in deciding whether to use or , but I’m content to say that is wrong here. (Last time I looked into one of t…

> One thing I consistently dislike in these efforts is the misappropriation of HTML tags with certain semantics. As a counterpoint, I don't understand people pushing strict semantics in html elements where they're not really strictly defined or generally useful. Because of how loose the spec with how these things can be used (it it weren't it'd be like schema.org meets html) scraper and other UI tools don't really lo…

I think the right way to do it is to have the parser figure out which words are articles rather than explicitly tagging them. There are only three of them in English, and it's not a hard NLP problem. Of course, it's harder with Chinese, where there are countless measure words. And easier in a language without articles.

Re: Show HN: Basic.css – Classless CSS Starter File

#37

Post by airstrike »

VWWHFSfQ wrote: post #35
torstenvl wrote: post #17

Earlier quoted context omitted.

Seems like it would be awesome if HTML allowed you to set a default element and then use as a shorthand for You could be "classless" to the extent of being semantic and succinct but without having to misappropriate elements.

why not just write

Not nearly as cool as , sorry

Re: Show HN: Basic.css – Classless CSS Starter File

#38

Post by smichel17 »

woofie11 wrote: post #36
parhamn wrote: post #19

Earlier quoted context omitted.

> One thing I consistently dislike in these efforts is the misappropriation of HTML tags with certain semantics. As a counterpoint, I don't understand people pushing strict semantics in html elements where they're not really strictly defined or generally useful. Because of how loose the spec with how these things can be used (it it weren't it'd be like schema.org meets html) scraper and other UI tools don't really lo…

I think the right way to do it is to have the parser figure out which words are articles rather than explicitly tagging them. There are only three of them in English, and it's not a hard NLP problem. Of course, it's harder with Chinese, where there are countless measure words. And easier in a language without articles.

I am not sure if this is misunderstanding, satire, or trying to make a point.

The article tag refers to the other definition of article -- "magazine article", not "article of speech".

Re: Show HN: Basic.css – Classless CSS Starter File

#40

Post by smichel17 »

parhamn wrote: post #19
chrismorgan wrote: post #5

One thing I consistently dislike in these efforts is the misappropriation of HTML tags with certain semantics. In this instance, the elements should not be articles: they’re not complete, standalone items. To be sure, as https://html.spec.whatwg.org/multipage/sections.html#article... says, there’s subjectivity in deciding whether to use or , but I’m content to say that is wrong here. (Last time I looked into one of t…

> One thing I consistently dislike in these efforts is the misappropriation of HTML tags with certain semantics. As a counterpoint, I don't understand people pushing strict semantics in html elements where they're not really strictly defined or generally useful. Because of how loose the spec with how these things can be used (it it weren't it'd be like schema.org meets html) scraper and other UI tools don't really lo…

> Besides general accessibility (which is tag attribute based mostly)

I was under the impression that semantic html elements imply certain aria tags (I read some mdn pages on this recently so I'm pretty confident in this impression, unless I confused proposed and actual specs). So, they can help with the ease of writing accessible UI.

Post reply on HN