A Pen by Stas Melnikov on CodePen.
Created
June 16, 2017 05:25
-
-
Save CodeMyUI/f6f24ea0515aac3d014f242f01005321 to your computer and use it in GitHub Desktop.
Breadcrumbs with CSS Custom Properties as API
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="page"> | |
<div class="page__demo"> | |
<div class="main-container page__container"> | |
<div class="page__section"> | |
<ul class="breadcrumbs"> | |
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Home</a></li> | |
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Blog</a></li> | |
<li class="breadcrumbs__item breadcrumbs__item_active"><span class="breadcrumbs__element">Single post</span></li> | |
</ul> | |
</div> | |
<div class="page__section"> | |
<ul class="breadcrumbs breadcrumbs_type1"> | |
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Home</a></li> | |
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Blog</a></li> | |
<li class="breadcrumbs__item breadcrumbs__item_active"><span class="breadcrumbs__element">Single post</span></li> | |
</ul> | |
</div> | |
<div class="page__section"> | |
<ul class="breadcrumbs breadcrumbs_type2"> | |
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Home</a></li> | |
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Blog</a></li> | |
<li class="breadcrumbs__item breadcrumbs__item_active"><span class="breadcrumbs__element">Single post</span></li> | |
</ul> | |
</div> | |
<div class="page__section"> | |
<ul class="breadcrumbs breadcrumbs_type3"> | |
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Home</a></li> | |
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Blog</a></li> | |
<li class="breadcrumbs__item breadcrumbs__item_active"><span class="breadcrumbs__element">Single post</span></li> | |
</ul> | |
</div> | |
<div class="page__section"> | |
<ul class="breadcrumbs breadcrumbs_type4"> | |
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Home</a></li> | |
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Blog</a></li> | |
<li class="breadcrumbs__item breadcrumbs__item_active"><span class="breadcrumbs__element">Single post</span></li> | |
</ul> | |
</div> | |
<div class="page__section"> | |
<ul class="breadcrumbs breadcrumbs_type5"> | |
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Home</a></li> | |
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Blog</a></li> | |
<li class="breadcrumbs__item breadcrumbs__item_active"><span class="breadcrumbs__element">Single post</span></li> | |
</ul> | |
</div> | |
<div class="page__section"> | |
<ul class="breadcrumbs breadcrumbs_type6"> | |
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Home</a></li> | |
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Blog</a></li> | |
<li class="breadcrumbs__item breadcrumbs__item_active"><span class="breadcrumbs__element">Single post</span></li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
<footer class="footer"> | |
<div class="main-container footer__container"> | |
<span>Liked? Please, | |
<a href="https://stas-melnikov.ru/donate/" rel="noopener noreferrer" target="_blank">look the page</a> | |
</span> | |
<a href="https://stas-melnikov.ru" class="melnik909" rel="noopener noreferrer" target="_blank">Developed by Stas Melnikov</a> | |
</div> | |
</footer> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.breadcrumbs{ | |
--cssuiBreadcrumbsTextColor: var(--breadcrumbsTextColor); | |
--cssuiBreadcrumbsTextColorActive: var(--breadcrumbsTextColorActive); | |
--cssuiBreadcrumbsDivider: var(--breadcrumbsDivider); | |
--cssuiBreadcrumbsDividerColor: var(--breadcrumbsDividerColor, inherit); | |
--cssuiBreadcrumbsDividerSize: var(--breadcrumbsDividerSize, 16px); | |
--cssuiBreadcrumbsIndent: var(--breadcrumbsIndent, 8px); | |
padding-left: 0; | |
margin-top: 0; | |
margin-bottom: 0; | |
list-style: none; | |
display: flex; | |
flex-wrap: wrap; | |
} | |
.breadcrumbs__item{ | |
display: inline-block; | |
position: relative; | |
padding-right: calc(var(--cssuiBreadcrumbsDividerSize) + var(--cssuiBreadcrumbsIndent)); | |
margin-right: var(--cssuiBreadcrumbsIndent); | |
color: var(--cssuiBreadcrumbsTextColor); | |
} | |
.breadcrumbs__item:after{ | |
content: var(--cssuiBreadcrumbsDivider); | |
width: var(--cssuiBreadcrumbsDividerSize); | |
height: var(--cssuiBreadcrumbsDividerSize); | |
line-height: 1; | |
text-align: center; | |
font-family: "Arial"; | |
font-size: var(--cssuiBreadcrumbsDividerSize); | |
color: var(--cssuiBreadcrumbsDividerColor); | |
position: absolute; | |
top: 50%; | |
right: 0; | |
transform: translateY(-50%); | |
} | |
.breadcrumbs__item_active{ | |
margin-right: 0; | |
padding-right: 0; | |
color: var(--cssuiBreadcrumbsTextColorActive); | |
} | |
.breadcrumbs__item_active:after{ | |
display: none; | |
} | |
.breadcrumbs__element{ | |
color: inherit; | |
} | |
/* examples */ | |
.breadcrumbs{ | |
--breadcrumbsTextColor: #D1C4E9; | |
--breadcrumbsTextColorActive: #fff; | |
} | |
.breadcrumbs_type1{ | |
--breadcrumbsDivider: "/"; | |
} | |
.breadcrumbs_type1 .breadcrumbs__item:after{ | |
margin-top: 2px; | |
} | |
.breadcrumbs_type2{ | |
--breadcrumbsDivider: "→"; | |
--breadcrumbsDividerSize: 20px; | |
} | |
.breadcrumbs_type3{ | |
--breadcrumbsDivider: "•"; | |
--breadcrumbsDividerSize: 2rem; | |
} | |
.breadcrumbs_type3 .breadcrumbs__item:after{ | |
margin-top: 2px; | |
} | |
.breadcrumbs_type4{ | |
--breadcrumbsDivider: "|"; | |
--breadcrumbsDividerSize: 14px; | |
} | |
.breadcrumbs_type5{ | |
--breadcrumbsDivider: "›"; | |
--breadcrumbsDividerSize: 20px; | |
} | |
.breadcrumbs_type6{ | |
--breadcrumbsDivider: "—"; | |
--breadcrumbsDividerSize: 14px; | |
} | |
/* | |
* demo page | |
*/ | |
@media screen and (min-width: 768px){ | |
html{ | |
font-size: 62.5%; | |
} | |
} | |
@media screen and (max-width: 767px){ | |
html{ | |
font-size: 50%; | |
} | |
} | |
body{ | |
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Open Sans", "Ubuntu", "Fira Sans", "Helvetica Neue", sans-serif; | |
font-size: 1.6rem; | |
color: #fff; | |
background-color: #673AB7; | |
margin: 0; | |
-webkit-overflow-scrolling: touch; | |
} | |
a{ | |
text-decoration: none; | |
color: #D1C4E9; | |
} | |
a:hover, a:focus{ | |
text-decoration: underline; | |
} | |
.title{ | |
margin-top: 0; | |
margin-bottom: 2rem; | |
} | |
.page{ | |
min-height: 100vh; | |
display: flex; | |
flex-direction: column; | |
justify-content: space-around; | |
} | |
.page__demo{ | |
flex-grow: 2; | |
padding-bottom: 5rem; | |
} | |
.main-container{ | |
padding-left: 1rem; | |
padding-right: 1rem; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.page__container{ | |
max-width: 600px; | |
} | |
.page__section{ | |
margin-top: 5rem; | |
padding: 2rem 3rem; | |
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .2); | |
background-color: #512DA8; | |
color: #fff; | |
border-radius: 2px; | |
} | |
.footer{ | |
padding-top: 1rem; | |
padding-bottom: 1rem; | |
text-align: center; | |
font-size: 1.4rem; | |
} | |
@media screen and (min-width: 641px){ | |
.footer__container{ | |
display: flex; | |
justify-content: space-between; | |
max-width: 1200px; | |
} | |
.melnik909{ | |
margin-left: 2rem; | |
} | |
} | |
@media screen and (max-width: 640px){ | |
.melnik909{ | |
display: none; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment