jekyll-theme-uswds 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 5f60a00e58ad369d1ce49dec3b110155447ffac5560974bade6d1033981780d6
+  data.tar.gz: 3ad623ffdf96b1ee9ec8e87d62446b9c0cd8f82b471d99f7cdabceffcf7135be
+SHA512:
+  metadata.gz: 4c1900afef5e5512116d5815e7e994bf6c3009aa3c5c64850733c61f87d0951bd85def7fb49b468b259c4281478277b2799fbb25f1c814ffc0709bfd9261164f
+  data.tar.gz: 2e9d429499030d84dfd0146d950bd4f0a79b768e09f6bb67b2d0668367b5aa934c504adef2d50d9ede6741ac36c8971b1ac82e7e735094dbb104fec9f3e636d2

data/LICENSE.md

@@ -0,0 +1,21 @@
+# License
+
+As a work of the [United States government](https://www.usa.gov/), this project is in the public domain within the United States of America.
+
+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 their 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.

data/README.md

@@ -0,0 +1,124 @@
+[![CircleCI](https://circleci.com/gh/adborden/jekyll-theme-uswds.svg?style=svg)](https://circleci.com/gh/adborden/jekyll-theme-uswds)
+
+# jekyll-theme-uswds
+
+A [Jekyll](https://jekyllrb.com/) theme that provides the [U.S. Web Design
+System](https://designsystem.digital.gov/) SASS and asset files. This theme
+makes it easy for web developers to focus on making customizations on top of the
+Web Design System for your site. Similar to how the Web Design System is not
+a "theme" but a toolkit for building websites, this project is less of a theme
+and more of a foundation for building Jekyll websites based on the Web Design
+System.
+
+
+You will not find comprehensive templates implementing [USWDS
+components](https://designsystem.digital.gov/components/), but any examples
+could be copy/pasted and used. If you're looking for a theme that includes the
+USWDS component library as templates, take a look at
+[uswds-jekyll](https://github.com/18F/uswds-jekyll).
+
+
+## Installation
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "jekyll-theme-uswds"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: jekyll-theme-uswds
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install jekyll-theme-uswds
+
+## Usage
+
+TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets.
+
+## Development
+
+To set up your environment to develop this theme, run `npm install`.
+
+Your theme is setup just like a normal Jekyll site! To test your theme, run `npm
+start` and open your browser at `http://localhost:4000`. This starts a Jekyll
+server using your theme. Add pages, documents, data, etc. like normal to test
+your theme's contents. As you make modifications to your theme and to your
+content, your site will regenerate and you should see the changes in the browser
+after a refresh, just like normal.
+
+When your theme is released, only the files in `_layouts`, `_includes`, `_sass`
+and `assets` tracked with Git will be bundled.  To add a custom directory to
+your theme-gem, please edit the regexp in `jekyll-theme-uswds.gemspec`
+accordingly.
+
+
+### Bumping USWDS
+
+Update the `uswds` version in `package.json`.
+
+Pull the latest assets into the theme.
+
+    $ npm install
+    $ npm run clean
+    $ npm run uswds
+
+Build the gem.
+
+    $ npm run gem:build
+
+If you like, inspect the gem in `pkg/`.
+
+Publish the gem to rubygems.org.
+
+    $ npm run gem:release
+
+
+### Build commands
+
+
+### `npm run uswds`
+
+This copies the latest assets from the USWDS npm package.
+
+
+### `npm run gem:build`
+
+Builds the theme into a gem for publishing on rubygems.org
+
+
+### `npm run gem:install`
+
+Builds and installs the gem.
+
+
+### `npm run gem:release`
+
+Publishes the gem on rubygems.org.
+
+
+### `npm run clean`
+
+Removes the generated build files.
+
+
+## Contributing
+
+See [CONTRIBUTING](CONTRIBUTING.md) for additional information.
+
+
+## Public domain
+
+This project is in the worldwide [public domain](LICENSE.md). As stated in [CONTRIBUTING](CONTRIBUTING.md):
+
+> 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.

data/_layouts/default.html

@@ -0,0 +1 @@
+{{ content }}

data/_layouts/page.html

@@ -0,0 +1,5 @@
+---
+layout: default
+---
+
+{{ content }}

data/_layouts/post.html

@@ -0,0 +1,5 @@
+---
+layout: default
+---
+
+{{ content }}

data/_sass/uswds/_all.scss

@@ -0,0 +1 @@
+@import 'uswds';

data/_sass/uswds/components/_accordions.scss

@@ -0,0 +1,150 @@
+// Variables
+
+$accordion-border: 3px solid $color-gray-lightest;
+
+// Accordion Styles
+
+$icon-size: $spacing-md-small;
+$h-padding: $spacing-medium;
+$v-padding: $spacing-md-small;
+
+@mixin accordion-list-styles {
+  @include unstyled-list;
+  color: $color-base;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+@mixin accordion-list-item-styles {
+  background-color: $color-gray-lightest;
+  font-family: $font-sans;
+  list-style: none;
+  margin-bottom: $spacing-x-small;
+  width: 100%;
+}
+
+// scss-lint:disable PropertyCount
+@mixin accordion-button-styles {
+  @include button-unstyled;
+  background-color: $color-gray-lightest;
+  background-image: url('#{$image-path}/minus.png');
+  background-image: url('#{$image-path}/minus.svg');
+  background-position: right $h-padding center;
+  background-repeat: no-repeat;
+  background-size: $icon-size;
+  color: $color-base;
+  cursor: pointer;
+  display: inline-block;
+  font-family: $font-sans;
+  font-weight: $font-bold;
+  margin: 0;
+  padding: $v-padding ($h-padding * 2 + $icon-size) $v-padding $h-padding;
+  width: 100%;
+
+  &:hover {
+    background-color: $color-gray-lighter;
+    color: $color-base;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+  }
+}
+// scss-lint:enable PropertyCount
+
+@mixin accordion-button-unopened-styles {
+  background-image: url('#{$image-path}/plus.png');
+  background-image: url('#{$image-path}/plus.svg');
+  background-repeat: no-repeat;
+  background-size: $icon-size;
+}
+
+@mixin accordion-nested-list {
+  > ul li ul {
+    list-style: disc;
+    > li > ul {
+      list-style: circle;
+      > li > ul {
+        list-style: square;
+      }
+    }
+  }
+}
+
+.usa-accordion,
+.usa-accordion-bordered {
+  @include accordion-list-styles;
+  @include accordion-nested-list;
+
+  + .usa-accordion,
+  + .usa-accordion-bordered {
+    margin-top: $spacing-small;
+  }
+
+  // TODO deprecated ruleset based on old accordion.
+  > ul {
+    @include accordion-list-styles;
+
+    // TODO deprecated ruleset based on old accordion.
+    > li {
+      @include accordion-list-item-styles;
+    }
+
+    // TODO deprecated ruleset based on old accordion.
+    button {
+      @include accordion-button-styles;
+    }
+
+    // TODO deprecated ruleset based on old accordion.
+    [aria-expanded=false] {
+      @include accordion-button-unopened-styles;
+    }
+  }
+
+  > li {
+    @include accordion-list-item-styles;
+  }
+
+}
+
+.usa-accordion-bordered {
+  .usa-accordion-content {
+    border-bottom: $accordion-border;
+    border-left: $accordion-border;
+    border-right: $accordion-border;
+  }
+}
+
+.usa-accordion-content {
+  background-color: $color-white;
+  overflow: auto;
+  padding: $spacing-md-small $spacing-medium;
+
+  > *:first-child {
+    margin-top: 0;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
+  &:not([aria-hidden]) {
+    @include sr-only();
+  }
+
+  @include accessibly-hidden();
+}
+
+.usa-accordion-button {
+  @include accordion-button-styles;
+}
+
+.usa-accordion-button[aria-expanded=false] {
+  @include accordion-button-unopened-styles;
+}

data/_sass/uswds/components/_alerts.scss

@@ -0,0 +1,128 @@
+// Alert variables ---------- //
+$usa-custom-alerts: () !default;
+$usa-custom-alerts-bar: () !default;
+
+$usa-alerts: (
+  success: $color-green-lightest,
+  warning: $color-gold-lightest,
+  error: $color-secondary-lightest,
+  info: $color-primary-alt-lightest
+);
+
+$usa-alerts-bar: (
+  success: $color-green,
+  warning: $color-gold,
+  error: $color-secondary,
+  info: $color-primary-alt
+);
+
+$alerts: map-merge($usa-alerts, $usa-custom-alerts);
+$alerts-bar: map-merge($usa-alerts-bar, $usa-custom-alerts-bar);
+
+$h-padding: $spacing-medium;
+$bar-size: $spacing-small;
+$left-padding: $h-padding + $bar-size;
+$icon-size: 3rem;
+
+.usa-alert {
+  background-color: $color-gray-lightest;
+  background-position: $h-padding $h-padding;
+  background-repeat: no-repeat;
+  background-size: 5.2rem; // TODO abrituary number based on svg size maybe?
+  padding-bottom: $h-padding * 0.7;
+  padding-left: $left-padding;
+  padding-right: $h-padding;
+  padding-top: $h-padding;
+  position: relative;
+
+  &::before {
+    background-color: darken($color-gray-lightest, 40%);
+    content: '';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: $bar-size;
+  }
+
+  a {
+    color: $color-primary-darker;
+
+    &:focus,
+    &:hover {
+      color: $color-primary-darkest;
+    }
+  }
+
+  ul {
+    margin-bottom: 0;
+    margin-top: $spacing-small;
+    padding-left: $spacing-small;
+  }
+}
+
+.usa-alert-slim {
+  background-position: $h-padding $spacing-small;
+  padding-bottom: $spacing-small;
+  padding-top: $spacing-small;
+
+  .usa-alert-text:only-child {
+    margin-bottom: $spacing-x-small;
+    padding-top: $spacing-x-small;
+  }
+}
+
+.usa-alert-icon {
+  display: table-cell;
+  padding-right: $spacing-small;
+}
+
+.usa-alert-body {
+  display: table-cell;
+  vertical-align: top;
+}
+
+.usa-alert-heading {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.usa-alert-text {
+  font-family: $font-sans;
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.usa-alert-text:only-child {
+  margin-bottom: $spacing-small;
+  padding-top: $spacing-x-small;
+}
+
+@each $name, $bgcolor in $alerts {
+  .usa-alert-#{$name} {
+    background-color: $bgcolor;
+    background-image: url('#{$image-path}/alerts/#{$name}.png');
+    background-image: url('#{$image-path}/alerts/#{$name}.svg');
+
+    &::before {
+      background-color: map-get($alerts-bar, $name);
+    }
+
+    .usa-alert-body {
+      padding-left: $icon-size + $h-padding;
+    }
+  }
+}
+
+.usa-alert-no_icon {
+  background-image: none;
+}
+
+.usa-alert-paragraph {
+  width: $text-max-width;
+}
+
+// Deprecated
+.usa-alert {
+  margin-top: 1.5em; // TODO deprecate
+}