alabaster

v1.1.14

Published

2 years ago

A lightweight and flexible tool set to build awesome web platform.

Downloads

0High
0Medium
0Low

Alabaster

A lightweight and flexible tool set to build awesome web platform.

Alabaster is a sass tool sets develop to build awesome web site faster and easy. It's build especially on how we develop the frontend in Axiacore.

What you would find

We use a concept call modular scale to keep the vertical rhythm and consistency in our design. We develop some mixin so we can layout the design easy and faster.

You are going to find some helpers so you can write smooth Sass.

Quick install

Alabaster is constantly in development.

Yarn

yarn add alabaster

NPM

npm i alabaster

Usage

Call the file alabaster.sass in the file that compile your Sass and be sure you call it before the Sass's files you use to build your web.

@import 'route-to-file/alabaster.sass'
@import 'header'

You can change the variables default value, by calling them before you call the alabaster.sass file and add !default to the end of the line.

$ratio: 1.333 !default

@import 'route-to-file/alabaster.sass'
@import 'header'

Modular scale

Used to keep the vertical rhythm and consistency in our design.

Variables

Name | Default | Description ------ | ------- | ----------- $base-font-size | 100 | Font size for mobile in % $base-font-size-tablet | 112.5 | Font size for tablet and above in % $line-height | 1.45 | Line height fonts for mobile $line-height-tablet | 1.7 | Line height fonts tablet and above $ratio | 1.5 | Is multiplied by the base to produce the scale of numbers that are related

Sass functions:

ms(value) Returns a value in rem for the font size based in the modular scale.

dms-rem-mobile(value) Returns a value in rem for distances in mobile.

dms-rem-tablet(value) Returns a value in rem for distances in tablet and above.

dms-px-mobile(value) Returns a value in px for distances in mobile.

dms-px-tablet(value) Returns a value in px for distances in tablet and above.

Responsive breakpoints

Alabaster is developed to be mobile first, we use media queries to create breakpoints for layouts. These breakpoints are based on minimum viewport widths and allow to scale up elements as the viewport changes.

Variables

Name | Default | Description ------ | ------- | ----------- $mobile | 500px | Media query breakpoint for 500px and above $tablet | 768px | Media query breakpoint for 500px and above $desktop | 994px | Media query breakpoint for 994px and above $desktop-md| 1200px | Media query breakpoint for 1200px and above $desktop-lg | 1400px | Media query breakpoint for 1400px and above

Example:

@include breakpoint($tablet)
	code here...

Components

Alabaster includes the following components:

Wrapper container

The .wrapper-container class is used to wrap all page content and give it a max width. It is used to preserve the design in very large screens.

Variables

Name | Default | Description ------ | ------- | ----------- $wrapper-container-max-width | 1920px | Max width of the container in px $wrapper-container-shadow | 0 0 30px -15px rgba(0, 0, 0, 1) | Box shadow of the container $wrapper-background-color | white | Background color of the container

Example:

<body>
	<div class="wrapper-container">
		...
	</div>
</body>

Container

The .container class is used to center content horizontally.

Variables

Name | Default | Description ------ | ------- | ----------- $container-max-width | 1230px | Max width of the container in px $container-xs-max-width | 370px | Max width of the extra small container in px $container-sm-max-width | 570px | Max width of the small container in px $container-md-max-width | 870px | Max width of the medium container in px

Example:

<div class="container">
	...
</div>
<div class="container container_xs">
	...
</div>
<div class="container container_sm">
	...
</div>
<div class="container container_md">
	...
</div>

Grid

Flexbox grid to build layouts.

Variables

Name | Default | Description ------ | ------- | ----------- $gutter | 20px | Space between columns in mobile $gutter-tablet | 20px | Space between columns in tablet and above $columns-number | 12 | Columns number for the grid $grid-background-color | rgba(black, .1) | Visual guide of columns grid (only develop)

Building a grid layout is simple:

Add class .columns to container
Add elements with class .col

Example:

<div class="columns">
	<div class="col"></div>
	<div class="col"></div>
</div>

Modifiers in columns container

.columns_no-gutter Remove the space between columns.

<div class="columns columns_no-gutter">
	...
</div>

.columns_no-gutter-x Remove the space between columns in the x axis.

<div class="columns columns_no-gutter-x">
	...
</div>

.columns_no-gutter-y Remove the space between columns in the y axis.

<div class="columns columns_no-gutter-y">
	...
</div>

.columns_mobile Display the grid for mobile.

<div class="columns columns_mobile">
	...
</div>

.columns_mobile-xl Display the grid for breakpoint $mobile and above.

<div class="columns columns_mobile-xl">
	...
</div>

.columns_multiline Columns items will wrap onto multiple lines.

<div class="columns columns_multiline">
	...
</div>

.columns_centered Center columns items horizontally.

<div class="columns columns_centered">
	...
</div>

.columns_align-items-center Align columns items to the top.

<div class="columns columns_align-items-center">
	...
</div>

.columns_align-items-end Align columns items to the bottom.

<div class="columns columns_align-items-end">
	...
</div>

.columns_show-grid Shows a visual guide of the grid for develop purpose.

<div class="columns columns_show-grid">
	...
</div>

Modifiers in columns element

.col_x Size of the column. X = number of columns (from 1 to $columns-number).

<div class="columns">
	<div class="col col_2">...</div>
	<div class="col col_4">...</div>
</div>

A column can have different sizes at each breakpoint:

<div class="columns">
	<div class="col col_2 col_4-desktop">...</div>
	<div class="col col_4 col_2-desktop">...</div>
</div>

.col_offset-x Size of the column offset. X = number of columns (from 0 to $columns-number - 1).

<div class="columns">
	<div class="col col_2 col_offset-2">...</div>
	<div class="col col_4 col_offset-1">...</div>
</div>

A column can have different offset sizes at each breakpoint:

<div class="columns">
	<div class="col col_2 col_offset-2 col_offset-1-desktop">...</div>
	<div class="col col_4 col_offset-1 col_offset-2-desktop">...</div>
</div>

.col_narrow Column take the space it needs.

<div class="columns">
	<div class="col col_narrow">...</div>
	<div class="col">...</div>
</div>

Buttons

The .btn class can be used on <a> <button>.

Variables

Name | Default | Description ------ | ------- | ----------- $btn-height | 30px | Height of the button in mobile $btn-tablet-height | 40px | Height of the button in tablet and above $btn-sm-height | 30px | Small height of the button in mobile $btn-sm-tablet-height | $btn-sm-height | Small height of the button in tablet and above $btn-lg-height | 50px | Large height of the button in mobile $btn-lg-tablet-height | $btn-lg-height | Large height of the button in tablet and above $btn-sides-padding | 12px | Sides padding of the button in mobile $btn-sides-tablet-padding | $btn-sides-padding | Sides padding of the button in tablet and above $btn-border-radius | 0 | Border radius of the button $btn-icon-size | 24px | Size of the svg icon in mobile $btn-icon-tablet-size | $btn-icon-size | Size of the svg icon in tablet and above $icon-btn-default-size | 34px | Size of the icon button in mobile $icon-btn-default-tablet-size | $icon-btn-default-size | Size of the icon button in tablet and above $icon-btn-svg-default-size | 30px | Size of the svg icon button in mobile $icon-btn-svg-default-tablet-size | $icon-btn-svg-default-size | Size of the svg icon button in tablet and above $icon-btn-sm-size | 24px | Small size of the icon button in mobile $icon-btn-sm-tablet-size | $icon-btn-sm-size | Small size of the icon button in tablet and above $icon-btn-svg-sm-size | 20px | Small size of the svg icon button in mobile $icon-btn-svg-sm-tablet-size | $icon-btn-svg-sm-size | Small size of the svg icon button in tablet and above $icon-btn-lg-size | 44px | Large size of the icon button in mobile $icon-btn-lg-tablet-size | $icon-btn-lg-size | Large size of the icon button in tablet and above $icon-btn-svg-lg-size | 40px | Large size of the svg icon button in mobile $icon-btn-svg-lg-tablet-size | $icon-btn-svg-lg-size | Large size of the svg icon button in tablet and above $icon-btn-border-radius | 50% | Border radius of the icon button

Examples:

General button with text and svg icon:

<button class="btn">Button</button>
<button class="btn">
	<svg class="btn__svg">...</svg>
	Button
</button>

The svg icon can be on the right:

<button class="btn">
	<svg class="btn__svg btn__svg_right">...</svg>
	Button
</button>

General icon button:

<button class="btn btn_icon">
	<svg class="btn__svg">...</svg>
</button>

Modifiers

.btn_disabled Buttons look inactive. Use only in <a>, for <button> add disabled attribute.

<a class="btn btn_disabled">Button</a>
<button class="btn" disabled>Button</button>

.btn_is-full-width Button width 100%.

<button class="btn btn_is-full-width">Button</button>

.btn_shadow Button with box shadow.

<button class="btn btn_shadow">Button</button>

.btn_no-border Button without border.

<button class="btn btn_no-border">Button</button>

.btn_sm Small button.

<button class="btn btn_sm">Button</button>
<button class="btn btn_icon btn_sm">
	<svg class="btn__svg">...</svg>
</button>

.btn_lg Large button.

<button class="btn btn_lg">Button</button>
<button class="btn btn_icon btn_lg">
	<svg class="btn__svg">...</svg>
</button>

.btn_outline Remove the background color.

<button class="btn btn_outline">Button</button>
<button class="btn btn_icon btn_outline">
	<svg class="btn__svg">...</svg>
</button>

Color style

Alabaster bring 4 styles for buttons: error info success and warning

Variables

Name | Default | Description ------ | ------- | ----------- $btn-error-background-color | #c00 | Background color error $btn-error-background-color-hover | darken($btn-error-background-color, 10%) | Background color error hover $btn-error-color | $white | Text color error $btn-error-color-hover | $white | Text color error hover $btn-info-background-color | #666 | Background color info $btn-info-background-color-hover | darken($btn-info-background-color, 10%) | Background color info hover $btn-info-color | $white | Text color info $btn-info-color-hover | $white | Text color info hover $btn-success-background-color | #009c00 | Background color success $btn-success-background-color-hover | darken($btn-success-background-color, 10%) | Background color success hover $btn-success-color | $white | Text color success $btn-success-color-hover | $white | Text color success hover $btn-warning-background-color | #ca9500 | Background color warning $btn-warning-background-color-hover | darken($btn-warning-background-color, 10%) | Background color warning hover $btn-warning-color | $white | Text color warning $btn-warning-color-hover | $white | Text color warning hover

<button class="btn btn_error">Button error</button>
<button class="btn btn_info">Button info</button>
<button class="btn btn_success">Button success</button>
<button class="btn btn_warning">Button warning</button>

Forms

Simple form controls.

Variables

Name | Default | Description ------ | ------- | ----------- $inputs-height | 40px | Height of input in mobile $inputs-tablet-height | $inputs-height | Height of input in tablet and above $inputs-sides-padding | 12px | Sides padding of input in mobile $inputs-sides-tablet-padding | $inputs-sides-padding | Sides padding of input in tablet and above $textarea-height | 120px | Textarea height in mobile $textarea-tablet-height | $textarea-height | Textarea height in tablet and above $textarea-padding | 12px | Padding of textarea in mobile $textarea-tablet-padding | $textarea-padding | Padding of textarea in tablet and above $inputs-background-color | white | Background color of input $inputs-readonly-background-color | white | Background color of input with attribute readonly $inputs-color-text | #2b2b2b | Color text of input $inputs-border-color | #ebebeb | Border color of input $input-border-hover-color | #393939 | Border color of input in hover $input-background-hover-color | white | Background color of input in hover $input-border-focus-color | #2b2b2b | Border color of input in focus $input-background-focus-color | white | Background color of input in focus $select-arrow-color | #2b2b2b | Arrow color of .select class $inputs-border-radius | 0 | Border radius of input $field-help-text-color | $inputs-color-text | Text color of .field__help-text class $field-error-color-text | #f00 | Text color of .error and .errorlist class

Examples:

General form control:

<div class="field">
	<label class="field__label">Label</label>
	<input name="input">
	<div class="field__help-text"></div>
</div>

Form control inline button:

<div class="field">
	<div class="field__inline-submit">
		<input name="input">
		<button class="field__btn">Submit</button>
	</div>
</div>

Form control in two columns:

<div class="field">
	<div class="field__columns">
		<div class="field__column">
			<label class="field__label">Label</label>
			<input name="input">
		</div>
		<div class="field__column">
			<label class="field__label">Label</label>
			<input name="input">
		</div>
	</div>
</div>

Modifiers

.field__column_sm Change width in one column.

<div class="field">
	<div class="field__columns">
		<div class="field__column field__column_sm">
			<label class="field__label">Label</label>
			<input name="input">
		</div>
		<div class="field__column">
			<label class="field__label">Label</label>
			<input name="input">
		</div>
	</div>
</div>

Select

For <select> tag is necessary add a container with class .select

<div class="field">
	<label class="field__label">Label</label>
	<div class="select">
		<select name="select">...</select>
	</div>
	<div class="field__help-text"></div>
</div>

Modifiers

.select_disabled Select disabled style.

 <div class="select select_disabled">
	 <select name="select" disabled>...</select>
 </div>

.select_readonly Select readonly style.

 <div class="select select_readonly">
	 <select name="select" readonly>...</select>
 </div>

.select_is-multiple Select multiple style.

 <div class="select select_is-multiple">
	 <select name="select" multiple>...</select>
 </div>

Checkbox and Radio button

For create a checkbox or radio input import the file check-radio.sass in the file that compile your Sass and be sure you call it after the alabaster.sass file and before the Sass's files you use to build your web.

@import 'route-to-file/alabaster/alabaster'
@import 'route-to-file/alabaster/components/check-radio'
@import 'header'

Example:

<label class="check-field">
	<input class="check-field__input" type="checkbox">
	<span class="check-field__icon"></span>
	<span class="check-field__label">Text label</span>
</label>
<label class="radio-field">
	<input class="radio-field__input" type="radio">
	<span class="radio-field__icon"></span>
	<span class="radio-field__label">Text label</span>
</label>

Modifiers

.check-field_icon-right .radio-field_icon-right Changes the icon to the right.

<label class="check-field check-field_icon-right">
	<input class="check-field__input" type="checkbox">
	<span class="check-field__icon"></span>
	<span class="check-field__label">Text label</span>
</label>
<label class="radio-field radio-field_icon-right">
	<input class="radio-field__input" type="radio">
	<span class="radio-field__icon"></span>
	<span class="radio-field__label">Text label</span>
</label>

.check-field_box .radio-field_box Mixed style between general input and checkbox or radio button input.

<label class="check-field check-field_box">
	<input class="check-field__input" type="checkbox">
	<span class="check-field__icon"></span>
	<span class="check-field__label">Text label</span>
</label>
<label class="radio-field radio-field_box">
	<input class="radio-field__input" type="radio">
	<span class="radio-field__icon"></span>
	<span class="radio-field__label">Text label</span>
</label>

.check-field_disabled .radio-field_disabled Input disabled style.

<label class="check-field check-field_disabled">
	<input class="check-field__input" type="checkbox" disabled>
	<span class="check-field__icon"></span>
	<span class="check-field__label">Text label</span>
</label>
<label class="radio-field radio-field_disabled">
	<input class="radio-field__input" type="radio" disabled>
	<span class="radio-field__icon"></span>
	<span class="radio-field__label">Text label</span>
</label>

.check-field_readonly .radio-field_readonly Input readonly style.

<label class="check-field check-field_readonly">
	<input class="check-field__input" type="checkbox" readonly>
	<span class="check-field__icon"></span>
	<span class="check-field__label">Text label</span>
</label>
<label class="radio-field radio-field_readonly">
	<input class="radio-field__input" type="radio" readonly>
	<span class="radio-field__icon"></span>
	<span class="radio-field__label">Text label</span>
</label>

Number spinner

For create a number spinner input import the file number-spinner.sass in the file that compile your Sass and be sure you call it after the alabaster.sass file and before the Sass's files you use to build your web.

@import 'route-to-file/alabaster/alabaster'
@import 'route-to-file/alabaster/components/number-spinner'
@import 'header'

Variables

Name | Default | Description ------ | ------- | ----------- $number-spinner-height | 40px | Height of the number spinner $number-spinner-width | 94px | Width of the number spinner

Import number-spinner.js in your js code.

<script src="route-to-file/alabaster/js/number-spinner.js"></script>

Initialize numberSpinner plugin.

JS parameters

Name | Default | Description ------ | ------- | ----------- btnMinusSelector | .js-number-spinner-btn-minus | Selector button minus btnPlusSelector | .js-number-spinner-btn-plus | Selector button plus changeEnded | function | Event will be fired after number change onMaxValue | function | Event will be fired when number go to max limit onMinValue | function | Event will be fired when number go to min limit

Example:

<div class="js-number-spinner number-spinner">
	<button class="js-number-spinner-btn-minus number-spinner__btn" type="button">
		<svg class="number-spinner__svg">minus icon</svg>
	</button>
	<input class="number-spinner__input" type="number" value="10" min="0" max="20" step="5">
	<button class="js-number-spinner-btn-plus number-spinner__btn" type="button">
		<svg class="number-spinner__svg">plus icon</svg>
	</button>
</div>

$('.js-number-spinner').numberSpinner();
// or
$('.js-number-spinner').numberSpinner({
	changeEnded: function() {
		// Change event
	},
	onMaxValue: function() {
		// Max value event
	},
	onMinValue: function() {
		// Min value event
	}
});

Toggle

For create a toggle input import the file toggle.sass in the file that compile your Sass and be sure you call it after the alabaster.sass file and before the Sass's files you use to build your web.

@import 'route-to-file/alabaster/alabaster'
@import 'route-to-file/alabaster/components/toggle'
@import 'header'

Variables

Name | Default | Description ------ | ------- | ----------- $toggle-width | 80px | Width of the toggle $toggle-padding | 5px | Padding of the toggle $toggle-border | 1px | Border width of the toggle $toggle-circle-size | 30px | Size of the status circle

Example:

<label class="field-toggle">
	<input class="field-toggle__input" type="checkbox">
	<span class="field-toggle__container">
		<span class="field-toggle__circle"></span>
	</span>
</label>

Modifiers

.field-toggle__container_text Adds text YES and NO to the toggle.

<label class="field-toggle">
	<input class="field-toggle__input" type="checkbox">
	<span class="field-toggle__container field-toggle__container_text">
		<span class="field-toggle__circle"></span>
	</span>
</label>

Input file

For create a input file import the file file.sass in the file that compile your Sass and be sure you call it after the alabaster.sass file and before the Sass's files you use to build your web.

@import 'route-to-file/alabaster/alabaster'
@import 'route-to-file/alabaster/components/file'
@import 'header'

Import file-field.js in your js code.

<script src="route-to-file/alabaster/js/file-field.js"></script>

Create a new js FileField object.

JS parameters

Name | Default | Description ------ | ------- | ----------- inputSelector | .js-input-file | Selector to input file labelSelector | .js-file-text | Selector for element with dinamic text textLabel | Seleccionar archivo | Initial text for input

Example:

<label class="file-field">
	<input type="file" class="js-input-file file-field__input">
	<span class="js-file-text file-field__label">Seleccionar archivo</span>
	<span class="file-field__icon">icon</span>
</label>

new FileField();
// or
new FileField({
	inputSelector: '.js-new-input-file-selector';
	labelSelector: '.js-new-file-text-selector';
	textLabel: 'New text input';
});

Modifiers

.file-field_disabled Input disabled style.

<label class="file-field file-field_disabled">
	<input type="file" class="js-input-file file-field__input" disabled>
	<span class="js-file-text file-field__label">Seleccionar archivo</span>
	<span class="file-field__icon">icon</span>
</label>

.file-field_readonly Input readonly style.

<label class="file-field file-field_readonly">
	<input type="file" class="js-input-file file-field__input" disabled>
	<span class="js-file-text file-field__label">Seleccionar archivo</span>
	<span class="file-field__icon">icon</span>
</label>

Icons

The .icon class is a container for a svg icon.

Variables

Name | Default | Description ------ | ------- | ----------- $icon-default-size | 50px | Size of icon in mobile $icon-default-tablet-size | $icon-default-size | Size of icon in tablet and above $icon-svg-default-size | 35px | Size of svg icon in mobile $icon-svg-default-tablet-size | $icon-svg-default-size | Size of svg icon in tablet and above $icon-sm-size | 40px | Small size of icon in mobile $icon-sm-tablet-size | $icon-sm-size | Small size of icon in tablet and above $icon-svg-sm-size | 25px | Small size of svg icon in mobile $icon-svg-sm-tablet-size | $icon-svg-sm-size | Small size of svg icon in tablet and above $icon-lg-size | 90px | Large size of icon in mobile $icon-lg-tablet-size | $icon-lg-size | Large size of icon in tablet and above $icon-svg-lg-size | 50px | Large size of svg icon in mobile $icon-svg-lg-tablet-size | $icon-svg-lg-size | Large size of svg icon in tablet and above $icon-border-radius | 50% | Border radius of icon

Example:

<span class="icon">
	<svg class="icon__svg"></svg>
</span>

Modifiers

.icon_sm Small icon.

<span class="icon icon_sm">
	<svg class="icon__svg"></svg>
</span>

.icon_lg Large icon.

<span class="icon icon_lg">
	<svg class="icon__svg"></svg>
</span>

.icon_outline Remove the background color.

<span class="icon icon_outline">
	<svg class="icon__svg"></svg>
</span>

Color style

Alabaster bring 4 styles for icons: error info success and warning

Variables

Name | Default | Description ------ | ------- | ----------- $icon-error-background-color | #c00 | Background color error $icon-error-color | $white | Icon color error $icon-info-background-color | #666 | Background color info $icon-info-color | $white | Icon color info $icon-success-background-color | #009c00 | Background color success $icon-success-color | $white | Icon color success $icon-warning-background-color | #ca9500 | Background color warning $icon-warning-color | $white | Icon color warning

<span class="icon icon_error">...</span>
<span class="icon icon_info">...</span>
<span class="icon icon_success">...</span>
<span class="icon icon_warning">...</span>

Tables

The .table class is used on table tag.

Variables

Name | Default | Description ------ | ------- | ----------- $table-background-color | $white | Table background color $table-color | $black | Table text color $table-cell-border-color | lighten($black, 85%) | Table border color $table-cell-border-style | solid | Table border style $table-cell-border-width | 1px 0 0 | Table border width $table-cell-padding | 10px 15px | Cells padding $table-head-background-color | transparent | Table head background color $table-head-color | $table-color | Table head text color $table-head-cell-border-width | 0 0 2px | Table head border width $table-foot-background-color | transparent | Table foot background color $table-foot-color | $table-color | Table foot text color $table-foot-cell-border-width | 2px 0 0 | Table foot border width $table-row-striped-even-background-color | lighten($black, 95%) | Even row background color $table-row-striped-odd-background-color | $white | Odd row background color $table-row-hover-background-color | lighten($black, 90%) | Table row background color hover $table-row-hover-color | $black | Table row text color hover

Example:

<table class="table">
	<thead>
		<tr>
			<th>#</th>
			<th>First</th>
			<th>Last</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Value 1</td>
			<td>Value 2</td>
		</tr>
		<tr>...</tr>
	</tbody>
	<tfoot>
		<tr>
			<th>#</th>
			<th>First</th>
			<th>Last</th>
		</tr>
	</tfoot>
</table>

Modifiers

.table_bordered Add borders on all sides of table.

<table class="table table_bordered">
	...
</table>

.table_striped Add add zebra-striping to table.

<table class="table table_striped">
	...
</table>

.table_hover Enable hover state in table rows.

<table class="table table_hover">
	...
</table>

Responsive

Create responsive tables wrapping .table with .table-container

<div class="table-container">
	<table class="table">
		...
	</table>
</div>

Alert modal

Create an alert modal with handlebars js and featherlight

For create an alert modal import the files modal.sass and alert.sass in the file that compile your Sass and be sure you call it after the alabaster.sass file and before the Sass's files you use to build your web.

@import 'route-to-file/alabaster/alabaster'
@import 'route-to-file/alabaster/components/modal'
@import 'route-to-file/alabaster/components/alert'
@import 'header'

Variables

Name | Default | Description ------ | ------- | ----------- $modal-background-color | rgba($black, .7) | Modal overlay background color $modal-content-background-color | $white | Modal background color $modal-content-max-width | none | Max width modal content $alert-background-color | $white | Alert content background color $alert-max-width | 600px | Max width alert content

Import handlebars.js featherlight.js and alert.js in your js code.

<script src="route-to-file/handlebars.min.js"></script>
<script src="route-to-file/featherlight.min.js"></script>
<script src="route-to-file/alabaster/js/alert.js"></script>

Initialize showAlert plugin.

JS parameters

Name | Default | Description ------ | ------- | ----------- type | info | Alert type (error - info - success - warning) title | none | Alert title text | none | Alert text doneBtn | Aceptar | Button text done cancelBtn | Cancelar | Button text cancel loadedCallback | undefined | Event will be fired after modal loaded cancelCallback | undefined | Event will be fired when cancel button is clicked doneCallback | undefined | Event will be fired when done button is clicked

Example:

<script id="alert-modal" type="text/x-handlebars-template">
	<div class="alert">
		<button class="js-alert-btn-close btn btn_icon modal__btn-close" type="button">
			<svg class="btn__svg">...</svg>
		</button>
		<div class="alert__content">
			<div class="alert__header">
				<span class="icon icon_{{type}} alert__icon"><svg class="icon__svg">...</svg></span>
				<h3 class="alert__title">{{title}}</h3>
			</div>
			<p class="alert__text">{{{text}}}</p>
		</div>
		<div class="alert__action">
			{{#if cancelBtn}}
			<button class="js-alert-btn-cancel btn alert__btn">{{cancelBtn}}</button>
			{{/if}}
			<button class="js-alert-btn-done btn btn_{{type}} alert__btn">{{doneBtn}}</button>
		</div>
	</div>
</script>

$('#alert-modal').showAlert({
	type: 'error',
	title: 'Alert title',
	text: 'Alert text',
	cancelBtn: false,
	doneCallback: function () {
		// Done event
	}
});

Helpers

Alabaster include somes helpers to make easy sass.

Position

Provides a method for setting an element's positioning properties: position, top, right, bottom and left. Use a null value to skip an edge of the box.

Example:

.element
	@include position(absolute, 10px null null 1rem)

Size

Sets the width and height of the element.

Example:

.element
	@include size(100px, 2em)

Clearfix

Provides a way to include a clearfix for containing floats.

Example:

.element
	@include clearfix

Font smooth

Provides a way to controls the application of anti-aliasing when fonts are rendered.

Example:

.element
	@include font-smooth

Prefixer

Generates vendor prefixes.

Arguments

Name | Type | Description ------ | ------- | ----------- $property | string | Property to prefix $value | string | Value to use $prefixes | list | Vendor prefixes to output

Example:

.element
	@include prefix(appearance, none, webkit moz)

Column width

Provides a way to get the size of a column in percentage.

Example:

.element
	@include column-width(2)

Column offset

Provides a way to get the offset of a column in percentage.

Example:

.element
	@include column-offset(2)

Classes

Alabaster include some classes to help easily the construction of html.

Fit image

The .fit-image class add the property object fit = cover to <img> tag.

Example:

<figure>
	<img class="fit-image" src="image.jpg" alt="image">
</figure>

Off screen

The .off-screen class hides elements in the screen.

Example:

<section>
	<h1 class="off-screen">Section title</h1>
	<div>...</div>
</section>

Text align

The .text-center, .text-right and .text-left classes changes the text align.

Example:

<div>
	<p class="text-center">Some text aligned to the center</p>
	<p class="text-right">Some text aligned to the right</p>
	<p class="text-left">Some text aligned to the left</p>
</div>

Flex

Alabaster offers some classes to create grid flex easily.

The .flex class define a container with flex display.

Example:

<div class="flex">
	...
</div>

The .column-flex class change the direction from row to column.

Example:

<div class="flex column-flex">
	...
</div>

The .no-wrap-flex class change the wrap property from wrap to nowrap.

Example:

<div class="flex no-wrap-flex">
	...
</div>

The .justify-content-space-between class apply justify content = space between.

Example:

<div class="flex justify-content-space-between">
	...
</div>

The .justify-content-space-around class apply justify content = space around.

Example:

<div class="flex justify-content-space-around">
	...
</div>

The .justify-content-flex-start class apply justify content = flex start.

Example:

<div class="flex justify-content-flex-start">
	...
</div>

The .justify-content-center class apply justify content = center.

Example:

<div class="flex justify-content-center">
	...
</div>

The .justify-content-flex-end class apply justify content = flex end.

Example:

<div class="flex justify-content-flex-end">
	...
</div>

The .align-items-flex-start class apply align items = flex start.

Example:

<div class="flex align-items-flex-start">
	...
</div>

The .align-items-center class apply align items = center.

Example:

<div class="flex align-items-center">
	...
</div>

The .align-items-flex-end class apply align items = flex end.

Example:

<div class="flex align-items-flex-end">
	...
</div>

JS Plugins

Alabaster include some js plugins to help easily the interaction of html.

No scroll

This function allow lock the scroll of the page, import the file no-scroll.js in your js code.

<script src="route-to-file/alabaster/js/no-scroll.js"></script>

JS parameters

Name | Type | Description ------ | ------ | ----------- fixed | Boolean | Toggle overflow of the page

Example:

// Lock scroll page
noScroll(true);
// Unlock scroll page
noScroll(false);

Mobile menu

For implement menu mobile functionality import the files no-scroll.js and mobile-menu.js in your js code.

<script src="route-to-file/alabaster/js/no-scroll.js"></script>
<script src="route-to-file/alabaster/js/menu-mobile.js"></script>

Create a new js MobileMenu object.

JS parameters

Name | Description ------ | ----------- mobileNav | Selector for mobile menu openBtn | Selector for button that open menu closeBtn | Selector for button that close menu activeClass | Css class for mobile menu active onOpen | Event will be fired after menu open onClose | Event will be fired after menu close

Example:

new MobileMenu({
	mobileNav: '.js-mobile-menu',
	openBtn: '.js-mobile-menu-btn-open',
	closeBtn: '.js-mobile-menu-btn-close',
	activeClass: 'mobile-menu_active',
	onOpen: function () {
		// open event
	},
	onClose: function () {
		// close event
	}
});

Outdated browser

This js code verify the browser version and show an alert in case this are outdated or this are not supported.

Variables

Name | Default | Description ------ | ------- | ----------- $outdated-browser-background-color | $white | Alert background color $outdated-browser-text-color | $black | Alert text color $outdated-browser-btn-background-color | $black | Button background color $outdated-browser-btn-background-color-hover | lighten($black, 40%) | Button background color hover $outdated-browser-btn-text-color | $white | Button text color $outdated-browser-btn-text-color-hover | $white | Button text color hover

For implement functionality import the file outdated-browser.js in your js code.

<script src="route-to-file/alabaster/js/outdated-browser.js"></script>

Brought to you by the lovely folks at Axiacore

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Alabaster

A lightweight and flexible tool set to build awesome web platform.

What you would find

Quick install

Yarn

NPM

Usage

Modular scale

Variables

Responsive breakpoints

Variables

Components

Wrapper container

Variables

Container

Variables

Grid

Variables

Modifiers in columns container

Modifiers in columns element

Buttons

Variables

Modifiers

Color style

Variables

Forms

Variables

Modifiers

Select

Modifiers

Checkbox and Radio button

Modifiers

Number spinner

Variables

JS parameters

Toggle

Variables

Modifiers

Input file

JS parameters

Modifiers

Icons

Variables

Modifiers

Color style

Variables

Tables

Variables

Modifiers

Responsive

Alert modal

Variables

JS parameters

Helpers

Position

Size

Clearfix

Font smooth

Prefixer

Arguments

Column width

Column offset

Classes

Fit image

Off screen

Text align

Flex

JS Plugins

No scroll

JS parameters

Mobile menu

JS parameters

Outdated browser

Variables