Skip to content
This repository was archived by the owner on Dec 11, 2021. It is now read-only.

Typography: Add Variables #139

Closed
wants to merge 4 commits into from
Closed

Typography: Add Variables #139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e147a19
Typography: Add Link Variables
rohmulan Jan 18, 2016
5bef808
Typography: Use color variables and palette
rohmulan Feb 23, 2016
c78216a
Typography: Add heading and code variables
rohmulan Feb 26, 2016
3c4dab8
Typography: Variable style change in jsass and link colors
rohmulan Mar 3, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion scss/atoms/typography/_functions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@
* 1. font-size: em(14px);
* 2. font-size: em(30px/14px);
*/
@function em($value, $context: map-get($defaultFont, font-size)) {
@function em($value, $context: map-get($font-default, font-size)) {
@return ($value / $context * 1em);
}
13 changes: 12 additions & 1 deletion scss/atoms/typography/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,16 @@
/*
* ==========================================================================
* Typography functions
* Typography mixins
* ==========================================================================
*/
@mixin heading($style) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice use of mixin here! :-D

font-size: em(map-get($style,font-size));
font-weight: map-get($style,font-weight);
line-height: 1;
text-transform: map-get($style,capitalization);
}
@mixin link($style) {
color: map-get($style,color);
font-weight: map-get($style,font-weight);
text-decoration: map-get($style,decoration);
}
54 changes: 21 additions & 33 deletions scss/atoms/typography/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"mixins";

body {
font: $normal #{ map-get( $defaultFont, font-size ) }/1.5 $sans;
font: $normal #{ map-get( $font-default, font-size ) }/1.5 $sans;

@media ( max-width: $viewport-md-min ) {
font-size: 16px;
Expand All @@ -21,40 +21,27 @@ body {
}

h1 {
font-size: em( 67px ); // 54px works nicely, as well
font-weight: 700;
line-height: 1;
@include heading($h1);
}

h2 {
font-size: em( 36px );
font-weight: 600;
line-height: 1;
@include heading($h2);
}

h3 {
font-size: em( 30px );
font-weight: 600;
line-height: 1;
@include heading($h3);
}

h4 {
font-size: em( 24px );
font-weight: 600;
line-height: 1;
@include heading($h4);
}

h5 {
font-size: em( 20px );
font-weight: 600;
line-height: 1;
@include heading($h5);
}

h6 {
font-size: em( 16px );
font-weight: 600;
line-height: 1;
text-transform: uppercase;
@include heading($h6);
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sfrisk I kinda don't link this. Isn't that opionanted? More people would use h6 with normal capitalization than uppercase.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That should probably be moved to a variable - so they have the ability to set that.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sfrisk I don't think something like text-transform on a heading should be a variable.. we would have too many variables that way. h1-text-transform....to ...h6-text-transform. I think if we leave that property to default, users can overwrite with css easily?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know there was discussion at one point about how we intend to have Chassis be used as a library/framework - if updates to the code could easily be done within Chassis itself - or if the expectation was that any modifications should be done from outside of Chassis, and Chassis's code should be left intact. If the latter - we probably want to make it a variable to avoid a lot of overwriting of styles. A plus side for making it a variable though is that a designer could better leverage the themeroller in customizing how Chassis looks.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

okay, then ill have that variable only for h6 and h5, we dont want the entire stylesheet in the variables


/*
Expand All @@ -65,20 +52,20 @@ h6 {

hr {
border: 0;
border-bottom: 1px solid #999;
border-bottom: map-get($hr, thickness) map-get($hr, style) map-get($hr, color);
}

blockquote {
margin: 0;
padding-left: 1em;
padding-left: map-get($blockquote,padding-left); //TODO consider all padding variables
position: relative;
border-left: 4px solid #eee; // TODO replace with color variable
font-style: italic;
border-left: map-get($blockquote,border);
font-style: map-get($blockquote,font-style);
}

pre {
padding: 16px 20px;
background: #f7f7f7;
background: map-get($pre,background);
font: normal 12px/1.4 $monospace;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't we handle overflow here as well ?


Expand All @@ -103,15 +90,16 @@ dd {
*/

a {
//TODO add colors

&:hover,
@include link($link);
&:visited {
@include link($link-visited);
}
&:active,
&:focus {
//TODO add colors
@include link($link-focus);
}
&:visited {
// TODO add colors
&:hover {
@include link($link-hover);
}
}

Expand All @@ -121,8 +109,8 @@ strong {
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should style paragraphs and lists too amongst the others

code {
background: #f2f2f2; // TODO replace with color variable
background: map-get($code,background);
font-size: em( 16px );
padding: em( 4px, 16px ) em( 8px, 16px );
border-radius: 3px;
border-radius: map-get($code,border-radius);
}
132 changes: 121 additions & 11 deletions scss/variables/typography.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,51 +8,161 @@
}
}( this, function( chassis ) {

var color = "#222",
var color = "map-get($text, base)",
fontSize = "20px",
lineHeight = 1.5;

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally these colors should come from a palette defined somewhere? We could have, say, shades of Blue as the 'Blue palette' and use different shades for different states of a link.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My plan is to apply something sort of like this: https://scotch.io/tutorials/aesthetic-sass-2-colors

chassis.typography = {
normal: {
"normal": {
name: "Font weight - Normal",
value: "normal"
},
bold: {
"bold": {
name: "Font weight - Bold",
value: "bold"
},
color: {
"color": {
name: "Font color",
value: color
},
fontSize: {
"font-size": {
name: "Font size",
value: fontSize
},
lineHeight: {
"line-height": {
name: "Line Height",
value: lineHeight
},
defaultFont: {
"font-default": {
name: "Type Style - Default",
value: {
color: color,
"color": color,
"font-size": fontSize,
"line-height": lineHeight
}
},
monospace: {
"monospace": {
name: "Font Family - Monospace",
value: "\"courier new\", monospace"
},
serif: {
"serif": {
name: "Font Family - Serif",
value: "Georgia, \"Times New Roman\", Times, serif"
},
sans: {
"sans": {
name: "Font Family - Sans",
value: "Helvetica, Arial, sans-serif"
},
"link": {
name: "Link",
value: {
"color": "map-get($primary, base)",
"decoration": "none",
"font-weight": "normal"
}
},
"link-hover": {
name: "Link On Mouse Hover",
value: {
"color": "map-get($primary, light)",
"decoration": "underline",
"font-weight": "normal"
}
},
"link-focus": {
name: "Link On Focus or Active",
value: {
"color": "map-get($primary, dark)",
"decoration": "none",
"font-weight": "normal"
}
},
"link-visited": {
name: "Link If Visited",
value: {
"color": "map-get($primary, base)",
"decoration": "none",
"font-weight": "normal"
}
},
"hr": {
name: "HR style",
value: {
"color": "#999",
"thickness": "1px",
"style": "solid"
}
},
"code": {
name: "code style",
value: {
"background": "#f2f2f2",
"border-radius": "3px"
}
},
"pre": {
name: "Pre style",
value: {
"background": "#f7f7f7"
}
},
"h1": {
name: "H1 Style",
value: {
"font-weight": "700",
"font-size": "67px",
"capitalization": "none"
}
},
"h2": {
name: "H2 Style",
value: {
"font-weight": "600",
"font-size": "36px",
"capitalization": "none"
}
},
"h3": {
name: "H3 Style",
value: {
"font-weight": "600",
"font-size": "30px",
"capitalization": "none"
}
},
"h4": {
name: "H4 Style",
value: {
"font-weight": "600",
"font-size": "24px",
"capitalization": "none"
}
},
"h5": {
name: "H5 Style",
value: {
"font-weight": "600",
"font-size": "20px",
"capitalization": "none"
}
},
"h6": {
name: "H6 Style",
value: {
"font-weight": "600",
"font-size": "16px",
"capitalization": "uppercase"
}
},
"blockquote": {
name: "BlockQuote Style",
value: {
"border": "4px solid #eee",
"font-style": "italic",
"padding-left": "1em"
}
}

};

return chassis;
Expand Down