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

41–50 of 68 posts

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

#41

Post by desireco42 »

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…

I started reading what you wrote with the complete disagreement of what I thought you are saying and finished agreeing completely. :)

I find a good starter defaults good.

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

#42

Post by smichel17 »

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.

The yesod web framework's hamlet templates have this, albeit without the default as far as I know. compiles to . If you omit the element, it uses div by default so you can use just if you prefer.

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

#43

Post by runarberg »

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…

Funny enough, I often mark up grid cards as an unordered list of articles:

    
      
        Card 1
      
      
        Card 2
Since grid cards are often complete stand-alone items with their own headings, footings and body content.

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

#44

Post by ravenstine »

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…

You're not wrong, but I'll note that the definition of you are referring to seems pretty useless, and I don't think it's wrong for people to generally decide what should mean.

I don't see anywhere that defines as being used for cards. But should be used for cards if the card itself is an aside.

> Here, have an article within a section. … what? That ain’t semantic.

What's not semantic about that? An article =/= a page. A page can have multiple articles; the idea of an "article" is pretty abstract.

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

#45

Post by werdnapk »

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.

Or use a template engine. Slim for example allows you to write just .card

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

#46

Post by louismerlin »

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.

The framework he uses is actually 996 bytes minzipped :D (disclaimer : I'm the creator of https://concrete.style)

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

#47

Post by marvinblum »

chrismorgan wrote: post #31
reaperducer wrote: post #26

Earlier quoted context omitted.

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…

Well speed was not the main goal of my site. I just wanted to build something quick. I sometimes use the avatar on my page to upload it somewhere else and a decent resolution is good for that.

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

#48

Post by tln »

chrismorgan wrote: post #31
reaperducer wrote: post #26

Earlier quoted context omitted.

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…

What network are you on that gives you 14kb packets from the internet?

My loopback has MTU of 16kb, everything else is 1500 or less

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

#49

Post by tln »

chiefofgxbxl wrote: post #22

Quick recommendation: add a focused style on form inputs so it's easy to see which input is active. A bright border color would help.

User agents usually do this. This Basic.css demo does show an outline for Chrome and Safari, but not Firefox... odd, because that does appear if I remove Basic.css stylesheet.

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

#50

Post by runarberg »

globular-toast wrote: post #16
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…

What is a card? For me that is purely stylistic and should live in the CSS alone. What does a card mean to a blind user? This is all very easy when you're in the business of marking up documents. It turns out that the handful of element types defined in HTML are good enough for the vast majority of documents. It's quite rare to need to introduce a new tag. The difficulty starts when you're actually trying to create a…

For me, cards are usually lists of self contained items (usually summaries). So the cards parent is usually a `` or `` and the card them selfs are `` with a single ``, ``, or ``.
Post reply on HN