This is the pure Sass framework for speed and flexibility.
npm install alcedo or yarn add alcedo
-
Import alcedo into your project - place this in your
style.scssin your assets.@import "settings"; @import "../../node_modules/alcedo/scss/style"; @include alcedo-grid; @include alcedo-align; @include alcedo-colour; @include alcedo-touch; @include alcedo-type; @include alcedo-links; @include alcedo-inputs; @include alcedo-button; @include alcedo-image; @include alcedo-embed; @include alcedo-forms; @include alcedo-table; -
Create a settings file (copy from the package) and save as
_settings.scssand place in the same location as yourstyle.scssfile. -
Import the mixins into the settings file, place this at the top.
@import "../../node_modules/alcedo/scss/mixins";
- Get started by tweaking the settings in settings.scss
- You can remove or add the mixins in the style.scss file to only include what you need.
- alcedo has a 12 column grid with column classes for small, medium and large and extra-large, with the breakpoints of these controllable seperate to your media queries (though using the mqs by default).
- Run
npm update --save-devto update package.json dependencies to the latest and download the latest node modules. - Run
gulpto confirm everything is working
If you want to contribute - feel free. All pull requests considered. However, the aim of alcedo is to be light weight and skinny, so feature requests will always bare this in mind.
The alcedo grid is flexbox based, with browser support extended through Gulp. The grid is a tool and is as lightweight as possible. You should strongly consider when/how you are using it.
To use the grid as mapped out in settings, you can do the following:
<div class="row">
<div class="column column-sm-8 column-md-6 column-lg-4">
</div>
<div class="column column-sm-8 column-md-6 column-lg-4">
</div>
<div class="column column-sm-8 column-md-6 column-lg-4">
</div>
</div>
To use breakpoints in SASS, you could do the following:
@include breakpoint(medium), this would target any screens larger than your $mdbreak breakpoint.
Or, if you wanted to target screens smaller than breakpoint, you could do:
@include breakpoint(mediu
8000
m, max)
alcedo comes with a helper for creating CSS Grids. You should include the mixin within a container class, for example:
.page {
@include alcedo-css-grid($column-min, $column-max, $row-min, $row-max, $grid-gap);
}
You shouldn't try to use one container to handle all your grids, or try to recreate a 12 column grid using CSS grid. Instead, use the mixin to help you create containers on parent elements such as whole pages. The alcedo CSS Grid auto-fills.
Variables The mixin affects the following variables so you can define grid containers on the fly.
$column-min: 200px;
$column-max: 12fr;
$row-min: 150px;
$row-max: auto;
$grid-gap: 1rem;
To control the placement of elements within the grid, use the grid-column and grid-row properties. For example:
.header {
grid-column: span 3;
}
This declaration tells the header to span three columns. Equally:
.article {
grid-row: span 4;
}
..Tells the article to span four rows.
There are no pre-defined columns with CSS Grid as instead the layout of the columns is primarily defined by the parent.
By default, alcedo is full width. Use the container class to constrain width.
<div class="container">
<!-- grid -->
</div>
If you want to save mark-up, you can add it to the row element.
Use the row modifier classes to change alignment.
Horizontal:
.row--justified - columns are evenly distributed across the row, first item is on the start, last at the end of the row
.row--spaced - columns are evenly distributed across the row, with equal space around them
.row--end - columns are pushed towards the end of the row
.row--center - columns are aligned to the center of the row
Vertical:
.row--middle - columns are vertically aligned middle
.row--bottom - columns are vertically aligned bottom
.row--top - columns are vertically aligned top
You can use column offsets to offset a column by a column amount. For example:
<div class="column-md-4 column-md-offset-1 column">
This will offset the column on medium devices by one column, increasing spacing between columns.
<div class="column-md-4 column column--flex">
This will turn the column into a flex displayed column to allow for equal height divs within the columns.
alcedo comes with a basic button component. You can adjust settings, including whether or not the button has a radius, in settings.scss.
<button class="button">
Button text
</button>
Strictly speaking, buttons should be buttons and links should be links. However, you can add the .button class to a link too.
Make a button hollow by adding the .button--hollow class.
alcedo comes with an .embed class. Add this to a <div> containing a video iframe or other object, and it will behave responsively. You may need to tweak to padding of .embed depending on aspect ratio.
alcedo comes with some basic input styling.
Icon from flaticon.com.