atom-sass v1.0.0
Atom SASS
An extremely simple set of SASS components to help build out the basic layout of a given site. Ignores style as much as possible, focusing on layout, and built for responsive design.
Installation
Getting the SASS Files
To get the SASS files, just include atom-sass in your NPM package:
npm i --save-dev atom-sass(Optional) Update SASS includePaths for Easy Imports
You can optionally also update your SASS includePaths configuration to
make @import statements simpler. Most of the documentation below assumes that
you have completed this step, for brevity.
To do so, just add node_modules/ to your includePaths configuration. For
example:
const sassConfig = {
includePaths: [
"node_modules/"
]
};Which results in:
Before:
@import "path/to/node_modules/atom-sass/sass/split"; After:
@import "atom-sass/sass/split";Usage
Each component is separated into its own SASS file, and each component can have
any number of configuration variables based on the components' function. To
include a component, simply add @import "atom-sass/sass/[component name]" to
the appropriate SASS file. See the Components section for a list
of components, their names, and any configuration variables they have.
Components
See below for a list of components.
Container
Name: container
Import: @import "atom-sass/sass/container";
Classes: .container
Any element with this class will automatically fill the entire width of the
screen, unless the screen width is greater than $atom_container_max
(default: 1151px). If the screen width is greater than that value, then the
contents of the element will max out at that width, and margin will be evenly
applied to the left and right sides to center the content.
In addition, a gutter (applied via padding) is added to the left and right side
for mobile devices, and screens smaller than $atom_container_max.
Example:
<div class="container">
<!-- Your content here -->
</div>Variables
$atom_container_max
Type: Unit
Default: 1151px
The maximum width of the content in the container.
$atom_container_gutter
Type: Unit
Default: 15px
The amount of padding to add to the left and right of the container as a gutter for mobile devices.
Icon Unordered List
Name: icon-ul
Import: @import "atom-sass/sass/icon-ul";
Classes: .icon-ul
Provides a way of replacing the default unorder lists' bullet icons with any
other icon. Just apply the icon-ul class to any <ul> element to change its
icons.
Example:
<ul class="icon-ul">
<!-- list items here -->
</ul>Variables
$atom_icon_ul_icon_font
Type: Font Family
Default: FontAwesome
The font family of the font to use to render the icon.
$atom_icon_ul_icon
Type: String
Default: '\f00c' (fa-check in FontAwesome)
The string holding the character code of the character in the font to render in the place of the bullet points.
$atom_icon_ul_color
Type: Color
Default: #000
The color of the icon.
Split
Name: split
Import: @import "atom-sass/sass/split";
Classes: .split .split-item
When the split class is applied to an element, it will evenly split the
horizontal space within it amoung all of its children that have the
split-item class on them.
Example:
<div class="split">
<div class="split-item">
Column 1
</div>
<div class="split-item">
Column 2
</div>
<div class="split-item">
Column 3
</div>
</div>Split List
Name: split-list
Import: @import "atom-sass/sass/split-list";
Classes: .split-list .split-item .split-*
Any element with the split-list class applied to it will make all elements
with split-item beneath it take up an even amount of columns, and wrap down
the page.
The amount of horizontal space taken up by a given split-item is determined
by the split-* class applied to the parent split-list element, where the
* represents the split number. By default, split-2, split-3, and split-4
are available, but these are configurable.
The split number determines how much space the items take up by computing
1 / [split number], and multiplying that by the total amount of horizontal
space available.
So, for example, split-3 means that all split-item elements would take up
one third, or 33.3% of the available horizontal space.
Example:
<div class="split-list split-2">
<div class="split-item">
Column 1 Row 1
</div>
<div class="split-item">
Column 2 Row 1
</div>
<div class="split-item">
Column 1 Row 2
</div>
<div class="split-item">
Column 2 Row 2
</div>
</div>Variables
$atom_split_list_options
Type: Array
Default: (2, 3, 4)
List of integers representing each split number available for use.
Uneven Split
Name: uneven-split
Import: @import "atom-sass/sass/uneven-split";
Classes: .uneven-split .split-item .split-match .split-fill .split-*
When the uneven-split class is applied to an element, it will split the
horizontal space within it among all of the elements beneath it that have the
split-item class on them.
The precise amount of space each split-item element is given is based on the
split class applied to it.
split-match causes the split item to only take up as much space as it needs
based on its contents, and to neither grow nor shrink.
split-fill causes the split item to fill all of the remaining space. If there
are multiple split-items with the split-fill class on them, then they will
all get an even distribution of the remaining space after all other splits.
split-* actually represents an unknown number of additional classes, where
the * is a wildcard where a number would normally be. By default, the
uneven-split module comes with split-1 split-2 split-3 split-4 as classes,
however, these are configurable.
The number in the split-* class reprsents how many columns a given
split-item with that class takes up. So, for example, a split-item with the
class split-2 would span two columns worth of space horizontally. The amount
of columns is determined by the $atom_uneven_split_split_basis variable, and
defaults to 12.
Example:
<div class="uneven-split">
<div class="split-match">
I'm exactly the size I need to display this text.
</div>
<div class="split-fill">
I'm going to take up any remaining space not taken up by other splits.
</div>
<div class="split-2">
I'm going to span 2 columns, which by default represents ~16% of the
horizontal space.
</div>
<div class="split-4">
I'm going to span 4 columns, which by default represents ~33.3% of the
horizontal space.
</div>
</div>Variables
$atom_uneven_split_split_match
Type: Boolean
Default: true
If true, includes the split-match class. Can be set to false to exclude it to
reduce output CSS size and remove unused classes.
$atom_uneven_split_split_fill
Type: Boolean
Default: true
If true, includes the split-fill class. Can be set to false to exclude it to
reduce output CSS size and remove unused classes.
$atom_uneven_split_split_basis
Type: Integer
Default: 12
Determines the amount of columns that will be available for a given split. See the main documentation for this module for more information on the columns.
$atom_uneven_split_split_options
Type: Array
Default: (1, 2, 3, 4)
Represents a list of all available classes for the split-* classes. So, for
example, if you changed this to (1, 2) then only split-1 and split-2 would
be available.
The rendered size of each split for these numbers is determined by the amount of columns.
6 years ago