5 ms·

CSS-Only Components for Pure CSS

42 points by macco 8y ago

harrisreynolds 8y ago
Been checking out some of these Github posts today on HN (there have been several) and then spinning up dashboards for them at Chart.ly. https://chart.ly/github-dashboard/joe-crick/pure-css-components https://chart.ly/github-dashboard/joe-crick/pure-css-compone... Interesting that this project has a negative streak of 440 days (440 days since a commit has been made). So not a super fresh project. Also interesting that it made it to the front page of HN! Nice work!
ddtaylor 8y ago
Their CSS is 3.8K while Bootstrap (4.1.1) is 21K. Both being minified and gzipped.
- ghostbrainalpha 8y ago
  Would that result in significantly faster page speeds if you switch from Bootstrap?
  - Raphmedia 8y ago
    No, unless you count milliseconds as significant. You might as well remove one image in your content or save with a better image compression.
    - ddtaylor 8y ago
      IMO an image is much less important than CSS, since most of the time without the CSS framework loading the page is not usable. Also progressive JPEGs make a big difference for the effect of loading time if you have a large splash image or background image.
donatj 8y ago
We actually removed our CSS tabs recently because apparently modern screen readers had more issues with them than JavaScript tabs surprisingly enough.
- perilunar 8y ago
  Not really that surprising, since there is no way to apply the correct aria-selected and aria-expanded attributes using just CSS. (You can apply the correct ARIA roles in the HTML though, just not save the change of state.) It's a shame there is not a native HTML tab construction, since you really shouldn't need JS to make tabs. Using the radio buttons to set active state is a clever hack, but it's not what they were intended for. Ref: WAI-ARIA section on tabs: https://www.w3.org/TR/wai-aria-1.1/#tab https://www.w3.org/TR/wai-aria-1.1/#tab
colept 8y ago
I like Pure CSS, it's one of the few CSS frameworks that makes it easy to pick and choose only the parts you need. Bravo!
psoots 8y ago
I think calling something "css-only" and having it break because you didn't add a radio input element in the markup is a little misleading. The dynamic functionality hinges on the behavior of these html elements. And if having required html elements is ok, why not just lose the hacky markup and include a required javascript file to get the desired behavior in a more traditional and standard way?

42 points by macco 8y ago

Been checking out some of these Github posts today on HN (there have been several) and then spinning up dashboards for them at Chart.ly. https://chart.ly/github-dashboard/joe-crick/pure-css-components https://chart.ly/github-dashboard/joe-crick/pure-css-compone... Interesting that this project has a negative streak of 440 days (440 days since a commit has been made). So not a super fresh project. Also interesting that it made it to the front page of HN! Nice work!

ddtaylor 8y ago

Their CSS is 3.8K while Bootstrap (4.1.1) is 21K. Both being minified and gzipped.

ghostbrainalpha 8y ago
Would that result in significantly faster page speeds if you switch from Bootstrap?
- Raphmedia 8y ago
  No, unless you count milliseconds as significant. You might as well remove one image in your content or save with a better image compression.
  - ddtaylor 8y ago
    IMO an image is much less important than CSS, since most of the time without the CSS framework loading the page is not usable. Also progressive JPEGs make a big difference for the effect of loading time if you have a large splash image or background image.

donatj 8y ago

We actually removed our CSS tabs recently because apparently modern screen readers had more issues with them than JavaScript tabs surprisingly enough.

perilunar 8y ago
Not really that surprising, since there is no way to apply the correct aria-selected and aria-expanded attributes using just CSS. (You can apply the correct ARIA roles in the HTML though, just not save the change of state.) It's a shame there is not a native HTML tab construction, since you really shouldn't need JS to make tabs. Using the radio buttons to set active state is a clever hack, but it's not what they were intended for. Ref: WAI-ARIA section on tabs: https://www.w3.org/TR/wai-aria-1.1/#tab https://www.w3.org/TR/wai-aria-1.1/#tab

colept 8y ago

I like Pure CSS, it's one of the few CSS frameworks that makes it easy to pick and choose only the parts you need. Bravo!

psoots 8y ago

I think calling something "css-only" and having it break because you didn't add a radio input element in the markup is a little misleading. The dynamic functionality hinges on the behavior of these html elements. And if having required html elements is ok, why not just lose the hacky markup and include a required javascript file to get the desired behavior in a more traditional and standard way?