YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar danpoole asked

My Own List Formatting for UIkit

This is not a question but I was a bit bored with the standard UIkit list formatting, I miss the ticks and other icons so I made some of my own using FontAwesome.

Just insert this in your custom.css file, it automatically makes the default as ticks. I have made the following variations

  • dp-arrow
  • dp-checkbox
  • dp-circle
  • dp-circle-check
  • dp-star
  • dp-chevron
  • dp-none

e.g. <ul class="uk-list dp-arrow"> if for some reason the icons don't appear then use 'dp-list' in the class.

By default this will add a check to all UIKit list items in articles & modules, e.g. <ul class="uk-list"> same with uk-list-line & uk-list-striped

Just use dp-none in the class to remove unwanted ones.

/* ========== List Formatting :: START ========== */  
article .uk-list > li,  
.dp-list.uk-list > li,  
.mceContentBody .uk-list > li,  
[class^="tm-top-"] .uk-list > li,  
[class^="tm-bottom-"] .uk-list > li {  
    margin-left: 15px;  
    padding-left: 30px;  
}  
article .uk-list > li:before,  
.dp-list.uk-list > li:before,  
.mceContentBody .uk-list > li:before,  
[class^="tm-top-"] .uk-list > li:before,  
[class^="tm-bottom-"] .uk-list > li:before {  
    content: "\f14a"; /* ticks */  
    font-family: FontAwesome;  
    display: inline-block;  
    margin-left: -20px;  
    padding-right: 6px;  
}  
/* -------- dp-none -------- */  
article .uk-list.dp-none > li,  
uk-list.dp-none > li,  
.mceContentBody .uk-list.dp-none > li,  
[class^="tm-top-"] .uk-list.dp-none > li,  
[class^="tm-bottom-"] .uk-list.dp-none > li {  
    margin-left: 15px;  
    padding-left: 15px;  
}  

article .dp-none > li:before,  
.dp-list.dp-none > li:before,  
.mceContentBody .dp-none > li:before,  
[class^="tm-top-"] .dp-none > li:before,  
[class^="tm-bottom-"] .dp-none > li:before {  
    content: "";   
}  
/* -------- dp-arrow -------- */  
article .dp-arrow > li:before,  
.dp-list.dp-arrow > li:before,  
.mceContentBody .dp-arrow > li:before,  
[class^="tm-top-"] .dp-arrow > li:before,  
[class^="tm-bottom-"] .dp-arrow > li:before {  
    content: "\f0a9"; /* arrow */  
}  
/* -------- dp-checkbox -------- */  
article .dp-checkbox > li:before,  
.dp-list.dp-checkbox > li:before,  
.mceContentBody .dp-checkbox > li:before,  
[class^="tm-top-"] .dp-checkbox > li:before,  
[class^="tm-bottom-"] .dp-checkbox > li:before {  
    content: "\f046"; /* checkbox */  
}  
/* -------- dp-circle -------- */  
article .dp-dot-circle > li:before,  
.dp-list.dp-dot-circle > li:before,  
.mceContentBody .dp-dot-circle > li:before,  
[class^="tm-top-"] .dp-dot-circle > li:before,  
[class^="tm-bottom-"] .dp-dot-circle > li:before {  
    content: "\f192"; /* dot-circle */  
}  
/* -------- dp-circle-check -------- */  
article .dp-circle-check > li:before,  
.dp-list.dp-circle-check > li:before,  
.mceContentBody .dp-circle-check > li:before,  
[class^="tm-top-"] .dp-circle-check > li:before,  
[class^="tm-bottom-"] .dp-circle-check > li:before {  
    content: "\f05d"; /* circle-check */  
}  
/* -------- dp-star -------- */  
article .dp-star > li:before,  
.dp-list.dp-star > li:before,  
.mceContentBody .dp-star > li:before,  
[class^="tm-top-"] .dp-star > li:before,  
[class^="tm-bottom-"] .dp-star > li:before {  
    content: "\f005"; /* star */  
}  
/* -------- dp-chevron -------- */  
article .dp-chevron > li:before,  
.dp-list.dp-chevron > li:before,  
.mceContentBody .dp-chevron > li:before,  
[class^="tm-top-"] .dp-chevron > li:before,  
[class^="tm-bottom-"] .dp-chevron > li:before {  
    content: "\f138"; /* chevron */  
}  
/* -------- This is for 2nd level list points :: default tick -------- */  
article .uk-list > li > ul > li,  
.dp-list.uk-list > li > ul > li,  
.mceContentBody .uk-list > li > ul > li,  
[class^="tm-top-"] .uk-list > li > ul > li,  
[class^="tm-bottom-"] .uk-list > li > ul > li {  
    margin-left: 20px;  
}  
article .uk-list > li > ul > li:before,  
.dp-list.uk-list > li > ul > li:before,  
.mceContentBody .uk-list > li > ul > li:before,  
[class^="tm-top-"] .uk-list > li > ul > li:before,  
[class^="tm-bottom-"] .uk-list > li > ul > li:before {  
    content: "\f054";  
    font-family: FontAwesome;  
    display: inline-block;  
    margin-left: -20px;  
    padding-right: 6px;  
}  
/* ========== List Formatting :: END ========== */

Image

  • UIkit
  • Tutorial

Edited

1 Answer

Know someone who can answer? Share a link to this question via email or twitter.