Style

Requirement



  
    ...
    
    
    ...
  
  ...

Layout


:root {
 --zb-contain-lg : 94;
 --zb-contain : 80;
 --zb-contain-md : 62;
 --zb-contain-sm : 46;
}
.contain:lg
.contain
.contain:md
.contain:sm

Width

.w-100 (100%)
.w-95 (95%)
.w-90 (90%)
.w-85 (85%)
.w-80 (80%)
.w-75 (75%)
.w-70 (70%)
.w-66 (66%)
.w-65 (65%)
.w-60 (60%)
.w-55 (55%)
.w-50 (50%)
.w-45 (45%)
.w-40 (40%)
.w-35 (35%)
.w-33 (33%)
.w-30 (30%)
.w-25 (25%)
.w-20 (20%)
.w-15 (15%)
.w-10 (10%)
.w-5 (5%)
.left
.w-60.left
.right
.w-60.right

Flex

					
:root {
 --zb-flex-space : 2.5%;
}
  • .flex
  • .group

.flex

div
div
div
div

.flex

.w-50
.w-25
.w-25

.flex.group

.w-50
.w-25
.w-25
.w-33
.w-66
.w-20
.w-20
.w-20
.w-20

.flex.group

.w-50
.w-25
.w-25
.w-33
.w-66
.w-20
.w-20
.w-20
.w-20

Position

Horizontale

.flex.fit

.w-33

.w-33


.flex.left

.w-33


.flex.center

.w-33


.flex.right

.w-33

Vertical

.flex.top

.w-33

.w-33

.w-33


.flex.middle

.w-33

.w-33

.w-33


.flex.bottom

.w-33

.w-33

.w-33

Default responsive ( + get more infos )

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ get more infos

Backgrounds


:root {
 --zb-color-1 : #4490A0;
 --zb-color-2 : #65ab6f;
 --zb-color-3 : #5B509E;
 --zb-info: #2f99c3;
 --zb-success: #64c733;
 --zb-warning: #fba500;
 --zb-alert: #da0b0b;
 --zb-black: #262626;
 --zb-dark: #464646;
 --zb-light: #f2f2f2;
}
.color:1
.color:2
.color:3
.info
.success
.warning
.alert
.black
.dark
.white
.light

Buttons



.btn.s6
.btn.s5
.btn
.btn.s4
.btn.s3
.btn.s2
.btn.s1

Dropdown

  • .dropdown
  • .flip
  • .naked


    

  
    
    
  • item 1 
    • 
    
  • item 2 
    • 
    
  • item 3 
    •
  • item 1
  • item 2
  • item 3


    

  
    
    
  • item 1 
    • 
    
  • item 2 
    • 
    
  • item 3 
    •
  • item 1
  • item 2
  • item 3


    

  
    
    
  • item 1 
    • 
    
  • item 2 
    • 
    
  • item 3 
    •
  • item 1
  • item 2
  • item 3

Text

.left

Lorem ipsum dolor sit amet, adipiscing elit, sed diam.

.fit

Lorem ipsum dolor sit amet, adipiscing elit, sed diam.

.center

Lorem ipsum dolor sit amet, adipiscing elit, sed diam.

.right

Lorem ipsum dolor sit amet, adipiscing elit, sed diam.

.s6

.s5

.s4

.s3

.s2

.s1

.t-color:1

.t-color:2

.t-color:3

.t-info

.t-success

.t-warning

.t-alert

.t-thin

.t-soft

.t-bold

<form>

  • .zb
  • .flat
  • Default

<liste>

  • .zb
  • .align
  • .align.flip
  • Default
    
  
  • 
    List item 1
    
      
      
    •  Sublist 1
        
        
          
      • ...
        • 
          
      • ...
        • 
        
      
      
      • 
      
    •  Sublist 2 
      • 
      
    •  Sublist 3 
      • 
    
    
  
    • 
  
  •  List item 2 
    • 
  
  •  List item 3 
    •

ul.zb

  • List item 1
    • Sublist 1
      • Lorem ipsum
        • Lorem Ipsum
        • dolor
      • dolor
        • Lorem Ipsum
        • dolor
        • sit amet
      • sit amet
    • Sublist 2
    • Sublist 3
  • List item 2
  • List item 3
    
  
  • 
    List item 1
    
      
      
    •  Sublist 1
        
        
          
      • ...
        • 
          
      • ...
        • 
        
      
      
      • 
      
    •  Sublist 2 
      • 
      
    •  Sublist 3 
      • 
    
    
  
    • 
  
  •  List item 2 
    • 
  
  •  List item 3 
    •

.align

  • List item 1
    • Sublist 1
      • Lorem ipsum
        • Lorem Ipsum
        • dolor
      • dolor
        • Lorem Ipsum
        • dolor
        • sit amet
      • sit amet
    • Sublist 2
    • Sublist 3
  • List item 2
  • List item 3
    
  
  • 
    List item 1
    
      
      
    •  Sublist 1
        
        
          
      • ...
        • 
          
      • ...
        • 
        
      
      
      • 
      
    •  Sublist 2 
      • 
      
    •  Sublist 3 
      • 
    
    
  
    • 
  
  •  List item 2 
    • 
  
  •  List item 3 
    •

.flip

  • List item 1
    • Sublist 1
      • Lorem ipsum
        • Lorem Ipsum
        • dolor
      • dolor
        • Lorem Ipsum
        • dolor
        • sit amet
      • sit amet
    • Sublist 2
    • Sublist 3
  • List item 2
  • List item 3
    
  
  • 
    List item 1
    
      
      
    •  Sublist 1
        
        
          
      • ...
        • 
          
      • ...
        • 
        
      
      
      • 
      
    •  Sublist 2 
      • 
      
    •  Sublist 3 
      • 
    
    
  
    • 
  
  •  List item 2 
    • 
  
  •  List item 3 
    •

Default

  • List item 1
    • Sublist 1
      • Lorem ipsum
        • Lorem Ipsum
        • dolor
      • dolor
        • Lorem Ipsum
        • dolor
        • sit amet
      • sit amet
    • Sublist 2
    • Sublist 3
  • List item 2
  • List item 3

<table>

  • .zb
  • .flat
  • Default


   Lorem ipsum dolor sit amet 

  
     
 Lorem 
      ipsum 
      Dolor 
  


  

      sit 
      amet 
      50 
  


 

  
     
 sit 
      amet 
      50

table.zb

Lorem ipsum dolor sit amet
Lorem ipsum Dolor
sit amet 50
sit amet 50
sit amet 50
sit amet 50
sit amet 50 


   Lorem ipsum dolor sit amet 
  
  
    
 Lorem 
     ipsum 
     Dolor 
  

  
  

     sit 
     amet 
     50 
  

  
  
  
  
    
 sit 
     amet 
     50

.flat

Lorem ipsum dolor sit amet
Lorem ipsum Dolor
sit amet 50
sit amet 50
sit amet 50
sit amet 50
sit amet 50 


   Lorem ipsum dolor sit amet 
  
  
    
 Lorem 
     ipsum 
     Dolor 
  

  
  

     sit 
     amet 
     50 
  

  
  
  
  
    
 sit 
     amet 
     50

Default

Lorem ipsum dolor sit amet
Lorem ipsum Dolor
sit amet 50
sit amet 50
sit amet 50
sit amet 50
sit amet 50

Padding

  • Global
  • Top
  • bottom
  • left
  • right
  • X
  • Y

.p-{n}

{n} : 30, 25, 20, 15, 10, 5, 0 px
.p-5
.p-10
.p-15
.p-20
.p-25
.p-30
{n} : 1, 2, 3 

:root {
 --zb-p-1 : 2.5rem;
 --zb-p-2 : 3rem;
 --zb-p-3 : 4rem;
}
.p-1
.p-2
.p-3

.pt-{n}

{n} : 30, 25, 20, 15, 10, 5, 0 px
.pt-5
.pt-10
.pt-15
.pt-20
.pt-25
.pt-30
{n} : 1, 2, 3
.pt-1
.pt-2
.pt-3

.pb-{n}

{n} : 30, 25, 20, 15, 10, 5, 0 px
.pb-5
.pb-10
.pb-15
.pb-20
.pb-25
.pb-30
{n} : 1, 2, 3
.pb-1
.pb-2
.pb-3

.pl-{n}

{n} : 30, 25, 20, 15, 10, 5, 0 px
.pl-5
.pl-10
.pl-15
.pl-20
.pl-25
.pl-30
{n} : 1, 2, 3
.pl-1
.pl-2
.pl-3

.pr-{n}

{n} : 30, 25, 20, 15, 10, 5, 0 px
.pr-5
.pr-10
.pr-15
.pr-20
.pr-25
.pr-30
{n} : 1, 2, 3
.pr-1
.pr-2
.pr-3

.px-{n}

{n} : 30, 25, 20, 15, 10, 5, 0 px
.px-5
.px-10
.px-15
.px-20
.px-25
.px-30
{n} : 1, 2, 3
.px-1
.px-2
.px-3

.py-{n}

{n} : 30, 25, 20, 15, 10, 5, 0 px
.py-5
.py-10
.py-15
.py-20
.py-25
.py-30
{n} : 1, 2, 3
.py-1
.py-2
.py-3

Margin

  • Global
  • Top
  • bottom
  • left
  • right
  • X
  • Y

.m-{n}

{n} : 30, 25, 20, 15, 10, 5, 0 px
.m-5
.m-10
.m-15
.m-20
.m-25
.m-30
{n} : 1, 2, 3 

:root {
 --zb-m-1 : 2.5rem;
 --zb-m-2 : 3rem;
 --zb-m-3 : 4rem;
}
.m-1
.m-2
.m-3

.mt-{n}

{n} : 30, 25, 20, 15, 10, 5, 0 px
.mt-5
.mt-10
.mt-15
.mt-20
.mt-25
.mt-30
{n} : 1, 2, 3
.mt-1
.mt-2
.mt-3

.mb-{n}

{n} : 30, 25, 20, 15, 10, 5, 0 px
.mb-5
.mb-10
.mb-15
.mb-20
.mb-25
.mb-30
{n} : 1, 2, 3
.mb-1
.mb-2
.mb-3

.ml-{n}

{n} : 30, 25, 20, 15, 10, 5, 0 px
.ml-5
.ml-10
.ml-15
.ml-20
.ml-25
.ml-30
{n} : 1, 2, 3
.ml-1
.ml-2
.ml-3

.mr-{n}

{n} : 30, 25, 20, 15, 10, 5, 0 px
.mr-5
.mr-10
.mr-15
.mr-20
.mr-25
.mr-30
{n} : 1, 2, 3
.mr-1
.mr-2
.mr-3

.mx-{n}

{n} : 30, 25, 20, 15, 10, 5, 0 px
.mx-5
.mx-10
.mx-15
.mx-20
.mx-25
.mx-30
{n} : 1, 2, 3
.mx-1
.mx-2
.mx-3

.my-{n}

{n} : 30, 25, 20, 15, 10, 5, 0 px
.my-5
.my-10
.my-15
.my-20
.my-25
.my-30
{n} : 1, 2, 3
.my-1
.my-2
.my-3

Phone

  • Default
  • Freeze
  • Width
  • Position
  • Display

.w-90

.w-75

.w-50


.flex

.w-50

.w-25

.w-25

.w-33

.w-66


.w-90

.w-75

.w-50


.flex

.w-50

.w-25

.w-25

.w-33

.w-66



.sm

.w-90.sm

.w-75.sm

.w-50.sm


.flex.sm

.w-50

.w-25

.w-25

.w-33

.w-66


.w-90.sm

.w-75.sm

.w-50.sm


.flex.sm

.w-50

.w-25

.w-25

.w-33

.w-66



.sm:w-{n%}

.w-90 .sm:w-100

.w-75 .sm:w-90

.w-50 .sm:w-80


.flex

.w-50
.sm:w-33

.w-25
.sm:w-33

.w-25
.sm:w-33

.w-33
.sm:w-50

.w-66
.sm:w-50


.w-90 .sm:w-100

.w-75 .sm:w-90

.w-50 .sm:w-80


.flex

.w-50
.sm:w-33

.w-25
.sm:w-33

.w-25
.sm:w-33

.w-33
.sm:w-50

.w-66
.sm:w-50



.sm:fit, .sm:left, .sm:center, .sm:right

.left.sm:center


.center.sm:right


.right.sm:left

.left.sm:center


.center.sm:right


.right.sm:left

.sm:hide, .sm:show

.color:1 .sm:hide
.color:3 .sm:show
.color:1 .sm:hide
.color:3 .sm:show

Tablet

  • Default
  • Freeze
  • Width
  • Position
  • Display

.w-90

.w-75

.w-50


.flex

.w-50

.w-25

.w-25

.w-33

.w-66


.w-90

.w-75

.w-50


.flex

.w-50

.w-25

.w-25

.w-33

.w-66



.md

.w-90.md

.w-75.md

.w-50.md


.flex.md

.w-50

.w-25

.w-25

.w-33

.w-66


.w-90.md

.w-75.md

.w-50.md


.flex.md

.w-50

.w-25

.w-25

.w-33

.w-66



.md:w-{n%}

.w-90 .md:w-100

.w-75 .md:w-90

.w-50 .md:w-80


.flex

.w-50
.md:w-33

.w-25
.md:w-33

.w-25
.md:w-33

.w-33
.md:w-50

.w-66
.md:w-50


.w-90 .md:w-100

.w-75 .md:w-90

.w-50 .md:w-80


.flex

.w-50
.md:w-33

.w-25
.md:w-33

.w-25
.md:w-33

.w-33
.md:w-50

.w-66
.md:w-50



.md:fit, .md:left, .md:center, .md:right

.left.md:center


.center.md:right


.right.md:left

.left.md:center


.center.md:right


.right.md:left

.md:hide, .md:show

.color:1 .md:hide
.color:3 .md:show
.color:1 .md:hide
.color:3 .md:show