Overdose/fashion Styleguide
Grid system
Go to Grid system to get more examples
One of three columns
One of three columns
One of three columns
<div class="container"> <div class="row"> <div class="col-md"> One of three columns </div> <div class="col-md"> One of three columns </div> <div class="col-md"> One of three columns </div> </div> </div>
Equal-width
1 of 2
2 of 2
1 of 3
2 of 3
3 of 3
<div class="container"> <div class="row"> <div class="col"> 1 of 2 </div> <div class="col"> 2 of 2 </div> </div> <div class="row"> <div class="col"> 1 of 3 </div> <div class="col"> 2 of 3 </div> <div class="col"> 3 of 3 </div> </div> </div>
Grid Mixins
Go to "/vendor/overdose/theme-fashion/web/css/source/expand/_grid.less" to see more examples
col
col
.example-container { .lib-make-container(); .lib-make-container-max-width(); }
col
col
.example-container-fluid { .lib-make-container(); }
col
col
.example-row { .lib-make-row(); & > .@{grid-class-column} { .lib-make-col-ready(); .lib-vendor-prefix-flex-basis(0); .lib-vendor-prefix-flex-grow(1); } }
col
col
.example-col { .lib-make-col-ready(); .lib-vendor-prefix-flex-basis(0); .lib-vendor-prefix-flex-grow(1); }
col-auto
col
col-auto
.example-col-auto { .lib-make-col-ready(); .lib-make-col-auto(); }
Buttons
<button type="button">Regular Button</button> <button type="button" class="action">Regular Button</button> <button type="button" class="action primary">Primary Button</button> <button type="button" class="action secondary">Secondary Button</button> <button type="button" class="action alternative">Alternative Button</button>
<a href="#">Regular Button</a> <a href="#" class="action">Regular Button</a> <a href="#" class="action link">Action Button</a> <a href="#" class="action primary">Primary Button</a> <a href="#" class="action secondary">Secondary Button</a> <a href="#" class="action alternative">Alternative Button</a>
Buttons Sizes
<a href="#" class="action primary _small">Large Button</a> <a href="#" class="action secondary _small">Large Button</a>
<a href="#" class="action primary _small">Small Button</a> <a href="#" class="action secondary _small">Small Button</a>
<a href="#" class="action primary _wide">Wide Button</a> <a href="#" class="action secondary _wide">Wide Button</a>
<a href="#" class="action primary disabled">Disabled Button</a> <button type="button" class="action primary" disabled="disabled">Disabled Button</button> <a href="#" class="action secondary disabled">Disabled Button</a> <button type="button" class="action secondary" disabled="disabled">Disabled Button</button>
Buttons Mixins
For more information about buttons see at "/vendor/overdose/theme-fashion/web/css/source/_buttons.less"
.example-button-primary { &:extend(.action.primary all); } .example-button-secondary { &:extend(.action.secondary all); } .example-button-alternative { &:extend(.action.alternative all); } .example-button-link { &:extend(.action.link all); }
.example-button-primary-small { &:extend(.action.primary all); &:extend(.action._small all); } .example-button-primary-large { &:extend(.action.primary all); &:extend(.action._large all); } .example-button-primary-wide { &:extend(.action.primary all); &:extend(.action._wide all); }