the minimal SASS library
valenski is a lightweight set of SASS mixins, classes, resets and values that simplify your workflow. By Hay Kranen.
valenski was written because i needed it. I produce many static websites with very different requirements and designs, so something like Bootstrap is far too heavy and opinionated. After producing more than 100 websites in two years i discovered that the only things i always needed where:
- A very bare-bones CSS reset that puts an emphasis on using the rem unit.
- Some SASS variables for common responsive breakpoints.
- SASS utility mixins, for making responsive design easier and for reusing some common CSS hacks.
- Optional buffer classes for overwriting default margins on elements.
valenski only works with SASS. You'll probably want to use a package manager, such as npm or yarn. Then add it to your project:
npm install --save valenski
And include the master file in your SASS file.
@import "node_modules/valenski/valenski";
Optionally you can only include the reset without the classes:
@import "node_modules/valenski/valenski-reset";
Or even just the values and mixins:
@import "node_modules/valenski/values";
@import "node_modules/valenski/mixins";
valenski contains around 20 simple yet powerful utilities.
You can use respond-from, respond-until and respond-between to simplify the writing of media queries. Use these mixins in conjunction with the screen breakpoint values.
.grid {
display: flex;
flex-wrap: wrap;
@include respond-until($screen-sm) {
li {
width: 100%;
}
}
@include respond-between($screen-sm, $screen-md) {
li {
width: 50%;
}
}
@include respond-from($screen-md) {
li {
width: 25%;
}
}
}
wh is a shortcut for the width and height properties. If you use only one argument width and height will get the same value.
header {
@include wh(100vw, 20vh);
}
header h1 {
@include wh(20rem);
}
pos is a shortcut for the top, right, bottom and left properties.
.footer {
@include pos(50vh, 25%, 25%, 10rem);
}
This is the same as writing
.footer {
top: 50vh;
right: 25%;
bottom: 25%;
left: 10rem;
}
If only two arguments are given these will be used for the left and top properties (think of them as x and y)
.circle {
@include pos(300px, 200px);
}
.circle {
left: 300px;
top: 200px;
}
If only one argument is given, pos will set the same value to all properties.
.overlay {
@include pos(0);
}
This is the same as:
.overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
A mixin for the famous clearfix hack.
.clearfix {
@include clearfix;
}
Centers an element using the transform hack. Either horizontal (transform-center-horizontal), vertical (transform-center-vertical) or both (transform-center).
body {
position: relative;
@include wh(100vw, 100vh);
}
h1 {
@include transform-center; // center both horizontally and vertically
}
h2 {
@include transform-center-horizontal; // only center horizontally
}
h3 {
@include transform-center-vertically; // only center vertically
}
Center child elements using flexbox. Compare this to the transform-center mixins that centers the element you apply it to. If you have more than one child elements they will be aligned on the vertical axis. To align horizontally try @include flex-center(row);
body {
@include flex-center;
}
h1 {
// this element will be centered
}
ul {
// centers child elements on horizontal axis
@include flex-center(row);
}
Set margin-top on all child elements using the lobotomized owl selector. By default uses the $valenski-base-unit variable.
main {
@include child-margins(3rem);
}
Center the background-image, by default sizing with the cover option. If you want to size with the contain option you can give that as an option.
figure {
@include background-center;
background-image: url('img/figure.jpg');
}
body {
@include background-center(contain);
background-image: url('img/background.jpg');
}
Only display content to screen readers. This is the same mixin as used in Bootstrap 4. Note that you can also use the sr-only class.
.sr-notice {
@include sr-only;
}
valenski contains a couple of breakpoints variables for mediaqueries and some variables that set defaults for mixins, resets and classes.
These are lifted from Bootstrap.
$screen-xs: 480px$screen-sm: 768px$screen-md: 992px$screen-lg: 1200px
$valenski-screen-small-height: 650px- This is used to set a smaller size for the
remunit under this screen height
- This is used to set a smaller size for the
$valenski-base-unit: 10px- Used for spacing and the
buffer-*classes
- Used for spacing and the
$valenski-font-size-base: 10px- What
1remshould be
- What
$valenski-font-size-small: 8px- What
1remshould be on small devices (<768px)
- What
$valenski-use-small-font-size: true- Enable the small font sizes for small devices and screens that are not so high.
All of these variables are also available as CSS variables.
.element {
width: var(--screen-xs);
}
valenski contains a barebones reset. It only sets margins and paddings to zero, defaults to using border-box for box-sizing and does some common sense styling for elements like removing the border for the img element on Internet Explorer 9. It also sets up the rem element so 1rem = 10px, except for mobile devices (under 768px) and small screens (in height) where it is 8px. Both values can be overwritten using the $valenski-font-size-base and $valenski-font-size-small values. Using this technique you can do this:
p {
font-size: 2rem; // Translates to 20px and 16px for mobile
}
valenski contains buffer-* classes that can be used for vertical spacing between elements. The spacing is based on the $valenski-base-unit variable (by default this is 10px). For example:
<header class="buffer-3"> <!-- Add 15px margin add the top and bottom -->
<h1 class="buffer-bottom-1">Header with 10px margin at the bottom</h1>
<h2 class="buffer-top-0">Subheader with no margin at top</h2>
</header>
There is also a sr-only class you can use to only display content to screen readers.
<img src="logo.png" alt="Website logo" />
<h1 class="sr-only">My briliant website</h1>