WCKD UI

Early Access

Get WCKD UI

If you've just discovered WCKD UI for the first time, welcome! While the DIY is not quite ready yet, rest assured that we're actively working on it. Be sure to check back periodically for updates.

Download and DIY

Download WCKD UI
Set up Guide

Implementation Support

Download Builder

To optimize your page load speed, select only the WCKD UI Components necessary for your project. The chosen components will be minified and bundled into a single JavaScript and CSS file. For full functionality, please ensure you download and include the WCKD UI Core and Icons.

Select WCKD UI Components to download Check All

WCKD UI Core* ^v1.0.0
Accordion ^v1.0.0
Bento ^v1.0.0
Overlays ^v2.0.0
Tabs ^v2.0.0

I have read and agree to the terms of use.

Set Up Your Project

Get to know our foundational thinking and how we put it into action across our UI framework and design system.

File Structure

folder wckd-ui
- notes wckd-ui.js
- notes wckd-ui.css
- notes wckd-icons.svg
folder media
notes index.html

HTML Structure

You will need to include the wckd-ui.css and wckd-ui.js files you downloaded in your page. Example:

Basic HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Your Page Title</title>
	<meta name="description" content="A brief description of your page content">
	<link rel="stylesheet" href="/wckd-ui.css">
</head>

<body>

	<header>
		<!-- Your header content -->
	</header>
	
	<main>
		<section>
			<!-- Your main content -->
		</section>
	</main>

	<footer>
		<!-- Your footer content -->
	</footer>

	<script src="/includes/wckd-ui.js"></script>
	
</body>
</html>

Basic HTML Structure with Sidebar

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Your Page Title</title>
	<meta name="description" content="A brief description of your page content">
	<link rel="stylesheet" href="/wckd-ui.css">
</head>

<body class="sidebar">

	<header>
		<!-- Your header content -->
	</header>

	<aside>
		<!-- Your sidebar content -->
	</aside>		
	
	<main>
		<section>
			<!-- Your main content -->
		</section>
	</main>

	<footer>
		<!-- Your footer content -->
	</footer>

	<script src="/includes/wckd-ui.js"></script>
	
</body>
</html>

Basic HTML Structure with Side Header

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Your Page Title</title>
	<meta name="description" content="A brief description of your page content">
	<link rel="stylesheet" href="/wckd-ui.css">
</head>

<body class="side-header">

	<header>
		<!-- Your header content -->
	</header>
	
	<main>
		<section>
			<!-- Your main content -->
		</section>
	</main>

	<footer>
		<!-- Your footer content -->
	</footer>

	<script src="/includes/wckd-ui.js"></script>
	
</body>
</html>

Basic HTML Structure with Side Header and Sidebar

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Your Page Title</title>
	<meta name="description" content="A brief description of your page content">
	<link rel="stylesheet" href="/wckd-ui.css">
</head>

<body class="side-header sidebar">

	<header>
		<!-- Your header content -->
	</header>

	<aside>
		<!-- Your sidebar content -->
	</aside>		
	
	<main>
		<section>
			<!-- Your main content -->
		</section>
	</main>

	<footer>
		<!-- Your footer content -->
	</footer>

	<script src="/includes/wckd-ui.js"></script>
	
</body>
</html>

WCKD UI CSS

The default set of CSS rules that a WCKD UI applies to any HTML document it renders. It defines how basic HTML elements should look and behave in the absence of any author-defined styles (your own CSS).

body

side-header
sidebar

columns

count-1[to 6]
shadows
borders
padded
gap[-top,-right,-bottom,-left]
gap-tight[-top,-right,-bottom,-left]
match-height
max-width
fill

column

span-2[to 6]
shadow
pad[-top,-right,-bottom,-left]
pad-tight[-top,-right,-bottom,-left]
border[-top,-right,-bottom,-left]
sticky

options

round-corners
feather-corners
align-[right,center,left]
no-bullets
flat
text-shadow

img

thumbnail
medium
large

links and button

button
small
large
extra-large
outline
text

typography

uppercase
extra-small
small
medium
large
extra-large
extra-extra-large
left
center
right
heading
subheading
excerpt
tag

color theme

light-theme
dark-theme
background-color
background-color-light
background-color-dark
background-color-fade