index.html

---
layout: default
---

  <a class="logo cssconf" href="{{ site.baseurl }}/" title="{{ site.title }}">{{ site.title }}</a>
  <h4 class="text-centered">December 9th ∙ Oakland, CA</h4>

 <section class="intro text-centered">
   <p>CSSConf is a one-day front-end and design-oriented conference for builders of the web. Everyone is welcome.</p>
 </section>

<section class="speakers">
  <h2>Cast</h2>
  <p class="text-centered">In alphabetical order.</p>

  <div class="grid-flex-container">

    <div class="speaker grid-flex-cell">

      <figure class="text-centered">
        <img src="/img/speaker-tabatkins.jpg" alt="Tab Atkins">
        <a href="https://twitter.com/tabatkins" title="Tab on Twitter" class="logo social transition-on"></a>
      </figure>

      <h4>Tab Atkins</h4>
    </div>
    <!-- speaker -->

    <div class="speaker grid-flex-cell">

      <figure class="text-centered">
        <img src="/img/speaker-michellebu.jpg" alt="Michelle Bu">
        <a href="https://twitter.com/hazelcough" title="Michelle on Twitter" class="logo social transition-on"></a>
      </figure>

      <h4>Michelle Bu</h4>
    </div>
    <!-- speaker -->

  </div>

  <div class="grid-flex-container">

    <div class="speaker grid-flex-cell">
      <figure class="text-centered">
        <img src="/img/speaker-jessicadillon.jpg" alt="Jessica Dillon">
        <a href="https://twitter.com/jessicard" title="Jessica on Twitter" class="logo social transition-on"></a>
      </figure>

      <h4>Jessica Dillon</h4>
    </div>
    <!-- speaker -->

    <div class="speaker grid-flex-cell">

        <figure class="text-centered">
          <img src="/img/speaker-elyseholladay.jpg" alt="Elyse Holladay">
          <a href="https://twitter.com/elyseholladay" title="Elyse on Twitter" class="logo social transition-on"></a>
        </figure>

        <h4>Elyse Holladay</h4>
      </div>
      <!-- speaker -->

  </div>

  <div class="grid-flex-container">

    <div class="speaker grid-flex-cell">
      <figure class="text-centered">
        <img src="/img/speaker-brennaobrien.jpg" alt="Brenna O'Brien">
        <a href="https://twitter.com/brnnbrn" title="Brenna on Twitter" class="logo social transition-on"></a>
      </figure>

      <h4>Brenna O'Brien</h4>
    </div>
    <!-- speaker -->

    <div class="speaker grid-flex-cell">
      <figure class="text-centered">
        <img src="/img/speaker-adammorse.jpg" alt="Adam Morse">
        <a href="https://twitter.com/mrmrs_" title="Adam on Twitter" class="logo social transition-on"></a>
      </figure>

      <h4>Adam Morse</h4>
    </div>
    <!-- speaker -->

  </div>

  <div class="grid-flex-container">

    <div class="speaker grid-flex-cell">
      <figure class="text-centered">
        <img src="/img/speaker-markotto.jpg" alt="Mark Otto">
        <a href="https://twitter.com/mdo" title="Mark on Twitter" class="logo social transition-on"></a>
      </figure>

      <h4>Mark Otto</h4>
    </div>
    <!-- speaker -->

    <div class="speaker grid-flex-cell">
      <figure class="text-centered">
        <img src="/img/speaker-claudinasarahe.jpg" alt="Claudina Sarahe">
        <a href="https://twitter.com/itsmisscs" title="Claudina on Twitter" class="logo social transition-on"></a>
      </figure>

      <h4>Claudina Sarahe</h4>
    </div>
    <!-- speaker -->

  </div>

  <div class="grid-flex-container">

    <div class="speaker grid-flex-cell">
      <figure class="text-centered">
        <img src="/img/speaker-connorsears.jpg" alt="Connor Sears">
        <a href="https://twitter.com/connors" title="Connor on Twitter" class="logo social transition-on"></a>
      </figure>

      <h4>Connor Sears</h4>
    </div>
    <!-- speaker -->

    <div class="speaker grid-flex-cell">
      <figure class="text-centered">
        <img src="/img/speaker-alexsexton.jpg" alt="Alex Sexton">
        <a href="https://twitter.com/slexaxton" title="Alex on Twitter" class="logo social transition-on"></a>
      </figure>

      <h4>Alex Sexton</h4>
    </div>
    <!-- speaker -->

  </div>

  <div class="grid-flex-container">

    <div class="speaker grid-flex-cell">
      <figure class="text-centered">
        <img src="/img/speaker-kristinaschneider.jpg" alt="Kristina Schneider">
        <a href="https://twitter.com/kriesse" title="Kristina on Twitter" class="logo social transition-on"></a>
      </figure>

      <h4>Kristina Schneider</h4>

    </div>
    <!-- speaker -->

    <div class="speaker grid-flex-cell">
      <figure class="text-centered">
        <img src="/img/speaker-benschwarz.jpg" alt="Ben Schwarz">
        <a href="https://twitter.com/benschwarz" title="Ben on Twitter" class="logo social transition-on"></a>
      </figure>

      <h4>Ben Schwarz</h4>
    </div>
    <!-- speaker -->

  </div>

  <div class="grid-flex-container no-speaker">

    <div class="speaker grid-flex-cell">
      <figure class="text-centered">
        <img src="/img/speaker-ainsleywagoner.jpg" alt="Ainsley Wagoner">
        <a href="https://twitter.com/ainsleywagon" title="Ainsley on Twitter" class="logo social transition-on"></a>
      </figure>

      <h4>Ainsley Wagoner</h4>
    </div>
    <!-- speaker -->

    <div class="speaker grid-flex-cell">
      <figure class="text-centered">
        <img src="/img/speaker-jenniferwong.jpg" alt="Jennifer Wong">
        <a href="https://twitter.com/mybluewristband" title="Jennifer on Twitter" class="logo social transition-on"></a>
      </figure>

      <h4>Jennifer Wong</h4>
    </div>
    <!-- speaker -->

  </div>

</section>

<section class="venue">
  <h2>Venue</h2>

  <div class="grid-flex-container">
  <figure class="grid-flex-cell text-centered">
    <img src="/img/venue-newparkway.jpg" alt="New Parkway">
  </figure>

  <div class="grid-flex-cell">
    <p>CSSConf will take place at <a href="http://thenewparkway.com/wp/" title="The New Parkway">The New Parkway Theater</a>—an eclectic, picture pizza pub-inspired movie theater in Oakland, CA. It's conveniently located at <a href="https://www.google.pl/maps/place/The+New+Parkway+Theater/@37.813855,-122.267477,17z/data=!3m1!4b1!4m2!3m1!1s0x808f80ab62a41c17:0xb4d8e65de9690f99?hl=en" title="Directions to New Parkway Theater">474 24th Street</a>, right off of Telegraph Avenue.</p>
    <p>The conference will start at 10am and run until 5pm with lunch and shorter breaks.</p>
  </div>

  </div>

</section>

<section class="sponsors">
  <h2>Sponsors</h2>
  <p>We're looking for amazing companies willing to support the event. Sponsorship information can be found on <a href="http://oakland.jsfest.com/sponsors.html" title="Sponsor JSFest">JSFest site</a>. If you are interested in sponsoring, please drop an email to <a href="mailto:contact+sponsor@cssconfoak.land" title="Email us about the sponsorship">contact+sponsor@cssconfoak.land</a> for more details.</p>

  <h3>Platinum</h3>
  <a href="http://mailchimp.com/" class="sponsor sponsor-mailchimp" title="MailChimp"></a>
  <h3>Gold</h3>
  <a href="http://getbootstrap.com/" class="sponsor sponsor-bootstrap" title="Bootstrap"></a>
</section>

<section class="cf">
  <h2>Directed by</h2>
  <p>CSSConf is a not-for-profit event brought to you by people dedicated to creating diverse communities and fostering knowledge-sharing in safe environments.</p>

  <div class="speaker organiser">
    <figure class="text-centered">
      <img src="/img/organiser-karolina.jpg" alt="Karolina Szczur" class="transition-on">
      <a href="https://twitter.com/fox" title="Karolina on Twitter" class="logo social transition-on"></a>
    </figure>

    <h4>Karolina Szczur</h4>
    <p>Design, software and empathy engineer at <a href="http://andyet.com/">&yet.</a> Feminist.</p>
  </div>

  <div class="speaker organiser">
    <figure class="text-centered">
      <img src="/img/organiser-mikeal.jpg" alt="Mikeal Rogers" class="transition-on">
      <a href="https://twitter.com/mikeal" title="Mikeal on Twitter" class="logo social transition-on"></a>
    </figure>
    <h4>Mikeal Rogers</h4>
    <p>Developer Evangelist at <a href="https://www.digitalocean.com/">Digital Ocean</a>. JSFest and NodeConf organizer.</p>
  </div>

</section>