beyond_canvas 0.1.0.pre

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 065b4cc184018b0a41cfb7bb63ecc93003050d75df117d49010bfc57ccc1282d
+  data.tar.gz: c249481c868a9de71728c6e02f08905ea71d9adb357970076ef6cc7f2215698a
+SHA512:
+  metadata.gz: 7db8400076fc278cda8e852011989f7337ca02408cba731f56928983ef94f61703f0a3f66805aae8ff00ed34b87d43c9276b844b96eef13b1e947e158b95acf5
+  data.tar.gz: 9b364f193d29260ba2c2e9c5e8b4c54aeb9c11e8706a4d59e5b3c50c65bead504c174f435f199369671a8bc87d86f83eddc545cdb89ccb918dc24a21567dcd9c

data/.gitignore

@@ -0,0 +1 @@
+.DS_Store

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 ePages GmbH
+
+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,35 @@
+# BeyondEssence
+
+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/beyond_essence`. 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 'beyond_essence'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install beyond_essence
+
+## 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]/beyond_essence.

data/app/assets/stylesheets/_beyond_canvas.sass

@@ -0,0 +1,17 @@
+@import 'bourbon'
+@import 'neat'
+
+@import 'settings/variables'
+@import 'settings/neat'
+@import 'settings/reset_css'
+@import 'settings/typography'
+
+@import 'utilities/mixins'
+
+@import 'components/buttons'
+@import 'components/cards'
+@import 'components/forms'
+@import 'components/inputs'
+@import 'components/links'
+@import 'components/main'
+@import 'components/relative'

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

@@ -0,0 +1,53 @@
+%button
+  +padding($button-padding)
+  border-radius: $button-border-radius
+  cursor: pointer
+  font-weight: $button-font-weight
+  transition: $main-transition
+
+@mixin button-solid($background, $color)
+  @if $button-box-shadow != 0
+    box-shadow: $button-box-shadow darken($background, 10%)
+  +background-color-darken($background, 10%)
+  border: 0
+  color: $color
+
+@mixin button-transparent($background)
+  @if $button-box-shadow != 0
+    box-shadow: $button-box-shadow darken($background, 10%)
+  border: 1px solid $background
+  color: $background
+
+  &:hover
+    background-color: lighten($background, 40%)
+
+
+.button
+
+  &__solid
+
+    &--primary
+      @extend %button
+      +button-solid($button-primary-background, $button-primary-color)
+
+    &--secondary
+      @extend %button
+      +button-solid($button-secondary-background, $button-secondary-color)
+
+    &--danger
+      @extend %button
+      +button-solid($button-danger-background, $button-danger-color)
+
+  &__transparent
+
+    &--primary
+      @extend %button
+      +button-transparent($button-primary-background)
+
+    &--secondary
+      @extend %button
+      +button-transparent($button-secondary-background)
+
+    &--danger
+      @extend %button
+      +button-transparent($button-danger-background)

data/app/assets/stylesheets/components/_cards.sass

@@ -0,0 +1,11 @@
+%card
+  background: $white
+  border-radius: $card-border-radius
+  box-shadow: $card-box-shadow
+
+.card
+
+  &--padding
+    @extend %card
+    +padding($card-padding)
+    box-sizing: border-box

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

@@ -0,0 +1,32 @@
+%form__actions
+  align-items: center
+  display: flex
+
+.form
+
+  &__row,
+  &__actions
+    width: 100%
+
+    &:not(:last-child)
+      margin-bottom: 30px
+
+  &__actions
+
+    &--spaced
+      @extend %form__actions
+      justify-content: space-between
+
+    &--left
+      @extend %form__actions
+      justify-content: flex-start
+
+      *:not(:last-child)
+        margin-right: 30px
+
+    &--right
+      @extend %form__actions
+      justify-content: flex-end
+
+      *:not(:first-child)
+        margin-left: 30px

data/app/assets/stylesheets/components/_inputs.sass

@@ -0,0 +1,25 @@
+#{$all-text-inputs}
+  background-color: $white
+  border: 1px solid $input-border-color
+  border-radius: 3px
+  box-sizing: border-box
+  line-height: 1
+  outline: none
+  padding: 6px 8px
+  width: 100%
+
+#{$all-text-inputs-focus}
+  border-color: $input-border-color-focus
+
+.input
+
+  &__label
+    color: $label-color
+    display: block
+    font-size: 13px
+    font-weight: bold
+
+  &__hint
+    color: $hint-color
+    font-size: 13px
+    margin-top: 1px

data/app/assets/stylesheets/components/_links.sass

@@ -0,0 +1,10 @@
+.link
+
+  &--primary
+    +color-darken($link-primary-color, 10%)
+
+  &--secondary
+    +color-darken($link-secondary-color, 10%)
+
+  &--danger
+    +color-darken($link-danger-color, 10%)

data/app/assets/stylesheets/components/_main.sass

@@ -0,0 +1,15 @@
+%body
+  background-color: $main-background
+
+.body--public
+  @extend %body
+
+  .main-wrapper
+    +margin(32px auto)
+    max-width: 531px
+    width: 94%
+
+    .logo
+      +margin($logo-margin-top-public auto 34px)
+      display: block
+      width: $logo-width-public

data/app/assets/stylesheets/components/_relative.sass

@@ -0,0 +1,2 @@
+.relative
+  position: relative

data/app/assets/stylesheets/settings/_neat.sass

@@ -0,0 +1 @@
+$neat-grid: ( columns: 12, gutter: $card-margin)

data/app/assets/stylesheets/settings/_reset_css.sass

@@ -0,0 +1,43 @@
+// sass-lint:disable single-line-per-selector, force-pseudo-nesting
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video
+  border: 0
+  font: inherit
+  margin: 0
+  padding: 0
+  vertical-align: baseline
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section
+  display: block
+
+body
+  line-height: 1
+
+ol, ul
+  list-style: none
+
+blockquote, q
+  quotes: none
+
+blockquote::before, blockquote::after,
+q::before, q::after
+  content: none
+
+table
+  border-collapse: collapse
+  border-spacing: 0
+
+// sass-lint:enable single-line-per-selector, force-pseudo-nesting

data/app/assets/stylesheets/settings/_typography.sass

@@ -0,0 +1,48 @@
+// sass-lint:disable single-line-per-selector, no-vendor-prefixes
+
+html
+  font-size: 62.5%
+
+body, #{$all-text-inputs}, #{$all-buttons}, select
+  -moz-osx-font-smoothing: grayscale
+  -webkit-font-smoothing: antialiased
+  font-family: unquote($main-font-family)
+  font-size: $main-font-size
+  font-weight: normal
+
+body, #{$all-text-inputs}, select
+  color: $main-color
+  line-height: $main-line-height
+
+h1, h2, h3, h4, h5, h6
+  color: $headline-color
+  font-weight: bold
+  line-height: $headline-line-height
+
+h1
+  font-size: 5.6rem
+
+h2
+  font-size: 4rem
+
+h3
+  font-size: 3.2rem
+
+h4
+  font-size: 2.4rem
+
+h5
+  font-size: 1.6rem
+
+p
+  font-size: 1.6rem
+
+a
+  color: $main-color
+  outline: none
+  text-decoration: none
+
+strong
+  font-weight: bold
+
+// sass-lint:enable single-line-per-selector, no-vendor-prefixes

data/app/assets/stylesheets/settings/_variables.sass

@@ -0,0 +1,73 @@
+// Colors
+
+$white:                       rgb(255, 255, 255) !global
+$black:                       rgb(0, 0, 0) !global
+
+$palette-primary:             rgb(78, 183, 168) !default
+$palette-secondary:           rgb(28, 53, 69) !default
+$palette-cancel:              rgb(153, 153, 153) !default
+$palette-danger:              rgb(218, 60, 60) !default
+
+// General styles
+
+$main-background:             rgb(233, 232, 220) !default
+$main-transition:             .125s ease-in !global
+
+// Typography
+
+$main-font-family:            '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif' !global
+$main-color:                  rgb(62, 62, 62) !default
+$main-line-height:            1.5 !global
+$main-font-size:              14px !global
+
+// Headlines
+
+$headline-color:              rgb(122, 118, 76) !default
+$headline-line-height:        1 !global
+
+// Links
+
+$link-primary-color:          darken($palette-primary, 10%) !default
+$link-secondary-color:        darken($palette-cancel, 10%) !default
+$link-danger-color:           darken($palette-danger, 10%) !default
+
+// Buttons
+
+$button-primary-background:   $palette-primary !default
+$button-primary-color:        $white !default
+
+$button-secondary-background: $palette-cancel !default
+$button-secondary-color:      $white !default
+
+$button-danger-background:    $palette-danger !default
+$button-danger-color:         $white !default
+
+$button-border-radius:        3px !default
+$button-box-shadow:           0 2px 0 !default
+$button-font-weight:          700 !global
+$button-padding:              6px 12px !global
+
+// Cards
+
+$card-border-radius:          3px !default
+$card-box-shadow:             0 2px 7px rgba($black, .2) !default
+$card-padding:                40px !global
+$card-margin:                 30px !global
+
+// Labels
+
+$label-color:                 rgb(128, 128, 128) !default
+
+// Text inputs
+
+$input-border-color:          rgb(217, 216, 195) !default
+$input-border-color-focus:    $palette-primary !default
+
+// Hints
+
+$hint-color:                  rgb(158, 158, 158) !default
+
+// Logo
+
+$logo-width-public:           238px !default
+$logo-margin-top-public:      0 !default

data/app/assets/stylesheets/utilities/_mixins.sass

@@ -0,0 +1,19 @@
+@mixin background-color-darken($color, $percent)
+  background-color: $color
+  transition: $main-transition
+
+  &:hover
+    background-color: darken($color, $percent)
+    transition: $main-transition
+
+@mixin color-darken($color, $percent)
+  color: $color
+  transition: $main-transition
+
+  &:hover
+    color: darken($color, $percent)
+    transition: $main-transition
+
+@mixin background-color-lighten($color, $percent)
+  background-color: lighten($color, $percent)
+  transition: $main-transition

data/app/form_builders/beyond_form_builder.rb

@@ -0,0 +1,30 @@
+class BeyondFormBuilder < ActionView::Helpers::FormBuilder
+  def field_wrapper(attribute, args, &block)
+    label = args[:label].present? ? args[:label] : attribute.to_s.humanize
+    @template.content_tag(:div, class: 'form__row') do
+      @template.content_tag(:label, label, class: 'input__label') +
+      @template.content_tag(:div, class: 'relative') do
+        block.call
+      end +
+      (@template.content_tag(:div, args[:hint], class: 'input__hint') if args[:hint].present?)
+    end
+  end
+
+  def email_field(attribute, args = {})
+    field_wrapper(attribute, args) do
+      super(attribute, args)
+    end
+  end
+
+  def text_field(attribute, args = {})
+    field_wrapper(attribute, args) do
+      super(attribute, args)
+    end
+  end
+
+  def password_field(attribute, args = {})
+    field_wrapper(attribute, args) do
+      super(attribute, args)
+    end
+  end
+end

data/app/views/layouts/beyond_canvas/public.html.slim

@@ -0,0 +1,18 @@
+doctype html
+
+html
+  head
+    = csrf_meta_tags
+    meta content='width=device-width, initial-scale=1.0' name='viewport' /
+    = render 'beyond_canvas/custom/public_head'
+
+  body.body--public
+    main.main class=("#{params[:controller].gsub(/[\/_]/, "-")}--#{params[:action]}")
+      .main-wrapper
+        - logo = Dir["app/assets/images/logo.*"].first
+        - unless logo.nil?
+          - if File.extname(logo) == '.svg'
+            = inline_svg File.basename(logo), class: 'logo'
+          - else
+            = image_tag File.basename(logo), class: 'logo'
+        = yield

data/beyond_canvas.gemspec

@@ -0,0 +1,25 @@
+lib = File.expand_path("../lib", __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require "beyond_canvas/version"
+
+Gem::Specification.new do |spec|
+  spec.name          = "beyond_canvas"
+  spec.version       = BeyondCanvas::VERSION
+  spec.authors       = ["Unai Abrisketa"]
+  spec.email         = ["u.abrisketa@epages.com"]
+
+  spec.summary       = "Open-source framework that provides CSS styles"
+  spec.description   = <<-DESC
+    Beyond Canvas is an open-source framework that provides CSS styles for apps
+    designed and developed for the online shop software Beyond
+  DESC
+  spec.homepage      = "https://github.com/ePages-de/beyond_canvas"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files`.split("\n")
+
+  spec.add_dependency "bourbon",    "~> 5.1"
+  spec.add_dependency "neat",       "~> 3.0"
+  spec.add_dependency "slim-rails", "~> 3.2"
+  spec.add_dependency "inline_svg", "~> 1.5"
+end

data/lib/beyond_canvas/version.rb

@@ -0,0 +1,3 @@
+module BeyondCanvas
+  VERSION = "0.1.0.pre"
+end

data/lib/beyond_canvas.rb

@@ -0,0 +1,5 @@
+require "beyond_canvas/version"
+
+module BeyondCanvas
+  class Engine < ::Rails::Engine; end
+end

metadata

@@ -0,0 +1,123 @@
+--- !ruby/object:Gem::Specification
+name: beyond_canvas
+version: !ruby/object:Gem::Version
+  version: 0.1.0.pre
+platform: ruby
+authors:
+- Unai Abrisketa
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2019-07-18 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bourbon
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.1'
+- !ruby/object:Gem::Dependency
+  name: neat
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+- !ruby/object:Gem::Dependency
+  name: slim-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.2'
+- !ruby/object:Gem::Dependency
+  name: inline_svg
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.5'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.5'
+description: |2
+      Beyond Canvas is an open-source framework that provides CSS styles for apps
+      designed and developed for the online shop software Beyond
+email:
+- u.abrisketa@epages.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- LICENSE.txt
+- README.md
+- app/assets/stylesheets/_beyond_canvas.sass
+- app/assets/stylesheets/components/_buttons.sass
+- app/assets/stylesheets/components/_cards.sass
+- app/assets/stylesheets/components/_forms.sass
+- app/assets/stylesheets/components/_inputs.sass
+- app/assets/stylesheets/components/_links.sass
+- app/assets/stylesheets/components/_main.sass
+- app/assets/stylesheets/components/_relative.sass
+- app/assets/stylesheets/settings/_neat.sass
+- app/assets/stylesheets/settings/_reset_css.sass
+- app/assets/stylesheets/settings/_typography.sass
+- app/assets/stylesheets/settings/_variables.sass
+- app/assets/stylesheets/utilities/_mixins.sass
+- app/form_builders/beyond_form_builder.rb
+- app/views/beyond_canvas/custom/_public_head.html.slim
+- app/views/layouts/beyond_canvas/public.html.slim
+- beyond_canvas.gemspec
+- lib/beyond_canvas.rb
+- lib/beyond_canvas/version.rb
+homepage: https://github.com/ePages-de/beyond_canvas
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">"
+    - !ruby/object:Gem::Version
+      version: 1.3.1
+requirements: []
+rubygems_version: 3.0.2
+signing_key: 
+specification_version: 4
+summary: Open-source framework that provides CSS styles
+test_files: []