Sage for static html coders

sage
1

I’ve had projects in the last year or so that I wasn’t using WordPress but I love the Sage workflow so I took Sage and broke it out of the confines of WordPress. I named it Sage Starter for static HTML coding.

It should be up to date with Sage’s current version, I have also updated the packages to current versions and probably needs a little more loving to get rid of unneeded code for WordPress as well as getting rid of old Git commits but I plan on keeping it around for a while since it’s a great resource.

I’ve added support for SVG and Critical CSS as well, although Critical needs a little work.

Please feel free to contribute if you have any updates that should be made. I’ve tested as much as I can to make it work right.

6 Likes
2

I like that idea—I did a similar thing myself. I like that you’ve added SVG and Critical CSS, and how it’s up-to-date with Sage. Mine is not, but I added a PHP server that usually works. I’m looking forward to trying yours out, and I hope I can contribute!

3

I’ve been toying this this idea for a while now. What if I added Handlebars.js or other templating in order to break a design into components?

4

I hadn’t considered adding templating into this so that I can keep it agnostic.

EDIT: That said, @vitaligent, I’d be interested to see a fork of the repo with your implementation of Handlebars.js. I do like the idea and maybe it could live in another branch off the main?

EDIT 5/5: In doing some research on Handlebars.js, it’s completely client-side scripting which in a dev environment doesn’t really worry me. I really like that it’s 100% javascript based, that’s great b/c no additional languages need to be installed. But, considering we’re already running on top of Node.js, I think it would make just as much sense to either use server-side templating in case javascript is limited or slow, or couple this with some server-side templating using Node.js. I just don’t know what direction would be good to go. I think this is a big reason I didn’t consider templating to begin with.

5

I’ve been using a toolkit generator called Fabricator to do something similar to this, it uses handlebars for templating before it builds static pages in case you wanted to check out their implementation.

It means I can write a “theme wrapper” :

<!--views/layouts/page.html-->
<!doctype html>
<html lang="">
<head>

    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{{title}}</title>

    {{#if fabricator}}<link rel="stylesheet" href="{{baseurl}}/assets/fabricator/styles/f.css">{{/if}}

    <!-- toolkit styles -->
    <link rel="stylesheet" href="{{baseurl}}/assets/toolkit/styles/toolkit.css">
    <!-- /toolkit styles -->

</head>
<body>

    {{#if fabricator}}
        {{> f-icons}}
        {{> f-menu}}
        <div class="f-container">
            {{> f-control-bar}}
    {{/if}}

    <div class="l-container">
        {{> header }}
            <main>
                {% body %}
            </main>
        {{> footer }}
    </div>

    {{#if fabricator}}
        </div>
    <script src="{{baseurl}}/assets/fabricator/scripts/f.js"></script>
    {{/if}}

    <!-- toolkit scripts -->
    <script src="{{baseurl}}/assets/toolkit/scripts/toolkit.js"></script>
    <!-- /toolkit scripts -->

</body>
</html>

and then write pages like this:

---
layout: page
---

<div class="l-container u-py">

  <h1>
    Meet us in person and see the quality of our products. <br>
    We'll be exhibiting at the following locations.
  </h1>

  <div class="c-Exhibitions">
    <ul class="c-Exhibitions-list">
      {{#each toolkit.exhibitions}}
        <li class="c-Exhibition">
	  <div class="c-Exhibition-details">
	    <h2 class="c-Exhibition-name">
	      {{this.name}}
	    </h2>
	    <span class="c-Exhibition-address">
	      {{this.location}}
	    </span>
	    <time class="c-Exhibition-date">
	      {{this.date}}
	    </time>
	  </div>
	  <div class="c-Exhibition-buttons">
	    {{> buttons.secondary text="Visit website" }}
	    {{> buttons.secondary text="Add to calendar" }}
	  </div>
        </li>
      {{/each}}
    </ul>
  </div>

</div>

where toolkit.exhibitions is a YAML file called toolkit.yml containing:

exhibitions:
  one:
    name: "Welsh Dental Hospital Meeting"
    location: "The Vale Hotel, Gold and Spa Resort, Cardiff, CF72 8JY"
    date: "Thursday 17th March - Friday 18th March 2016"
  two:
    name: "British Association of Spinal Surgeons"
    location: "Bath"
    date: "Wednesday 16th March - Friday 18th March 2016"
  three:
    name: "British Scoliosis Society"
    location: "Sheffield"
    date: "Tuesday 26th April - Wednesday 27th April 2016"
  four:
    name: "SBNS Meeting"
    location: "Southampton"
    date: "Wednesday 27th April - Friday 29th April 2016"
  five:
    name: "West Midlands Plastic Surgery Meeting"
    location: "Bourneville"
    date: "Saturday 10th September 2016"
1 Like