DEV Community

loading...
Cover image for CSS Challenges #1 | Breadcrumbs

CSS Challenges #1 | Breadcrumbs

mikister profile image Milan Radojević Updated on ・1 min read

Submissions

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 nav tag
  • each item uses a tag for links
  • each item is somehow separated, either with text (> or /, traditional) or visually (modern)
  • last item should have special styling

Read More

Discussion (17)

Collapse
kyleoliveiro profile image
Kyle Oliveiro

Cool challenge!

Here's my take: codepen.io/kyle-o/pen/vYYEbdq

Some considerations I made:

  • Added proper aria-* attributes for accessibility.
  • The last item is not a link since it represents the current page. Having it as a link would be redundant and might confuse users. (See point 5: nngroup.com/articles/breadcrumbs/).
  • I used em sizing for elements inside the .breadcrumbs class, 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 .breadcrumbs class. This way, in the context of a larger app, we can easily use font-size utility classes and everything scales nicely without breaking.
  • Clip path is supported in modern browsers. In browsers that do not support it, the component degrades gracefully to simple rectangles. (An improvement would be to use @supports to modify the spacing between breadcrumbs in non-supported browsers.)
Collapse
pclaisse profile image
Collapse
mikister profile image
Milan Radojević Author • Edited

Looks awesome, it's about the same as what I did, except I haven't used scss before.

Collapse
bryant24 profile image
Ruslan Galiev • Edited

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.

Collapse
mikister profile image
Milan Radojević Author

Oh, I'm interested in your reasoning for using span instead of a.

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:

Also I see you're using BEM as well 😀. How long have you been doing it and what your experience with it like?

Collapse
bryant24 profile image
Ruslan Galiev

Hi @Milan!

Thank you for your answer. :-)
I use BEM for a long time, it helps a lot on large projects in our team.

Collapse
sansk profile image
Sangy K (She/Her) • Edited

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.

Collapse
mikister profile image
Milan Radojević Author • Edited

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...

Collapse
davide profile image
Collapse
ashvin777 profile image
Ashvin Kumar Suthar

Here you go -

View in full screen - jsitor.com/p/VQMV_oPzY
View code - jsitor.com/VQMV_oPzY

Collapse
augustoqueiroz profile image
Collapse
sansk profile image
Sangy K (She/Her)

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.

Collapse
ingmarslazdinsgit profile image
IngmarsLazdinsGit

Hi Milan and folks,

My take on the task:
codepen.io/IngmarsLazdins/pen/oNNgaMV

Collapse
mikister profile image
Milan Radojević Author

Wow, that's an interesting implementation.

What's the support for clip-path though, going by caniuse.com - clip-path I'd guess the coverage is good, though it's kinda hard to read their results in this case.

Collapse
ingmarslazdinsgit profile image
IngmarsLazdinsGit

Yep, it's more like an experiment and does not work in Edge (under consideration as they say). Everything else should be fine.

Anyhow, it degrades quite nicely to simple boxes.

Collapse
gillmangareth profile image
Gareth Gillman

My take using transform:skew - codepen.io/garethTF/pen/MWWYZLy

Collapse
mikister profile image
Milan Radojević Author

Ohh, I like the idea for the design.

Forem Open with the Forem app