Introduction

Get started with Grayshift, a lightweight front-end component library for developing fast and powerful web interfaces.

Quick start

Looking to quickly add Grayshift to your project? Use jsDelivr, provided for free by the folks at jsDelivr. Using a package manager or need to download the source files? Head to the releases page.

CSS

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/gskit/gskit@2.2.2/dist/css/grayshift.min.css" integrity="sha384-RqrQfVp74y1Oik0uEX6+6D63yq1VaEJ1KEx4lCpelETjeoZ8qjeI/+x5gG5Qytbx" crossorigin="anonymous">

JS

Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and Popper.js. Place the following <script>s near the end of your pages, right before the closing </body> tag, to enable them. Popper.js must come first, and then our JavaScript plugins.

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

Starter template

Be sure to have your pages set up with the latest design and development standards. That means using 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 lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Starter Template</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/gskit/gskit@2.2.2/dist/css/grayshift.min.css" integrity="sha384-RqrQfVp74y1Oik0uEX6+6D63yq1VaEJ1KEx4lCpelETjeoZ8qjeI/+x5gG5Qytbx" crossorigin="anonymous">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap">
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
</body>
</html>

Important globals

Grayshift employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.

HTML5 doctype

Grayshift requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.

<!doctype html>

Responsive meta tag

Grayshift is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">