Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature navbar #146

Closed
wants to merge 8 commits into from
Closed

Feature navbar #146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d16dc8b
Merge branch 'release-1.4.1' into develop
rhyneav Mar 22, 2018
373e495
Fixing typo.
lbearl Feb 25, 2018
f01c307
standardize license file
waldyrious Mar 21, 2018
c460eff
Merge branch 'standards' into develop
rhyneav Mar 22, 2018
4f53ae4
Added the html and css for the navbar
dallinbjohnson Apr 3, 2018
9c8d7d9
Reformated my scss and added some styles to make it look better
dallinbjohnson Apr 4, 2018
720679b
Cleaned up my code with scss and html code
dallinbjohnson May 20, 2018
f7f12f7
Factored down even more my scss
dallinbjohnson May 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 3 additions & 1 deletion license → LICENSE.md
View file
Open in desktop
@@ -1,4 +1,6 @@
Copyright 2017 Rhyne Vlaservich <rhyneav@gmail.com>
## ISC Licence

Copyright (c) 2017–2018, Rhyne Vlaservich <rhyneav@gmail.com>

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Expand Up @@ -42,7 +42,7 @@ There are several options available:

We provide compiled CSS (`paper.css`) as well as minified CSS (`paper.min.css`).

You can choose which components you may want to use. Only the components that get imported in `src/styles.scss` will be compoiled into `dist/paper.css`.
You can choose which components you may want to use. Only the components that get imported in `src/styles.scss` will be compiled into `dist/paper.css`.

You can also play with original, source files, written in SCSS, in `src/`.

Expand Down
136 changes: 136 additions & 0 deletions docs/content/docs/components/navbar.md
View file
Open in desktop
@@ -0,0 +1,136 @@
---
title: Navbar
description: PaperCSS Navbar
---

<nav class="border fixed split-nav">
<div class="nav-brand">
<h3><a href="/">Get PaperCSS</a></h3>
</div>
<div class="collapsible">
<input id="collapsible1" type="checkbox" name="collapsible">
<button class="btn-small btn-mobile">
<label for="collapsible1">
<!-- <i class="fas fa-3x fa-bars"></i> -->
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</label>
</button>
<div class="collapsible-body">
<ul class="inline">
<li><a href="/docs/">Documentation</a></li>
<li><a href="/about/">About</a></li>
<li><a href="https://github.com/rhyneav/papercss" target="_blank">Github</a></li>
</ul>
</div>
</div>
</nav>

<nav class="border split-nav">
<div class="nav-brand">
<h3><a href="#">Get PaperCSS</a></h3>
</div>
<div class="collapsible">
<input id="collapsible2" type="checkbox" name="collapsible2">
<button class="btn-small btn-mobile">
<label for="collapsible2">
<!-- <i class="fas fa-3x fa-bars"></i> -->
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</label>
</button>
<div class="collapsible-body">
<ul class="inline">
<li><a href="#">Documentation</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Github</a></li>
</ul>
</div>
</div>
</nav>

#### Code:

Add ```.fixed``` to ```<nav>``` to fix the nav to the top to have it scroll the whole page.

```html
<nav class="border fixed split-nav">
<div class="nav-brand">
<h3><a href="#">Get PaperCSS</a></h3>
</div>
<div class="collapsible">
<input id="collapsible1" type="checkbox" name="collapsible">
<button class="btn-small btn-mobile">
<label for="collapsible1">
<!-- <i class="fas fa-3x fa-bars"></i> (https://fontawesome.com/icons) -->
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</label>
</button>
<div class="collapsible-body">
<ul class="inline">
<li><a href="#">Documentation</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Github</a></li>
</ul>
</div>
</div>
</nav>
```

### Not Split Navbar

<nav class="border">
<div class="nav-brand">
<h4><a href="#">Get PaperCSS</a></h4>
</div>
<div class="collapsible">
<input id="collapsible2" type="checkbox" name="collapsible2">
<button class="btn-small btn-mobile">
<label for="collapsible2">
<!-- <i class="fas fa-3x fa-bars"></i> -->
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</label>
</button>
<div class="collapsible-body">
<ul class="inline">
<li><a href="#">Documentation</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Github</a></li>
</ul>
</div>
</div>
</nav>

#### Code:

```html
<nav class="border fixed">
<div class="nav-brand">
<h4><a href="#">Get PaperCSS</a></h4>
</div>
<div class="collapsible">
<input id="collapsible2" type="checkbox" name="collapsible2">
<button class="btn-small btn-mobile">
<label for="collapsible2">
<!-- <i class="fas fa-3x fa-bars"></i> -->
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</label>
</button>
<div class="collapsible-body">
<ul class="inline">
<li><a href="#">Documentation</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Github</a></li>
</ul>
</div>
</div>
</nav>
```