LIST PRESETS MADE WITH MOD CSS

See below some examples on how to make a List type style with MOD CSS. We are going to use some effect (hover, focus) and set custom background, color, fonts etc...

To get the code snippet, click to right, on icon

Set bullet type with MOD-CSS

For any list, set bullet type you want like below.

  • disc
  • square
  • georgian
  • circle
  • decimal
  • Lower roman
  • Upper alpha
  • None
HTML 
                    
    <ul>
        <li :box="ls[disc]">disc</li>
        <li :box="ls[square]">square</li>
        <li :box="ls[georgian]">georgian</li>
        <li :box="ls[circle]">circle</li>
        <li :box="ls[decimal]">decimal</li>
        <li :box="ls[lower-roman]">Lower roman</li>
        <li :box="ls[upper-alpha]">Upper alpha</li>
        <li :box="ls[none]">None</li>
    </ul>

    //or just apply on <ul> for setting on all <li>
    <ul :box="ls[georgian]></ul>

Custom bullets with MOD-CSS

In this example, we use SVG and PNG like bullet.
You can do this with MOD CSS.

With svg
  • John DOE - USA
  • Bill GATES - USA
With png
  • Dev GEOS - CI
  • Jack MA - CHN
HTML 
                    
    <!-- SVG -->
     <ul :box="ls[url(/static/img/flag.svg)]">
        <li> John DOE - USA</li>
        <li> Bill GATES - USA</li>
    </ul>

    <!-- PNG -->
    <ul :box="ls[url(/static/img/foot_.png)]">
        <li>Dev GEOS - CI</li>
        <li>Jack MA - CHN</li>
    </ul>

Remove bullet

  • Dev GEOS - CI
  • Jack MA - CHN
HTML 
                    
    <ul :box="ls[none]">
        <li> Dev GEOS - CI</li>
        <li> Jack MA - CHN</li>    
    </ul>

List style table with MOD-CSS

Like a table cells, we set style on classname before setting. Each line will get really nice design.

  • John DOE - UK
  • Dev GEOS - CI
  • Jack MA - CHN
  • Bill GATES - USA
HTML 
                    
    //Define class
    <div :var=".ul0 > *{ p[6px 15px] bg[#50505070] bd[.25px solid #ADD8E640] co[#ADD8E6] && first-child: br[6px 6px 2px 2px] && last-child: br[2px 2px 6px 6px] }"></div>
    
    //set new class
    <ul :box="ls[none] p[0] w[90%]" class="ul0">
        <li> John DOE - UK</li>
        <li> Dev GEOS - CI</li>
        <li> Jack MA - CHN</li>
        <li> Bill GATES - USA</li>
    </ul>

List style card with MOD-CSS

We re-use previous example and set background-color in two style : light and dark.

  • Dev GEOS - CI
  • Jack MA - CHN
  1. John DOE - USA
  2. Dev GEOS - CI
HTML 
                    
    <!-- light -->
    <div :var=".ul1 > *{ p[4px 8px] m.bt[4px] bd[.25px solid lightblue] bg[#f4f4f4] br[.3rem] bx.sh[0px 2px 4px #505050] co[#404040] }"></div>
    <ul :box="ls[none] p[0] w[100%]" class="ul1">
        <li>Dev GEOS - CI</li>
        <li>Jack MA - CHN</li>                
    </ul>    

    <!-- dark -->
    <div :var=".ol0 > *{ p[4px 8px] m.bt[4px] bd[.25px solid #2f4a83] bg[#3d4353] co[white] br[2px] }"></div>
    <ol :box="w[100%] ls.pos[inside] p[0]" class="ol0">
        <li>John DOE - USA</li>
        <li>Dev GEOS - CI</li>                
    </ol>

List with hover effects

We got to add hover effect, background color change when it is fired.

  • Dev GEOS - CI
  • Jack MA - CHN
  1. John DOE - USA
  2. Dev GEOS - CI
HTML 
                    
    <!-- light -->
    <div :var=".ul2 > *{ p[4px 8px] m.bt[4px] bd[.25px solid lightblue] bg[#f4f4f4] br[.3rem] bx.sh[0px 2px 4px #505050] co[#404040] }"></div>
    <div :var=".ul2 > *:hover{ bg[lightgray] co[#505050] fo.wg[bold] }"></div>
    
    <ul :box="ls[none] p[0] w[100%]" class="ul2">
        <li>Dev GEOS - CI</li>
        <li>Jack MA - CHN</li>                
    </ul>    

    <!-- dark -->
    <div :var=".ol1 > *{ p[4px 8px] m.bt[4px] bd[.25px solid #2f4a83] bg[#3d4353] co[white] br[2px] && hover: bg[#282c34] bd.co[none] co[lightblue] }"></div>
    <ol :box="w[100%] ls.pos[inside] p[0]" class="ol1">
        <li>John DOE - USA</li>
        <li>Dev GEOS - CI</li>                
    </ol>

Colored with MOD-CSS

  1. John DOE - UK
  2. Dev GEOS - CI
  3. Jack MA - CHN
  4. Bill GATES - USA
  5. Zig ZIGLAR - USA
HTML 
                    
    // We set selector
    <div :var=".ol3 > *{ p[8px] m.bt[4px] bd[.25px solid #2f4a83] br[.3rem 2px] && hover: bg[#282c34] co[lightgray] }"></div>
    
    //adding class
    <ol :box="ls.pos[inside] co[white]" class="ol3">
        <li :box="co[gray] bg[white]">John DOE - UK</li>
        <li :box="bg[#ff8929]">Dev GEOS - CI</li>
        <li :box="bg[#ff4757]">Jack MA - CHN</li>
        <li :box="bg[#46c93a]">Bill GATES - USA</li>
        <li :box="co[blue] bg[#3bdec8]">Zig ZIGLAR - USA</li>
    </ol>

Horizontal List with MOD-CSS

We display list inline.
In this example, we are setting the selector directly on the element.

  • John DOE - UK
  • Dev GEOS - CI
  • Jack MA - CHN
  • Bill GATES - USA
HTML 
                    
    <ul class="ul3" :box=".ul3 > *{ d[inline] m.rg[12px] }">
        <li>John DOE - USA</li>
        <li>Dev GEOS - CI</li>
        <li>Jack MA - CHN</li>
        <li>Bill GATES - USA</li>            
    </ul>

Don't forget, all selectors defined with :box remain visible in the DOM after rendering.