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

Jekyll new theme redesign #2050

Merged
merged 35 commits into from Feb 24, 2014

Conversation

Projects
None yet
8 participants
@jglovier
Member

jglovier commented Feb 16, 2014

This is a work in progress, but nearly complete. Opening PR early (GitHub style) for discussion and finally polish.

I did all of my work so far on a separate repo (jglovier/jekyll-new) to avoid cluttering the commit log with things I was exploring, then re-performed the work on the files within jekyll/lib/site_template for a more streamline commit log.

You can preview the intended design work via the live gh-pages branch from jglovier/jekyll-new at jekyll-new.joelglovier.com. I'm hoping I didn't miss anything in transfering the files over to my actual Jekyll repo, but for some reason I wasn't able to run jekyll serve locally on the version within lib/site_template to double check.

The work is mostly complete, although there are a few things I need to do before the PR is really ready to merge, including:

  • add mobile styling for nav (thinking of a simple jQuery or CSS trick to convert to hamburger menu at mobile viewport)
  • replace github.com and twitter.com in footer with inline svg logo icons to conserve horizontal space
  • take quick pass back over everything in Browserswarm and on mobile to check for layout/design bugs
  • possibly address the syntax highlighting (which I didn't touch) (move to another PR)
  • convert CSS to Sass which is available in Jekyll 2.0 alpha (move to another PR)

jglovier added some commits Feb 16, 2014

Refactor header markup
- use anchor instead of h1 for site title, for semantic accuracy, and
because post h1’s should be the post title
- implement nav wrapper for nav links
- use div.wrap for design structure
Footer markup restructuring
- rework footer to use columns
- add additional area for generic text
Refactor post template
- add article tags around post content
- creates post header
- add conditionals for extra options in meta
Adds a basic page template
Many users moving to Jekyll from other popular blogging options (like
Wordpress) will be used to thinking in terms of pages/posts. Having a
page template like this will be convenient for those users.
Dem new styles tho
- Uses new typography, including Helvetica light, larger font-sizes,
and px values
- Wider site width, larger margins, and overall more whitespace
- Responsive down to mobile
@troyswanson

View changes

lib/site_template/_config.yml Outdated
markdown: redcarpet
highlighter: pygments
description: "Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description."
url: "http://yourdomain.com"
permalink: /posts/:title

This comment has been minimized.

@troyswanson

troyswanson Feb 16, 2014

Member

Is this considered standard these days?

This comment has been minimized.

@jglovier

jglovier Feb 16, 2014

Member

IDK if it's considered standard, per se, but it's certainly useful and in this theme I've made use of it in pre-populated meta tags (for SEO value) and for the feed.xml template which will require those values

This comment has been minimized.

@parkr

parkr Feb 17, 2014

Member

Can we go with what Jekyll has as its default, i.e. leave this out? To me, posts should be very date-oriented, and therefore have the date in their URLs.

This comment has been minimized.

@jglovier

jglovier Feb 17, 2014

Member

Can we go with what Jekyll has as its default, i.e. leave this out? To me, posts should be very date-oriented, and therefore have the date in their URLs.

@parkr do you mean just the permalink value? I can totes 🔥 the permalink line, but the description and url values are necessary for the feed.xml to work, and the head meta.

@jglovier

This comment has been minimized.

Member

jglovier commented Feb 16, 2014

Ah crap, accidentally hit cmd+enter and submitted before I was finished...

Anyway, I have a few more steps to complete, but feel free to dig in and look for any issues with what I've done that might need further addressed.

One thing that I'm interested in hearing input on is the copy tweaks I made. For my own work on the theme I changed some of the default copy just for fun, and also to test out things like trying to break the design with longer or shorter values here and there. But stuff like "Dat site title tho" and use of "Bart Simpson" instead of "Your Name" were just for fun.

Does anyone have a problem with shipping it this way, or do you think we should change it back to the boring, generic things like "Your site title goes here", "Your Name" and "Your Job Title". Personally, I'm love making software feel more human by making use of fun copy, but would be happy to hear any objections.

@troyswanson

View changes

lib/site_template/_includes/header.html Outdated
<nav class="site-nav">
<a class="page-link" href="/about">About</a>
<a class="page-link" href="/projects">Projects</a>
</nav>

This comment has been minimized.

@troyswanson

troyswanson Feb 16, 2014

Member

Maybe we can take advantage of the site.data object to populate this menu?

This comment has been minimized.

@jglovier

jglovier Feb 16, 2014

Member

If so, that would be . I wasn't sure of a way to do it using site.data myself.

This comment has been minimized.

@troyswanson

troyswanson Feb 16, 2014

Member

This may help... #1953

Or I can fork your fork and make a PR myself 😉

This comment has been minimized.

@parkr

parkr Feb 17, 2014

Member

Using site.data will over-complicate things. I'd rather leave that out for now.

<article class="post-content">
{{ content }}
</article>

This comment has been minimized.

@troyswanson

troyswanson Feb 16, 2014

Member

I wonder if we can encourage the use of RDFa lite in this layout. It would involve encompassing the <h1> tag inside the <article> and attaching special attributes. This would provide additional metadata for search engines.

Check out http://schema.org for some more info.

@mattr-

This comment has been minimized.

Member

mattr- commented Feb 20, 2014

@parkr

This comment has been minimized.

Member

parkr commented Feb 24, 2014

This is looking so awesome. You can punt on the CSS ~> Sass or the syntax highlighting for now if you like. :)

@jglovier

This comment has been minimized.

Member

jglovier commented Feb 24, 2014

This is looking so awesome. You can punt on the CSS ~> Sass or the syntax highlighting for now if you like. :)

Okay, sounds good. I'll try to wrap it up tomorrow, then.

@jglovier

This comment has been minimized.

Member

jglovier commented Feb 24, 2014

Just took a pass over everything in Browserstack, and here's the issues I've noticed which I'll need to address:

  • issue with mobile menu button working on all touch devices (although, strangely it works on desktop when screen is resized)
  • SVG support for older browsers (ignore, or add support?)
  • everything looks good on IE9+, but some minor layout issues on IE8 and IE7; are we happy with IE9+ support, or should the >IE8 isues def be addressed?
@jglovier

This comment has been minimized.

Member

jglovier commented Feb 24, 2014

@parkr as for updating the syntax highlighting, is it worth waiting a bit to get it in with this PR, or should I just open a new PR later to address that?

@mattr-

This comment has been minimized.

Member

mattr- commented Feb 24, 2014

SVG support for older browsers (ignore, or add support?)

I think we can ignore this.

everything looks good on IE9+, but some minor layout issues on IE8 and IE7; are we happy with IE9+ support, or should the >IE8 isues def be addressed?

I don't see a reason to continue supporting IE8 or IE7 with the new site template.

@parkr

This comment has been minimized.

Member

parkr commented Feb 24, 2014

Agreed with @mattr- on all counts.

as for updating the syntax highlighting, is it worth waiting a bit to get it in with this PR, or should I just open a new PR later to address that?

Your call! I'd say punt unless you are super motivated to do it now. This PR is already the way it is now – the updated syntax coloring would just be icing on the 🍰 :)

@jglovier

This comment has been minimized.

Member

jglovier commented Feb 24, 2014

Agreed with @mattr- on all counts.

@mattr- @parkr great! I think we're all on the same page with browser support then. ⚡️

Your call! I'd say punt unless you are super motivated to do it now.

Yeah, punt it is. I'd love to get this moving and address the syntax highlighting later.

Let me just debug this issue with the mobile menu, and then it should be ready to 🤘 !

@parkr

This comment has been minimized.

Member

parkr commented Feb 24, 2014

Let me just debug this issue with the mobile menu, and then it should be ready to 🤘 !

You rock! 👊 Let me know when you want me to take another look.

@jglovier

This comment has been minimized.

Member

jglovier commented Feb 24, 2014

@parkr k I got 'er all fixed up. Go ahead and take that second look bromie.

@jglovier

This comment has been minimized.

Member

jglovier commented Feb 24, 2014

Whoops - I had it fixed, but broke it again. Just pushed the real fix lol.

@parkr

This comment has been minimized.

Member

parkr commented Feb 24, 2014

So hawt. 😍

Merging this because I can't live another minute without it.

parkr added a commit that referenced this pull request Feb 24, 2014

Merge pull request #2050 from jglovier/master
* jglovier-master: (35 commits)
  Fix for menu at mobile again
  Fix site footer styles on mobile
  Fix for menu not working on mobile
  dat breathing room tho (expand site width slightly more)
  Replace footer github and twitter link text with inline SVG icons
  Post content styles for mobile
  Replace unicode menu icon with inline SVG
  Adds mobile styling for menu at sub 600px viewport widths
  🔥 permalink option so default date permalink method is left in tact
  For the love of perf, add syntax.css rules to main.css and call only one stylesheet
  Adds another placeholder post to illustrate post content styles
  Dem new styles tho
  Copy tweaks - brevity FTW
  Use class instead of id for CSS specificity ❤️
  Add link for RSS subscription
  Slightly friendlier and personal date formatting; classes for dem styles, yo
  Remove to avoid confusion with site.title
  demonstrate use of permalink settings
  Add site.url for use in head canonical meta and feed.xml template
  Add site.description for use in site head document meta, and feed.xml template
  ...

@parkr parkr merged commit e2c67e0 into jekyll:master Feb 24, 2014

parkr added a commit that referenced this pull request Feb 24, 2014

@parkr

This comment has been minimized.

Member

parkr commented Feb 24, 2014

In case anyone else is interested in the new hawtness:

screen shot 2014-02-24 at 4 10 22 pm

@jglovier

This comment has been minimized.

Member

jglovier commented Feb 24, 2014

sean-connery-fist-pump-us-open

@parkr

This comment has been minimized.

Member

parkr commented Feb 24, 2014

airflotus

@mattr-

This comment has been minimized.

Member

mattr- commented Feb 24, 2014

so much ❤️ for this. Thanks @jglovier!

@benbalter

This comment has been minimized.

Contributor

benbalter commented Feb 24, 2014

May be worthwhile to move the footer stuff that's hardcoded (title, blurb, contact infos) to _config.yml along site site title and description so that new users don't have to go searching for it / don't have to edit HTML, which they may feel conformable doing.

@jglovier

This comment has been minimized.

Member

jglovier commented Feb 24, 2014

May be worthwhile to move the footer stuff that's hardcoded (title, blurb, contact infos) to _config.yml along site site title and description so that new users don't have to go searching for it / don't have to edit HTML, which they may feel conformable doing.

I love that idea, personally. I just left it that way cause that's how it was, but I'm totes +1 on moving as much global stuff like that as possible to the _config.yml.

I can refactor it a bit with my CSS => Sass PR, or just make a new one for that?

@benbalter

This comment has been minimized.

Contributor

benbalter commented Feb 24, 2014

Also, about.md with a permalink of /about (same with projects) may be a bit easier to grep for people that are unfamiliar with Apache-style servers and the [folder]/index.html design pattern.

Realize I'm a bit late to the game, so feel free to punt on these, rightfully so, just thinking how we can make this the best tool to lower the barrier to entry for non-developers to start using Jekyll, not necessarily how to make the best possible Jekyll site.

@tehmaspc

This comment has been minimized.

tehmaspc commented Aug 2, 2014

awesome work; @jglovier

@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.