Css Card list

Jurgen 5 minutes to read

A responsive card template with a mobile first and no js setup The card is one of the most used components. The card list html ... more

Css Accordion Component

Jurgen 4 minutes to read

A mobile first accordion component without javascript The accordion is a nice way to present summarized content in a space saving format. Again, this can not be must read content. The details/summary is used as a switcher and label, and in this setup it does contain the content. That is placed in a div with the class="inner" This way the content can be animated smooth and cross browser and not jumpy like with the allow-discrete. By using the details/summary we get the build in accessibility and the hidden-until-found functionality. If the same name is used for all details in the accordion the items auto close when opening a new one. The open property can be used to show the content on pageload. ... more

Css Tabs Component

Jurgen 2 minutes to read

A mobile first tabbed component without javascript Tabbed content is a fine solution to present relevant, but not must read, information in a dense format. The details/summary is used as tab switcher and label, however it does not contain the content. That is placed in a div after the details/summary. This way the content can be animated smooth and cross browser and not jumpy like with the allow-discrete ... more

Css Header Template

Jurgen 4 minutes to read

How to create a mobile first header template the modern way Modern would be using grid and flex-box. Also not using javascript to move parts around, just plain css. Adding the same content twice to hide or show it on certain screen sizes is considered old-fashioned. The header setup What elements do we in general use in the header: the ubiquitous usp’s logo mobile menu icon (on mobile and/or tablet) search bar user menu main menu So, let’s set up the parts in html. ... more

Anchor Positioning

Jurgen 2 minutes to read

Anchor positioning had me wondered for a while, however after reading some articles about it I think this is a great addition to modern css. Especially in use with some other new css/html additions like the popover api. And now support for Anchor positioning has landed in Safari 26 use in production is near (FireFox has it under a flag). I really like the absolute relative positioning and the baked in fallback on smaller screens. ... more

Older posts