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

Styleguide 2.0 #2365

Merged
merged 32 commits into from
Mar 27, 2017
Merged

Styleguide 2.0 #2365

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
cdb8687
blockquotes
gemfarmer Mar 14, 2017
4ebff32
moved nav styles to own scss file, still need work especially moblie
elainekamlley Mar 16, 2017
92ba829
Update order of headings, adjusted colors and background
elainekamlley Mar 16, 2017
7c88f85
nav redux
gemfarmer Mar 17, 2017
9889ff0
new layout, persistent header and nav
gemfarmer Mar 17, 2017
aef36e2
broken on to other pages
gemfarmer Mar 17, 2017
b58097e
wrote introduction, switched order of code, documentation
gemfarmer Mar 17, 2017
a911513
cleaned up colors
elainekamlley Mar 20, 2017
2c90488
clearing a hound check
elainekamlley Mar 20, 2017
4bcc88f
improve docs
gemfarmer Mar 20, 2017
ca31499
Merge branch 'styleguide-2.0' of https://github.com/18F/18f.gsa.gov i…
gemfarmer Mar 20, 2017
1ca821f
started adding images
gemfarmer Mar 20, 2017
aefc810
sticky nav
gemfarmer Mar 21, 2017
849973a
more work on images
gemfarmer Mar 21, 2017
e0f888c
naming
gemfarmer Mar 21, 2017
776cfc8
document usage of Jekyll throughout the site
gemfarmer Mar 22, 2017
aae6413
rspec
gemfarmer Mar 22, 2017
8104267
docs
gemfarmer Mar 22, 2017
e4c6899
added blog images and captions section. Need to add documentation
elainekamlley Mar 22, 2017
6ebb026
added image documentation
elainekamlley Mar 22, 2017
d75caa0
hero image code
elainekamlley Mar 22, 2017
b7b1ee8
right aligned attribute page and code
elainekamlley Mar 24, 2017
de5c74c
blog images
gemfarmer Mar 24, 2017
34f5ad9
added breadcrumb, expanded images to blog images
gemfarmer Mar 27, 2017
4accbae
call to action wording
gemfarmer Mar 27, 2017
f706339
hide debugging
gemfarmer Mar 27, 2017
324065e
typo
gemfarmer Mar 27, 2017
284bce3
rearrange navigation
gemfarmer Mar 27, 2017
93c2a42
oembed
gemfarmer Mar 27, 2017
430fc4f
Added documentation to right aligned list
elainekamlley Mar 27, 2017
eddb103
Additional documentation to breadcrumb section
elainekamlley Mar 27, 2017
6037933
removed commented out js
elainekamlley Mar 27, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 33 additions & 31 deletions _about/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,37 +30,39 @@ subnav_items:

We strive to work in a modern way and use best practices on all our projects. Here's what that means to us:

<div class="icon-list">
<figure class="icon-list-image">{% include svg/icons/respect-icon.svg %}</figure>
<div class="icon-list-text">
<p class="paragraph-bold">Respect for government workers</p>
<p>Civil servants have tremendous knowledge about what it takes to achieve their agency’s mission. We help clear technical and governmental hurdles to better serve the public.</p>
</div>
</div>

<div class="icon-list">
<figure class="icon-list-image">{% include svg/icons/user-centered-icon.svg %}</figure>
<div class="icon-list-text">
<p class="paragraph-bold">Human-centered design</p>
<p>We listen to real users to understand their needs and build things that will be useful to them — without sacrificing technical or regulatory requirements.</p>
</div>
</div>

<div class="icon-list">
<figure class="icon-list-image">{% include svg/icons/agile-icon.svg %}</figure>
<div class="icon-list-text">
<p class="paragraph-bold">Agile methods</p>
<p>We help you move faster and adopt new approaches that reduce risk on your projects. We pay careful attention to what succeeds, and use metrics and feedback to inform what we build.</p>
</div>
</div>

<div class="icon-list">
<figure class="icon-list-image">{% include svg/icons/open-icon.svg %}</figure>
<div class="icon-list-text">
<p class="paragraph-bold">Open technology</p>
<p>Our projects are designed and built in public. That means open source, open data, and open APIs. Working transparently helps us develop faster, make better decisions, provide code for many others to reuse, and keep costs low.</p>
</div>
</div>
<ul class="icon-list-wrapper">
<li class="icon-list">
<figure class="icon-list-image">{% include svg/icons/respect-icon.svg %}</figure>
<div class="icon-list-text">
<p class="p-bold">Respect for government workers</p>
<p>Civil servants have tremendous knowledge about what it takes to achieve their agency’s mission. We help clear technical and governmental hurdles to better serve the public.</p>
</div>
</li>

<li class="icon-list">
<figure class="icon-list-image">{% include svg/icons/user-centered-icon.svg %}</figure>
<div class="icon-list-text">
<p class="p-bold">Human-centered design</p>
<p>We listen to real users to understand their needs and build things that will be useful to them — without sacrificing technical or regulatory requirements.</p>
</div>
</li>

<li class="icon-list">
<figure class="icon-list-image">{% include svg/icons/agile-icon.svg %}</figure>
<div class="icon-list-text">
<p class="p-bold">Agile methods</p>
<p>We help you move faster and adopt new approaches that reduce risk on your projects. We pay careful attention to what succeeds, and use metrics and feedback to inform what we build.</p>
</div>
</li>

<li class="icon-list">
<figure class="icon-list-image">{% include svg/icons/open-icon.svg %}</figure>
<div class="icon-list-text">
<p class="p-bold">Open technology</p>
<p>Our projects are designed and built in public. That means open source, open data, and open APIs. Working transparently helps us develop faster, make better decisions, provide code for many others to reuse, and keep costs low.</p>
</div>
</li>
</ul>

To learn more about how we work, explore [18F guides](https://pages.18f.gov/guides/).

Expand Down
24 changes: 12 additions & 12 deletions _includes/details-code.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,21 @@


<ul class="usa-accordion styleguide-details">
{% if include.content %}
<li>
<button class="usa-accordion-button" aria-controls="{{ include.title | slugify }}">
{{ include.text | default: 'Code' }}
</button>
<div id="{{ include.title | slugify }}" class="usa-accordion-content styleguide-border">
{{ code | markdownify }}
</div>
</li>
{% endif %}
{% if include.uswds_ref or include.scss_ref or include.other_ref or include.description or include.image %}
<li>
<button class="usa-accordion-button"
aria-expanded="true" aria-controls="{{ include.title | slugify | append: '-details' }}">
Usage details
Documentation
</button>
<div id="{{ include.title | slugify | append: '-details' }}" class="usa-accordion-content styleguide-border">
{% if include.description %}
Expand All @@ -33,7 +43,7 @@
<li><a href="{{ include.scss_ref }}">SCSS references</a></li>
{% endif %}
{% if include.other_ref %}
<li><a href="{{ include.other_ref }}">Documentation</a></li>
<li><a href="{{ include.other_ref }}">Additional documentation</a></li>
{% endif %}
</ul>
{% endif %}
Expand All @@ -44,14 +54,4 @@
</div>
</li>
{% endif %}
{% if include.content %}
<li>
<button class="usa-accordion-button" aria-controls="{{ include.title | slugify }}">
{{ include.text | default: 'Code' }}
</button>
<div id="{{ include.title | slugify }}" class="usa-accordion-content styleguide-border">
{{ code | markdownify }}
</div>
</li>
{% endif %}
</ul>
4 changes: 0 additions & 4 deletions _includes/details.html
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion _includes/navigation/drawer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% assign nav_class_suffix = include.nav_class_suffix | default: '' %}


<nav class="nav-accordion nav-mobile{{ nav_class_suffix }}" role="navigation">
<nav class="nav-accordion nav-mobile{{ nav_class_suffix }}{% if include.nav_sticky %} sticky {% endif %}" role="navigation">
<button class="sliding-panel-close{{ nav_class_suffix }}">
{% include svg/icons/close.svg %}
</button>
Expand Down
1 change: 0 additions & 1 deletion _includes/svg/icons/bars.svg
View file
Open in desktop

This file was deleted.

3 changes: 1 addition & 2 deletions _includes/svg/icons/close.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@
<body class="{% if page.type == "tag"%}tag-{% endif %}page-{{ page.title | slugify }}
{% if page.header_border == true or layout.header_border == true %}header_border{% endif %} {% if page.path contains '_posts' %}single-post{% endif %}">

{% unless layout.title == '18F Styleguide' %}
{% unless layout.title == '18F UI Styleguide' %}
{% include header.html %}
{% endunless %}

<div class="main-content" id="main-content">
<div class="main-content {% if layout.title == '18F UI Styleguide' %}styleguide-main-content{% endif %}" id="main-content">
{{ content }}
</div>

{% unless layout.title == '18F Styleguide' %}
{% unless layout.title == '18F UI Styleguide' %}
{% include navigation.html drawer=true %}

<footer role="contentinfo">
Expand Down
60 changes: 46 additions & 14 deletions _layouts/styleguide.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,55 @@
---
layout: default
title: 18F Styleguide
title: 18F UI Styleguide
nav_items:
- text: Typography
permalink: /styleguide/typography/
in_drawer: true
- text: Colors
permalink: /styleguide/colors/
in_drawer: true
- text: Buttons
permalink: /styleguide/buttons/
in_drawer: true
- text: Images
permalink: /styleguide/images/
in_drawer: true
- text: Embeds
permalink: /styleguide/embeds/
in_drawer: true
- text: Cards
permalink: /styleguide/cards/
in_drawer: true
- text: Blog components
permalink: /styleguide/blog-components/
in_drawer: true
- text: Sticky subnavigation
permalink: /styleguide/sticky-subnavigation/
in_drawer: true
- text: Using Jekyll
permalink: /styleguide/using-jekyll/
in_drawer: true
---
<section class="background-gray usa-section">
<div class="usa-grid">
<h1 id="{{ page.title | slugify }}">{{ page.title }}</h1>
<div class="usa-width-three-fourths">
<h2 class='h3'><a href="https://18f.gsa.gov">18f.gsa.gov</a> inherits from the U.S. Web Design Standards and 18F brand guidelines to create style that is professional, unique, and informative</h2>
</div>

{% assign dead_end_link = page.permalink | prepend: site.baseurl %}

<section class="background-gray usa-section styleguide-header-wrapper">
<a href="{{ site.baseurl }}/styleguide/">
<img class="styleguide-logo" src="{{ site.baseurl }}/assets/img/logos/18F-Logo-L.png" alt="18F logo" />
<h1 class="h2" id="{{ page.title | slugify }}">{{ page.title }}</h1>
</a>
<div class="menu-btn-styleguide-wrapper">
<button class="menu-btn-styleguide">Menu</button>
</div>
</section>
<section class="usa-grid content-focus content-wide usa-section">
<div class="styleguide-content-wrapper">

<aside id="styleguide-navbar" class="nav-subnav">
<button class="menu-btn-styleguide">{% include svg/icons/bars.svg %}</button>
{% include navigation/drawer.html nav_items=page.nav_items nav_class_suffix='-styleguide' %}
<aside class="nav-subnav styleguide-subnav">
{% include navigation/drawer.html nav_items=layout.nav_items nav_class_suffix='-styleguide' %}
</aside>
<section>

<section class="styleguide-content">
{% if page.subpage %}<h2>{{ page.subpage }}</h2>{% endif %}
{{ content }}
</section>
</section>

</div>
Loading