Getting Started

Kriyā is a modern responsive CSS framework with enough flexibility to allow you to style pretty much any website, platform or app. Inspired by some of today's great frameworks, Kriyā isn't restrictive or prescriptive, and is designed to be easily customised to fit your needs. Enjoy!

Disclaimer - Kriyā uses modern technologies like Flexbox so it's really only suitable for use in modern browsers and devices.

Quick Start

Start by downloading the latest version of Kriyā by hitting the big green Download button. This will always link to the most up-to-date version. Then simply hook up the styles in your document head like this:

<link rel="stylesheet" href="/path/to/kriya/kriya-min.css">

That's it! Now you can start creating your pages using Kriyā layout and components.


You can use Kriyā as-is, but I'm sure you'll want to customise it with your own fonts, colours and more. Your download includes minified CSS but also includes the source SCSS files so you can have more control over which components you want to include, change variables, and compile your own CSS. Here's how you customise Kriyā:

1. Choose your components

Kriyā is modular so you can choose which components you want to include. Maybe your project won't need avatars or badges, so save yourself some KB and don't include them. Open up scss/components/_all.scss and comment out the components you don't need:

@charset "utf-8";

// @import "avatar";
// @import "badge";
@import "breadcrumb";
@import "button";
@import "card";

2. Set variables

Open up kriya.scss. This is where the magic happens. Step 1 imports Kriyā's initial variables which can be overridden in step 2, along with adding any new variables you might need. Then step 3 assigns those new values before folding it all back into Kriyā in step 4. Lastly step 5 is where you can import any custom components you have created, like maybe a custom animation or a pricing table, or whatever.

Here's how kriya.scss might look with a few customisations:

@charset "utf-8";

// 1. Import initial variables
	@import "scss/base/input-variables";

// 2. Set your own initial variables
	// Custom colour palette
	$blue: hsl(198, 72%, 48%);
	$fuchsia: hsl(315, 52%, 43%);
	$hot-pink: hsl(342, 96%, 39%);
	$light-green: hsl(74, 64%, 47%);
	$orange: hsl(31, 100%, 47%);
	$pink: hsl(330, 77%, 55%);
	// Custom font
	$font-stack-sans: "Geomanist", sans-serif;

// 3. Set the derived variables
	// Assign custom colours
	$primary: $fuchsia;
	$secondary: $pink;
	$info: $blue;
	$success: $light-green;
	$warning: $orange;
	$danger: $hot-pink;

	// Assign custom font
	$font-primary: $font-stack-sans;

// 4. Import the rest of Kriyā
	@import "scss/_all";

// 5. Import custom and customised components
	@import "scss/custom/_all";

3. Save your changes

Save and compile a new kriya-min.css and you're all set!