Commit ef2353d8 authored by Matt Henry's avatar Matt Henry Committed by GitHub

Merge pull request #90 from 18F/ryanhofdotgov-frontend

Importing 18F/frontend and its history
parents 85ef586e af7d92f4
---
name: Frontend
full_name: Frontend Guild
mission: |
Provide cross-team support to both frontend developers and 18F team members seeking tips and best practices in the frontend space.
links:
- url: 'https://drive.google.com/drive/#folders/0B84F26FpUP0lR1B2VVNGSi1MMVk/0B0C6PKlzps2JV3pqX3NJdm5WejA/0B5HeQa_YQ6-VTTlkVEFNZ2VWZEU'
text: Google Drive folder
github_repos:
- 18F/frontend-style-guide
leads:
- marco
- mhz
members:
- marco
- mhz
- julia
owner_type: guild
_site/
.sass-cache/
.DS_store
.*.swp
linters:
BangFormat:
enabled: true
space_before_bang: true
space_after_bang: false
BorderZero:
enabled: false
convention: zero
ColorKeyword:
enabled: true
severity: warning
ColorVariable:
enabled: true
Comment:
enabled: true
DebugStatement:
enabled: true
DeclarationOrder:
enabled: false
DuplicateProperty:
enabled: true
ElsePlacement:
enabled: true
style: same_line
EmptyLineBetweenBlocks:
enabled: true
ignore_single_line_blocks: true
EmptyRule:
enabled: true
FinalNewline:
enabled: true
present: true
HexLength:
enabled: false
style: short
HexNotation:
enabled: true
style: lowercase
HexValidation:
enabled: true
IdSelector:
enabled: true
ImportantRule:
enabled: true
ImportPath:
enabled: true
leading_underscore: false
filename_extension: false
Indentation:
enabled: true
allow_non_nested_indentation: false
character: space
width: 2
LeadingZero:
enabled: false
style: include_zero
MergeableSelector:
enabled: true
force_nesting: true
NameFormat:
enabled: true
allow_leading_underscore: true
convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern
NestingDepth:
enabled: true
max_depth: 4
severity: warning
PlaceholderInExtend:
enabled: false
PropertyCount:
enabled: true
include_nested: false
max_properties: 10
PropertySortOrder:
enabled: false
ignore_unspecified: false
severity: warning
separate_groups: false
PropertySpelling:
enabled: true
extra_properties: []
QualifyingElement:
enabled: true
allow_element_with_attribute: false
allow_element_with_class: false
allow_element_with_id: false
severity: warning
SelectorDepth:
enabled: true
max_depth: 2
severity: warning
SelectorFormat:
enabled: false # strict_BEM doesn't seem to be supported by Hound
convention: strict_BEM
Shorthand:
enabled: true
allowed_shorthands: [1, 2]
severity: warning
SingleLinePerProperty:
enabled: true
allow_single_line_rule_sets: true
SingleLinePerSelector:
enabled: true
SpaceAfterComma:
enabled: true
SpaceAfterPropertyColon:
enabled: true
style: one_space
SpaceAfterPropertyName:
enabled: true
SpaceBeforeBrace:
enabled: true
style: space
allow_single_line_padding: false
SpaceBetweenParens:
enabled: true
spaces: 0
StringQuotes:
enabled: true
style: single_quotes
TrailingSemicolon:
enabled: true
TrailingZero:
enabled: false
UnnecessaryMantissa:
enabled: true
UnnecessaryParentReference:
enabled: true
UrlFormat:
enabled: true
UrlQuotes:
enabled: true
VariableForProperty:
enabled: false
properties: []
VendorPrefixes:
enabled: true
identifier_list: bourbon
include: []
exclude: []
ZeroUnit:
enabled: true
severity: warning
Compass::PropertyWithMixin:
enabled: false
## Building the guide locally
The Front-End Guide is built on the [USWDS Jekyll theme gem](https://github.com/18F/uswds-jekyll).
To run it locally, clone this repo and then:
1. Install [http://bundler.io/](Bundler) if you don't already have it: `gem install bundler`
1. Run `bundle install`.
1. Run `bundle exec jekyll serve`.
## Submitting a pull request
We welcome pull requests! Here's how to submit a PR:
1. The guide publishes the `master` branch, so make sure you have the latest version of it.
1. Create a new branch named in a way that describes your changes, optionally prefixed with your initials. Example: Heather Billings wants to create a PR that adds guidance around atomic CSS. She calls her branch `hjb-add-atomic-css`.
1. Push your branch and open a work-in-progress (WIP) PR as soon as you have commits, rather than waiting until you feel you are finished. **A WIP PR includes `[WIP]` in the title and contains a list of unfinished tasks.** WIP PRs allow for early feedback and help prevent wasted time. It also allows other guild members to pick up and work on pull requests that have been abandoned for whatever reason.
1. When your PR is ready for review, remove `[WIP]` from the title. This lets us know it's game time!
1. A PR must pass the automatic Federalist build check in order to be merged into master.
1. A PR must have one `approved` review in order to be merged into master. Any guild member with write access should be able to approve and merge PRs. (You cannot approve your own PR, sorry!)
## Submitting issues
Don't have time to file a pull request, but want to flag something? [Open an issue](https://github.com/18F/frontend/issues) stating what you think we should add or change and why, and we'll discuss it as a group.
## Public domain
This project is in the public domain within the United States, and
copyright and related rights in the work worldwide are waived through
the [CC0 1.0 Universal public domain dedication](https://creativecommons.org/publicdomain/zero/1.0/).
All contributions to this project will be released under the CC0
dedication. By submitting a pull request, you are agreeing to comply
with this waiver of copyright interest.
source 'https://rubygems.org'
gem 'uswds-jekyll', :git => 'https://github.com/18F/uswds-jekyll.git'
group :jekyll_plugins do
gem 'jekyll_pages_api_search'
gem 'jemoji'
end
GIT
remote: https://github.com/18F/uswds-jekyll.git
revision: 374e5c14940a71578d21d65186c05f507446a1c5
specs:
uswds-jekyll (3.0.0)
jekyll (~> 3.4)
GEM
remote: https://rubygems.org/
specs:
activesupport (4.2.10)
i18n (~> 0.7)
minitest (~> 5.1)
thread_safe (~> 0.3, >= 0.3.4)
tzinfo (~> 1.1)
addressable (2.7.0)
public_suffix (>= 2.0.2, < 5.0)
colorator (1.1.0)
concurrent-ruby (1.1.5)
em-websocket (0.5.1)
eventmachine (>= 0.12.9)
http_parser.rb (~> 0.6.0)
eventmachine (1.2.7)
ffi (1.11.1)
forwardable-extended (2.6.0)
gemoji (3.0.0)
html-pipeline (2.7.1)
activesupport (>= 2)
nokogiri (>= 1.4)
htmlentities (4.3.4)
http_parser.rb (0.6.0)
i18n (0.9.5)
concurrent-ruby (~> 1.0)
jekyll (3.8.6)
addressable (~> 2.4)
colorator (~> 1.0)
em-websocket (~> 0.5)
i18n (~> 0.7)
jekyll-sass-converter (~> 1.0)
jekyll-watch (~> 2.0)
kramdown (~> 1.14)
liquid (~> 4.0)
mercenary (~> 0.3.3)
pathutil (~> 0.9)
rouge (>= 1.7, < 4)
safe_yaml (~> 1.0)
jekyll-sass-converter (1.5.2)
sass (~> 3.4)
jekyll-watch (2.2.1)
listen (~> 3.0)
jekyll_pages_api (0.1.6)
htmlentities (~> 4.3)
jekyll (>= 2.0, < 4.0)
jekyll_pages_api_search (0.5.0)
jekyll_pages_api (~> 0.1.4)
sass (~> 3.4)
jemoji (0.9.0)
activesupport (~> 4.0, >= 4.2.9)
gemoji (~> 3.0)
html-pipeline (~> 2.2)
jekyll (~> 3.0)
kramdown (1.17.0)
liquid (4.0.3)
listen (3.1.5)
rb-fsevent (~> 0.9, >= 0.9.4)
rb-inotify (~> 0.9, >= 0.9.7)
ruby_dep (~> 1.2)
mercenary (0.3.6)
mini_portile2 (2.4.0)
minitest (5.11.3)
nokogiri (1.10.4)
mini_portile2 (~> 2.4.0)
pathutil (0.16.2)
forwardable-extended (~> 2.6)
public_suffix (4.0.1)
rb-fsevent (0.10.3)
rb-inotify (0.10.0)
ffi (~> 1.0)
rouge (3.10.0)
ruby_dep (1.5.0)
safe_yaml (1.0.5)
sass (3.7.4)
sass-listen (~> 4.0.0)
sass-listen (4.0.0)
rb-fsevent (~> 0.9, >= 0.9.4)
rb-inotify (~> 0.9, >= 0.9.7)
thread_safe (0.3.6)
tzinfo (1.2.5)
thread_safe (~> 0.1)
PLATFORMS
ruby
DEPENDENCIES
jekyll_pages_api_search
jemoji
uswds-jekyll!
BUNDLED WITH
1.16.1
As a work of the United States Government, this project is in the
public domain within the United States.
Additionally, we waive copyright and related rights in the work
worldwide through the CC0 1.0 Universal public domain dedication.
## CC0 1.0 Universal Summary
This is a human-readable summary of the
[Legal Code (read the full text)](https://creativecommons.org/publicdomain/zero/1.0/legalcode).
### No Copyright
The person who associated a work with this deed has dedicated the work to
the public domain by waiving all of his or her rights to the work worldwide
under copyright law, including all related and neighboring rights, to the
extent allowed by law.
You can copy, modify, distribute and perform the work, even for commercial
purposes, all without asking permission.
### Other Information
In no way are the patent or trademark rights of any person affected by CC0,
nor are the rights that other persons may have in the work or in how the
work is used, such as publicity or privacy rights.
Unless expressly stated otherwise, the person who associated a work with
this deed makes no warranties about the work, and disclaims liability for
all uses of the work, to the fullest extent permitted by applicable law.
When using or citing the work, you should not imply endorsement by the
author or the affirmer.
## Front-End Guild
18F promotes team best practices across specialty areas through guilds. These guilds support their members in whatever way deemed most appropriate by those members themselves.
This repo is where the 18F Front-End Guild keeps its guide to best practices and resources for front-end development.
### Quicklinks
- Guide: https://frontend.18f.gov/
- [CONTRIBUTING.md](CONTRIBUTING.md) on how to build this guide locally and submitting PRs/issues.
## Our mission
We believe that government websites should be functional, maintainable, and thoughtfully designed. Our guild helps TTS promote the adoption and advancement of front-end design and development best practices. In this way, TTS can lead by example while providing effective services that help our partners and customers fulfill their missions.
To achieve our vision, the Front-End Guild works to:
- Support the continuous learning necessary for successful front-end work.
- Provide TTS developers with easy-to-understand, actionable guidance around front-end best practices.
- Promote a central knowledge base of shared tools and common patterns.
- Create a healthy and supportive internal environment so that we can, in turn, bolster healthy external communities related to our work.
## How to track what we're doing, and how you can be involved!
We use issues in this repo to track work. If you'd like to suggest a new topic or flag an issue, please [file an issue](https://github.com/18F/frontend/issues/new/).
The front-end space is rapidly changing, and our guide is a living document. Please suggest edits or changes via pull request.
title: 18F Front-End Guide
styles:
- /assets/css/styles.css
exclude:
- CONTRIBUTING.md
- Gemfile
- Gemfile.lock
- LICENSE.md
- README.md
- go
theme: uswds-jekyll
defaults:
- scope:
path: ""
type: "pages"
values:
layout: page
permalink: pretty
markdown: kramdown
sass:
style: compressed
# Author/Organization info to be displayed in the templates
author:
name: 18F
url: https://18f.gsa.gov
# Point the logo URL at a file in your repo or hosted elsewhere by your organization
logourl: /assets/img/18f-logo.png
logoalt: 18F logo
google_analytics_ua: UA-48605964-19
repo:
name: Front-End Guide
description: Main repository
url: https://github.com/18F/frontend
back_link:
url: "https://guides.18f.gov/"
text: Read more 18F Guides
- rel: shortcut icon
type: image/ico
href: /assets/uswds/img/favicons/favicon.ico
- rel: icon
type: image/png
href: /assets/uswds/img/favicons/favicon.png
- rel: icon
type: image/png
sizes: 192x192
href: /assets/uswds/img/favicons/favicon-192.png
- rel: apple-touch-icon-precomposed
href: /assets/uswds/img/favicons/favicon-57.png
- rel: apple-touch-icon-precomposed
sizes: 72x72
href: /assets/uswds/img/favicons/favicon-72.png
- rel: apple-touch-icon-precomposed
sizes: 114x114
href: /assets/uswds/img/favicons/favicon-114.png
- rel: apple-touch-icon-precomposed
sizes: 144x144
href: /assets/uswds/img/favicons/favicon-144.png
# This is the configuration for the site footer.
# Configuration for type of footer.
# Footer types can be only be medium at the moment
type: medium
# Configuration for "Return to top" link.
# Customize with 'text' and 'href' properties.
# Comment out to the following section to hide.
top:
text: Return to top
href: '#'
# Configuration for "Edit this page" link in the footer.
# Customize with 'text' property.
# Uncomment the following line to show.
# edit_page:
# text: Edit this page
# Configuration for "Last updated" date and time.
# Uncomment the following line to show.
# last_updated: true
# Configuration for which links show at the top of the footer.
# this is a key into _data/navigation.yml
links:
# Configuration for footer heading. (optional)
heading:
# Configuration for agency logo(s) (shown side by side).
# If the logo is external add external: true
logos:
- src: /assets/images/18f-Logo.svg
alt: 18F
# Configuration for footer contact links
contact:
# Configuration for social media links
# Comment out links you don't want to use (RSS is an example)
social_links:
# - text: Facebook
# href: https://facebook.com
# external: true
# type: facebook
# - text: Twitter
# href: https://twitter.com
# external: true
# type: twitter
# - text: YouTube
# href: https://youtube.com
# external: true
# type: youtube
# - text: RSS Feed
# href: https://usa.gov/
# external: true
# type: rss
heading:
# Configuration for contact links for email, phone, etc...
contact_links:
# - text: (800) CALL-GOVT
# href: tel:1-800-555-5555
# - text: info@agency.gov
# href: mailto:info@agency.gov
# This is the configuration for the site header.
# Uncomment this statement (by removing the leading '# ') to set the
# header title differently from the site's title (as defined in
# _config.yml).
# title: Header title
usa_banner: true
primary:
# this is a key into _data/navigation.yml
links: primary
secondary:
# this is a key into _data/navigation.yml
links: secondary
# to enable search, change this to an object with 'action' and
# 'param' keys, e.g.
# search:
# action: /search/
# query: q
# _data/navigation.yml
primary:
- text: CSS
href: /css/
- text: JavaScript
href: /javascript/
- text: Web Components
href: /web-components/
- text: Security
href: /security/
secondary:
- text: More 18F guides
href: https://guides.18f.gov/
external: true
css:
- text: Architecture
href: /css/architecture/
- text: Documentation
href: /css/documentation/
- text: Frameworks
href: /css/frameworks/
- text: Formatting
href: /css/formatting/
- text: Inheritance
href: /css/inheritance/
- text: Linting
href: /css/linting/
- text: Naming
href: /css/naming/
- text: Preprocessors
href: /css/preprocessors/
- text: Specificity
href: /css/specificity/
- text: Units
href: /css/units/
- text: Variables
href: /css/variables/
js:
- text: Dependencies
href: /javascript/dependencies/
- text: Frameworks
href: /javascript/frameworks/
- text: Libraries
href: /javascript/libraries/
- text: Style / Linting
href: /javascript/style/
security:
- text: Content Security Policy (CSP)
href: /security/content-security-policy/
{% if footer %}
<footer class="usa-footer usa-footer-medium" role="contentinfo">
{% if footer.last_updated %}
<div class="usa-grid">
<div class="usa-width-one-whole">
<p>Last updated: {{ page.last_modified_at | date: '%B %d, %Y at %I:%M %p' }}</p>
</div>
</div>
{% endif %}
{% if footer.top %}
<div class="usa-grid usa-footer-return-to-top">
<a href="{{ footer.top.href | default: '#' }}">{{ footer.top.text | default: 'Return to top' }}</a>
</div>
{% endif %}
{% if footer.links %}
{% assign footer_links = site.data.navigation[footer.links] | default: footer.links %}
{% assign _sizes = 'whole half third fourth sixth' | split: ' ' %}
{% assign _size = footer_links.size | minus: 1 %}
{% assign _size = _sizes[_size] | default: 'whole' %}
<div class="usa-footer-primary-section">
<div class="usa-grid">
<nav class="usa-footer-nav">
<ul class="usa-unstyled-list">
{% for _link in footer_links %}
<li class="usa-width-one-{{ _size }} usa-footer-primary-content">
<a class="usa-footer-primary-link" href="{% if _link.external == true %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">
{{ _link.text }}
</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
</div>
{% endif %}
{% if footer.logos or footer.heading or footer.contact %}
<div class="usa-footer-secondary_section">
<div class="usa-grid">
<div class="usa-footer-logo usa-width-one-half">
{% if footer.logos %}
{% for logo in footer.logos -%}
{% if logo.url %}
<a href="{{ logo.url }}">
{% endif %}
<img class="usa-footer-logo-img" src="{% if logo.external %}{{ logo.src }}{% else %}{{ logo.src | relative_url }}{% endif %}" alt="{{ logo.alt }}"{% if logo.width %}width="{{ logo.width }}"{% endif %}{% if logo.height %}height="{{ logo.height }}"{% endif %}>
{% if logo.url %}
</a>
{% endif %}
{% endfor %}
{% endif %}
{% if footer.heading %}
<h3 class="usa-footer-logo-heading">{{ footer.heading }}</h3>
{% endif %}
</div>
<div class="usa-footer-contact-links usa-width-one-half">
<ul class="usa-unstyled-list">
<li><a href="https://github.com/18F/uswds-jekyll">18F USWDS-Jekyll theme</a></li>
<li>Hosted by <a href="https://federalist.18f.gov/">Federalist</a></li>
<li>Maintained by <a href="https://18f.gsa.gov/">18F</a></li>
</ul>
</div>
</div>
</div>
{% endif %}
</footer>
{% endif %}
---
---
pre {
background-color: #f1f1f1;
font-size: 1.5rem;
padding: 1rem;
}
.usa-footer-contact-links {
padding: 2rem 0;
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Black_w_x2F_white_type" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 333 333" enable-background="new 0 0 333 333" xml:space="preserve">
<path d="M327.3,0H5.7C2.5,0,0,2.5,0,5.7v321.6c0,3.1,2.5,5.7,5.7,5.7h321.6c3.1,0,5.7-2.5,5.7-5.7V5.7C333,2.5,330.5,0,327.3,0z"/>
<path fill="#FFFFFF" d="M98,229.3c0,1.1-0.9,2-2,2H83.5c-1.1,0-2-0.9-2-2V117.4H65.2c-1.1,0-2-0.9-2-2v-11.9c0-1.1,0.9-2,2-2h30.8
c1.1,0,2,0.9,2,2V229.3z"/>
<path fill="#FFFFFF" d="M269.8,115.4c0,1.1-0.9,2-2,2h-34.4v39h28.3c1.1,0,2,0.9,2,2v11.9c0,1.1-0.9,2-2,2h-28.3v57.1
c0,1.1-0.9,2-2,2h-12.5c-1.1,0-2-0.9-2-2V103.5c0-1.1,0.9-2,2-2h48.9c1.1,0,2,0.9,2,2V115.4z"/>
<path fill="#FFFFFF" d="M157.5,233.4c-21.9,0-39.8-17.9-39.8-39.8c0-13.2,6.4-25.1,17.1-32.5c-7.7-6.6-12.3-16.3-12.3-26.4
c0-19.3,15.7-35,35-35c19.3,0,35,15.7,35,35c0,10.2-4.6,19.8-12.3,26.4c10.7,7.4,17.1,19.4,17.1,32.5
C197.3,215.5,179.4,233.4,157.5,233.4z M157.5,169.6c-13.2,0-23.9,10.7-23.9,23.9c0,13.2,10.7,23.9,23.9,23.9
c13.2,0,23.9-10.7,23.9-23.9C181.4,180.4,170.7,169.6,157.5,169.6z M157.5,153.8c10.6,0,19.1-8.6,19.1-19.1
c0-10.6-8.6-19.1-19.1-19.1s-19.1,8.6-19.1,19.1C138.4,145.2,146.9,153.8,157.5,153.8z"/>
</svg>
#! /bin/bash
usage() {
echo "Usage: $0 [path to target repository]"
exit 1
}
if [ $# -ne 1 ]; then
echo "Error: Exactly one target repository must be specified"
usage
fi
if [ ! -d $1 ]; then
echo "Error: $1 is not a directory"
usage
fi
# Hack per:
# http://stackoverflow.com/questions/4774054/reliable-way-for-a-bash-script-to-get-the-full-path-to-itself
pushd $(dirname $0) >/dev/null
TEMPLATE_ROOT=$(pwd -P)
popd >/dev/null
PATH=/usr/bin
TARGET=$(echo "$1/" | sed 's#//$#/#')
rsync -av --exclude .DS_Store $TEMPLATE_ROOT/{_includes,_layouts,assets} $TARGET
#! /usr/bin/env ruby