Skip to content

Instantly share code, notes, and snippets.

@contolini

contolini/--steps.md

Last active August 29, 2015 14:21
Show Gist options
  • Save contolini/f626d744a1e0a274c37c to your computer and use it in GitHub Desktop.
Save contolini/f626d744a1e0a274c37c to your computer and use it in GitHub Desktop.
Download ZIP
cf import test
Raw
--steps.md
  1. git clone git@gist.github.com:/f626d744a1e0a274c37c.git cf-import-test
  2. cd cf-import-test
  3. Start a local server and load index.html in a browser.
  4. Less should complain that a CF mixin isn't present.
  5. Install CF: bower install --save cfpb/capital-framework#dev
  6. Add @import 'vendor/capital-framework/src/capital-framework.less'; to the top of main.less.
  7. Reload the page and everything should look pretty.
Raw
.bowerrc
{
"directory" : "vendor/"
}
Raw
bower.json
{
"name": "foo",
"version": "0.0.0",
"authors": [
"foo"
],
"license": "foo",
"homepage": "foo"
}
Raw
brand-palette.less
/* ==========================================================================
Capital Framework
Color variables
========================================================================== */
// Official palette.
// Current as of April 9, 2015.
// To view the colors in the Design Manual, visit:
// https://cfpb.github.io/design-manual/identity/color-principles.html#palette
// Primary colors:
@green: #2CB34A;
@green-midtone: #ADDC91;
@green-tint: #DBEDD4;
@black: #101820;
// Background colors:
@darkgray: #43484E;
@gray: #75787B;
@gray-80: #919395;
@gray-50: #BABBBD;
@gray-20: #E3E4E5;
@gray-10: #F1F2F2;
@gray-5: #F8F8F8;
// Secondary colors:
@redorange: #D12124;
@redorange-80: #DA6750;
@redorange-50: #E8A091;
@redorange-20: #F6D9D3;
@gold: #FF9E1B;
@gold-80: #FFB149;
@gold-50: #FFCE8D;
@gold-20: #FFECD1;
@neutral: #796E65;
@neutral-80: #948B84;
@neutral-50: #BCB6B2;
@neutral-20: #E4E2E0;
@navy: #002D72;
@navy-80: #33578E;
@navy-50: #7F96B8;
@navy-20: #CCD5E3;
@pacific: #0072CE;
@pacific-80: #328ED8;
@pacific-50: #7FB8E6;
@pacific-20: #CCE3F5;
@teal: #005E5D;
@teal-80: #337E7D;
@teal-50: #7FAEAE;
@teal-20: #CCDFDF;
// Unofficial colors not part of the official palette,
// but are in use for easier coding semantics or UX needs.
// Active state of destructive action buttons.
@dark-redorange: #9C301B;
@white: #FFF;
Raw
cf-theme-overrides.less
/* ==========================================================================
Capital Framework theme overrides
========================================================================== */
/* cf-core
========================================================================== */
// Sizing variables
@base-font-size-px: 16px;
@base-line-height-px: 22px;
@base-line-height: unit(@base-line-height-px / @base-font-size-px);
@mobile-max: 599px;
@tablet-min: 600px;
// Color variables
// body
@text: @black;
// a
@link-text: @pacific;
@link-underline: @pacific;
@link-text-visited: @teal;
@link-underline-visited: @teal;
@link-text-hover: @pacific-50;
@link-underline-hover: @pacific-50;
@link-text-active: @navy;
@link-underline-active: @navy;
// thead
@thead-text: @white;
@thead-bg: @darkgray;
@td-bg: @gray-5;
@td-bg-alt: @gray-10;
// input
@input-bg: @white;
@input-border: @gray;
@input-border-focus: @pacific;
@input-placeholder: @gray;
// .figure__bordered
@figure__bordered: @gray-50;
/* cf-buttons
========================================================================== */
// Color variables
// .btn
@btn-text: @white;
@btn-bg: @pacific;
@btn-bg-hover: @pacific-80;
@btn-bg-active: @navy-80;
// .btn__secondary
@btn__secondary-text: @white;
@btn__secondary-bg: @gray;
@btn__secondary-bg-hover: @gray-80;
@btn__secondary-bg-active: @darkgray;
// .btn__warning
@btn__warning-text: @white;
@btn__warning-bg: @redorange;
@btn__warning-bg-hover: @redorange-80;
@btn__warning-bg-active: @dark-redorange;
// .btn__disabled
@btn__disabled-text: @gray;
@btn__disabled-bg: @gray-20;
@btn__disabled-outline: @gray-20;
// Sizing variables
// .btn
@btn-font-size: 14px;
@btn-v-padding: 8px;
@btn-v-padding-modifier-ie: .8;
@super-btn-font-size: 18px;
/* cf-expandables
========================================================================== */
// Color variables
// .expandable
@expandable-focus: @black;
// .expandable_label
@expandable_label-text: @black;
// .expandable_link
@expandable_link-text: @pacific;
// .expandable__padded
@expandable__padded-bg: @gray-10;
@expandable__padded-bg-hover: @gray-20;
@expandable__padded-divider: @gray-50;
// .expandable-group
@expandable-group_header-text: @gray;
@expandable-group_header-bg: @gray-10;
@expandable-group-bg: @white;
@expandable-group-divider: @gray-80;
// Sizing variables
// .expandable_link
@expandable_link-font-size: @btn-font-size;
/* cf-forms
========================================================================== */
// Color variables
// .error
@input-error: @redorange;
// .success
@input-success: @green;
// Sizing variables
// .input__super
@input__super-font-size: @super-btn-font-size;
/* cf-grid
========================================================================== */
@grid_box-sizing-polyfill-path: '/static/vendor/box-sizing-polyfill';
@grid_wrapper-width: 1200px;
@grid_gutter-width: 30px;
@grid_total-columns: 12;
@grid_debug: false;
/* cf-icons
========================================================================== */
@cf-icon-prefix: cf-icon;
@cf-icon-path: '/vendor/cf-icons/src/fonts';
@cf-icon-ie7-support: true;
/* cf-layout
========================================================================== */
// Color variables
// .block
@block__border-top: @gray-50;
@block__border-bottom: @gray-50;
@block__bg: @gray-10;
// .content_main
@content_main-border: @gray-50;
// .content_sidebar
@content_sidebar-bg: @gray-10;
@content_sidebar-border: @gray-50;
// .content_bar
@content_bar: @green;
// .content_line
@content_line: @gray-50;
// .grid_column__top-divider
@grid_column__top-divider: @gray-50;
// .grid_column__top-divider
@grid_column__left-divider: @gray-50;
/* cf-pagination
========================================================================== */
// Color variables
@pagination-text: @gray;
@pagination-bg: @gray-20;
// Sizing variables
@pagination-font-size: 16px;
@pagination-bp: 640px;
/* cf-typography
========================================================================== */
// Color variables
// .pull-quote
@pull-quote_body: @black;
@pull-quote_citation: @gray;
// .micro-copy
@micro-copy-text: @gray;
// .date
@date-text: @gray;
// .category-slug
@category-slug-text: @black;
@category-slug-hover: @link-text-hover;
// .header-slug
@header-slug-thin-border: @gray-20;
@header-slug-thick-border: @green;
// .padded-header
@padded-header-text: @darkgray;
@padded-header-bg: @gray-10;
@padded-header-border: @gray-50;
// .fancy-slug
@fancy-slug-text: @black;
@fancy-slug-bg: @white;
@fancy-slug-border: @gray-50;
// .meta-header
@meta-header-border: @gray-50;
// .jump-link
@jump-link__bg: @gray-10;
@jump-link__bg-border: @gray-20;
// .list__branded
@list__branded-bullet: @green;
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CF Test</title>
<link rel="stylesheet/less" type="text/css" href="main.less" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
</head>
<body>
<!--
=================
Begin page source
=================
-->
<header class="wrapper wrapper__match-content" role="banner">
<div class="block block__sub">
<h1>Capital Framework demo page</h1>
</div>
</header>
<main class="content" id="main" role="main">
<div class="content_bar"></div>
<div class="content_wrapper">
<div class="content_main">
<div class="feature-list">
<p class="block u-mt0 intro-message">
This demo page contains a small sample from each component.
Refer to the docs for the full set of patterns.
</p>
<section class="feature-list_item block">
<div class="feature-header">
<h1 class="feature-header_name">CF-Core</h1>
<a class="feature-header_docs"
href="https://cfpb.github.io/cf-core/docs/">
<span class="cf-icon cf-icon-document"></span>
Docs
</a>
</div>
<div class="block block__sub u-mt0">
<h2>Colors</h2>
<p>
<span class="color-demo color-demo__btn-bg"></span>
<span class="color-demo color-demo__btn-secondary-bg"></span>
<span class="color-demo color-demo__btn-disabled-bg"></span>
</p>
</div>
<div class="block block__sub">
<h2>Typography base styles</h2>
<div class="typography-demo">
<div class="block block__sub typography-demo_item">
<div class="typography-demo_item-header">
<h3 class="h5">Superheader</h3>
<div class="spec">
Avenir Next Demi<br>
48px / 66px
</div>
</div>
<h1 class="superheader">Getting out of debt</h1>
</div>
<div class="block block__sub typography-demo_item">
<div class="typography-demo_item-header">
<h3 class="h5">H1</h3>
<div class="spec">
Avenir Next Regular<br>
34px / 44px
</div>
</div>
<h1>Getting out of debt</h1>
</div>
<div class="block block__sub typography-demo_item">
<div class="typography-demo_item-header">
<h3 class="h5">H2</h3>
<div class="spec">
Avenir Next Regular<br>
26px / 33px
</div>
</div>
<h2>Getting out of debt</h2>
</div>
<div class="block block__sub typography-demo_item">
<div class="typography-demo_item-header">
<h3 class="h5">H3</h3>
<div class="spec">
Avenir Next Regular<br>
22px / 28px
</div>
</div>
<h3>Getting out of debt</h3>
</div>
<div class="block block__sub typography-demo_item">
<div class="typography-demo_item-header">
<h3 class="h5">H4</h3>
<div class="spec">
Avenir Next Medium<br>
18px / 22px
</div>
</div>
<h4>Getting out of debt</h4>
</div>
<div class="block block__sub typography-demo_item">
<div class="typography-demo_item-header">
<h3 class="h5">H5</h3>
<div class="spec">
Avenir Next Demi<br>
14px / 22px<br>
uppercase<br>
letter-spacing: 1px
</div>
</div>
<h5>Getting out of debt</h5>
</div>
<div class="block block__sub typography-demo_item">
<div class="typography-demo_item-header">
<h3 class="h5">H6</h3>
<div class="spec">
Avenir Next Demi<br>
12px / 22px<br>
uppercase<br>
letter-spacing: 1px
</div>
</div>
<h6>Getting out of debt</h6>
</div>
<div class="block block__sub typography-demo_item">
<div class="typography-demo_item-header">
<h3 class="h5">Body</h3>
<div class="spec">
Georgia<br>
16px / 22px<br>
</div>
</div>
<p>
Use this tool to compare school data and relevant financial factors to
make a more informed decision for your future.
</p>
</div>
</div><!-- END .block.block__sub -->
</div><!-- END .typography-demo -->
<div class="block block__sub">
<h2>Input base styles</h2>
<form action="#">
<p><input placeholder="placeholder text" type="text"></p>
<p><textarea>Example entry</textarea></p>
</form>
</div>
</section>
<section class="feature-list_item block block__padded-top block__border-top">
<div class="feature-header">
<h1 class="feature-header_name">CF-Buttons</h1>
<a class="feature-header_docs"
href="https://cfpb.github.io/cf-buttons/docs/">
<span class="cf-icon cf-icon-document"></span>
Docs
</a>
</div>
<p><a href="#" class="btn">Link Button</a> <button class="btn">Form Button</button></p>
</section>
<section class="feature-list_item block block__padded-top block__border-top">
<div class="feature-header">
<h1 class="feature-header_name">CF-Expandables</h1>
<a class="feature-header_docs"
href="https://cfpb.github.io/cf-expandables/docs/">
<span class="cf-icon cf-icon-document"></span>
Docs
</a>
</div>
<div class="expandable expandable__padded">
<a class="expandable_target expandable_header"
href="#expandable-padded-content">
<span class="expandable_label expandable_header-left">
Expandable Header
</span>
<span class="expandable_link expandable_header-right">
<span class="expandable_cue-open">
Show
<span class="cf-icon cf-icon-plus-round"></span>
</span>
<span class="expandable_cue-close">
Hide
<span class="cf-icon cf-icon-minus-round"></span>
</span>
</span>
</a>
<div class="expandable_content" id="expandable-padded-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Neque ipsa voluptatibus soluta nobis unde quisquam
temporibus magnam debitis quidem. Ducimus ratione
corporis nesciunt earum vel est quaerat blanditiis
dolore ipsa?
</p>
</div>
</div>
</section>
<section class="feature-list_item block block__padded-top block__border-top">
<div class="feature-header">
<h1 class="feature-header_name">CF-Forms</h1>
<a class="feature-header_docs"
href="https://cfpb.github.io/cf-forms/docs/">
<span class="cf-icon cf-icon-document"></span>
Docs
</a>
</div>
<div class="input-with-btn">
<div class="input-with-btn_input">
<input type="text">
</div>
<div class="input-with-btn_btn">
<button class="btn">Search</button>
</div>
</div>
</section>
<section class="feature-list_item block block__padded-top block__border-top">
<div class="feature-header">
<h1 class="feature-header_name">CF-Grid</h1>
<a class="feature-header_docs"
href="https://cfpb.github.io/cf-grid/docs/">
<span class="cf-icon cf-icon-document"></span>
Docs
</a>
</div>
<div class="sample-grid">
<div class="sample-grid_col sample-grid_col-1"></div>
<div class="sample-grid_col sample-grid_col-1"></div>
<div class="sample-grid_col sample-grid_col-1"></div>
<div class="sample-grid_col sample-grid_col-1"></div>
<div class="sample-grid_col sample-grid_col-1"></div>
<div class="sample-grid_col sample-grid_col-1"></div>
<div class="sample-grid_col sample-grid_col-1"></div>
<div class="sample-grid_col sample-grid_col-1"></div>
<div class="sample-grid_col sample-grid_col-1"></div>
<div class="sample-grid_col sample-grid_col-1"></div>
<div class="sample-grid_col sample-grid_col-1"></div>
<div class="sample-grid_col sample-grid_col-1"></div>
<div class="sample-grid_col sample-grid_col-6"></div>
<div class="sample-grid_col sample-grid_col-6"></div>
<div class="sample-grid_col sample-grid_col-4"></div>
<div class="sample-grid_col sample-grid_col-4"></div>
<div class="sample-grid_col sample-grid_col-4"></div>
<div class="sample-grid_col sample-grid_col-3"></div>
<div class="sample-grid_col sample-grid_col-3"></div>
<div class="sample-grid_col sample-grid_col-3"></div>
<div class="sample-grid_col sample-grid_col-3"></div>
</div>
<br>
</section>
<section class="feature-list_item block block__padded-top block__border-top">
<div class="feature-header">
<h1 class="feature-header_name">CF-Icons</h1>
<a class="feature-header_docs"
href="https://cfpb.github.io/cf-layout/docs/">
<span class="cf-icon cf-icon-icons"></span>
Docs
</a>
</div>
<div>
<span class="cf-icon cf-icon-approved"></span>
<span class="cf-icon cf-icon-approved-round"></span>
<span class="cf-icon cf-icon-error"></span>
<span class="cf-icon cf-icon-error-round"></span>
<span class="cf-icon cf-icon-help"></span>
<span class="cf-icon cf-icon-help-round"></span>
<span class="cf-icon cf-icon-delete"></span>
<span class="cf-icon cf-icon-delete-round"></span>
<span class="cf-icon cf-icon-plus"></span>
<span class="cf-icon cf-icon-plus-round"></span>
<span class="cf-icon cf-icon-minus"></span>
<span class="cf-icon cf-icon-minus-round"></span>
<span class="cf-icon cf-icon-update"></span>
<span class="cf-icon cf-icon-update-round"></span>
</div>
</section>
<section class="feature-list_item block block__padded-top block__border-top">
<div class="feature-header">
<h1 class="feature-header_name">CF-Layout</h1>
<a class="feature-header_docs"
href="https://cfpb.github.io/cf-layout/docs/">
<span class="cf-icon cf-icon-document"></span>
Docs
</a>
</div>
<main class="content content__2-1" id="main" role="main">
<div class="content_bar"></div>
<div class="content_wrapper">
<section class="content_main">
<h2>Main content area</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Cum corrupti tempora nam nihil qui mollitia consectetur
corporis nemo culpa dolorum! Laborum at eos deleniti
consequatur itaque officiis debitis quisquam! Provident!
</p>
</section>
<aside class="content_sidebar" style="background: #F1F2F2">
Sidebar
</aside>
</div>
</main>
</section>
<section class="feature-list_item block block__padded-top block__border-top">
<div class="feature-header">
<h1 class="feature-header_name">CF-Pagination</h1>
<a class="feature-header_docs"
href="https://cfpb.github.io/cf-pagination/docs/">
<span class="cf-icon cf-icon-document"></span>
Docs
</a>
</div>
<nav class="pagination">
<a class="btn btn__super pagination_prev" href="#pagination_content">
<span class="btn_icon__left cf-icon cf-icon-left"></span>
Previous
</a>
<a class="btn btn__super pagination_next" href="#pagination_content">
Next
<span class="btn_icon__right cf-icon cf-icon-right"></span>
</a>
<form class="pagination_form" action="index.html#pagination_content">
<label class="pagination_label"
for="pagination_current-page">
Page
<span class="u-visually-hidden">
number out of 149 total pages
</span>
</label>
<input
class="pagination_current-page"
id="pagination_current-page"
name="pagination_current-page"
type="number" min="1" max="149"
value="149">
<span class="pagination_label">
<span aria-hidden="true">
of 149
</span>
</span>
<button class="btn btn__link pagination_submit"
id="pagination_submit"
type="submit">
Go
</button>
</form>
</nav>
<br>
</section>
<section class="feature-list_item block block__padded-top block__border-top">
<div class="feature-header">
<h1 class="feature-header_name">CF-Typography</h1>
<a class="feature-header_docs"
href="https://cfpb.github.io/cf-typography/docs/">
<span class="cf-icon cf-icon-document"></span>
Docs
</a>
</div>
<aside class="pull-quote">
<div class="pull-quote_body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Cum corrupti tempora nam nihil qui mollitia consectetur
corporis nemo culpa dolorum!
</div>
<footer>
<cite class="pull-quote_citation">
- Author Name
</cite>
</footer>
</aside>
<br>
<h2 class="header-slug">
<span class="header-slug_inner">
Blog summary
</span>
</h2>
<h2 class="fancy-slug">
<span class="fancy-slug_text">
<span class="fancy-slug_ribbon-left"></span>
Watchroom
<span class="fancy-slug_ribbon-right"></span>
</span>
</h2>
<div class="meta-header">
<span class="meta-header_right date">
Nov 4, 2013
</span>
<a href="#" class="meta-header_left category-slug">
<span class="cf-icon cf-icon-credit-card"></span>
Consumer finance
</a>
</div>
<ul class="list__branded">
<li class="list_item">First item</li>
<li class="list_item">Second item</li>
<li class="list_item">Third item</li>
</ul>
</section>
</div><!-- END .feature-list -->
</div><!-- END .content_main -->
</div>
</main>
<footer role="contentinfo">
<!-- Footer stuff -->
</footer>
</body>
</html>
Raw
main.less
// Import the brand color palette.
@import "brand-palette.less";
// Override the Capital Framework theme variables with colors from the brand color palette.
@import "cf-theme-overrides.less";
// We've generated some sample rules for you. They're used with the index.html file.
// Please delete them before starting your project.
.intro-message {
padding: 1em;
background: @expandable__padded-bg;
.webfont-medium();
}
.feature-header {
display: inline-block;
padding-bottom: unit(10px / @base-font-size-px, em);
margin-bottom: unit(30px / @base-font-size-px, em);
border-bottom: 4px solid @content_bar;
&_name {
display: inline-block;
margin: 0;
line-height: 1;
}
&_docs {
display: inline-block;
vertical-align: top;
.webfont-regular();
}
&_name + &_docs {
margin-left: 1em;
}
}
.color-demo {
.grid_column( 4 );
height: 30px;
}
.color-demo__btn-bg {
background-color: @btn-bg;
}
.color-demo__btn-secondary-bg {
background-color: @btn__secondary-bg;
}
.color-demo__btn-disabled-bg {
background-color: @btn__disabled-bg;
}
.sample-grid {
.grid_nested-col-group();
}
.sample-grid_col:before {
content: "";
display: block;
width: 100%;
height: 1em;
background: @btn-bg;
}
.sample-grid_col-1 {
.grid_column( 1 );
}
.sample-grid_col-3 {
.grid_column( 3 );
}
.sample-grid_col-4 {
.grid_column( 4 );
}
.sample-grid_col-6 {
.grid_column( 6 );
}
.typography-demo {
&_item {
.u-clearfix();
}
&_item-header {
float: left;
width: unit(200px / @base-font-size-px, em);
margin-right: @grid_gutter-width;
text-align: right;
}
.spec {
.webfont-regular();
color: #75787B;
font-size: 0.875em;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment