thelunch.info

Introduction


The Lunch, Goodwill Industries of Dallas, Inc’s annual fundraising event, found wonderful success for its first two years securing over $1.5m each year to, “... expand and enhance job training services.”

Goodwill face

For 2017, I suggested a revamp of how to present the event and guest speaker information to visitors and donors that would match the high level of importance that Goodwill Dallas places on the event. Prior year information was housed in a subpage of goodwilldallas.org — but this year I wanted to do better.

My proposal was accepted and with that I got to work planning out a standalone landing page: https://thelunch.info. The following is my written case study recounting the various aspects of the project from ideation to deployment, along with detailed analysis of the major development roadblocks that came about and my solutions.

Objective


I wanted this site to be fast (like, really fast), compatible with IE10/11+, responsive with a mobile-first approach, and accessible with client editable content wrapped up in an SSL.

Project details


Client
Goodwill Industries of Dallas, Inc.
Project
Stand-alone site for Goodwill Dallas' annual fundraising event, THE LUNCH.
Site name
THE LUNCH 2017
Site URL
thelunch.info
Repo URL
milleradagency/GOOD-Lunch
Standards
HTML5
CSS3
JavaScript
Libraries & third-party plugins
  • Click to view libraries
    Animate.css
    A cross-browser library of CSS animations. As easy to use as an easy thing.1
    Cloudflare
    Cloudflare, Inc. is a U.S. company that provides a content delivery network, Internet security services and distributed domain name server services, sitting between the visitor and the Cloudflare user's hosting provider, acting as a reverse proxy for websites.2
    FontAwesome
    Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.3
    GitHub Pages
    Hosted directly from your GitHub repository. Just edit, push, and your changes are live.4
    Google Analytics
    Google Analytics lets you measure your advertising ROI as well as track your Flash, video, and social networking sites and applications.5
    Google Fonts
    Google Fonts ... is an interactive directory of free hosted application programming interfaces for web fonts.6
    Hugo
    Hugo is a static HTML and CSS website generator written in Go. It is optimized for speed, easy use and configurability. Hugo takes a directory with content and templates and renders them into a full HTML website.7
    jQuery
    Cross-platform JavaScript library designed to simplify the client-side scripting of HTML.8
    Modernizr
    Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.9
    SCSS
    Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.10
    Twitter Bootstrap
    Bootstrap is the world’s most popular framework for building responsive, mobile-first sites and applications. Inside you’ll find high quality HTML, CSS, and JavaScript to make starting any project easier than ever.11
    CodePen
    Detect Internet Explorer (IE) up to version 11 and Edge (12+)12
    Material Design Box Shadows13
    Sticky Slider Navigation14
    Tinted Hero15

Development


i. Research

This project didn’t need a database, that was clear, so I opted for using a static-site generator. Going flat-file granted me the speed I desired and using an SSG, coupled with hosting via GitHub Pages, allowed me to quickly draft and deploy.

  • Read more

    After some research on the top hotness platforms like Jekyll, Hugo, Octopress, and whatnot – I decided to give Webhook a try; the platform proclaims to be, “the easiest way to build a custom CMS for your next website–” which would provide the client with an easy way to push updates.

    I really love Webhook! It utilizes the SWIG templating language, has pretty good documentation, and was really easy to write in. Unfortunately, I encountered problems when trying to slap an SSL certificate on the site that was (at that time) hosted on Webhook’s own system. It can be done, by hosting the architecture on your own servers, but I was on a deadline that the client just cut in half — I, therefore, had to find a different path.

    Having previous experience with Hugo, it seemed the next best thing for this project. Hugo, “a fast and modern static website generator,” is a wonderful system that, while still technically in beta (v0.20.7 as of this writing), performs and delivers exceptionally well! It’s written in Go, or Golang, and while the docs seem disjointed at times – the community proves enthusiastic, robust, and knowledgeable. Hugo, being completely static, lacked any sort of CMS or user-friendly front-end system, so I planned on implementing a third-party solution such as Forestry or Netlify.

    So now I had a plan: build with Hugo, write content in Markdown, and configure a simple CMS solution with Forestry.io.

ii. Planning

I started with some wireframe sketches; the conceptual layout of the landing page took on various aspects of lessons I’ve learned and read about — captivating hero image with a simple intro and engaging CTA, elongated explanation with some statistics, easy navigation, etc.

At this point, the client sent over some print materials they whipped up in-house; the pieces included key information for the page, as well as a branded visual identity to go with it.

THE LUNCH

iii. Construction

iii. Construction
DOM

The initial DOM structure is pretty simple: header, meta, styles, index sections, footer, and scripts; nothing too fancy! Hugo provides a nice templating syntax for creating a dynamic-development that compiles to a static index file. The index.html file for this landing page looks like:


    {{ partial "header.html" . }}
    {{ partial "main.html" . }}
        

Hah! Simple, right? Okay, but we both know that’s not the whole site — let’s look through the rest of the markup.

Click on any {{ “partial-name.html” . }} to see the related code snippets.



    <!DOCTYPE html>
    <html lang="{{ .Site.LanguageCode | default "en-us" }}">
    <head>
    <!-- Microdata markup added by Google Structured Data Markup Helper. -->
    {{ partial "meta.html" . }}

    <!-- Modernizr -->
    <!-- https://modernizr.com/ -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>

    <!-- FontAwesome -->
    <script src="https://use.fontawesome.com/d559e6066b.js"></script>

    <!-- Stylesheets -->
    <!-- ~/themes/YEAR/layouts/partials/stylesheets.html -->
    {{ partial "stylesheets.html" . }}

    <!-- Google Analytics -->
    {{ template "_internal/google_analytics_async.html" . }}

    {{ "<!--[if lt IE 11]>" | safeHTML }}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    {{ "<![endif]-->" | safeHTML }}

    {{ partial "chromeframe.html" . }}
    </head>
    <body>
    {{ "<!--[if lt IE 11]>" | safeHTML }}
    <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    {{ "<![endif]-->" | safeHTML }}

    <nav class="et-hero-tabs" style="opacity:0;" itemscope itemtype="http://schema.org/Event">
      <!-- ~/themes/YEAR/layouts/partials/mobileNav.html -->
      {{ partial "nav.html" . }}
    </nav>

    <!-- ~/themes/YEAR/layouts/partials/socialShare.html -->
    {{ partial "socialShare.html" . }}

  

I won't bore you with the rest of the index.html file in its entirety – but if you're crazy and want to look it over, click the accordion link below.

  • index.html
    
    
        <main id="pageContent" class="et-main" style="opacity:0;">
          <section class="et-slide" id="mainEventInformation">
            <div class="container">
              <div class="row">
                <div class="col">
                </div>
                <div class="w-100"></div>
                <div class="col-12 col-md-4">
                  <img src="{{ .Site.BaseURL}} images/TheLunch-OfficialLogo.jpg" class="img-fluid" alt="Goodwill Industries of Dallas THE LUNCH Logo" style="margin-bottom:1rem;">
                </div>
                <div class="col-12 col-md-8">
                  <h2>Event Information</h2>
                  <p>
                    Goodwill Industries of Dallas, Inc.’s largest annual fundraising event, THE LUNCH, targets Dallas’ top chief executives and influential community leaders.
                  </p>
                  <p>
                     100% of THE LUNCH proceeds benefit Goodwill’s job training and placement programs to change lives through the power of jobs!
                   </p>
                  <p>
                    With your support of THE LUNCH, more people in our community are given a starting point, a pathway, an opportunity!
                 </p>
                </div>
                <div class="w-100" style="margin-bottom:3rem;"></div>
                <div class="col-12">
                  <div class="row">
                    <div class="col-12" style="margin: 2rem auto 4rem;">
                      <div class="row">
                        <div class="col-12">
                          <h4 class="text-center chew">Chew on This</h4>
                        </div>
                        <div class="col-12 col-md-3">
                          <ul class="chewThis"><li>
                            <span>6,836</span><br />
                            Mission services provided
                          </li></ul>
                        </div>
                        <div class="col-12 col-md-3">
                          <ul class="chewThis"><li>
                            <span>3,295</span><br />
                            People served through employment & training programs
                          </li></ul>
                        </div>
                        <div class="col-12 col-md-3">
                          <ul class="chewThis"><li>
                            <span><sup>$</sup>19.2<sub> million</sub></span><br />
                            Estimated total earnings of people who earned a job with Goodwill’s help
                          </li></ul>
                        </div>
                        <div class="col-12 col-md-3">
                          <ul class="chewThis"><li>
                            <span>1,433</span><br />
                            People who earned a job with Goodwill’s help
                          </li></ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="w-100"></div>
                <div class="col-12">
                  <p>
                    For information about next year’s event and how to sponsor, contact Ashleigh Hughes by phone at <a href="tel:2146382800,240">214-638-2800, x240</a> or by email at <a href="mailto:[email protected]?subject=THE+LUNCH+2017">[email protected]</a>.
                  </p>
                </div>
              </div>
            </div>
          </section>
          <section class="et-slide" id="mainFeaturedGuest" style="display: block;">
            <div class="container" style="margin-bottom:1.5rem;" itemprop="performer" itemscope itemtype="http://schema.org/Person">
              <div class="row">
                <div class="col">
                  <h2>Special Guests</h2>
                </div>
                <div class="w-100"></div>
                <div class="col">
                  <div class="row" id="mainGuest1" style="align-items: center;">
                    <div class="col-md-5">
                      <img src="/images/General-Stanly-McChrystal.jpg" alt="" class="img-fluid">
                    </div>
                    <div class="col" style="margin-bottom: 2rem;">
                      <h4 itemprop="name">General Stanley McChrystal, USA <small>(Ret.)</small></h4>
                      <h6><em>Former Commander of U.S. and International Forces in Afghanistan, Former Chief of Staff of Military Operations in Afghanistan, Former leader of Joint Special Operations Command.</em></h6>
                      <p>
                        A one-of-a-kind commander with a remarkable record of achievement, General Stanley McChrystal is widely praised for creating a revolution in warfare that fused intelligence and operations.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <hr />
            </div>
            <div class="container" id="mainGuest2" itemprop="performer" itemscope itemtype="http://schema.org/Person">
              <div class="row">
                <div class="col-md-4">
                  <img src="/images/Frances-Townsend.jpg" alt="" class="img-fluid"/>
                </div>
                <div class="col">
                  <h5 itemprop="name">Frances Townsend</h5>
                  <h6><em>Former Homeland Security Advisor to President George W. Bush.</em></h6>
                  <p>
                    From 2004 to 2008, Frances Townsend served as Assistant to President George W. Bush for Homeland Security and Counterterrorism and Chaired the Homeland Security Council.
                  </p>
                </div>
                </div>
              </div>
            </div>
          </section>
          <section class="et-slide" id="mainSponsorOpp">
            <div class="container">
              <div class="row">
                <div class="col">
                  <h2>Sponsorship Opportunities</h2>
                </div>
              </div>
            </div>
            <div class="container" style="width:100%">
              <div class="row">
                <!-- Presenting Sponsor -->
                <div class="col-md-6 col-xl-2">
                  <div class="card">
                    <div class="card-img-top" id="sponPresenting" />
                      <span>Presenting Sponsor</span>
                    </div>
                    <div class="card-block">
                      <h4 class="card-title" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                        <span itemprop="price"><sup>$</sup>250,000</span>
                      </h4>
                      <p class="card-text">Provides 44 adults with a disability 240 hours of paid, on-the-job training.</p>
                    </div>
                    <ul class="list-group list-group-flush">
                      <li class="list-group-item">Twenty invitations with highest priority seating</li>
                      <li class="list-group-item">Ten exclusive invitations to photo opportunity with guest speaker</li>
                      <li class="list-group-item">Prominent recognition in all press, event signage, and advertising</li>
                      <li class="list-group-item">Prominent logo placement on large screens during event</li>
                      <li class="list-group-item">Recognition on Goodwill Dallas website for one year</li>
                      <li class="list-group-item">VIP parking for all guests</li>
                    </ul>
                    <div class="card-block">
                      <a href="#mainDonate" class="card-link">Sponsor</a>
                    </div>
                  </div>
                </div>
                <!-- Premier Sponsor -->
                <div class="col-md-6 col-xl-2">
                  <div class="card">
                    <div class="card-img-top" id="sponPremier" />
                      <span>Premier Sponsor</span>
                    </div>
                    <div class="card-block" id="premFix">
                      <h4 class="card-title" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                        <span itemprop="price"><sup>$</sup>100,000</span>
                      </h4>
                      <p class="card-text">Supports 16 adults with a disability 240 hours of paid, on-the-job training.</p>
                    </div>
                    <ul class="list-group list-group-flush">
                      <li class="list-group-item">Ten invitations with highest priority seating</li>
                      <li class="list-group-item">Six exclusive invitations to photo opportunity with guest speaker</li>
                      <li class="list-group-item">Prominent recognition in all press, event signage, and advertising</li>
                      <li class="list-group-item">Recognition on Goodwill Dallas website for one year</li>
                      <li class="list-group-item">VIP parking for all guests</li>
                    </ul>
                    <div class="card-block">
                      <a href="#mainDonate" class="card-link">Sponsor</a>
                    </div>
                  </div>
                </div>
                <!-- Legacy Sponsor -->
                <div class="col-md-6 col-xl-2">
                  <div class="card">
                    <div class="card-img-top" id="sponLegacy" />
                      <span>Legacy Sponsor</span>
                    </div>
                    <div class="card-block" id="legFix">
                      <h4 class="card-title" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                        <span itemprop="price"><sup>$</sup>50,000</span>
                      </h4>
                      <p class="card-text">Provides 7 adults with a disability 240 hours of paid, on-the-job training, and 5 individuals job placement and retention services.</p>
                    </div>
                    <ul class="list-group list-group-flush">
                      <li class="list-group-item">Ten invitations with highest priority seating</li>
                      <li class="list-group-item">Four exclusive invitations to photo opportunity with guest speaker</li>
                      <li class="list-group-item">Prominent recognition in all press, event signage, and advertising</li>
                      <li class="list-group-item">Recognition on Goodwill Dallas website for one year</li>
                      <li class="list-group-item">VIP parking for all guests</li>
                    </ul>
                    <div class="card-block">
                      <a href="#mainDonate" class="card-link">Sponsor</a>
                    </div>
                  </div>
                </div>
                <!-- <div class="w-100"></div> -->
                <!-- Champion Sponsor -->
                <div class="col-md-6 col-xl-2">
                  <div class="card">
                    <div class="card-img-top" id="sponChampion" />
                      <span>Champion Sponsor</span>
                    </div>
                    <div class="card-block">
                      <h4 class="card-title" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                        <span itemprop="price"><sup>$</sup>25,000</span>
                      </h4>
                      <p class="card-text">Provides 2 adults with a disability 240 hours of paid, on-the-job training, and 8 individuals with job placement and retention services.</p>
                    </div>
                    <ul class="list-group list-group-flush">
                      <li class="list-group-item">Ten invitations with priority seating</li>
                      <li class="list-group-item">Two exclusive invitations to photo opportunity with guest speaker</li>
                      <li class="list-group-item">Branding visibility in event signage and advertising</li>
                      <li class="list-group-item">Recognition on Goodwill Dallas website</li>
                      <li class="list-group-item">Complimentary parking for all guests</li>
                    </ul>
                    <div class="card-block">
                      <a href="#mainDonate" class="card-link">Sponsor</a>
                    </div>
                  </div>
                </div>
                <!-- Sustaining Sponsor -->
                <div class="col-md-6 col-xl-2">
                  <div class="card">
                    <div class="card-img-top" id="sponSustaining" />
                      <span>Sustaining Sponsor</span>
                    </div>
                    <div class="card-block">
                      <h4 class="card-title" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                        <span itemprop="price"><sup>$</sup>10,000</span>
                      </h4>
                      <p class="card-text">Provides an adult with a disability with 240 hours of paid, on-the-job training, 2 individuals with transportation for one year, and 1 individual with Computer Training.</p>
                    </div>
                    <ul class="list-group list-group-flush">
                      <li class="list-group-item">Ten invitations with priority seating</li>
                      <li class="list-group-item">Branding visibility in event signage and advertising</li>
                      <li class="list-group-item">Recognition on Goodwill Dallas website</li>
                      <li class="list-group-item">Complimentary parking for all guests</li>
                    </ul>
                    <div class="card-block">
                      <a href="#mainDonate" class="card-link">Sponsor</a>
                    </div>
                  </div>
                </div>
                <!-- Supporting Sponsor -->
                <div class="col-md-6 col-xl-2">
                  <div class="card">
                    <div class="card-img-top" id="sponSupporting" />
                      <span>Supporting Sponsor</span>
                    </div>
                    <div class="card-block" id="suppFix">
                      <h4 class="card-title" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                        <span itemprop="price"><sup>$</sup>5,000</span>
                      </h4>
                      <p class="card-text">Provides 2 individuals transportation for the year and Computer Applications Training.</p>
                    </div>
                    <ul class="list-group list-group-flush">
                      <li class="list-group-item">Ten invitations with priority seating</li>
                      <li class="list-group-item">Branding visibility in event signage and advertising</li>
                      <li class="list-group-item">Recognition on Goodwill Dallas website</li>
                      <li class="list-group-item">Complimentary parking for all guests</li>
                    </ul>
                    <div class="card-block">
                      <a href="#mainDonate" class="card-link">Sponsor</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="container" style="margin-bottom:1rem;">
              <div class="row">
                <div class="col">
                  <div class="card">
                    <div class="card-block" style="padding:2rem;">
                      <h4 class="card-title" itemprop="offers" itemscope itemtype="http://schema.org/Offer">THE LUNCH Ticket</h4>
                      <h6 class="card-subtitle mb-2"><sup>$</sup>500</h6>
                      <p class="card-text">Provides 8 at-risk youth with mentoring sessions.</p>
                    </div>
                    <div class="card-block">
                      <a href="#mainDonate" class="card-link" style="border-radius: 0 .25rem .25rem 0;">Sponsor</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="container" id="donorNames" style="width:100%;">
              <div class="row">
                <!-- presenting -->
                <div class="col-md-6 col-xl-2">
                  <div id="accordion1" role="tablist" aria-multiselectable="true">
                    <div class="card text-center">
                      <a data-toggle="collapse" data-parent="#accordion1" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
                        <div class="card-header" role="tab" id="heading1">
                          <h6 class="mb-0">
                            List of Presenting Sponsors
                          </h6>
                        </div>
                      </a>
                      <div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="heading1">
                        <div class="card-block" style="padding:0;align-items:center;">
                          <ul class="sponsorNames committee">
                            <li>
                              <div id="foundationType" class="ft-small">
                                <p>
                                  The David B. Miller Family Foundation
                                </p>
                              </div>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- premier -->
                <div class="col-md-6 col-xl-2 noNames">
                  <div id="accordion2" role="tablist" aria-multiselectable="true">
                    <div class="card text-center">
                      <a data-toggle="collapse" data-parent="#accordion2" href="#collapse2" aria-expanded="true" aria-controls="collapse2">
                        <div class="card-header" role="tab" id="heading2">
                          <h6 class="mb-0">
                            List of Premier Sponsors
                          </h6>
                        </div>
                      </a>
                      <div id="collapse2" class="collapse show" role="tabpanel" aria-labelledby="heading2">
                        <div class="card-block" style="padding:0;align-items:center;">
                          <ul class="sponsorNames committee">
                            <li>Coming soon</li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- legacy -->
                <div class="col-md-6 col-xl-2">
                  <div id="accordion3" role="tablist" aria-multiselectable="true">
                    <div class="card text-center">
                      <a data-toggle="collapse" data-parent="#accordion3" href="#collapse3" aria-expanded="true" aria-controls="collapse3">
                        <div class="card-header" role="tab" id="heading3">
                          <h6 class="mb-0">
                            List of Legacy Sponsors
                          </h6>
                        </div>
                      </a>
                      <div id="collapse3" class="collapse show" role="tabpanel" aria-labelledby="heading3">
                        <div class="card-block" style="padding:0;align-items:center;">
                          <ul class="sponsorNames committee">
                            <li class="noLogo">Michele & Jack M. Lafield</li>
                            <li class="noLogo">Belle & Donald A. Berg</li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- champion -->
                <div class="col-md-6 col-xl-2">
                  <div id="accordion4" role="tablist" aria-multiselectable="true">
                    <div class="card text-center">
                      <a data-toggle="collapse" data-parent="#accordion4" href="#collapse4" aria-expanded="true" aria-controls="collapse4">
                        <div class="card-header" role="tab" id="heading4">
                          <h6 class="mb-0">
                            List of Champion Sponsors
                          </h6>
                        </div>
                      </a>
                      <div id="collapse4" class="collapse show" role="tabpanel" aria-labelledby="heading4">
                        <div class="card-block" style="padding:0;align-items:center;">
                          <ul class="sponsorNames committee">
                            <li><img src="{{ .Site.BaseURL }}images/logo-hoglund-foundation.png" alt="The Hoglund Foundation" /></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- sustaining -->
                <div class="col-md-6 col-xl-2">
                  <div id="accordion5" role="tablist" aria-multiselectable="true">
                    <div class="card text-center">
                      <a data-toggle="collapse" data-parent="#accordion5" href="#collapse5" aria-expanded="true" aria-controls="collapse5">
                        <div class="card-header" role="tab" id="heading5">
                          <h6 class="mb-0">
                            List of Sustaining Sponsors
                          </h6>
                        </div>
                      </a>
                      <div id="collapse5" class="collapse show" role="tabpanel" aria-labelledby="heading5">
                        <div class="card-block" style="padding:0;align-items:center;">
                          <ul class="sponsorNames committee">
                            <li class="noLogo">Melinda & John F. Dickerson</li>
                            <li class="noLogo">Turner Construction Company</li>
                            <li class="noLogo">Melinda & John F. Dickerson</li>
                            <li class="noLogo">Patty & James Huffines</li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- supporting -->
                <div class="col-md-6 col-xl-2 noNames">
                  <div id="accordion6" role="tablist" aria-multiselectable="true">
                    <div class="card text-center">
                      <a data-toggle="collapse" data-parent="#accordion6" href="#collapse6" aria-expanded="true" aria-controls="collapse6">
                        <div class="card-header" role="tab" id="heading6">
                          <h6 class="mb-0">
                            List of Supporting Sponsors
                          </h6>
                        </div>
                      </a>
                      <div id="collapse6" class="collapse show" role="tabpanel" aria-labelledby="heading6">
                        <div class="card-block" style="padding:0;align-items:center;">
                          <ul class="sponsorNames committee">
                            <li>Coming soon</li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <section class="et-slide" id="mainDonate">
            <div class="container">
              <div class="row">
                <div class="col">
                  <h2>Donate</h2>
                  <p>
                    100% of THE LUNCH proceeds benefit individuals with disabilities and disadvantages, providing them with free job training and placement services.
                  </p>
                  <p>
                    With your support of THE LUNCH, more people in our community are given a starting point, a pathway, an opportunity!
                  </p>
                  >div id="bbox-root"<>/div<
                  >script type="text/javascript"<
                    window.bboxInit = function () {
                       bbox.showForm('b3f4422e-4d5d-49fc-bdf2-d5a0caba03ae');
                    };
                    (function () {
                       var e = document.createElement('script'); e.async = true;
                       e.src = 'https://bbox.blackbaudhosting.com/webforms/bbox-min.js';
                       document.getElementsByTagName('head')[0].appendChild(e);
                    } ());
                  >/script<
                </div>
              </div>
            </div>
          </section>
          <footer id="footer">
            <div class="container">
              <div class="row">
                <div class="col">
                  <a href="https://goodwilldallas.org" target="_blank">
                    <img src="{{ .Site.BaseURL }}images/goodlogo-invert.svg" alt="" />
                  </a>
                  <p>
                    For over 90 years Goodwill Dallas has been committed to providing job training and employment to those with disabilities and disadvantaging conditions.
                  </p>
                </div>
                <div class="w-100" style="margin-bottom:2rem;"></div>
                <div class="col" style="font-size:.8rem;">
                  Check out previous years:
                  <a href="https://www.goodwilldallas.org/TheLUNCH-2015" target="_blank">2015</a> &
                  <a href="https://www.goodwilldallas.org/TheLUNCH-2016" target="_blank">2016</a>.
                </div>
                <div class="w-100"></div>
                <div class="col">
                  <p class="copyright">
                    © 1923<script>new Date().getFullYear()>2010&&document.write("-"+new Date().getFullYear());</script> <a href="https://goodwilldallas.org" target="_blank">Goodwill Industries of Dallas, Inc.</a>
                    <br />An American nonprofit 501(c)(3) organization.
                  </p>
                </div>
              </div>
            </div>
          </footer>
          <footer id="subFooter">
            <div class="container">
              <div class="row">
                <div class="col-md-6 col-lg-4">
                  <a href="https://www.goodwilldallas.org/Privacy" target="_blank">
                    Privacy Policy <i class="fa fa-external-link" aria-hidden="true"></i>
                  </a>
                </div>
                <div class="col-md-6 col-lg-4">
                  <a href="https://www.goodwilldallas.org/Terms" target="_blank">
                    Terms of Use <i class="fa fa-external-link" aria-hidden="true"></i>
                  </a>
                </div>
                <div class="col-md-6 col-lg-4">
                  <a href="http://milleradagency.com" target="_blank">
                    Powered by Miller Ad Agency <i class="fa fa-external-link" aria-hidden="true"></i>
                  </a>
                </div>
              </div>
            </div>
          </footer>
    
          <!-- Javascripts -->
          <!-- ~/themes/YEAR/layouts/partials/scripts.html -->
          <!-- jQuery -->
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    
          <!-- Tether -->
          <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    
          <!-- Bootstrap -->
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
    
          <!-- SocialShare -->
          <script src="{{ .Site.BaseURL }}javascript/SocialShare.js"></script>
    
          <!-- StickyNav -->
          <script src="{{ .Site.BaseURL }}javascript/StickyNav.js"></script>
    
          <!-- Lunch 2017 -->
          <script src="{{ .Site.BaseURL }}javascript/lunch2017.js"></script>
    
          </main>
        </body>
      </html>
    
      

iii. Construction
SCSS

Even though many blogs say that CSS preprocessors are on their way out, due to CSS Grids rising up and coming to life, I still love SASS/SCSS.

I have a simple repo for my file structure which gives me an easy boilerplate when starting new projects via bower install pansky-sass --save.

The primary organization for my SCSS is as follows:


  // PARTIALS
  // Mixins, definitions (colors, font-families),
  // functions, selectors, etc.
  @import 'partials/!module';

  // VENDORS
  // 3rd-party vendor styles (normalize,
  // bootstrap), etc.
  @import 'vendors/!module';

  // BASE
  // Global styles such as non-vendor resets,
  // typography, etc.
  @import 'base/!module';

  // COMPONENTS
  // Resuable / independant module components
  // (buttons, sliders, etc.)
  @import 'components/!module';

  // LAYOUT
  // Styling for larger layout components;
  // e.g. nav, header, footer, etc.
  @import 'layout/!module';

  // PAGES
  // Page-specific styling, such as homepage, if necessary.
  @import 'pages/!module';

  // THEMES
  // Styles for different themes; such as holidays, events, etc.
  @import 'themes/!module';
      
Sponsorship cards for THE LUNCH

iii. Construction
JavaScript

I’m still learning my way through vanilla JS (shoosh, we all start somewhere), but this was a live client project and I used jQuery. I wrote small .animate() scripts for fading in elements and early-version mobile controls, while turning to StackOverflow, as we all do, for resolutions on how to prevent automatic browser scroll on refresh, etc; all items are credited in the comments.

  • View lunch2017.js
    
      // Document [when website] loads
      $(document).ready(function() {
        $("main").animate({
          opacity: 1,
        }, 500, function() {
          // Animation complete.
        });
    
        $("nav").animate({
          opacity: 1,
        }, 1000, function() {
          // Animation complete.
        });
    
        $("#bbox-root").delay(2000).fadeIn("slow");
      });
    
    
      // #mobileNav controls
      $(function() {
        // open/close mobile nav
        $("#mobileNavBar").on("click", function() {
          if ($("#mobileNav").hasClass("showMeMore") == false) {
            $("#mobileNav").addClass('showMeMore');
            $("body").addClass('noscroll');
            $("#mobileNavBars i").toggleClass('fa-share-alt fa-times');
            $("#navFade").toggleClass('hidden visible');
          } else {
            $("#mobileNav").removeClass('showMeMore');
            $("body").removeClass('noscroll');
            $("#mobileNavBars i").toggleClass('fa-times fa-share-alt');
            $("#navFade").toggleClass('visible hidden');
          };
        });
      });
    
    
      // Prevent automatic browser scroll on refresh
      // http://stackoverflow.com/a/18633915
      $(window).on('beforeunload', function() {
          $(window).scrollTop(0);
      });
    
    
      // Prevent a#SECTION from being added to URL on click
      // http://stackoverflow.com/a/20215413
      $('.mainShow').click(function(event){
        event.preventDefault();
      });
      $('.btn').click(function(event){
        event.preventDefault();
      });
    
    
      // Detect IE and change if needed
      // https://codepen.io/gapcode/pen/vEJNZN
      function detectIE() {
        var ua = window.navigator.userAgent;
    
        // IE 10
        // ua = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)';
    
        // IE 11
        // ua = 'Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko';
    
        var msie = ua.indexOf('MSIE ');
        if (msie > 0) {
          // IE 10 or older => change flex to block to avoid flex-wrap bug
          $(".card .card-block").css("display", "block");
        }
    
        var trident = ua.indexOf('Trident/');
        if (trident > 0) {
          // IE 11 => change flex to block to avoid flex-wrap bug
          $(".card .card-block").css("display", "block");
        }
      }
    
    
      // Run if iOS ver = 9.x.x
      // http://stackoverflow.com/a/13280432
      if(/(iPhone|iPad|iPod)\sOS\s9/.test(navigator.userAgent)) {
          var btn = $("#heroButtons");
          var bar = $(".et-hero-tabs-container");
          btn.remove();
          bar.css("position", "fixed");
          bar.css("top", "0");
          bar.css("height", "50px");
          bar.css("border-bottom", "1px solid #595959");
      };
    
    
      // Detect Android and run
      // https://davidwalsh.name/detect-android
      // http://stackoverflow.com/a/18764086
      var ua = navigator.userAgent.toLowerCase();
      var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
      var navi = $(".et-hero-tabs-container--top");
      if(isAndroid) {
        // Do something!
        navi.css("-webkit-transform", "translateZ(0)");
        // window.location = 'http://android.davidwalsh.name';
      }
                

iii. Construction
Compiler

To compile my individual partials into a production-ready minified file, I use Gulp. Since it’s a simple, yet expandable, toolkit – Gulp provides me the power of hassle-free CSS through the following plugins:


  var gulp = require('gulp');
  var sass = require('gulp-sass');
  var postcss = require('gulp-postcss');
  var nano = require('gulp-cssnano');
  var sourcemaps = require('gulp-sourcemaps');
  var autoprefixer = require('autoprefixer');

  gulp.task('default', function () {
    return gulp.src('themes/2017/static/css/main.scss')
      .pipe(sourcemaps.init())
      .pipe(sass()) // using gulp-sass
      .pipe(postcss([ autoprefixer() ]))
      .pipe(nano())
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest('themes/2017/static/css'));
  });

  gulp.task('watch', function() {
    gulp.watch('themes/2017/static/css/**/*.scss', ['default']);
  });
      

iii. Construction
Accessibility & Compatibility

Due to the nature of the event and it’s target market, I opted to make the base font size of the document 18px. I then expanded that when configuring the REM sizes for typographic elements; p (1rem), h1-h6, ul/ol, li, etc.

The site did encounter some hiccups when testing IE11, but that was expected. Additionally, I tested the page on iOS (current + back one version) using Xcode Simulator and live devices, Android (current version) using live devices, and several breakpoints using the Emmet Re:View plugin for Chrome (pictured below).

Emmet Re:View Chrome Plugin

iii. Construction
Issues & Solutions

There's always issues, always; haha. Tracked 'em on on the repo; the following is a view of the bigger ones:

  • #11: win7 ie10.0,11.0 - Header, sticky nav, & sponOpps

    The hero introductary sections encoutered bugs on Windows 7 IE10/11.

    Screenshot of repo issues #11 for THE LUNCH 2017

    The issue was resolved through the following tweaks:

    • Add [if ie11] hero row transform: scale(0.8);
    • Add [if ie11] height: 100%; to nav.et-hero.tabs
    • change hero and sponOpps from container-fluid to container style="width:100%;

    View issue on GitHub

  • #13: win10 edge13.0 - Hero copy & sponOpps

    The sponsor/donor tier-card sections encoutered bugs on Windows 10 Edge v13.

    Screenshot of repo issues #13 for THE LUNCH 2017

    The issue was resolved through the following tweaks:

    • Added [if edge] hero row transform: scale(0.8);
    • Added [if edge] hero row from height: 100%; to nav.et-hero.tabs

    View issue on GitHub

  • #38: iOS - Hero buttons broken

    "Get table" & "learn more" buttons inactive; tested on iPhone 5, works on 6s. Oddly enough, the buttons work in Xcode Simulator. Coworker's have iPhone 6SE and iPhone 5 in the office - both running on 9.3.X- version of iOS; seems that is the culprit here.

    Downloaded iOS 9.3 for Xcode Simulator and found the issue to be the syntax let self = this; in StickyNav.js line 8. Apparently, let produces the error: SyntaxError: Unexpected use of reserved word 'let' in strict mode due to lack of support for let.

    As a quick-fix (deadline approaching fast), I've implemented this bit of info to detect if the version of iOS = 9.x.x and run the following conditionals if so:

    
      // run if iOS ver = 9.x.x
      if(/(iPhone|iPad|iPod)\sOS\s9/.test(navigator.userAgent)) {
        var btn = $("#heroButtons");
        var bar = $(".et-hero-tabs-container");
        btn.remove();
        bar.css("position", "fixed");
        bar.css("top", "0");
        bar.css("height", "50px");
        bar.css("border-bottom", "1px solid #595959");
      };
                

    View issue on GitHub

You can view the complete list of issues on the GitHub repo.

Deployment


Ahh, going live... such a terrifying and exhilerating time! The project hit v1.0.0 and the Deployment milestone was completed. Although, I guess I forgot to actually close the milestone – hence the date of closure.

  • View screenshot of milestone
    Screenshot of repo deployment milestone THE LUNCH 2017

Post-release


As with any project, there were post-release updates. The site is at v1.1.7 as of this writing. Both further fixes/enchancements and client updates. To view the log, see the README.md on the repo.

This may also be the time where you're wondering, "Wait, where's the CMS integration?" Well, unfortunately due to time contraints, said feature never made it into the project. I continued to provide updates per client requests and wrote an extensive how-to document on how to edit the repo directly (while not breaking the site.) — which actually worked out well; site's still runnin'!

Release v1.1.7 is, actually, just prior to the client's editing access. You know... just in case.

Conclusion


This project was an absurd amount of fun crammed into a equally-speedy timeframe.

The first commits occured on March 16th, while deployment was March 24th. May 16th was v1.1.7, and the client updates started June 13th.

That being said, I'm glad to have worked on it. Collaborating with Goodwill Dallas is always exciting and certainly feels like I have a sense of drive powering me when creating for them.


Learned a lot.


Coded a lot.


10/10 would do again.

Demo


To view a demo of the site, click here.

Sorry, we don't support screens below 320px.

{{ partial "meta.html" . }}


  <!-- up to date list of meta -->
  <!-- https://gist.github.com/kevinSuttle/1997924 -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ .Title }}</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,IE=11">
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  {{ .Hugo.Generator }}

  <meta name="description" content="{{ .Site.Params.description }}">
  <meta name="keywords" content="the lunch, goodwill, dallas, 2017">
  <meta name='url' content='https://thelunch.info/'>
  <meta name="subject" content="{{ .Site.Params.subject }}">
  <meta name='Classification' content='nonprofit'>
  <meta name='copyright' content='{{ .Site.Params.copyright }}'>
  <meta name='reply-to' [email protected]'>
  <meta name='coverage' content='US'>
  <meta name='revised' content='Tuesday, May 16th, 2017, 9:17 am'>

  <meta name="author" content="{{ .Site.Params.author }}, {{ .Site.Params.authorURL }}">
  <meta name="designer" content="{{ .Site.Params.author }}, {{ .Site.Params.authorURL }}">
  <link rel="author" href="humans.txt" type="text/plain">

  <!-- REMOVE for deployment -->
  <!-- Tells robots not to search/follow -->
  <!-- <meta name="robots" content="noindex,nofollow"> -->
  <meta name="robots" content="all,follow">
  <meta name="googlebot" content="index,follow,snippet,archive">

  <!-- favicon metas -->
  {{ partial "favicon.html" . }}

  <!-- if rss -->
  {{ if .RSSLink -}}
    <link href="{{ .RSSLink }}" rel="feed" type="application/rss+xml" title="{{ .Site.Title }}">
  {{- end }}

  <!-- socials/OGs -->
  <meta property="og:description" content="{{ .Site.Params.description }}">
  <meta property="og:image" content="{{ .Site.BaseURL }}images/TheLunch-OfficialLogo.jpg" />
        

{{ partial "stylesheets.html" . }}


  <!-- animate.css -->
  <!-- codepen: https://codepen.io/strapro/pen/dIqAH  -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

  <!-- Material Icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <!-- Primary Stylesheet -->
  <link rel="stylesheet" href="/css/main.css">
        

{{ partial "chromeframe.html" . }}


  <style>
    .chromeframe {
      text-align: center;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 999;
      background: white;
      height: 100%;
      width: 100%;
      padding: 35px;
      opacity: .85;
      font-size: 1.5rem;
    }
  </style>
        

{{ partial "nav.html" . }}


  <!-- fork: http://codepen.io/ettrics/pen/WRbGRN -->
  <!-- nav class=".et-hero-tabs" -->
  <div class="tint"></div>
  <div class="container">
    <div class="row">
      <div class="col">
        <h1 itemprop="name"><span>The </span>Lunch</h1>
        <div id="foundationType">
          <p>
            The David B. Miller Family Foundation
          </p>
        </div>
        <h6>
          <i class="fa fa-calendar-o" aria-hidden="true"></i> 
          <span itemprop="startDate" content="2017-08-09">
            9/8/2017
          </span>
           
          <i class="fa fa-map-marker" aria-hidden="true"></i> 
          <span itemprop="location" itemscope itemtype="http://schema.org/Place">
            <span itemprop="name">Omni Downtown Dallas</span>
              <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
              <meta itemprop="streetAddress" content="555 S Lamar St">
              <meta itemprop="addressLocality" content="Dallas">
              <meta itemprop="addressRegion" content="TX">
              <meta itemprop="addressCountry" content="US">
              <meta itemprop="postalCode" content="75202">
            </span>
          </span>
        </h6>
      </div>
      <div class="w-100"></div>
      <div class="col" id="heroButtons">
        <div class="row">
          <div class="col-12">
            <a class="btn btn-primary" href="#mainDonate">Reserve Your Table</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="et-hero-tabs-container">
    <a class="et-hero-tab et-hero-tab-first" href="#mainEventInformation" data-text1="THE LUNCH" data-text2="Event Info"></a>
    <a class="et-hero-tab" href="#mainFeaturedGuest" data-text1="Speakers" data-text2="Special Guests"></a>
    <a class="et-hero-tab" href="#mainSponsorOpp" data-text1="Sponsorships" data-text2="Sponsorship Opportunities"></a>
    <a class="et-hero-tab et-hero-tab-last" href="#mainDonate" data-text1="Donate" data-text2="Make Your Donation"></a>
    <span class="et-hero-tab-slider"></span>
  </div>
        

{{ partial "socialShare.html" . }}


  <div class="pansky-code">
    <pre><code class="lang-html hljs">
      <nav id="mobileNav">
      	<!-- mobile bar -->
        <div class="container">
          <div class="row" id="mobileNavBar">
            <div class="col" id="mobileNavBars">
              <i class="fa fa-share-alt" aria-hidden="true"></i>
            </div>
          </div>
      	</div>
      	<!-- mobile links -->
      	<div class="container">
          <div class="row" id="mobileNavLinks">
            <!-- Facebook -->
      			<!-- paulmolluzzo.github.io/simple_share_popups/ -->
      			<a target="_blank" OnClick="window.open(this.href,'targetWindow','toolbar=no,location=0,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=250'); return false;" class="facebook" href="https://www.facebook.com/sharer/sharer.php?u=https%3A//thelunch.info/&title=THE+LUNCH+2017&description=Goodwill+Industries+of+Dallas,+Inc.’s+largest+annual+fundraising+event,+THE+LUNCH,+targets+Dallas’+top+chief+executives+and+influential+community+leaders.">
              <div class="col">
                <h6 class="facebook">Share</h6>
              </div>
            </a>
      			<!-- LinkedIn -->
            <a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A//thelunch.info/&title=THE%20LUNCH%202017&summary=Goodwill%20Industries%20of%20Dallas,%20Inc.%E2%80%99s%20largest%20annual%20fundraising%20event,%20THE%20LUNCH,%20targets%20Dallas%E2%80%99%20top%20chief%20executives%20and%20influential%20community%20leaders.&source=" onclick="window.open(this.href, 'linkedinwindow','left=20,top=20,width=600,height=700,toolbar=0,resizable=1'); return false;" class="linkedin">
              <div class="col">
                <h6 class="linkedin">Post</h6>
              </div>
            </a>
            <!-- Twitter -->
            <a href="https://twitter.com/home?status=Check%20out%20this%20year's%20%23theLUNCH%20hosted%20by%20%40GoodwillDallas%20on%209/8/2017%20at%20the%20%40OmniDallas!" onclick="window.open(this.href, 'twitterwindow','left=20,top=20,width=600,height=300,toolbar=0,resizable=1'); return false;" class="tweet">
              <div class="col">
                <h6 class="tweet">Tweet</h6>
              </div>
            </a>
            <!-- Email -->
            <a href="mailto:?&subject=Hey, check out THE LUNCH 2017!&body=Goodwill%20Industries%20of%20Dallas,%20Inc.%E2%80%99s%20largest%20annual%20fundraising%20event,%20THE%20LUNCH,%20targets%20Dallas%E2%80%99%20top%20chief%20executives%20and%20influential%20community%20leaders." target="_blank" class="email">
              <div class="col">
                <h6 class="email">Email</h6>
              </div>
            </a>
          </div>
        </div>
      </nav>
      <div id="navFade" class="hidden"></div>