Free shipping on orders over $110 inc. GST to Metro areas
Recently Viewed
Saved Items
Need help
My Cart
Search
Menu
logo
  • Home
  • Overdose/fashion Styleguide

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>
Regular Button Regular Button

Link Button Primary Button Primary Button Alternative 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
Large Button Large Button
<a href="#" class="action primary _small">Large Button</a>
<a href="#" class="action secondary _small">Large Button</a>
Small Button Small Button
<a href="#" class="action primary _small">Small Button</a>
<a href="#" class="action secondary _small">Small Button</a>
Wide Button

Wide Button
<a href="#" class="action primary _wide">Wide Button</a>
<a href="#" class="action secondary _wide">Wide Button</a>
Disabled Button

Disabled Button 
<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"

Primary Button Secondary Button Alternative Button Link Button
.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);
}
Primary Button

Primary Button

Primary Button
.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);
}