A DRY modular styling framework built with SCSS using attribute modules. It is recommended to normalize your project before importing AM Strap. Ensure required browser support by using autoprefixer when compiling.
npm install am-strapbower install am-strapAt the start of your stylesheet, import individual files from the modules directory or use the all file to import all modules. To customise styles for a module, add it's config map before the import declaration and edit the relevant values.
The grid system is based on Bootstrap but uses attribute modules. Please reference their documentation for additional details on how to use it - just remember to convert to the relevant attribute modules and values.
$am-columns: 12;
$am-breakpoints: (
"xs": (
"container": fluid,
"padding": 1rem,
"width": 0px
),
"sm": (
"container": fluid,
"padding": 1rem,
"width": 420px
),
"md": (
"container": set,
"padding": 1rem,
"width": 768px
),
"lg": (
"container": set,
"padding": 2rem,
"width": 992px
),
"xl": (
"container": set,
"padding": 2rem,
"width": 1200px
)
);<div am-container>
<div am-row>
<div am-col="md-6 xs-12"></div>
<div am-col="md-3 xs-6"></div>
<div am-col="md-3 xs-6"></div>
</div>
</div><div am-col="sm-6" am-push="sm-6"></div>
<div am-col="sm-6" am-pull="sm-6"></div><div am-col="md-6" am-offset="md-3"></div><div am-col="md-6" am-hidden="xs sm"></div>
<div am-col="xs-12" am-visible="xs sm"></div>@media #{$only-sm} {
// Styles for sm only
}@media #{$above-md} {
// Styles for above md
}@media #{$below-lg} {
// Styles for below lg
}$am-btn: (
"height": 3rem,
"fill-color": #ffffff,
"fill-background-color": #333333,
"ghost-color": #111111,
"ghost-border-color": #111111,
"ghost-border-width": 2px,
"loading-background-color": #333333
);- ghost
- fill
- tick (optional hover state)
- arrow (optional hover state)
<a href="" am-btn="ghost">Text</a>
<a href="" am-btn="fill">Text</a>
<a href="" am-btn="ghost tick">Text</a>
<a href="" am-btn="fill arrow">Text</a>$am-form: (
"color": #111111,
"input-height": 3rem,
"padding": 1rem,
"border-width": 2px,
"border-color": #cccccc,
"background-color": transparent,
"checkbox-height": 2rem,
"checkbox-checked-size": 1.25rem,
"placeholder-color": #888888,
"response-negative-color": #ed9696,
"response-positive-color": #9bd49b
);- input
- textarea
- select
- checkbox
<input type="text" am-form="input"><textarea am-form="textarea"></textarea><div am-form="select">
<select>
<option selected="true" disabled="disabled">--Select--</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
</select>
</div><div am-form="checkbox">
<input type="checkbox" id="checkbox-1">
<label for="checkbox-1"></label>
<label for="checkbox-1">Label text</label>
</div>- clear
- left
- right
- none
- initial
- inherit
<div am-float="clear">
<div am-float="left">
Element floated left
</div>
<div am-float="right">
Element floated right
</div>
</div>- left
- right
- center
- justify
- initial
- inherit
<div am-align="left">
Text aligned left
</div>
<div am-align="right">
Text aligned right
</div>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent