New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make Template site HTML5 #964

Merged
merged 8 commits into from May 5, 2013

Conversation

Projects
None yet
6 participants
@benbalter
Contributor

benbalter commented Apr 13, 2013

It would really pain me if the default Jekyll site were XHTML with some pretty deprecated practices. That'd be bad for the internet if lots of people were to do it.

Instead, use Twitter Bootstrap as a base (while still keeping @mojombo's origin design), to give users a great initial baseline to build beautiful, simple sites.

Defaults are more than just the starting point. It's what 80% of users are going to use. Look at WordPress and the default theme. Countless child themes are based off of it because users look to it as the best of the best. May as well lead by example and start the user off right.

  • Add Bootstrap base CSS as a better reset and base layer
  • Update default layout to HTML5 with boilerplate best practices
  • Add title and post date to post.html (rather than including in the post itself)
  • Make site title a variable and add to _config.yml
  • Add page title to header
  • Add default .gitignore to ignore _site
  • Remove unused rss.png and .gitkeep
  • Add Modernizr for legacy IE support

benbalter added some commits Apr 13, 2013

Make template site HTML5
It would really pain me if the default Jekyll site were XHTML. That'd be bad for the internet.

Instead, use Twitter Bootstrap as a base (while still keeping @mojombo's origin design), to give users a great initial baseline to build beautiful, simple sites.

Defaults are more than just the starting point. It's what 80% of users are going to use. Look at WordPress and the default theme. May as well lead by example and start the user off right.

* Add Bootstrap base CSS as a better reset and base layer
* Update default layout to HTML5 with boilerplate best practices
* Add title and post date to post.html (rather than including in the post itself)
* Make site title a variable and add to _config.yml
* Add page title to header
* Add default .gitignore to ignore `_site`
* Remove unused `rss.png` and `.gitkeep`
* Add Modernizr for legacy IE support
@parkr

This comment has been minimized.

Member

parkr commented Apr 13, 2013

👎 to bootstrap. This is a lot fancier than I think @mojombo was looking for, but I could be wrong.

@benbalter

This comment has been minimized.

Contributor

benbalter commented Apr 13, 2013

In hindsight, it adds a lot of overhead that isn't exactly in line with the zen simplicity of Jekyll. I'd be cool if we kicked the CSS / JS and just used boilerplate's HTML5 for the default template. Big gripe was the XHTML.

@jwebcat

This comment has been minimized.

jwebcat commented Apr 13, 2013

Meh on bootstrap for me too. How about something much simpler like
sassaparilla or profound grid?
On Apr 13, 2013 10:28 AM, "Ben Balter" notifications@github.com wrote:

In hindsight, it adds a lot of overhead that isn't exactly in line with
the zen simplicity of Jekyll. I'd be cool if we kicked the CSS / JS and
just used boilerplate's HTML5 for the default template. Big gripe was the
XHTML.


Reply to this email directly or view it on GitHubhttps://github.com//pull/964#issuecomment-16337170
.

@benbalter

This comment has been minimized.

Contributor

benbalter commented Apr 13, 2013

I think choosing a framework will A) invite a holy war, and B) isn't in line with the simplicity that Jekyll strives for.

Any objection if I take the CSS/images/javascript out of the pull request?

@jwebcat

This comment has been minimized.

jwebcat commented Apr 14, 2013

-- Holy War

after more thought think your definitely right about this one. I think we
can all agree about this.

On Sat, Apr 13, 2013 at 3:31 PM, Ben Balter notifications@github.comwrote:

I think choosing a framework will A) invite a holy war, and B) isn't in
line with the simplicity that Jekyll strives for.

Any objection if I take the CSS/images/javascript out of the pull request?


Reply to this email directly or view it on GitHubhttps://github.com//pull/964#issuecomment-16342134
.

@mattr-

This comment has been minimized.

Member

mattr- commented Apr 14, 2013

No objections if you take the CSS/images/javascript out of the pull request.

Strip CSS, JS, and IMG from template site
Per #964, just upgrade the template site from XHTML to HTML5,
leaving the existing CSS. No need to get fancy.

The HTML is essentially HTML5 Boilerplate. No need for a holy war.

Look and feel should remain the same.
@@ -1,2 +1,2 @@
markdown: rdiscount
name: Your New Jekyll Site

This comment has been minimized.

@parkr

parkr Apr 14, 2013

Member

What's the motivation for this?

This comment has been minimized.

@benbalter

benbalter Apr 15, 2013

Contributor

Two reasons:

  1. I'd imagine the first thing most people would do after standing up a scaffold is rename the site to customize it. Before, it was hard coded in the layout. Putting it in _config.yml makes it easier to find and makes the on boarding experience smoother.
  2. If we put a variable in _config.yml, the template site then shows off all the core features of Jekyll templating. Could very easily walk someone through the result of the template site, and they'd have a pretty solid understanding of of Jekyll works.

Not 💒 to the idea if you have a strong opinion to the contrary. May just be an artifact from my WordPress days. 😄

@parkr

View changes

lib/site_template/_layouts/default.html Outdated
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>

This comment has been minimized.

@parkr

parkr Apr 14, 2013

Member

I'm not sure how I feel about this. I'm down with making everything HTML5, but the IE stuff feels like cruft. :/

This comment has been minimized.

@benbalter

benbalter Apr 15, 2013

Contributor

Yep. Missed that one. 86'd in 14ca578.

@mojombo

View changes

lib/site_template/_layouts/default.html Outdated
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

This comment has been minimized.

@mojombo

mojombo Apr 15, 2013

Contributor

Do we really need all this IE stuff? I think the example site should be simple enough that it doesn't need to add a bunch of confusing code to deal with IE shenanigans.

<body>
<div class="container">
<div class="site">

This comment has been minimized.

@parkr

parkr Apr 15, 2013

Member

Think we should use semantic tags here, like section, header, and aside?

This comment has been minimized.

@benbalter

benbalter Apr 15, 2013

Contributor

Added in header. Since there's no sidebar, etc., theoretically we could do article if we wanted.

That said, in the interest of simplicity, don't know how far we want to go down this path... As is we should technically be including modernizr (or at least html5 shim) so IE doesn't freak out when it sees the tags.

@benbalter

View changes

lib/site_template/_layouts/default.html Outdated
<div class="container">
<div class="site">
<div class="title">
<a href="/">{{ site.name }}</a>

This comment has been minimized.

@benbalter

benbalter Apr 15, 2013

Contributor

Any objection to making this an H1?

This comment has been minimized.

@mattr-

mattr- Apr 15, 2013

Member

Embiggen all the things!

@parkr

This comment has been minimized.

Member

parkr commented Apr 15, 2013

Please fix the CSS. Everything looks all wrong. Tom's website is the template.

@benbalter

This comment has been minimized.

Contributor

benbalter commented Apr 15, 2013

Can you be more specific? I see about 20px of margin-bottom missing from header, but otherwise, just ran bin/jekyll new test-site which gave me:

Screen Shot 2013-04-15 at 6 31 34 PM

Tom's site:

Screen Shot 2013-04-15 at 6 30 56 PM

@parkr

This comment has been minimized.

Member

parkr commented Apr 15, 2013

The footer styles are messed up! It's the h1 in the title and moving to the <footer> element. CSS needs to be updated and the class="title" needs to be moved to a different item, I think.

CSS reorganization
1. Fix regression on s/.footer/footer/
2. Fix whitespace and tabbing
3. Reorganize properties more logically
@benbalter

This comment has been minimized.

Contributor

benbalter commented Apr 16, 2013

Regression. Should be fixed in 1141986, + cleaned things up significantly.

@parkr

This comment has been minimized.

Member

parkr commented Apr 17, 2013

Just need @mojombo's stamp of approval and we're good to go.

@parkr

This comment has been minimized.

Member

parkr commented May 5, 2013

Think I'm going to push this off to 1.1 for now. Just want to get 1.0 out the door and this isn't a bug so much as it's nice to have.

@benbalter

This comment has been minimized.

Contributor

benbalter commented May 5, 2013

What's the hold up?

@parkr

This comment has been minimized.

Member

parkr commented May 5, 2013

I just haven't made the time to make sure it's the same as the current template.

@parkr

This comment has been minimized.

Member

parkr commented May 5, 2013

Also, without the HTML5 shims, older versions of IE will crap out. I'd love to have something that works with every browser without the need for modernizr.

@benbalter

This comment has been minimized.

Contributor

benbalter commented May 5, 2013

If we move <header> and <footer> to <div>s, we should be fine in terms of IE.

@parkr

This comment has been minimized.

Member

parkr commented May 5, 2013

make it so

Downgrade default site template for Internet exploder
Swap `<header>` and `<footer>` tags to `<div>`s, so we can support IE without the need for an html5 shim.
@benbalter

This comment has been minimized.

Contributor

benbalter commented May 5, 2013

Done. Updated screenshots:

master

screen shot 2013-05-05 at 2 32 02 pm

screen shot 2013-05-05 at 2 32 17 pm

html5-site-template

screen shot 2013-05-05 at 2 31 27 pm

screen shot 2013-05-05 at 2 31 32 pm

@parkr

This comment has been minimized.

Member

parkr commented May 5, 2013

yey

Thanks :)

parkr added a commit that referenced this pull request May 5, 2013

@parkr parkr merged commit 50d6683 into jekyll:master May 5, 2013

1 check passed

default The Travis build passed
Details

parkr added a commit that referenced this pull request May 5, 2013

@benbalter benbalter deleted the benbalter:html-template-site branch May 5, 2013

@benbalter

This comment has been minimized.

Contributor

benbalter commented May 5, 2013

🎉 🎇 🏆 👑 🍻

@parkr

This comment has been minimized.

Member

parkr commented May 5, 2013

Only thing that is weird is that the output of the highlight tag is smaller in the newer version.

@benbalter benbalter referenced this pull request Dec 20, 2013

Closed

Change template to H5BP #1856

@jekyll jekyll locked and limited conversation to collaborators Feb 27, 2017

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.