Skip to content

Drop Adelle Sans for Open Sans#359

Merged
mdo merged 24 commits intomasterfrom
optimize_docs_fonts
Mar 3, 2014
Merged

Drop Adelle Sans for Open Sans#359
mdo merged 24 commits intomasterfrom
optimize_docs_fonts

Conversation

@mdo
Copy link
Copy Markdown
Member

@mdo mdo commented Mar 1, 2014

I'm proposing we drop Adelle Sans and use Source Sans Pro from Google Web Fonts. Apparently this shaves 300kb off the docs file size, a huge win for #354. Plus, rather than font-weight: 100 everywhere in media queries, we stick to one font weight, no matter the screen. This means nullifying #351.

Visually, they look pretty similar to me, and that page load is huge.

Before

screen shot 2014-03-01 at 12 01 02 pm

After

screen shot 2014-03-01 at 12 05 36 pm

@zlatanvasovic
Copy link
Copy Markdown

zlatanvasovic commented Mar 1, 2014

Good idea.

@mdo mdo added the docs label Mar 1, 2014
@mdo mdo added this to the 2.0.1 milestone Mar 1, 2014
juthilo
juthilo reviewed Mar 1, 2014
View reviewed changes
docs/_includes/header.html Outdated
Copy link
Copy Markdown
Contributor

@juthilo juthilo Mar 1, 2014

Choose a reason for hiding this comment

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

https://developers.google.com/fonts/docs/getting_started#Syntax says to use | as separator between multiple fonts.

@connors
Copy link
Copy Markdown
Collaborator

connors commented Mar 1, 2014

Yeah, I like Adelle as a font better but this is clearly a win.

@mdo
Copy link
Copy Markdown
Member Author

mdo commented Mar 1, 2014

I've switched this PR to use Open Sans because Source Sans Pro is rather short compared to both fallback fonts and the current Adelle Sans. It'd require a lot of font-size changes. Using Open Sans simplifies that.

I've also made some other modifications here:

  • Added a .docs-content class to the main column for scoped type styles. Otherwise, everything would be inherited in the device examples.
  • Refactored the type styles in the docs to use em units for easy scaling across media queries. These are the ones scoped in the previous bullet.
  • Removed the .docs-steps component because flat content just seems to make more sense here.
  • Removed the additional font-weights so Open Sans is only called in 300.
  • Removed the .section-* classes as well since those should just use standard type styles.
  • Saving the files in Atom nuked some rogue trailing spaces on a few line—I suggest everyone here update their editor preferences to nuke trailing whitespace on save.
  • Added a heading to the first section of the Getting Started page because it looked a bit odd without it.

Still have a few tweaks to make given the font change, but overall it's pretty on par with what we're rocking today, minus 300kb still.

screen shot 2014-03-01 at 2 21 07 pm
screen shot 2014-03-01 at 2 21 14 pm
screen shot 2014-03-01 at 2 21 25 pm

@mdo mdo mentioned this pull request Mar 1, 2014
Closed
@connors
Copy link
Copy Markdown
Collaborator

connors commented Mar 2, 2014

🆒 so I went through and took care of merging master. I also updated the examples page to be a bit simpler and use the grid.

Speaking of the grid, I simplified that too. I went ahead and got rid of the extra padding as the screens got bigger. I really didn't like it that much and it made the examples look bad.

@XhmikosR
Copy link
Copy Markdown
Member

XhmikosR commented Mar 2, 2014

👍 for Open Sans

XhmikosR
XhmikosR reviewed Mar 2, 2014
View reviewed changes
docs/_includes/header.html Outdated
Copy link
Copy Markdown
Member

@XhmikosR XhmikosR Mar 2, 2014

Choose a reason for hiding this comment

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

Perhaps just use the protocol relative URL here?

mdo added 4 commits March 3, 2014 10:48
@mdo
Merge branch 'master' into optimize_docs_fonts
84a532e 
Conflicts:
	docs/_includes/header.html
	docs/getting-started.html
	sass/docs.scss
@mdo
Merge branch 'optimize_docs_fonts' of github.com:twbs/ratchet into op…
5ccaea5 
…timize_docs_fonts

Conflicts:
	docs/examples.html
	docs/getting-started.html
	sass/docs.scss
@mdo
Merge branch 'master' into optimize_docs_fonts
9471ad2
@mdo
Drop the protocol
702a48d
mdo added a commit that referenced this pull request Mar 3, 2014
@mdo
Merge pull request #359 from twbs/optimize_docs_fonts
b8948bb 
Drop Adelle Sans for Open Sans
@mdo mdo merged commit b8948bb into master Mar 3, 2014
@mdo mdo deleted the optimize_docs_fonts branch March 3, 2014 19:04
@connors
Copy link
Copy Markdown
Collaborator

connors commented Mar 3, 2014

✨

@zlatanvasovic
Copy link
Copy Markdown

zlatanvasovic commented Mar 3, 2014

@connors footer.html is missed. #399

@connors
Copy link
Copy Markdown
Collaborator

connors commented Mar 3, 2014

@zdroid Already merged.

@zlatanvasovic
Copy link
Copy Markdown

zlatanvasovic commented Mar 3, 2014

@connors You merged the pull request before I sent the comment, lol! ⏩ ⏩ ⏩

@XhmikosR XhmikosR mentioned this pull request Mar 6, 2014
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

docs

Projects

None yet

Milestone

2.0.1

Development

Successfully merging this pull request may close these issues.

5 participants

@mdo @zlatanvasovic @connors @XhmikosR @juthilo