Content
-
Check out version 4
This is the previous version of SFUMATO. Check out the latest!
-
What is SFUMATO?
-
Get started
-
Color
-
Form elements
-
CSS grid
-
Helpers
-
Media
-
Media queries
-
Typography
-
Unit layouts
Helpers
As part of making SFUMATO work as a whole, a bunch of helper mixins and functions were created, which you can use directly. This includes things like a mixin to hide an element based on a media query.
div {
@include sf-hide(
$from: tablet-portrait
);
}
What's here?
Some of the functions directly assist with styling, and others are for SCSS variable manipulation. For example, there are functions to add and strip measurement units from SCSS variables, perform string find/replace, and more.
Functions
The following are miscellaneous SCSS functions provided by SFUMATO.
sf-hide()
Hide an element based on a media breakpoint using display: none;.
As such this is not suitable for CSS animation.
-
$from — default: false
Styles will be used for this breakpoint and wider.
-
$upto — default: false
Styles will be used for screen sizes up to but not including this breakpoint.
Example
div {
@include sf-hide(
$from: tablet-portrait
);
}
Attributes
You can also hide an element using simple HTML tag attributes and using media breakpoints.
-
sf-hide-X-and-up
Hide an element at a specific media breakpoint and wider, where X is the breakpoint shortcut.
-
sf-hide-below-X
Hide an element below a specific media breakpoint (not inclusive), where X is the breakpoint shortcut.
Example
<div sf-hide>
Hide this for mobile.
</div>
<div sf-hide-tabp-and-up>
Hide this for tablet portrait and wider.
</div>
<div sf-hide-below-tabp>
Hide this below tablet portrait.
</div>
sf-visually-hide()
Hide an element based on a media breakpoint using a variety of properties except display: none;.
As such this is more suitable for CSS animation.
-
$from — default: false
Styles will be used for this breakpoint and wider.
-
$upto — default: false
Styles will be used for screen sizes up to but not including this breakpoint.
Check the _core-helpers.scss file to see what properties this mixin changes in case this documentation is out of date.
Example
div {
@include sf-visually-hide(
$from: tablet-portrait
);
}
What is set?
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
sf-str-replace()
Replace a substring in a given string with another substring. The substring search is case-sensitive.
-
$string
Source string variable to search.
-
$search
Substring to find.
-
$replace
Substring replacement.
div {
content: '#{sf-str-replace($string, 'cat', 'dog')}';
}
sf-str-endswith()
Determine if a string ends with a specific substring. The comparison is case-sensitive.
-
$string
Source string variable to search.
-
$endswith
Substring to find at the end of $string.
$string: "quickly";
$adverb: sf-str-endswith($string, 'ly');
$yikes: sf-str-endswith($string, 'LY');
// $adverb is true
// $yikes is false
sf-str-split()
Split a string into substrings using a delimitter. The delimitter is case-sensitive.
-
$string
Source string variable to split.
-
$separator
Substring delimitter to use when splitting the string. Defaults to a space character.
$string: "these are words";
$words: sf-str-split($string);
// $words is a list with three words
// ('these', 'are', 'words')
sf-to-number()
Convert a SCSS string to a number.
-
$string
String with a numeric value.
$string: "42";
$int: sf-to-number($string);
// $int is now equal to 42
sf-to-length()
Convert a SCSS string or numeric variable to a value with a unit of measure; for example, convert 3 to 3rem.
-
$value
Variable with a numeric value.
-
$unit
Unit of measure (as a string) to use (e.g. "rem").
$value: 42;
$new: sf-to-length($value, "px");
// $new is now equal to 42px
sf-strip-unit()
Strip the unit from a measurement and return a numeric value; for example, convert 3rem to 3.
-
$number
Variable with a measurement value.
$value: 42px;
$new: sf-strip-unit($value);
// $new is now equal to 42
sf-get-unit()
Get the unit from a measurement value; for example, get "px" from 3px.
-
$value
Variable with a measurement value.
$value: 42px;
$unit: sf-get-unit($value);
// $unit is now equal to "px"