Skip to content

Instantly share code, notes, and snippets.

@metamn
Created January 30, 2014 14:16
Show Gist options
  • Save metamn/8709293 to your computer and use it in GitHub Desktop.
Save metamn/8709293 to your computer and use it in GitHub Desktop.
A Pen by metamn.
/*
Atoms of the Atomic web design
- Basic constants, definitions and declarations
- They cannot be divided further
- They are reused across molecules, organisms and up
- Usually this base is kept as is but reconfigured for every new project
*/
/* Grid
--------------------------------------------------------------------------------
*/
/* Default unit for horizontal and vertical spacing
- combined from $font-size and $line-height
- used for margin and padding
*/
$pad: 1.25em;
/* Long texts cannot span the entire screen, they have to be organized into lines containing 50-80 characters only
- See http://www.kaikkonendesign.fi/typography/#section/3
- Depends on $font-size
*/
$body-text-width: 43.75em; /* 700px / 16px */
/* The width of the content
*/
$container-width: 90%;
$container-margin: 5%;
/* The golden ratio
*/
$major: 61.8%;
$minor: 38.2%;
/* Typography
--------------------------------------------------------------------------------
*/
/* The basic body font size
- See http://lamb.cc/typograph/
*/
$font-size: 100%; /* 16px, 1em */
$line-height: 1.25; /* 20px, 1.25em */
/* This is to convert em to rem
- it depends on font-size
- font-size: 100% => this value is 1, font-size: 65% => this value is .65
*/
$base-font-multiplier: 1;
/* Line heights for headers and body text
- See http://www.kaikkonendesign.fi/typography/#section/4
*/
$line-height-body-text: 1.75;
$line-height-headings: 1.1;
/* Letter spacing for uppercase
*/
$letter-spacing-uppercase: 1.1px;
/* Colors
--------------------------------------------------------------------------------
- taken from https://docs.google.com/a/thereboot.org/document/d/1p6zh6tP6nGeXPGAX9NFYj0f26KHHmchAQBSbv0HXbtI/edit?usp=sharing
*/
$background: #FFFFFF; /* Background */
$color: #6D6A64; /* Font, Reboot grey */
$highlight: #ab5728; /* Reboot red */
$grey: #6d6a64;
$dark-grey: #494744;
$light-grey: #dedad8;
$gray: $grey;
$light-gray: $light-grey;
$dark-gray: $dark-grey;
/* Decorations
--------------------------------------------------------------------------------
*/
$easing: all 0.5s ease-in-out;
$shadow: 15px 20px 25px -10px rgba(0, 0, 0, 0.698), 0 1px rgba(0, 0, 0, 0.1), 0 0 4px rgba(0, 0, 0, 0.1) inset;
$shadow-remove: 0px 0px 0px 0px transparent;
$shadow: 1px 0 $color, 0 1px $color, 2px 1px $color, 1px 2px $color, 3px 2px $color, 2px 3px $color, 4px 3px $color, 3px 4px $color, 5px 4px $color, 4px 5px $color;
$arrow-down: '\2794';
$arrow-up: '\21E1';
$arrow-left: '\21E0';
$arrow-right: '\21E2';
$checkbox: '\2610';
$checkbox-checked: '\2611';
$radio: '\2610';
$radio-checked: '\25a3';
/* in :before and :after usually the font size is larger for better visibility
*/
$before-font-size: 150%;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment