dat-atomic v1.0.9
dat-atomic SCSS
A scss library for rapid and readable templating.
Its aim is to be able to quickly position elements, style grids and texts.
By no means you should use this lib on its own, and I highly recommand writting scss components for your project's design.
Although, you should re-use dat-atomic variables as much as it is justified to do so.
Installation
npm install dat-atomic
or
yarn add dat-atomic
Import
You can load in different ways :
// Import all in one
@import "~dat-atomic";
// Import variables and resets separately.
@import "~dat-atomic/variables";
@import "~dat-atomic/static";
@import "~dat-atomic/resets";
// Import each module separately
@import "~dat-atomic/variables";
@import "/path/to/my/variables"; // <= custom variables values go here
@import "~dat-atomic/static/functions";
@import "~dat-atomic/static/fonts";
@import "~dat-atomic/static/spacing";
@import "~dat-atomic/static/flex-grid";
@import "~dat-atomic/static/utils";
@import "~dat-atomic/resets";
Don't hesitate to ignore the resets file, overwrite the variables, or even entirely replace the variables file with your own (don't forget any variable if you do though).
Flex/grid
<div id="first-container" data-flex>...</div>
<div id="second-container" data-grid>...</div>
equals to :
#first-container {
display: flex;
}
#second-container {
display: grid;
}
But I want to set it to display: inline-grid;
!
No big deal :
<div id="first-container" data-flex="inline">...</div>
<div id="second-container" data-grid="inline">...</div>
equals to :
#first-container {
display: inline-flex;
}
#second-container {
display: inline-grid;
}
Flex/grid flow :
Values for flex-direction
are :
- column
- row
- column-reverse
- row-reverse
<div id="first-container" data-flex="row-reverse">...</div>
<div id="second-container" data-flex="column">...</div>
equals to :
#first-container {
display: flex;
flex-direction: row-reverse;
}
#second-container {
display: flex;
flex-direction: column;
}
Values for grid-auto-flow
are :
- column
- row
- dense
- row-dense
- column-dense
<div id="first-container" data-grid="dense">...</div>
<div id="second-container" data-grid="column-dense">...</div>
equals to :
#first-container {
display: grid;
grid-auto-flow: dense;
}
#second-container {
display: grid;
grid-auto-flow: column dense;
}
Flex wrapping
<div id="first-container" data-flex="wrap">...</div>
<div id="second-container" data-flex="nowrap">...</div>
<div id="third-container" data-flex="wrap-reverse">...</div>
equals to :
#first-container {
display: flex;
flex-wrap: wrap;
}
#second-container {
display: flex;
flex-wrap: nowrap;
}
#third-container {
display: flex;
flex-wrap: wrap-reverse;
}
Justifying & aligning :
Alignement and justification properties are defined with the prefixes :
justify-content
:juco-
justify-items
:juit-
(Warning :justify-items
is NOT a valid property of the flex layout, it'll only effect the grid layout)align-content
:alco-
align-items
:alit-
Followed by the wanted value :
flex-start
:start
flex-end
:end
center
:center
stretch
:stretch
(Warning :stretch
is NOT a valid value forjustify-content
andalign-content
in the flex layout, it'll only effect the grid layout)
<div id="first-container" data-flex="juco-center alit-center alco-center">...</div>
<div id="second-container" data-grid="juit-end juco-end alco-stretch alit-center">...</div>
equals to :
#first-container {
display: flex;
justify-content: center;
align-items: center;
align-content: start;
}
#second-container {
display: grid;
justify-items: flex-end;
justify-content: flex-end;
align-content: stretch;
align-items: center;
}
Flex/grid children
Flex and grid children properties can be defined in data-child
.
<div id="first-child" data-child="alse-center shrink">...</div>
<div id="second-child" data-child="alse-end no-grow">...</div>
<div id="third-child" data-child="grow">...</div>
equals to :
#first-child {
align-self: center;
flex-shrink: 1;
}
#second-child {
align-self: flex-end;
flex-grow: 0;
}
#third-child {
flex-grow: 1;
}
Self justifying & aligning :
Self alignement and justification properties are defined with the prefixes :
align-self
:alse-
justify-self
:juse-
(Warning :justify-self
is NOT a valid property of the flex layout, it'll only effect the grid layout)
Followed by the wanted value :
flex-start
:start
flex-end
:end
center
:center
stretch
:stretch