You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
289 lines
12 KiB
289 lines
12 KiB
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<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>Reproducible Builds Style Guide</title>
|
|
<meta name="description" content="We have been in talks with the Reproducible Builds community since late 2017 where they were looking to have a new logo to represent the project. Going a ste...">
|
|
|
|
<!-- Metadata -->
|
|
|
|
<meta property="og:site_name" content="Ura Design">
|
|
|
|
<meta property="og:title" content="Reproducible Builds Style Guide">
|
|
<meta property="og:type" content="article">
|
|
<meta property="og:description" content="We have been in talks with the Reproducible Builds community since late 2017 where they were looking to have a new logo to represent the project. Going a step further, we also decided to work on a fully fledged live style guide.[…]"/>
|
|
|
|
|
|
<meta property="article:published_time" content="2018-06-13T12:00:00+02:00">
|
|
|
|
<meta property="og:url" content="http://localhost:4000/2018/06/13/reproducible-builds-styleguide.html" />
|
|
|
|
<meta itemprop="keywords" content="Reproducible Builds,Open Tech Fund,Usability Lab,Style Guide" />
|
|
|
|
<meta property="article:tag" content="Reproducible Builds">
|
|
|
|
<meta property="article:tag" content="Open Tech Fund">
|
|
|
|
<meta property="article:tag" content="Usability Lab">
|
|
|
|
<meta property="article:tag" content="Style Guide">
|
|
|
|
|
|
|
|
<meta content="https://ura.design/images/blog/ReproducibleBuilds_thumbnail.png" property="og:image">
|
|
|
|
<meta name="twitter:card" content="summary" />
|
|
<meta name="twitter:site" content="@uracreative" />
|
|
<meta name="twitter:image:src" content="https://ura.design/images/blog/ReproducibleBuilds_thumbnail.png" />
|
|
|
|
<link rel="stylesheet" href="/css/app.css">
|
|
<link href="/fonts/overpass/overpass.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="/css/superslides.css"/>
|
|
<link rel="stylesheet" href="/css/slick-theme.css"/>
|
|
<link rel="stylesheet" href="/css/slick.css"/>
|
|
<link rel="stylesheet" href="/css/animate.css"/>
|
|
<link rel="stylesheet" href="/css/linea-styles.css"/>
|
|
<link rel="stylesheet" href="/css/linea-arrows-styles.css"/>
|
|
<link rel="stylesheet" href="/css/fontawesome-all.css"/>
|
|
<link rel="stylesheet" href="/css/style.css"/>
|
|
<link rel="stylesheet" href="/css/responsive.css"/>
|
|
|
|
<script src="/bower_components/modernizr/modernizr.js"></script>
|
|
|
|
<link rel="canonical" href="http://localhost:4000/2018/06/13/reproducible-builds-styleguide.html">
|
|
<link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
<div class='contain-to-grid sticky transparent'>
|
|
<nav class='top-bar' data-options='sticky_on: large' data-topbar=''>
|
|
<ul class='title-area'>
|
|
<li class="">
|
|
<h1>
|
|
<a href='/'><img src="/images/main/logo.svg" width="180.7px" height="56.5px alt="Ura Logo">
|
|
</a>
|
|
</h1>
|
|
</li>
|
|
</ul>
|
|
<div id="menu-toggler" class="right">
|
|
<a href='#'>
|
|
<i class="icon-arrows-hamburger-2"></i>
|
|
</a>
|
|
</div>
|
|
<section class='top-bar-section closed'>
|
|
<ul class='right'>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="has-dropdown ">
|
|
<a href="/blog/">Blog</a>
|
|
<ul class='dropdown'>
|
|
|
|
<li>
|
|
<a href="/events">Events</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="has-dropdown ">
|
|
<a href="/services">Services</a>
|
|
<ul class='dropdown'>
|
|
|
|
<li>
|
|
<a href="/request">Request</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="has-dropdown active">
|
|
<a href="/projects">Projects</a>
|
|
<ul class='dropdown'>
|
|
|
|
<li>
|
|
<a href="/logobridge">Logobridge</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="active">
|
|
<a href="/support-us">Support Us</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="has-dropdown ">
|
|
<a href="/about">About</a>
|
|
<ul class='dropdown'>
|
|
|
|
<li>
|
|
<a href="/contact">Contact</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/jobs">Jobs</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
</section>
|
|
</nav>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="full blog">
|
|
<div class="post single">
|
|
<div class="row">
|
|
<div class="large-8 large-centered columns">
|
|
<div class="post-content">
|
|
<h2 id="page-title">Reproducible Builds Style Guide</h2>
|
|
<p class='info'>
|
|
|
|
<span>June 13, 2018</span> by <a href="https://lushka.al" target="_blank">Anxhelo Lushka</a>
|
|
</p>
|
|
<p>Earlier this year, we announced our involvement with <a href="http://opentech.fund/lab/usability-lab">Open Tech Fund’s Usability Lab</a>, providing Usability and Design Services to Internet Freedom projects. If you missed the news, head over to the <a href="https://ura.design/2018/03/12/ura-now-part-open-tech-funds-usability-lab">announcement on our blog.</a></p>
|
|
|
|
<p><img src="/images/blog/rb_header.png" alt="Reproducible Builds Logo" /></p>
|
|
|
|
<p><a href="https://reproducible-builds.org">Reproducible Builds</a> has been the first project we supported as part of the Usability Lab. Reproducible Builds represents a set of software development practices that create an independently-verifiable path from source code to the binary code used by computers.</p>
|
|
|
|
<p>We have been in talks with the Reproducible Builds community since late 2017 where they were looking to have a new logo to represent the project. Going a step further, we met with Holger, a core contributor to the project at this year’s FOSDEM. During our conversations we decided to provide a full fledged style guide via the support of OTF’s Usability Lab.</p>
|
|
|
|
<p>The following weeks consisted of various IRC meetings and iterations on logo proposals which were presented on <a href="https://identihub.co">Identihub</a>, our Free Software platform for hosting visual identites and assets. While the logo process has been quite extensive and we had a few delays, we were able to pin down a final logo throughout a selection voted by the community.</p>
|
|
|
|
<p>With the logo being decided upon, we had a clear path going forward, implementing the visual identity in a live style guide, inspired from the <a href="https://styleguide.torproject.org">Tor style guide</a> we helped set the foundations for in 2016.</p>
|
|
|
|
<p><img src="/images/blog/RB_image_1.jpg" alt="Colors Section" /></p>
|
|
|
|
<p>The style guide itself features visuals, assets and components ready to be used in Reproducible Builds projects. Additionally, the style guide is free of any 3rd party trackers (including Google Fonts), external libraries and works also with JavaScript disabled / Tor High Security Mode. We even made sure that the style guide is responsive and should work fine on all resolutions.</p>
|
|
|
|
<p>The style guide is now migrated to <a href="https://salsa.debian.org/reproducible-builds/reproducible-styleguide">Debian infrastructure</a>, but you can view a <a href="https://uracreative.github.io/reproducible-builds-styleguide/">live version on GitHub pages</a>.</p>
|
|
|
|
<p>In the coming weeks, the official version will live on <a href="https://reproducible-builds.org/style">https://reproducible-builds.org/style</a></p>
|
|
|
|
<h3 id="identihub">Identihub</h3>
|
|
|
|
<p>While a live style guide is an ideal solution to offer powerful guidelines in one place, creating an Identihub page is an accessible alternative which can be deployed right away without too much hassle.</p>
|
|
|
|
<p>There you can also find the <a href="https://demo.identihub.co/project/reproducible-builds">style guide assets</a> where Identihub should make it easier to link, share and convert them.</p>
|
|
|
|
<p>Also head over to our <a href="https://ura.design/projects/reproducible-builds">portfolio page</a> of Reproducible Builds!</p>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="full light-grey blog">
|
|
<nav class='wrapper'>
|
|
<div class="row">
|
|
<div class="small-6 columns">
|
|
|
|
<a class="previous button boxed black" href='/2018/05/31/oscal-18-we-were-there'>
|
|
<i class='fa fa-angle-left'></i> Previous post
|
|
</a>
|
|
|
|
|
|
</div>
|
|
<div class="small-6 columns">
|
|
|
|
<a class="next button boxed black" href='/2018/06/17/welcoming-renata-uras-usability-researcher'>
|
|
Next post <i class='fa fa-angle-right'></i>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
|
|
<div id="cookieConsent">
|
|
<div id="closeCookieConsent">x</div>
|
|
This website is using cookies. <a href="/privacy-policy" target="_blank">More info</a>. <a class="cookieConsentOK">That's Fine</a>
|
|
</div>
|
|
|
|
<div class="full no-padding footer blue centered-text">
|
|
<div class="two spacing"></div>
|
|
<div class="row">
|
|
<div class="small-12 columns">
|
|
<p>Made with <i class="fa fa-heart" style="color: red;" aria-hidden="true"></i> in <a href="https://en.wikipedia.org/wiki/Tirana" target="_blank">Tirana, Albania</a><p>
|
|
<div class="one spacing"></div>
|
|
<ul class="socials">
|
|
<li><a href="https://twitter.com/uracreative" target="_blank"><i class='fab fa-twitter'></i></a></li>
|
|
<li><a href="https://github.com/uracreative/ura.design/" target="_blank"><i class='fab fa-github'></i></a></li>
|
|
</ul>
|
|
<p>Committed to Free Software, Internet Freedom, and <a href="http://opensourcedesign.net/">Open Source Design</a></p>
|
|
<p> Trademarks are property of their respective owners. All site content, unless otherwise noted, is licensed <a href="http://creativecommons.org/licenses/by-sa/4.0">CC BY-SA 4.0 International</a> by Ura Design</p>
|
|
<p><a href="https://tinyletter.com/uracreative/archive" target="_blank">Newsletter Archive</a></p>
|
|
<p><a href="/privacy-policy" target="_blank">Privacy Policy</a></p>
|
|
<div class="two spacing"></div>
|
|
<p class="back-to-top"><a href="#"><i class="fa fa-chevron-up"></i>Back to top</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="spacing"></div>
|
|
</div>
|
|
|
|
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
|
|
<script src="/bower_components/foundation/js/foundation.min.js"></script>
|
|
<script src="/js/jquery.superslides.min.js"></script>
|
|
<script src="/js/slick.min.js"></script>
|
|
<script src="/js/wow.min.js"></script>
|
|
<script src="/js/jquery.validate.js"></script>
|
|
<script src="/bower_components/countto/jquery.countTo.js"></script>
|
|
<script src="/bower_components/appear/jquery.appear.js"></script>
|
|
<script src="/js/app.js"></script>
|
|
<script src="/js/svg.js"></script>
|
|
<script src="/js/cookie.js"></script>
|
|
|
|
<!-- Matomo -->
|
|
<script type="text/javascript">
|
|
var _paq = _paq || [];
|
|
/ tracker methods like "setCustomDimension" should be called before "trackPageView" /
|
|
_paq.push(["setCookieDomain", "*.ura.design"]);
|
|
_paq.push(['trackPageView']);
|
|
_paq.push(['enableLinkTracking']);
|
|
(function() {
|
|
var u="//analytics.ura.design/";
|
|
_paq.push(['setTrackerUrl', u+'piwik.php']);
|
|
_paq.push(['setSiteId', '2']);
|
|
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
|
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
|
|
})();
|
|
</script>
|
|
|
|
<noscript><p><img src="//analytics.ura.design/piwik.php?idsite=2&rec=1" style="border:0;" alt="" /></p></noscript>
|
|
<!-- End Matomo Code -->
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|