Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@sbrack8t
sbrack8t / theme-tokens.yml
Last active March 18, 2021 14:56
Structure for design token data
# Design Tokens
# Define basic design variables here.
theme:
# Basic elevations levels
box-shadow:
0: none
1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)
2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)
4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)
@sbrack8t
sbrack8t / section.html
Last active April 1, 2020 02:19
Session 0 component html solution
<!-- Front End Components -->
<!-- SECTION // -->
<!-- Component class modifier changes background image -->
<!-- .page-section--spotlight -->
<section class="page-section page-section--spotlight">
<div class="l-constrain">
<header class="page-section__header">
<h2 class="page-section__title">Title</h2>
<a href="#" class="page-section__link">See All</a>
@sbrack8t
sbrack8t / blueprint.yaml
Created April 15, 2019 15:08
Grav List Items
sidebar_content:
type: section
title: Sidebar Content
underline: true
header.sidebar_content:
name: sidebar_item
type: list
style: vertical
label: Side Bar Item
@sbrack8t
sbrack8t / .csscomb.json
Last active February 25, 2017 18:13
csscomb.json (atom)
{
"always-semicolon": true,
"color-case": "lower",
"block-indent": " ",
"color-shorthand": false,
"element-case": "lower",
"eof-newline": true,
"leading-zero": false,
"sort-order-fallback": "abc",
"space-before-colon": "",
<a href="{#link}" class="read-more">Read More<span class="element-invisible"> About {#node_title}</span>&hellip;</a>
@sbrack8t
sbrack8t / placeholder-style.scss
Created January 8, 2016 16:41
Mixin for styling input placeholder text
// @file
// Mixin for styling placeholder text
$ph_name: (
'::-webkit-input-placeholder',
':-moz-placeholder',
'::-moz-placeholder',
':-ms-input-placeholder',
'::-ms-input-placeholder',
':placeholder-shown'
@sbrack8t
sbrack8t / _figure.scss
Created January 4, 2016 18:54
Figure Styling
.figure {
display: table;
figcaption {
caption-side: bottom;
display: table-caption;
font-size: 13px;
line-height: 1.2;
}
}
@sbrack8t
sbrack8t / SassMeister-input-HTML.html
Created May 12, 2015 18:15
Generated by SassMeister.com.
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header role="banner">
This is the Header
</header>
<div class="page-wrapper block">
@sbrack8t
sbrack8t / SassMeister-input-HTML.html
Last active August 29, 2015 14:18
Generated by SassMeister.com.
<div class="wrapper page-template-1">
<div class="l-major-sections">
<div class="module module-a-col">
</div>
<div class=" module module-b-col">
<div class="content-component">
</div>
<div class="l-chiclet-group">
@sbrack8t
sbrack8t / SassMeister-input-HTML.html
Last active August 29, 2015 14:18
Generated by SassMeister.com.
<div class="wrapper page-template-1">
<div class="l-major-sections">
<div class="module module-a-col">
</div>
<div class=" module module-b-col">
</div>
</div>