Skip to content

Commit

Permalink
Merge pull request #3 from nikolaswise/master
Browse files Browse the repository at this point in the history 
Colors, Utils, and Grid
  • Loading branch information
@paulcpederson
paulcpederson committed Aug 28, 2014
2 parents 5a2f6b2 + 772ce65 commit 8b92cf8
Show file tree
Hide file tree
Showing 26 changed files with 1,567 additions and 7 deletions.
7 changes: 4 additions & 3 deletions Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ module.exports = function(grunt) {
pkg: grunt.file.readJSON('package.json'),

// Middleman configuration so grunt can run middleman
middleman: {
'middleman': {
options: {
useBundle: true
},
Expand All @@ -38,7 +38,7 @@ module.exports = function(grunt) {
},

// Watch files
watch: {
'watch': {
scripts: {
files: ['lib/**/*.js'],
tasks: [
Expand All @@ -59,7 +59,8 @@ module.exports = function(grunt) {

// Run a development environment
grunt.registerTask('dev', [

'middleman:server',
'watch'
]);

// Build the doc site and generate dist folder
Expand Down
4 changes: 3 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
calcite-web
===========

Authoritative font-end development resources for Calcite design initiative. Includes extendable base components and styles, as well as a modular and effecient framework for ArcGIS properties.
Authoritative font-end development resources for Calcite design initiative. Includes extendable base components and styles, as well as a modular and effecient framework for ArcGIS properties.

-----------
46 changes: 44 additions & 2 deletions lib/stylesheets/calcite-web.scss
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,53 @@
// ┌──────────────┐
// │ CUSTOM BUILD │
// └──────────────┘

// Sass Output
$include-colors: true !default;
$include-utils: true !default;

// CSS Output
$include-grid: true !default;
$fold-grid: true !default;

$include-type: true !default;
$include-header-family: true !default;
$include-body-family: true !default;
$include-secondary-family: true !default;
$include-code-family: true !default;
$include-type-defaults: true !default;


// ┌──────────────┐
// │ CALCITE WEB │
// └──────────────┘

// Base
// initial setup: config, reset, mixins...
// initial setup: config, color pallete, reset...
@import "calcite-web/base/config";
@import "calcite-web/base/colors";
@import "calcite-web/base/reset";

// Utils
// Micro-Framework adpated from Compass and Bourbon
// Provides basic prefixing and standard mixins
@import "calcite-web/utils/appearance";
@import "calcite-web/utils/box-sizing";
@import "calcite-web/utils/calc";
@import "calcite-web/utils/clearfix";
@import "calcite-web/utils/prefixer";
@import "calcite-web/utils/responsive";
@import "calcite-web/utils/transform";
@import "calcite-web/utils/transition";
@import "calcite-web/utils/visibility";

// Layout
// structural level styles: grid, helper classes...
@import "calcite-web/grid/viewport-grid";

// Type
// typographic styles: font-families, element styles, modifiers...
@import "calcite-web/type/type-cabinet";

// Components
// small pieces: buttons, icons, tables...
Expand All @@ -16,4 +56,6 @@
// complete interfaces: header, footer, banner...

// Javascript
// patterns requiring javascript: tabs, modals, carousels...
// patterns requiring javascript: tabs, modals, carousels...


67 changes: 67 additions & 0 deletions lib/stylesheets/calcite-web/base/_colors.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
//## Calcite Color Pallete
//
//An extensive set of color variables are set up inside of config.
//Color names are generally semantic and simple, making them very easy to remember.
//Color variables are references like any other sass variable:
//
//```css
//.element-to-style{
// color: $gray;
//}
//```
//
//If there are no modifiers, just write 'No Modifiers'.
//
// No Modifiers
//
//Styleguide 1.x

// Neutrals
$white: hsl(0, 0, 100); //#FFFFFF
$off-white: hsl(0, 0, 98); //#F9F9F9
$lightest-gray: hsl(0, 0, 93); //#EDEDED
$lighter-gray: hsl(0, 0, 80); //#CCCCCC
$light-gray: hsl(0, 0, 65); //#A6A6A6
$gray: hsl(0, 0, 50); //#808080
$dark-gray: hsl(0, 0, 35); //#595959
$darker-gray: hsl(0, 0, 20); //#333333
$darkest-gray: hsl(0, 0, 12); //#1F1F1F
$off-black: hsl(0, 0, 2); //#050505
$black: hsl(0, 0, 0); //#000000

// Blues
$lightest-blue: #E1F0FB;
$lighter-blue: #D1E9F9;
$light-blue: #7FBBDF;
$blue: #0079C1;
$dark-blue: #005E95;

// Greens
$light-green: #9BC29D;
$green: #68AA67;
$dark-green: #5B945A;

// Reds
$light-red: #E5A894;
$red: #C96B4B;
$dark-red: #C7552E;

// Oranges
$light-orange: #F7CB92;
$orange: #EEAA5A;
$dark-orange: #E89D48;

// Yellows
$light-yellow: #EFE498;
$yellow: #E5D255;
$dark-yellow: #D9C44C;

// Purples
$light-purple: #C5BDDD;
$purple: #9182BD;
$dark-purple: #7C6CA8;

// Browns
$light-brown: #D3B490;
$brown: #B88A55;
$dark-brown: #A67947;
128 changes: 127 additions & 1 deletion lib/stylesheets/calcite-web/base/_config.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,130 @@
.modifier-1 {}
.modifier-2 {}
&:hover {}
}
}

// ┌─────────────┐
// │ GRID CONFIG │
// └─────────────┘

// Breakpoints
$small: 480px !default;
$medium: 860px !default;
$large: 1280px !default;

// Grid Settings
$vw-ratio: 0.9;
$container-width: $vw-ratio * 100vw !default;
$container-min: 0 !default;
$container-max: $large * $vw-ratio !default;
$column-gutter: 1rem !default;

// Grid Fallback Options
$ie8-support: false !default;
$column-gutter-fallback: 20px !default;
$container-width-fallback: 960px !default;

// Folding Grid Options

// Large
$large-class: 'column' !default;
$large-column-count: 24 !default;

// Medium
$medium-class: 'tablet' !default;
$medium-column-count: 12 !default;

// Small
$small-class: 'phone' !default;
$small-column-count: 6 !default;

// Vertical Rhythm
$vertical-range: 6 !default;

// ┌─────────────┐
// │ TYPE CONFIG │
// └─────────────┘

// Scale
$golden-ratio: 1.618;
$major-third : 1.25 ;
// Structural
$ratio: $major-third !default;
$body-size: 1rem !default;
$small-size: 0.75rem !default;
$baseline: 1.5rem !default;
$indent: 1em !default;

// Font Families
$header-family: 'Avenir Next W01', 'Avenir Next', 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !default;
$body-family: 'Frutiger W01', "Lucida Grande", "Segoe UI", "Arial", sans-serif !default;
$secondary-family: 'Kepler W08 Caption', Georgia, serif !default;
$code-family: "Consolas", "Andale Mono", "Lucida Console", "Monaco", "Courier New", Courier, monospace !default;



// Header Weights
$header-tracking: 0 !default;
$header-family: 'Helvetica Neue',
'Helvetica',
'Arial',
sans-serif !default;

$header-thin: false !default;
$header-thin: false !default;
$header-light: 300, 400 !default;
$header-regular: 400, 600 !default;
$header-medium: false !default;
$header-demi: false !default;
$header-bold: 600, 600 !default;
$header-black: false !default;

// Body Weights
$body-tracking: 30 !default;
$body-family: "Lucida Grande",
"Segoe UI",
"Arial",
sans-serif !default;

$body-thin: false !default;
$body-thin: false !default;
$body-light: false !default;
$body-regular: 400, 700 !default;
$body-medium: false !default;
$body-demi: false !default;
$body-bold: 700, 700 !default;
$body-black: false !default;

// Secondary Weights
$secondary-tracking: 10 !default;
$secondary-family: Georgia,
serif !default;

$secondary-thin: false !default;
$secondary-thin: false !default;
$secondary-light: false !default;
$secondary-regular: 400, 700 !default;
$secondary-medium: false !default;
$secondary-demi: false !default;
$secondary-bold: 700, 700 !default;
$secondary-black: false !default;

// Code Weights
$code-tracking: 0 !default;
$code-family: "Consolas",
"Andale Mono",
"Lucida Console",
"Monaco",
"Courier New",
Courier,
monospace !default;

$code-thin: false !default;
$code-thin: false !default;
$code-light: false !default;
$code-regular: 400, 400 !default;
$code-medium: false !default;
$code-demi: false !default;
$code-bold: false !default;
$code-black: false !default;

Loading

0 comments on commit 8b92cf8

Please sign in to comment.