shipyard-framework 0.2.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: c4824254449409a00d912f8309c3cc40e561603a
+  data.tar.gz: 9573db7560645e025a48db179220b1754154f06f
+SHA512:
+  metadata.gz: dfd2812b24456c670699d17550a71813ed798d4ff476d035e221c9ad0cd360e2deb69ca81510e8651cdd822f71e22e6ff747c7e952a317dcbb655f6b322d928a
+  data.tar.gz: 8b1c6279d9995f66084df92c511e0f76739beef170d19bf7dbde18cc2d8511cdd46d20a10025405f6a8454b9295ac730767fba76f44d53eb37c42f5b81b2264d

data/.gitignore

@@ -0,0 +1,10 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+shipyard-*.gem

data/.rspec

@@ -0,0 +1,2 @@
+--format documentation
+--color

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,74 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at ryanwilke@gmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

data/Gemfile

@@ -0,0 +1,3 @@
+source 'https://rubygems.org'
+
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Shipyard
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,52 @@
+# Shipyard
+
+Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/shipyard`. To experiment with that code, run `bin/console` for an interactive prompt.
+
+TODO: Delete this and the text above, and describe your gem
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'shipyard'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install shipyard
+
+The add this line to your application's CSS file(s):
+
+```css
+@import "shipyard"
+```
+
+If you're using Jekyll, make sure you add the following the code in your `_config.yml` file:
+```yml
+plugins:
+  - shipyard
+```
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/shipyard. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,6 @@
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+task :default => :spec

data/app/views/shipyard/_alerts.slim

@@ -0,0 +1,3 @@
+.alert-container[data-shipyard="alert-container"]
+  - flash.each do |type, message|
+    == flash_alert type.to_sym, :closeable, message

data/assets/icons/arrows/arrow-down.svg

@@ -0,0 +1,3 @@
+<svg class="icon-arrow-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6">
+  <polyline vector-effect="non-scaling-stroke" points="1 1 5 5 9 1" />
+</svg>

data/assets/icons/gear.svg

@@ -0,0 +1,3 @@
+<svg class="icon-gear icon-outline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
+  <path vector-effect="non-scaling-stroke" d="M7,4A3,3,0,1,1,4,1,3,3,0,0,1,7,4ZM4,0V1M4,7V8M0,4H1M7,4H8M1.17,1.17l.71.71M6.12,6.12l.71.71m-5.66,0,.71-.71M6.12,1.88l.71-.71"/>
+</svg>

data/assets/icons/plus.svg

@@ -0,0 +1,3 @@
+<svg class="icon-plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6">
+  <path vector-effect="non-scaling-stroke" d="M3,1V5M1,3H5"/>
+</svg>

data/assets/icons/x.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
+  <line vector-effect="non-scaling-stroke" x2="8" y2="8"/>
+  <line vector-effect="non-scaling-stroke" y1="8" x2="8"/>
+</svg>

data/assets/javascripts/shipyard/alert.es6

@@ -0,0 +1,19 @@
+class Alert extends Shipyard {
+  constructor () {
+    super()
+    var alerts = document.querySelectorAll('[data-shipyard="alert"]');
+    for (var alert of alerts) {
+      new Vue({
+        el: alert,
+        data: {
+          visible: true
+        },
+        methods: {
+          close () {
+            this.visible = false;
+          }
+        }
+      });
+    }
+  }
+}

data/assets/javascripts/shipyard/core.es6

@@ -0,0 +1,3 @@
+class Shipyard {
+  constructor () {}
+}

data/assets/javascripts/shipyard/icon.es6

@@ -0,0 +1,50 @@
+Vue.component('icon', {
+  template: `
+    <svg :class="iconClass" :viewBox="viewBox" preserveAspectRatio="xMinYMin meet" v-html="innerHtml"></svg>
+  `,
+
+  props: {
+    name: String,
+    size: String, // {width}x{height} (e.g. 4x8, 8x8, 16x16)
+    type: {
+      default: '',
+      type: String
+    },
+    html: String
+  },
+
+  computed: {
+    iconClass () {
+      let cssClasses = [];
+      cssClasses.push('icon');
+      cssClasses.push(`icon-${this.name}`);
+      if (this.type.length > 0) {
+        this.type.trim().split(' ').forEach((type) => {
+          cssClasses.push(`icon-${type}`);
+        });
+      }
+      return cssClasses;
+    },
+
+    viewBox () {
+      return `0 0 ${this.size.replace(/x/, ' ')}`;
+    },
+
+    href () {
+      return `/assets/icons.svg#${this.name}`;
+    },
+
+    innerHtml () {
+      if (this.html && this.name == 'queued') {
+        return this.svgInnerHtml;
+      } else {
+        return `<use xlink:href="${this.href}"></use>`;
+      }
+    },
+
+    svgInnerHtml () {
+      if (this.html) var html = this.html.match(/<svg[^>]*>([\s\S]*?)<\/svg>/);
+      if (html) return html[1];
+    }
+  }
+});

data/assets/javascripts/shipyard.es6

@@ -0,0 +1,6 @@
+//= require ./shipyard/core
+//= require ./shipyard/alert
+//= require ./shipyard/icon
+
+var shipyard = new Shipyard()
+var alert = new Alert()

data/assets/stylesheets/_shipyard.sass

@@ -0,0 +1,3 @@
+@import shipyard/core
+@import shipyard/utilities
+@import shipyard/components

data/assets/stylesheets/shipyard/_components.sass

@@ -0,0 +1,5 @@
+@import shipyard/components/buttons
+@import shipyard/components/icons
+@import shipyard/components/alerts
+@import shipyard/components/boxes
+@import shipyard/components/forms

data/assets/stylesheets/shipyard/_core.sass

@@ -0,0 +1,12 @@
+@import shipyard/variables/colors
+@import shipyard/functions/color
+@import shipyard/variables/color_utilities
+@import shipyard/variables/typography
+@import shipyard/variables/grid
+@import shipyard/variables/misc
+@import shipyard/mixins/box-model
+@import shipyard/mixins/selectors
+@import shipyard/mixins/responsive
+@import shipyard/mixins/components
+@import shipyard/mixins/positioning
+@import shipyard/mixins/prefixed

data/assets/stylesheets/shipyard/_utilities.sass

@@ -0,0 +1,5 @@
+@import shipyard/utilities/animations
+@import shipyard/utilities/reset
+@import shipyard/utilities/type
+@import shipyard/utilities/grid
+@import shipyard/utilities/positioning

data/assets/stylesheets/shipyard/components/_alerts.sass

@@ -0,0 +1,64 @@
++component('alert')
+  display: block
+  border-radius: 5px
+  background: $blue
+  color: rgba(#fff,.9)
+  position: relative
+  +respond-to(min-height, (x0: 50px, x1: 60px))
+  +respond-to(margin-bottom, (x0: 10px, x1: 15px))
+  +respond-to(padding, (x0: 12px 10px, x1: 17px 20px, x2: 17px 30px))
+  &:last-child
+    +respond-to(margin-bottom, (x0: 10px, x1: 15px, x2: 30px))
+  &-closeable
+    +respond-to(padding-right, (x0: 60px, x1: 70px, x2: 80px))
+  a, strong, .strong
+    color: #fff
+    &:not(.btn)
+      font-weight: $bold
+  &-timer
+    top: 0
+    left: 0
+    height: 4px
+    width: 100%
+    position: absolute
+    background: rgba(#fff, .25)
+    transform: translatex(-100%)
+    animation: slide-in-from-left 10s linear 0s forwards
+  &-txt,
+  &-txt p
+    margin: 0
+    font-weight: $medium
+    .legacy-content &
+      font-size: $font-size
+      line-height: inherit
+  &-success
+    background: darken($green, 5%)
+  &-warning
+    background: darken($yellow, 20%)
+  &-error
+    background: $red
+  &-description
+    opacity: 0.75
+  &-cta
+    +btn-color(darken($blue, 10%))
+    +breakpoint-x0
+      display: block
+      text-align: center
+      margin-top: 10px
+    +breakpoint-x1
+      top: 50%
+      right: 10px
+      position: absolute
+      transform: translatey(-50%)
+  &-close
+    position: absolute
+    display: inline-block
+    transition: opacity 300ms ease
+    +width-height(30px)
+    +respond-to(right, (x0: 10px, x2: 20px))
+    &:not(:hover)
+      opacity: 0.75
+    &:focus
+      outline: 0
+    &-icon
+      +width-height(14px)

data/assets/stylesheets/shipyard/components/_boxes.sass

@@ -0,0 +1,37 @@
+.box
+  &, &-link
+    background: #fff
+    box-shadow: 0 1px 2px rgba($gray-darkest,.08)
+
+  &, &-link, &-secondary
+    display: block
+    position: relative
+    border-radius: 4px
+    transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease
+    +clearfix
+
+  &-secondary
+    background: $gray-lighter
+
+  &-link
+    color: $blue
+    cursor: pointer
+    &:hover, &-selected, &-active
+      color: $blue-dark
+      box-shadow: 0 0 4px 1px rgba($blue,.5)
+    &-active-green,
+    &-active-green:hover
+      cursor: default
+      box-shadow: 0 0 4px 1px rgba(darken($green, 5%),.75)
+
+  &-padding
+    +respond-to(padding, $margins)
+
+  &-margin
+    margin: 15px 0
+
+  // Box Sizes
+  +all-media-sizes
+    @each $size, $height in (xxs: 50px, xs: 60px, sm: 70px, md: 80px, lg: 90px, xl: 100px)
+      &-#{$size}
+        height: $height

data/assets/stylesheets/shipyard/components/_buttons.sass

@@ -0,0 +1,107 @@
+@mixin btn($size: md, $position: relative, $bg: $gray)
+  position: $position
+  display: inline-block
+  border-radius: 5px
+  border: 0
+  cursor: pointer
+  color: #fff
+  transition: background 300ms ease, color 300ms ease, border-color 300ms ease, opacity 300ms ease
+  outline: none
+  border-width: 2px
+  border-style: solid
+  font: $bold 16px / 1.6 $font-family
+  +btn-size($size)
+  +btn-color($bg, #fff)
+  +btn-hover(darken($bg, 10%))
+
+@mixin btn-color($color, $text-color: null, $border-color: null)
+  background: $color
+  @if $border-color
+    border-color: $border-color
+  @else
+    border-color: $color
+  @if $text-color
+    color: $text-color
+
+@mixin btn-hover($color, $text-color: null, $border-color: null)
+  &:hover, &:focus, &:active
+    +btn-color($color, $text-color, $border-color)
+
+@mixin btn-size($size)
+  @if $size == xs
+    font-size: 12px
+    padding: 0 10px
+    height: 30px
+    min-width: 30px
+    line-height: 26px
+  @else if $size == sm
+    font-size: 14px
+    padding: 0 15px
+    height: 40px
+    min-width: 40px
+    line-height: 36px
+  @else if $size == md
+    font-size: 16px
+    padding: 0 20px
+    height: 50px
+    min-width: 50px
+    line-height: 46px
+  @else if $size == lg
+    font-size: 18px
+    padding: 0 30px
+    height: 60px
+    min-width: 60px
+    line-height: 56px
+  @else if $size == xl
+    font-size: 20px
+    padding: 0 35px
+    height: 70px
+    min-width: 70px
+    line-height: 66px
+
++component('btn')
+  +btn
+
+  // Button: Sizes
+  +all-media-sizes
+    @each $size in (xs, sm, md, lg, xl)
+      &-#{$size}
+        +btn-size($size)
+
+  &-margin
+    margin: 0 5px
+
+  // Button: Types
+  &-full
+    display: block
+    width: 100%
+    max-width: 600px
+    margin: 0 auto
+
+  &-primary
+    +btn-color($blue)
+    +btn-hover(darken($blue, 10%))
+
+  &-secondary
+    +btn-color(none, $text-color-light, darken($gray-lightest, 7%))
+    +btn-hover(none, darken($text-color-light, 15%), darken($gray-lightest, 17%))
+
+  &-disabled
+    cursor: not-allowed
+    &, &:hover, &:focus
+      color: $text-color-lightest
+      +btn-color(darken($gray-lightest, 7%))
+    &:active
+      animation: shake .35s infinite
+
+  &-inverse
+    +btn-color(#fff, inherit)
+    +btn-hover($blue, #fff)
+    &.btn-current
+      +btn-hover(#fff, inherit)
+    &-secondary
+      +btn-color(lighten($gray-dark, 10%))
+      +btn-hover($blue, #fff)
+
+  &-current
+    cursor: default

data/assets/stylesheets/shipyard/components/_empty.sass

@@ -0,0 +1,15 @@
++component('empty')
+  &-container
+    padding: 40px 0
+    max-width: 600px
+    margin: 0 auto
+  &-txt
+    margin: 12px 0 20px
+    font-size: 18px
+    font-weight: $medium
+    color: $text-color-light
+    &-dark
+      @extend .empty-txt
+      color: darken($gray, 10%)
+  &-cta
+    margin: 0 5px

data/assets/stylesheets/shipyard/components/_forms.sass

@@ -0,0 +1,128 @@
+.label
+  font-weight: $bold
+  display: block
+  margin: 0 0 10px
+  &-note
+    color: $text-color-light
+    margin: -10px 0 15px
+    font-size: $font-size-sm
+    font-weight: $medium
+
++component('input')
+  font: $font
+  color: $text-color
+  font-weight: $medium
+  -webkit-appearance: none
+  background: #fff
+  +placeholder
+    color: $text-color-lightest
+    font-weight: $normal
+
+  &-group
+    +clearfix
+    padding: 15px 0
+    &-border
+      padding-bottom: 30px
+      margin-bottom: 15px
+      border-bottom: 2px solid $border-color-light
+
+  &-select
+    -webkit-appearance: none
+    display: block
+    width: 100%
+    border: 2px solid $border-color
+    background: #fff
+    height: 50px
+    font-size: 16px
+    color: $text-color-lighter
+    outline: none
+    +respond-to(padding, (x0: 0 15px, x1: 0 20px))
+    &:focus
+      border-color: $border-color-dark
+    &-container
+      position: relative
+      &::after
+        +width-height(30px)
+        display: block
+        position: absolute
+        top: 50%
+        right: 10px
+        content: " "
+        background: asset-url('arrows/down.svg') no-repeat center center
+        background-size: 10px 6px
+        text-align: center
+        font-weight: $bold
+        margin-top: -15px
+    &-chosen
+      color: $text-color
+      font-weight: $medium
+  &-option
+    &-placeholder
+      color: $text-color-lighter
+
+  &-text
+    position: relative
+    height: 50px
+    border-radius: 5px
+    border: 2px solid $border-color
+    font-size: 16px
+    transition: border-color 300ms ease
+    outline: none
+    +respond-to(padding, (x0: 0 15px, x1: 0 20px))
+    &:focus
+      border-color: $border-color-dark
+    &-connect
+      &-top:focus,
+      &-middle:focus,
+      &-bottom:focus
+        z-index: 1
+      &-top
+        border-radius: 5px 5px 0 0
+      &-middle
+        margin: -2px 0 0
+        border-radius: 0
+      &-bottom
+        margin: -2px 0 0
+        border-radius: 0 0 5px 5px
+
+  &-full
+    width: 100%
+
+  &-description
+    font-size: 14px
+    margin: 5px 0 0
+    color: $text-color-lighter
+
+  &-box
+    background: $border-color-light
+    border-radius: 4px
+    +respond-to(padding, (x0: 10px 15px, x1: 15px 20px))
+    margin: 0
+
+.form-error
+  &-container
+    background: $red
+    border-radius: 5px
+    color: #fff
+    padding: 20px
+    margin: 15px 0
+    text-shadow: 0 1px 1px rgba($gray-darkest, .1)
+  &-text
+    margin: 0 0 15px
+    font-weight: $bold
+  &-list
+    list-style: none
+    margin: 0
+  &-item
+    color: #fff
+    font-weight: $medium
+    &:before
+      content: ""
+      border: 1px solid rgba(#fff,.5)
+      margin: 0 15px 0 1px
+      display: inline-block
+      border-radius: 50%
+      +width-height(6px)
+      vertical-align: middle
+      position: relative
+      top: -1px