Submissions
Article No Longer Available
What is this
I'm starting a new series aimed at helping you improve your css skills by challenging you to recreate a suggested feature or element. I'll only be posting things that will be of use when building your websites or apps. So no code golf or obscure stuff.
This is a weekly challenge, so every Monday there will be a new thing for you to build. Also every Monday, alongside the challenge, I'll give a suggested solution to last weeks' challenge.
Post links to your solutions (codepens, jsfiddles, etc.) in the comments if you solved the challenge.
Breadcrumbs
So the first challenge is to make breadcrumbs. Commonly used in larger websites as secondary navigation.
Requirements
- parent element that holds individual items should use the
navtag - each item uses
atag for links - each item is somehow separated, either with text (
>or/, traditional) or visually (modern) - last item should have special styling
Top comments (17)
Cool challenge!
Here's my take: codepen.io/kyle-o/pen/vYYEbdq
Some considerations I made:
aria-*attributes for accessibility.emsizing for elements inside the.breadcrumbsclass, and clip-path instead of the CSS triangles technique so that the component is able to scale simply by changing the font size of the.breadcrumbsclass. This way, in the context of a larger app, we can easily usefont-sizeutility classes and everything scales nicely without breaking.@supportsto modify the spacing between breadcrumbs in non-supported browsers.)Here you go codepen.io/pclaisse/pen/KKKwBKZ
Looks awesome, it's about the same as what I did, except I haven't used scss before.
Hi All,
Nice to join the challenges.
I guess it's not to late to join.
Here's my submission for 'Breadcrumbs'.
codepen.io/skay/full/bGGeraq
Used simple CSS selectors and properties.
Hi all!
My example: codepen.io/bryant---24/pen/qBBEyjB
In my example, I used 'span' tag, as I think, since it will be semantically correct.
Oh, I'm interested in your reasoning for using
spaninstead ofa.Also if it doesn't bother you I've created a separate post for discussing this topic, so if you could pitch in there it'd be appreciated:
Breadcrumbs - Semantics and Accessibility
Milan Radojević ・ Oct 8 ・ 1 min read
Also I see you're using BEM as well 😀. How long have you been doing it and what your experience with it like?
Hi @Milan!
Thank you for your answer. :-)
I use BEM for a long time, it helps a lot on large projects in our team.
Something very very simple:
codepen.io/Scario/pen/gOObjdG
If you want to follow this series on twitter, I've created a Moment to collect all the tweets for this series: twitter.com/i/moments/118141162861...
Here you go -
View in full screen - jsitor.com/p/VQMV_oPzY
View code - jsitor.com/VQMV_oPzY
Hi All,
Nice to join the challenges.
I guess it is not too late to join the challenge.
Here is my submission.
codepen.io/skay/full/bGGeraq
Used simple selectors and properties.
My take:
codepen.io/augustoqueiroz/pen/zYYxyrv
Some comments may only be visible to logged-in visitors. Sign in to view all comments.