Getting Started

For production use of Setka download library's code on downloads page.

Quick start

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS. 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/setka/dist/setka.min.css" crossorigin="anonymous">

Starter template

Use an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this: 

<!doctype html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Setka's CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/setka/dist/setka.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

    <!-- Content -->

  </body>
</html>

That’s all you need for overall page requirements.

Globals

Setka has a few important global styles and settings that you’ll need to be aware of when using it.

Responsive meta tag

Setka is mobile first library. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your code.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Box-sizing

To ensure padding does not affect the final computed width of an element, global box-sizing value is swiched from content-box to border-box.

* {
  box-sizing: border-box;
}

Default font params

Setka set this default values for font-size and line-height through variables.

:root {
  --font-size: 16px;
  --line-height: 20px;
}

html {
  font-size: var(--font-size);
}

body {
  line-height: var(--line-height);
}

line-height affects baseline grid and spacing utilities. You can easily change it like this: 

:root {
  --font-size: 20px;
  --line-height: 24px;
}

Grid