index.html

---
layout: default
---

<header class="intro">
    <div class="intro-body">
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-md-offset-1">
                    <div class="brand-heading">
                        {% include img/opensourcedesign-logo.svg %}
                    </div>
                    <h1 class="intro-text">Open Source Design</h1>
                    <p class="tagline">
                        Bringing great design to Open Source Software
                    </p>
                </div>
            </div>
        </div>
    </div>
</header>
<section id="about" class="container content-section text-center">
    <div class="row">
        <div class="col-md-4">
            <p><strong>We are a community of designers and developers pushing more open design processes and improving the user experience and interface design of open source software.</strong></p>
        </div>
        <div class="col-md-4">
            <p>We write <a href="/articles">articles</a>, run a <a href="/jobs">job board</a>, put on <a href="/events">events</a>, provide <a href="/resources">resources</a>, and present talks targeted at <strong>developers and designers</strong> interested in working and designing in Open Source.</p>
        </div>
        <div class="col-md-4">
            <p class="goals">Read more about our <a href="/manifesto">manifesto</a> and <a href="/goals">goals</a>. If you are interested in contributing, check out the <a href="/faq">frequently asked questions</a> and find how you can <a href="{{ site.url }}/contribute/" title="contribute">contribute</a>. Also join our <a href="https://discourse.opensourcedesign.net" target="_blank">forum</a>.</p>
        </div>
    </div>
</section>
<section id="overview" class="container content-section overview">
    <div class="row">
        <div class="col-md-4">
            <h2>Articles</h2>
            {% for post in site.posts limit:7 %}
                <div class="post">
                    <h3><a href="{{ post.url | prepend: site.baseurl}}">{{ post.title }}</a></h3>
                </div>
            {% endfor %}
            <a href="/articles">See all articles</a>
        </div>
        <div class="col-md-4">
            <h2>Events</h2>
            <p>We run events around the world related to open source, design, and more!</p>
            <a href="/events">See all events</a>
        </div>
        <div class="col-md-4">
            <h2>Jobs &amp; Projects</h2>
            <div id="jobs-snapshot">Loading...</div>
            <a href="/jobs">See all jobs</a>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 supporters">
            <h2>Supporters</h2>
              <img src="images/supporters/creativecommons.svg" height="40px" width="auto" alt="Creative Commons Logo"/>
              <img src="images/supporters/discourse.svg" height="50px" width="auto" alt="Discourse Logo"/>
              <img src="images/supporters/mozilla.svg" height="50px" width="auto" alt="Mozilla Logo"/>
              <img src="images/supporters/nextcloud.svg" height="70px" width="auto" alt="Nextcloud Logo"/>
              <img src="images/supporters/opentechfund.svg" height="40px" width="auto" alt="OpenTechFund Logo"/>
              <img src="images/supporters/phplist.svg" height="50px" width="auto" alt="PhpList Logo"/>
              <img src="images/supporters/redhat.svg" height="50px" width="auto" alt="RedHat Logo"/>
              <a title="Stickermule" href="https://stickermule.com/supports/opensourcedesign19-sponsorship" target="_blank" rel="noopener"><img src="images/supporters/stickermule.svg" height="40px" width="auto" alt="Stickermule Logo"/></a>
              <img src="images/supporters/wikimedia-germany.svg" height="50px" width="auto" alt="Wikimedia Germany Logo"/>
              <br>
              <object type="image/svg+xml" data="https://opencollective.com/opensourcedesign/tiers/sponsor.svg?avatarHeight=70&width=150"></object>
        </div>
        <div class="col-sm-12 supporters">
              <h2>Contributors &amp; Backers</h2>
              <object type="image/svg+xml" id="lastOne" data="https://opencollective.com/opensourcedesign/tiers/backer.svg?avatarHeight=50&width=400"></object>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 supporters">
            <h2>Conferences</h2>
              <img src="images/events/fosdem.svg" height="40px" width="auto" alt="FOSDEM"/>
              <img src="images/events/fossasia.svg" height="50px" width="auto" alt="FOSSASIA"/>
              <img src="images/events/apachecon.svg" style="margin-left:0;margin-right:0" height="50px" width="auto" alt="Apachecon Europe"/>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 affiliates">
            <h2>Affiliates</h2>
              <img src="images/supporters/eff.svg" height="40px" width="auto" alt="Electronic Frontier Foundation Logo"/>
              <img src="images/supporters/fsfe.svg" height="50px" width="auto" alt="Free Software Foundation Europe Logo"/>
              <a title="Open Source Initiative" href="https://opensource.org/affiliates" target="_blank" rel="noopener"><img src="images/supporters/osi.svg" height="100px" width="auto" alt="Open Source Initiative Logo"/></a>
        </div>
    </div>
</section>
<section id="contact" class="container content-section text-center contact">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2">
            <h2>Contact Us</h2>
            <p>
                Reach out to us on Twitter, GitHub, or join us in the chat room.
            </p>
            <ul class="list-inline banner-social-buttons">
                <li>
                    <a href="//twitter.com/{{ site.twitter_username }}" class="btn btn-default btn-lg">
                        <i class="fa fa-twitter fa-fw"></i> <span class="network-name">@{{ site.twitter_username }}</span>
                    </a>
                </li>
                <li>
                    <a href="https://github.com/{{ site.github_username }}" class="btn btn-default btn-lg">
                        <i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span>
                    </a>
                </li>
                <li>
                    <a href="//opencollective.com/opensourcedesign" class="btn btn-default btn-lg">
                        <i style="display: inline-flex; align-self: center;transform: translateY(0.125em);">
                         {% include img/opencollective-logo.svg %}
                        </i> <span class="network-name">Open Collective</span>
                    </a>
                </li>
                <li>
                    <a href="https://discourse.opensourcedesign.net" class="btn btn-default btn-lg">
                        <i class="fa fa-comment fa-fw"></i> <span class="network-name">Forum</span>
                    </a>
                </li>
                <li>
                    <a href="{{ site.url }}/code-of-conduct/" class="btn btn-default btn-lg">
                      <i class="fa fa-thumbs-up fa-fw"></i><span class="network-name">Code of Conduct</span>
                    </a>
                </li>
          </ul>
        </div>
    </div>
</section>