<!DOCTYPE html>
< html lang = "en" dir = "ltr" >
< head >
< meta charset = "utf-8" >
< title > I2P Styleguide< / title >
< link rel = "stylesheet" href = "/assets/static/open-iconic-bootstrap.css" / >
< link rel = "stylesheet" href = "/assets/static/bootstrap.min.css" >
< link rel = "stylesheet" href = "/assets/styles/main.css" >
< link rel = "shortcut icon" type = "image/png" href = "/assets/images/favicon.png" / >
< link href = "/assets/fonts/sourcesans.css" rel = "stylesheet" >
< link href = "/assets/fonts/sourcecode.css" rel = "stylesheet" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< / head >
< body >
< nav class = "navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top" >
< a class = "navbar-brand" href = "https://geti2p.net/" >
< img src = "/assets/images/horizontal_color.png" class = "my-2" height = "40" width = "auto" alt = "" > < / img >
< / 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 = "/" > About< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "/getting-started" > Getting Started< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "/visuals/" > Visuals< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "/components/" > Components< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "/copywriting/" > Copywriting< / a >
< / 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" >
< li class = "list-group-item rb-main-sidebar" >
< a href = "/" class = "sidebar__link__light" > About< / a >
< / li >
< li class = "list-group-item rb-main-sidebar" >
< a href = "/getting-started/" class = "sidebar__link__light" > Getting Started< / a >
< / li >
< li class = "list-group-item rb-main-sidebar" >
< a href = "/visuals/" class = "sidebar__link__light" > Visuals< / a >
< / li >
< li class = "list-group-item rb-main-sidebar" >
< a href = "/components/" class = "sidebar__link__light" > Components< / a >
< / li >
< li class = "list-group-item rb-main-sidebar" >
< a href = "/copywriting/" class = "sidebar__link__light" > Copywriting< / a >
< / li >
< / 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/securedrop-styleguide/tree/master/assets/styles" target="_blank">Visit Repo< / a > < / div >
< div >
< / div >
< h1 id = "scrollspy" > < / h1 >
< div class = "page-header mb-4 mt-5 d-none d-sm-none" >
< 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 = "/assets/javascript/modernizr.min.js" > < / script >
< script src = "/assets/javascript/jquery-3.3.1.slim.min.js" > < / script >
< script src = "/assets/javascript/popper.min.js" > < / script >
< script src = "/assets/javascript/bootstrap.min.js" > < / script >
<!-- <script src="/assets/javascript/run_prettify.js"></script> /* -->
< script type = "text/javascript" src = "/securedrop-styleguide/assets/javascript/index.js" > < / script >
< / body >
< / html >
