I2P brand styleguides for the web
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.

160 lines
8.3 KiB

7 years ago
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
7 years ago
<title>I2P Styleguide</title>
<link rel="stylesheet" href="/i2p-styleguide/assets/static/open-iconic-bootstrap.css" />
<link rel="stylesheet" href="/i2p-styleguide/assets/static/bootstrap.min.css">
<link rel="stylesheet" href="/i2p-styleguide/assets/styles/main.css">
<link rel="shortcut icon" type="image/png" href="/i2p-styleguide/assets/images/favicon.png"/>
<link href="/i2p-styleguide/assets/fonts/sourcesans.css" rel="stylesheet">
<link href="/i2p-styleguide/assets/fonts/sourcecode.css" rel="stylesheet">
7 years ago
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark border-bottom border-black sticky-top rp-navbar__top">
7 years ago
<a class="navbar-brand" href="https://geti2p.net/">
<img src="/i2p-styleguide/assets/images/horizontal_white.png" class="my-2" height="40" width="auto" alt=""></img>
7 years ago
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarSupportedContent">
<ul class="navbar-nav mr-auto display-xs">
<li class="nav-item">
<a class="nav-link" href="/i2p-styleguide/">About</a>
7 years ago
</li>
<li class="nav-item">
<a class="nav-link" href="/i2p-styleguide/getting-started">Getting Started</a>
7 years ago
</li>
<li class="nav-item">
<a class="nav-link" href="/i2p-styleguide/visuals/">Visuals</a>
7 years ago
</li>
<li class="nav-item">
<a class="nav-link" href="/i2p-styleguide/components/">Components</a>
7 years ago
</li>
<li class="nav-item">
<a class="nav-link" href="/i2p-styleguide/copywriting/">Copywriting</a>
7 years ago
</li>
</ul>
</div>
</nav>
<div class="row" style="height: 100%">
<div class="col-md-3 col-sm-4 col-xs-4 p-0">
<div class="row" style="height: 100%">
<div class="col-md-6 col-sm-6 col-xs-6 p-0 display-md">
<div class="sidebar rb-sidebar__1" id="sidebar1">
<ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill">
<a href="/i2p-styleguide/" class="sidebar__link__light">
<li class="list-group-item rb-main-sidebar">About</li>
</a>
7 years ago
<a href="/i2p-styleguide/getting-started/" class="sidebar__link__light">
<li class="list-group-item rb-main-sidebar">Getting Started</li>
</a>
7 years ago
<a href="/i2p-styleguide/visuals/" class="sidebar__link__light">
<li class="list-group-item rb-main-sidebar">Visuals</li>
</a>
7 years ago
<a href="/i2p-styleguide/components/" class="sidebar__link__light">
<li class="list-group-item rb-main-sidebar">Components</li>
</a>
7 years ago
<a href="/i2p-styleguide/copywriting/" class="sidebar__link__light">
<li class="list-group-item rb-main-sidebar">Copywriting</li>
</a>
7 years ago
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-7 col-xs-12 col-sm-12 p-0">
<main role="main" class="content-scroll p-5" data-spy="scroll"
data-target="#components-nav" data-offset="0">
<div class="row">
<div class="col-12 p-0">
<div class="page-header mb-4">
<h3>Getting started</h3>
<p class="text-muted">We are making I2P usable for everyone.</p>
</div>
<p>The I2P styleguide is based on <a href="https://getbootstrap.com/">Bootstrap</a>, an open-source
toolkit for developing with HTML, CSS, and JS. We are currently on
<a href="https://getbootstrap.com/docs/4.1/getting-started/introduction/">v4.1.0</a>.
</p>
<p>
To use the I2P styleguide, you can download our scss style (components.scss) and
import it in your project with bootstrap included. <a href="http://sass-lang.com/">SASS</a> is a CSS extension language.
</p>
<p class="purple">
If you want to use SASS you can download the complete archive for the styleguide. The scss folder under
assets contains all the sass files. Since we use bootstrap, we only add a few styles without
modifying bootstrap core or defining new elements whenever possible.
</p>
<p>Bootstrap contains a few JavaScript libraries for extra interaction with the DOM. We use these
libraries but do not add extra JavaScript, so that only few elements are affected if you disable JavaScript.
</p>
<p>This styleguide has been built using <a href="https://jekyllrb.com/">Jekyll</a>.
Jekyll is a simple, blog-aware, static site generator. You can build this yourself by
<a href="https://jekyllrb.com/docs/continuous-integration/buddyworks/#1-getting-started">
installing Jekyll</a>.</p>
<div class="bg-box p-5 mb-3">
<h6>Use the I2P Styleguide</h6>
<p class="m-0">This package includes .scss files</p>
<a class="btn btn-lg btn-link p-0" title="I2P Repo"
href="https://github.com/uracreative/i2p-styleguide/tree/master/assets/styles" target="_blank">Visit Repo</a></div>
7 years ago
<div>
</div>
6 years ago
<div class="page-header mb-4 mt-5 d-none d-sm-none">
7 years ago
<h3>Scrollspy</h3>
<!--p class="text-muted">Some Description about scrollspy.</p-->
</div>
<div class="row p-0 pt-5 bg-light d-none d-sm-none">
<div class="bd-example">
<div class="row">
<div class="col-4">
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action active" href="https://securedrop.org/">SecureDrop</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Second Link</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Third Link</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">Forth Link</a>
</div>
</div>
<div class="col-8">
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem error eum inventore laboriosam necessitatibus nobis numquam praesentium quae tempore. Dignissimos minima rerum tenetur vel vero! Eius molestias natus nesciunt!
</div>
</div>
</div>
</div>
</div>
<div class="dropdown-divider mt-5 wi"></div>
<div class="row">
<div class="col-12 p-0">
<p class="mt-5 mb-5">
<span class="text-muted small"> Styleguide code licensed under <a href="https://opensource.org/licenses/MIT" class="rb-link" title="MIT" target="_blank">MIT</a>, documents licensed under a <a href="https://creativecommons.org/licenses/by/3.0/us/" title="CC 3.0" target="_blank">Creative Commons Attribution 3.0 United States License</a>. I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other.<br>Templates and styles based on the <a href="https://reproducible-builds.org/style" target="_blank">Reproducible Builds styleguide</a>.</span>
</p>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="/i2p-styleguide/assets/javascript/modernizr.min.js"></script>
<script src="/i2p-styleguide/assets/javascript/jquery-3.3.1.slim.min.js"></script>
<script src="/i2p-styleguide/assets/javascript/popper.min.js"></script>
<script src="/i2p-styleguide/assets/javascript/bootstrap.min.js"></script>
<!-- <script src="/i2p-styleguide/assets/javascript/run_prettify.js"></script> /* -->
<script type="text/javascript" src="/i2p-styleguide/assets/javascript/index.js"></script>
7 years ago
</body>
</html>