Templates

Refer to the sections below for specific content module examples and code snippets.

Themes

Select a button to view the theme color options. Theme changes include:

Theme color classes are added to the <body> tag. In the static site, themes are added using PHP variables. Refer to the static site documentation for more info.

Headers

Secondary Header

The secondary header is used for pages that require introductory information to be presented before the main content.

<!-- // Secondary Header -->
<header class="no-border header-secondary">
  <h2>We’re not endorsing the obvious. We’re commending the awesome.</h2>
  <p>Our industry is filled with <a href="#">smart, interesting women</a> including developers, designers, entrepreneurs, and tech leaders. These women are a big deal, and we think you should know about them. We highlight them not for their gender, but because they are awesome by any kind of measure.</p>
</header>

We're not endorsing the obvious. We're commending the awesome.

Our industry is filled with smart, interesting women including developers, designers, entrepreneurs, and tech leaders. These women are a big deal, and we think you should know about them. We highlight them not for their gender, but because they are awesome by any kind of measure.

Interview Header

This header is used to begin all interview pages. PHP variables are used to automatically add the author name and social media information. Included in the base-template.php file in the static site repo.

<header class="border header-interview">
  <div class="wrapper-sm">
    <h2>Interviewee Name [update this]</h2>
    <p class="intro">Intro paragraph.[update this]</p>

    <?php // Don't update. Using the same info as in Interview Credits. ?>
    <p class="author">An interview with <a href="<?php echo $interviewer_url; ?>"><?php echo $interviewer; ?></a></p>

    <?php // Don't update. Using the info from PHP variables at the top of the page. ?>
    <ul class="social-share">
      <li>
        <a href="http://www.facebook.com/sharer.php?u=http://womenandtech.com/interview/<?php echo $interviewee_url;?>/" title="Share on Facebook">
          <i class="fa fa-facebook" aria-hidden="true"></i>
          <span class="screen-readers">Post the interview on Facebook</span>
        </a>
      </li>
      <li>
        <a href="http://twitter.com/share?text=Women and Tech Interviews <?php echo $interviewee_name; ?>&url=http://womenandtech.com/interview/<?php echo $interviewee_url; ?>/" title="Share on Twitter">
          <i class="fa fa-twitter" aria-hidden="true"></i>
          <span class="screen-readers">Tweet the interview</span>
        </a>
      </li>
      <li>
        <a href="mailto:?subject=Women and Tech Interviews <?php echo $interviewee_name; ?>&body=Women and Tech Interviews <?php echo $interviewee_name; ?> http://womenandtech.com/interview/<?php echo $interviewee_url; ?>/" title="Email the interview">
          <i class="fa fa-envelope" aria-hidden="true"></i>
          <span class="screen-readers">Email interview</span>
        </a>
      </li>
    </ul>
  </div>
</header>

Biying Miao

Biying Miao is the co-founder of Hot Pop Factory, a 3D Printing and Digital Fabrication Design Studio. The self- proclaimed art-geek has worked on projects exhibited at the Royal Ontario Museum, the Textile Museum of Canada and the Art Gallery of Ontario.

An interview with Ruby Watson

Footers

Interview Footer with Credits

This code snippet here is for reference only. It is already included in the interview base-template.php file and use PHP variables to pull in the appropriate date. If you don't need a specific credit, delete the whole <li>.

The site credits can be found in the includes/site-credits.php file.

<footer class="border credits">
  <ul>
    <li>
      Interview by <a href="<?php echo $interviewer_url; ?>"><?php echo $interviewer; ?></a>
      <?php if ($interviewer2): echo 'and <a href="'.$interviewer_url2 .'">'.$interviewer2.'</a>';endif; ?>
    </li>
    <li>
      Photography by <a href="<?php echo $photos_url; ?>"><?php echo $photos; ?></a>
      <?php if ($photos2): echo 'and <a href="'.$photos_url2 .'">'.$photos2.'</a>';endif; ?>
    </li>
    <li>
      Editing by <a href="<?php echo $editor_url; ?>"><?php echo $editor; ?></a>
      <?php if ($editor2): echo 'and <a href="'.$editor_url2 .'">'.$editor2.'</a>';endif; ?>
    </li>
    <li>
      Art Direction by <a href="<?php echo $ad_url; ?>"><?php echo $ad; ?></a>
      <?php if ($ad2): echo 'and <a href="'.$ad_url2 .'">'.$ad2.'</a>';endif; ?>
    </li>
    <li>
      Design by <a href="<?php echo $design_url; ?>"><?php echo $design; ?></a>
      <?php if ($design2): echo 'and <a href="'.$design_url2 .'">'.$design2.'</a>';endif; ?>
    </li>
    <li>
      Development by <a href="<?php echo $dev_url; ?>"><?php echo $dev; ?></a>
      <?php if ($dev2): echo 'and <a href="'.$dev_url2 .'">'.$dev2.'</a>';endif; ?>
    </li>
    <li>
      Transcriptions by <a href="<?php echo $transcribe_url; ?>"><?php echo $transcribe; ?></a>
      <?php if ($transcribe2): echo 'and <a href="'.$transcribe_url2 .'">'.$transcribe2.'</a>';endif; ?>
    </li>
  </ul>
  <?php // Global site credits
  include($path_inc."site-credits.php");
  ?>
</footer>

Secondary Footer

This module can be used for the main content footer. The only thing that is required is the markup shown in the example. Any kind of content can be added such as paragraphs, links or images.

<footer class="no-border footer-secondary">
  <div class=wrapper-sm>
    <h2>Heading Example</h2>
    <p>Paragraph text with a <a href="#">link</a>.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum corrupti eius labore cumque expedita dicta tenetur ut, accusantium, eaque eum, veritatis quam quae officiis assumenda? Voluptatum placeat eaque.</p>
  
    <img class="spacer30" src="/assets/img/coffee-icon.png" alt="Coffee" width="50px">

    <p><a href="#">Donate</a> a cup of coffee or tea and get first dibs on new content.</p>
    <p>We also welcome contributors, volunteers and sponsors.</p>
    <p>Check out our <a href="#">Contribute</a> page for more information.</p>
  </div>
</footer>

Interview Images

The static site uses PHP to load partial files. Be sure to include the PHP snippet for image paths, shown in the example code below.

Feature Image

<!-- // Feature image -->
<div class="border img-feature">
  <figure>
    <img src="<?php echo $path_img; ?>featured-biying-miao.jpg" alt="Biying Miao">
  </figure>
</div>
Biying Miao

Side by Side Images

<!-- // Image - Left & Right -->
<div class="border img-side-by-side">
  <figure>
    <img src="<?php echo $path_img; ?>left-biying-miao.jpg" alt="Biying Miao">
  </figure>
  <figure>
    <img src="<?php echo $path_img; ?>right-biying-miao.jpg" alt="Biying Miao">
    <figcaption>
      Optional caption goes here. <a href="#">Links</a> can also be included.
    </figcaption>
  </figure>
</div>
Biying Miao
Biying Miao
Optional caption goes here. Links can also be included.

Single Image - Portrait

<!-- // Image - Portrait -->
<div class="border img-portrait">
  <figure>
    <img src="<?php echo $path_img; ?>portrait-biying-miao.jpg" alt="Biying Miao">
  </figure>
</div>
Biying Miao

Single Image - Portrait with caption

<!-- // Image - Portrait -->
<div class="border img-portrait">
  <figure>
    <img src="<?php echo $path_img; ?>portrait-biying-miao.jpg" alt="Biying Miao">
    <figcaption>
      Optional caption goes here.
    </figcaption>
  </figure>
</div>
Biying Miao
Optional caption goes here.

Single Image - Landscape

<!-- Single Image - Landscape -->
<div class="border img-landscape">
  <figure>
    <img src="<?php echo $path_img; ?>landscape-biying-miao.jpg" alt="Biying Miao">
  </figure>
</div>
Biying Miao

Single Image - Landscape with caption

<!-- Single Image - Landscape -->
<div class="border img-landscape">
  <figure>
    <img src="<?php echo $path_img; ?>landscape-biying-miao.jpg" alt="Biying Miao">
    <figcaption>
      Optional caption goes here.
    </figcaption>
  </figure>
</div>
Biying Miao
Optional caption goes here.

Q & A

Use this snippet for each Q & A block. You can add as many paragraphs as required for the answer portion. Just be sure to keep the paragraphs enclosed within the <dd class="interview-a"></dd> tags.

<!-- // Q & A -->
<dl class="border">
  <!-- // Question -->
  <dt class="interview-q">Where did you grow up and what were you like as a child?</dt>
  <!-- // Answer -->
  <dd class="interview-a">
    <p>My family moved to Canada from Shanghai when I was in fourth grade, and I grew up in Toronto. I was a very creative child who loved drawing and making things with my hands. Coming from a Chinese family, I was encouraged to play music but gravitated toward freeform arts, so learning an instrument in the classical sense never became something that I honed. I actually wish that I had done that. My 3D printers sound like singing robots, so that’s the music I make now. I’m sure if I put the time in, I could remix it into a pretty sweet song.</p>
    <p>I was always a bit of an art and music geek so when it came time to choose a career path I leaned toward architecture because it was a mix of art, science, and technology; all things that are very much a part of who I am.</p>
  </dd>
</dl>
Where did you grow up and what were you like as a child?

My family moved to Canada from Shanghai when I was in fourth grade, and I grew up in Toronto. I was a very creative child who loved drawing and making things with my hands. Coming from a Chinese family, I was encouraged to play music but gravitated toward freeform arts, so learning an instrument in the classical sense never became something that I honed. I actually wish that I had done that. My 3D printers sound like singing robots, so that’s the music I make now. I’m sure if I put the time in, I could remix it into a pretty sweet song.

I was always a bit of an art and music geek so when it came time to choose a career path I leaned toward architecture because it was a mix of art, science, and technology; all things that are very much a part of who I am.

Another question?

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Pull Quote

Use this code snippet for each pull quote.

<!-- // Pull Quote -->
<aside class="border pull-quote">
  <p>Digital fabrication allows for a physical reality that’s much more transient, dynamic, and customized by the individual.</p>
</aside>

Team Related Content

Team Signature

<div class="border signature">
  <p>
    with <i class="fa fa-heart-o theme-color" aria-hidden="true" title="love"></i><span class="screen-readers">love</span>
    from <span class="team theme-color">the Women&&Tech team</span>
  </p>
</div>

with love from the Women&&Tech team

Team Listing

<!-- // Team Listing -->
<aside class="border team-listing">
  <ul>
    <li>
      <p class="name"><a href="#">Cassie Kaiser</a></p>
      <p class="role">Managing Coordinator</p>
    </li>
    <li>
      <p class="name"><a href="#">Ivonne Karamoy</a></p>
      <p class="role">Managing Director</p>
    </li>
    <li>
      <p class="name"><a href="#">Christina Truong</a></p>
      <p class="role">Lead Developer</p>
    </li>
    <li>
      <p class="name"><a href="#">Ray Kao</a></p>
      <p class="role">Tech Lead</p>
    </li>
  </ul>
  <p class="thanks">Special thanks to our founder Cassie McDaniel, past team members and supporters.</p>
</aside>

Misc

Default headings, paragraphs and links

This is used used for non-interview pages such as an About page.

<section class="border page-content">
  <div class="wrapper-sm">
    <h2>H2 Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</p>

    <h3>H3 Subheading</h3>
    <p>Cupcake ipsum dolor. Sit amet biscuit dragée cotton candy icing croissant toffee bonbon. Tootsie roll <a href="#">chocolate cake</a> lollipop topping cake cake fruitcake. Halvah jelly beans pie muffin. Sweet roll cookie liquorice danish lemon drops pie apple pie donut lemon drops. Gingerbread gummies caramels. Oat cake sweet roll pie ice cream chocolate.</p>

    <h2>H2 Heading</h2>
    <p>Pudding chupa chups lollipop. Marshmallow chocolate bar brownie caramels macaroon powder danish. Gingerbread sweet tiramisu sweet roll dessert fruitcake topping cupcake donut.</p>
  </div>
</section>

H2 Heading

This is the default styles for a non-interview page. This includes basic styles for h2 and h3 headings, paragraphs and links. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.

H3 Subheading

Cupcake ipsum dolor. Sit amet biscuit dragée cotton candy icing croissant toffee bonbon. Tootsie roll chocolate cake lollipop topping cake cake fruitcake. Halvah jelly beans pie muffin. Sweet roll cookie liquorice danish lemon drops pie apple pie donut lemon drops. Gingerbread gummies caramels. Oat cake sweet roll pie ice cream chocolate.

H2 Heading

Pudding chupa chups lollipop. Marshmallow chocolate bar brownie caramels macaroon powder danish. Gingerbread sweet tiramisu sweet roll dessert fruitcake topping cupcake donut. Marshmallow sweet tiramisu pudding powder lollipop pie croissant cake. Tiramisu bear claw gummi bears jelly beans marshmallow jujubes bonbon. Icing soufflé bear claw cake dessert pastry marshmallow jujubes.

Past Interview Cards

This code snippet is here for reference only. The only changes that need to made is to the content, not the HTML markup.

In the includes/latest-interviews.php file, update the URL to the interviews, thumbnail image file and interview details to update the three interviews to be featured.

<aside class="interview-cards wrapper">
  <h2>Latest Interviews</h2>
  <a class="view-all" href="/archive/">view all</a>
  <div class="grid-wrapper">
    <article class="grid-3-1">
      <a href="/interview/aashni-shah/" class="no-underline">
        <img src="<?php echo $path_img; ?>thumbnail-aashni-shah.jpg" alt="Aashni Shah">
        <h3>Aashni Shah</h3>
        <p>with Cassie Kaiser</p>
        <p>Computer Science student, organizer, leader and speaker within the tech community.</p>
      </a>
    </article>
    <article class="grid-3-1">
      <a href="/interview/sara-hicks/" class="no-underline">
        <img src="<?php echo $path_img; ?>thumbnail-sara-hicks.jpg" alt="Sara Hicks">
        <h3>Sara Hicks</h3>
        <p>with Sophie He</p>
        <p>Co-founder and CEO of Reaction Commerce, an open-source ecommerce platform.
          </p>
      </a>
    </article>
    <article class="grid-3-1">
      <a href="/interview/mitchell-baker/" class="no-underline">
        <img src="<?php echo $path_img; ?>thumbnail-mitchell-baker.jpg" alt="Mitchell Baker">
        <h3>Mitchell Baker</h3>
        <p>with Cassie McDaniel</p>
        <p>Founder of the non-profit tech company Mozilla, creator of Firefox and champion of the open web.</p>
      </a>
    </article>
  </div>
</aside>