This is a documentation for Skar.IS CSS library. There are two ways to get the library:
yarn add skar-is
npm install skar-is
Skar.IS need certain meta tags and optionally jQuery. Here is example of starter template, where all needed tags are shown:
<!DOCTYPE html>
<html>
<head>
<!-- recommended meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
<!-- skar-is CSS -->
<link rel="stylesheet" href="main.css">
<title>Title</title>
</head>
<body>
<!-- webpage content here -->
<!-- jQuery and skar-is JS-->
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
Skar.IS is written is SASS (SCSS syntax). The main file, which is including all other files, looks like this:
//MANDATORY PARTS
@import "settings";
@import "base/functions";
@import "base/mixins";
@import "base/resets";
//GRID
@import "grid/grid";
//COMPONENTS CLASSES
@import "components/texts";
@import "components/media";
@import "components/card";
@import "components/menu";
@import "components/carousel";
@import "components/footer";
@import "components/vizuals";
@import "components/forms";
@import "components/breadcrumbs";
@import "components/pagination";
@import "components/progress";
@import "components/modal";
@import "components/tabs";
//HELPER CLASSES
@import "helpers/display";
@import "helpers/float";
@import "helpers/links";
@import "helpers/positions";
@import "helpers/text";
The only mandatory parts are settings, functions, mixins and resets. Mixins and functions are used in all other parts of library. Resets part is reseting and defining styles of problematic HTML tags and whole page. In settings file are all variables, which can be changed as you want.
All other parts - grid, component files and helper classes are not mandatory. Use what you need or what you want to use.
Some of components also need its jQuery file to work. Every component has its .js file.
Skar.IS is currently supporting these browsers:
Some of functionalities dont work on every browser listed above, but you can find more info in other sections of this documentation.
Grid system of Skar.IS and some components use responsive mobile-first breakpoints. By default there are 5 breakpoints: