// ------------------------------------------------------------ // Settings // :: Breakpoints // :: Colour // :: Typography // :: Borders // :: Spacing // ------------------------------------------------------------ // ------------------------------------------------------------ // :: Breakpoints // ------------------------------------------------------------ // a-z viewports. Place where design should change, not always on device widths // Hat-tip to @hereinthehive for getting us thinking about naming suggestions $a-vp : 300px; // first viewport $b-vp : 420px; // up one $c-vp : 600px; // up two $d-vp : 900px; // up three $e-vp : 1100px; // up four $f-vp : 1300px; // up five $ie-fixed-vp : 980px; // Viewport for IE fixed width $max-vp : $f-vp; // max viewport. Syntactically makes for a nicer option // At some point, you'll want to switch from a one column view to multi-column. // This variable is used in the grid to dictate when you make that switch $start-columns : $b-vp; // ------------------------------------------------------------ // Define your main colour palette using whatever naming system you like $jack-black : #333; $macy-grey : #777; $ron-burgundy : #e0006e; $al-green : #67b2b1; $beige-ruth : #f5f0e0; $agent-orange : #c64f24; $betty-blue : #a8d9f4; // Assign colours to variable roles // Be descriptive without being specific. // This allows for consistency project to project, and easy changing $body-color : #fff; $base-color : $macy-grey; $heading-color : $jack-black; $hightlight-color : $betty-blue; $action : $agent-orange; $action-respond : $al-green; // ------------------------------------------------------------ // :: Typesizes/scale // ------------------------------------------------------------ // Greek alphabet naming system. Obscure, yet hierarchical. // Allows us to avoid naming based on html object. // Eg. A h1 can be smaller visually, than a h4. $alpha : 42px; $beta : 32px; $gamma : 28px; $delta : 26px; $epsilon : 24px; $zeta : 20px; $eta : 18px; $theta : 15px; $iota : 14px; $kappa : 12px; $para : $theta; // Paragraph size $quote : $beta; // Quote size // ------------------------------------------------------------ // :: Border widths // ------------------------------------------------------------ $default-border-width : 1px; // ------------------------------------------------------------ // :: Grid variables // ------------------------------------------------------------ $internal-spacing-percent : 3%; // Used by grid system $internal-spacing : 40px; // Space internally with fixed measure // ------------------------------------------------------------ // Add functional stuff // ------------------------------------------------------------ @import "functions/functions";