Grow your CSS skills. Land your dream job.

#134: A Tour of a Site In-Progress Built with Jekyll, Grunt, Sass, an SVG System, and More

Warning: this is a meandering, intermediate level screencast in which we look at the code that powers a build process for a site. We don't write any code.


A "build process" is all the stuff that happens between the code you write and code that goes out to a live website. We've talked before about using Grunt for this. Sass is processed, assets are combined, minification and optimization happens, etc. There are endless things that a build process can do for you.

I've been working with Katie Kovalcin on building a new personal site for her. It's an experiment for both of us in learning new processes and trying new stuff. In this case, I'm using Jekyll for the first time, and I'm automating an SVG system for the first time.

At the time of the screencast, I'm right in the middle of it all, but I got the build system working smoothly so I figured it was a good time to share that. I always think that's a good time to share - right at the moment where something clicks for you.

Things going on:

  • Grunt runs all the tasks.
  • The site is being built with Jekyll. Meaning it processes the layouts and content into full web pages. When content or layout change, Grunt runs the Jekyll build.
  • Jekyll also runs the local server.
  • Sass is the CSS preprocessor. When a Sass file changes, Grunt runs the Sass complication. Then Grunt runs Autoprefixer on the result. Then Grunt runs the Jekyll build again to make sure all new stuff is usable by the processed site.
  • The site uses an SVG system. For icons, but also the logo, and who-knows-what-all else by the end of it. The SVG files are kept all separate in an "svg" folder. When any of them change, Grunt runs the svgstore task to process them all together. Then Grunt runs the Jekyll build so all the current SVG is available to the site.
  • Because this a repo on GitHub, and GitHub Pages support Jekyll, we can automatically get a live, hosted version of this site. We can also point another domain at this site.

Comments

  1. Lukas Heuser
    Permalink to comment#

    I love you even more now.

  2. Pat
    Permalink to comment#

    What did you use to set this up. It’s not yeoman… some sort of boilerplate? Or was it done by hand?

  3. Permalink to comment#

    Quick tip on clearing your iTerm 2 window quickly: instead of using the clear command, you can use the keyboard shortcut Cmd+K.

  4. Richard Dale
    Permalink to comment#

    Great video thanks. Would love an in depth look at svg and Jekyll. Perhaps one for the Lodge like the artist site. I’d be up for that for sure.

  5. Permalink to comment#

    SVG Store is such a beautiful thing. Thanks for the introduction Chris!

  6. Permalink to comment#

    I really like the SVG workflow, didn’t know it could be automated to this level! Is it possible to include the generated SVG code at the bottom of the page in stead of at the top? To load it after the content. Or does it not work that way?

    • Christian
      Permalink to comment#

      Would be nice, but I think the referencing to the svgs wouldn’t work anymore. Maybe it would be possible by using js to push in the svg use links after loading the references themselves. I would prefer something like that, because I fear to add up even more markup before the real content (may be a seo issue, I suspect, but do not really know ;-)).

    • You can put it at the bottom – but once in a while I see weird issues with that where some referenced SVG doesn’t load. I wish I had more info for you. You can do as Christian says and ajax in the whole load so it’s more async, although I haven’t tested that a bunch – seems like it would share issues with the at-the-bottom thing.

      Your best bet: http://css-tricks.com/svg-use-external-source/

  7. Permalink to comment#

    I just stumbled on to the videos section and love it! Great video!

    My only question is wouldn’t in-lining the SVG be inefficient as it doesn’t get cached like images or CSS files do?

  8. Sajta
    Permalink to comment#

    This is very useful! I’m constantly reading.

  9. Erik
    Permalink to comment#

    Very nice! Thank you for the video once again Chris!

    How do you Chris, and others, feel about having the development – un-finished – version of the site on Github – out in the open for everyone to see? Some clients would definitely feel uncomfortable, but does it actually matter that much? Is it okay to present unfinished work publicly? Thoughts? Comments?

    (As we now, in the free version of github the web hosting of static assets is free but everything is visible to the general public.)

    PS. Bitbucket lets you have private git repos for free in basic free account and is compatible with Tower and whatnot.

  10. Marcel
    Permalink to comment#

    Very good post, Chris. I now have a similar setup for my most recent project. I was just wondering if it’s possible to use the svg as a background image in css.

  11. Eric Thor
    Permalink to comment#

    Great stuff! I’ve been using Jekyll a lot at work to create a more realistic mockup to show stakeholders interactivity of the web. I’ve been using gulp + browser-sync I rigged together this baseplate https://github.com/ericthor/jekyll-gulp. I haven’t run into any problems yet, and its been getting the job done.

  12. Tristan
    Permalink to comment#

    Awesome video, I’ve been using Jekyll quite a bit lately and I love it. Can’t wait to give svgstore a go.

  13. Chris, is this method of using SVG working on iOS devices? I usually use SVG on normal tags on my sites and I use SVGeezy for fallback, and it works on most devices… except on iOS. I see just an empty box with white borders. From what others told me, it’s just an optimization problem. I figured out that you must have encountered this problem before. What can I do to solve it?

  14. I couldn’t get this to work right. Check out my pen.

    I created an rss and Twitter icon in Illustrator. I then exported each in its own SVG file. I ran SVGStore and copy pasted the code in my HTML file. I referenced each SVG file and noticed my icons were huge. Where did I go wrong?

    • Marcel
      Permalink to comment#

      Youu can set the width and height of the svg in the tag like an image.

  15. What I’ve done in the past with SVG’s is to convert them into base64.
    Wouldn’t that be better? If it is, Is there a way to do that with grunt as well?

  16. kashesandr
    Permalink to comment#

    This is awesome!

  17. Tim Smith
    Permalink to comment#

    (apple) – k clears terminal

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".