5 ms·
Semantic HTML, CSS, Vanilla JS, and JAMStack. Semantic: embed data directly in HTML. If I have a list of wines with categories, each wine's "class" attribute h
by crazypython 5y ago
Semantic HTML, CSS, Vanilla JS, and JAMStack.
Semantic: embed data directly in HTML. If I have a list of wines with categories, each wine's "class" attribute has a class for each category.
HTML: can be generated by anything and consumed by anyone. Great SEO.
CSS: These websites were all made with the same HTML, only CSS changing. http://www.csszengarden.com/ http://www.csszengarden.com/
Let's imagine we have a checkbox, that when checked, should dim every wine that is not a white wine. Next to it is a div of wines, with the "container" class. The div contains wine elements.
3 lines of CSS:
input[type="checkbox"].whiteWine:checked + .container > :not(.whiteWine) {
opacity: 0.5;
}
You can replace the checkbox's appearance with an image, a video, just about anything– it doesn't have to look like a checkbox.
This would take many lines of JavaScript in any other framework.
Instead of attempting to warp HTML into a UI library, this uses HTML as a data format, and CSS as a way to present that data.
- nickthemagicman 5y agoIS CSS really this well featured and expressive these days? I havent tinkered with it in years.
- b0afc375b5 5y agoYep, thank god for flexbox and grid layouts.
- chrismorgan 5y ago:checked and :not() have been dependable for quite a few years now. Firefox has had ’em since at least version 1 (2004), Safari got ’em in 3.1 and 3.2 (2008), and Internet Explorer was the last player to the table in Internet Explorer 9 (March 2011). The rest of the selector features (tag, attribute, class, adjacent sibling, child) are older still (IE7 supported it all).
- nickthemagicman 5y agoThat's totally awesome. Everyone always just jumped to JavaScript for that kind of thing with jQuery.
- rbdone 5y agoWhat’s old is new again <3 Great example, btw!
- dkarras 5y agoWhat happens when your wine types are dynamic? How do you typically bridge the gap?
- busymom0 5y agoWow at this one: http://www.csszengarden.com/219/ http://www.csszengarden.com/219/
- crazypython 5y agoIndeed, and that website only uses 2010 CSS features.