RubyGems - easy_html_generator - Versions diffs - 1.0.4 → 1.0.5 - Mend

easy_html_generator 1.0.4 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (64) hide show

checksums.yaml +4 -4
data/.codeclimate.yml +6 -0
data/.gitignore +12 -0
data/.rubocop.yml +18 -0
data/.travis.yml +14 -0
data/Gemfile +3 -0
data/README.md +51 -337
data/Rakefile +42 -0
data/config.ru +4 -0
data/docs/CONFIGURATION.md +84 -0
data/{CONTRIBUTING.md → docs/CONTRIBUTING.md} +2 -0
data/docs/GENERATORS.md +210 -0
data/docs/GETSTARTED.md +92 -0
data/easy_html_generator.gemspec +54 -0
data/lib/easy_html_generator/checksum.rb +4 -0
data/lib/easy_html_generator/config.rb +0 -77
data/lib/easy_html_generator/generator/base.rb +20 -58
data/lib/easy_html_generator/generator/combine.rb +9 -19
data/lib/easy_html_generator/generator/compile/base.rb +51 -0
data/lib/easy_html_generator/generator/compile/coffee.rb +6 -13
data/lib/easy_html_generator/generator/compile/haml/helper/activesupport_override.rb +1 -6
data/lib/easy_html_generator/generator/compile/haml/helper/asset_helper.rb +7 -7
data/lib/easy_html_generator/generator/compile/haml.rb +20 -45
data/lib/easy_html_generator/generator/compile/sass.rb +9 -13
data/lib/easy_html_generator/generator/copy.rb +7 -14
data/lib/easy_html_generator/generator/delete.rb +4 -13
data/lib/easy_html_generator/generator/minimize/css.rb +5 -12
data/lib/easy_html_generator/generator/minimize/html.rb +5 -12
data/lib/easy_html_generator/generator/minimize/images.rb +6 -20
data/lib/easy_html_generator/generator/minimize/js.rb +5 -12
data/lib/easy_html_generator/generator/service/analytics.rb +19 -19
data/lib/easy_html_generator/generator/service/bower.rb +21 -17
data/lib/easy_html_generator/generator/service/grunt.rb +12 -11
data/lib/easy_html_generator/generator/service/sitemap.rb +33 -0
data/lib/easy_html_generator/generator/structure.rb +2 -6
data/lib/easy_html_generator/generator.rb +6 -6
data/lib/easy_html_generator/project.rb +5 -0
data/lib/easy_html_generator/project_path_resolver.rb +57 -0
data/lib/easy_html_generator/rack_dispatcher.rb +1 -1
data/lib/easy_html_generator/version.rb +4 -0
data/lib/easy_html_generator/workspace.rb +1 -1
data/lib/easy_html_generator.rb +19 -18
data/src/demo/assets/styles/app.css.sass +47 -2
data/src/demo/lib/helper/projecthelper.rb +3 -0
data/src/demo/project.yml +142 -0
data/src/demo/views/index/_bower_and_grunt.haml +7 -0
data/src/demo/views/index/_dry.haml +16 -0
data/src/demo/views/index/_haml_sass_coffee.haml +11 -0
data/src/demo/views/index/_inline_coffee_and_sass.haml +43 -0
data/src/demo/views/index/_sass_mixins.haml +76 -0
data/src/demo/views/index.html.haml +13 -1
data/src/demo/views/layout/_assets.javascripts.haml +7 -0
data/src/demo/views/layout/_assets.metadata.haml +12 -0
data/src/demo/views/layout/_assets.stylesheets.haml +9 -0
data/src/demo/views/layout/_footer.haml +3 -0
data/src/demo/views/layout/_header.haml +1 -0
data/src/demo/views/layout.haml +8 -4
data/src/demo/views/plain.html +1 -0
data/src/shared/assets/styles/mixins/_bootstrap-fixes.sass +12 -0
data/src/shared/assets/styles/mixins/_headjs-bootstrap-mediaqueries.sass +30 -0
data/src/shared/project.yml +56 -35
data/src/template/project.yml +57 -43
metadata +75 -7
data/src/demo/views/index/_lore_ipsum.haml +0 -1

data/lib/easy_html_generator/project_path_resolver.rb ADDED Viewed

@@ -0,0 +1,57 @@
+# encoding: utf-8
+# this class represents a project and handles generators and ressources
+class EasyHtmlGenerator::ProjectPathResolver
+  def initialize(project)
+    @project = project
+    @path_prefix_replace_map = {
+      'src'            => project.src_path,
+      'dist'           => project.dist_path,
+      'src.scripts'    => project.src_path_to(:scripts),
+      'src.styles'     => project.src_path_to(:styles),
+      'src.images'     => project.src_path_to(:images),
+      'src.public'     => project.src_path_to(:public),
+      'src.views'      => project.src_path_to(:views),
+      'dist.scripts'   => project.dist_path_to(:scripts),
+      'dist.styles'    => project.dist_path_to(:styles),
+      'dist.images'    => project.dist_path_to(:images),
+      'dist.public'    => project.dist_path_to(:public),
+      'dist.views'     => project.dist_path_to(:views),
+      'workspace.root' => EasyHtmlGenerator::WORKSPACE_PATH,
+      'ehg.root'       => EasyHtmlGenerator::EHG_SRC_PATH
+    }
+  end
+  def resolve_config(config)
+    resolve_hash(config)
+  end
+  private
+  def resolve_hash(myHash)
+    myHash.each do |key, value|
+      value.is_a?(Hash) ? resolve_hash(value) : (value.is_a?(Array) ? (myHash[key] = resolve_array(value)) : (myHash[key] = resolve_path(value)))
+    end
+  end
+  def resolve_array(myArray)
+    myArray.map do |value|
+      value.is_a?(Array) ? resolve_array(value) : (value.is_a?(Hash) ? resolve_hash(value) : resolve_path(value))
+    end
+  end
+  def resolve_path(path)
+    return path unless path.is_a? String
+    return path unless path.include? '://'
+    splitted = path.split('://')
+    unresolved_prefix = splitted.first
+    path_prefix = @path_prefix_replace_map[unresolved_prefix]
+    return path unless @path_prefix_replace_map.key? unresolved_prefix
+    return path_prefix if splitted.length == 1
+    File.join(path_prefix, splitted.second)
+  end
+end

data/lib/easy_html_generator/rack_dispatcher.rb CHANGED Viewed

@@ -11,7 +11,7 @@ class EasyHtmlGenerator::RackDispatcher
   </style></head>
   <body>
     {CONTENT}
-    <a target='_blank' href='#{EHG_URL}'>ehc on Github</a></body></html>"
+    <a target='_blank' href='#{EHG_URL}'>ehg on Github</a></body></html>"
   def initialize(app)
     @app = app

data/lib/easy_html_generator/version.rb ADDED Viewed

@@ -0,0 +1,4 @@
+# encoding: utf-8
+module EasyHtmlGenerator
+  VERSION = '1.0.5'
+end

data/lib/easy_html_generator/workspace.rb CHANGED Viewed

@@ -25,7 +25,7 @@ class EasyHtmlGenerator::Workspace
   def self.create_project(name)
     FileUtils.cp_r(
-      File.join(EasyHtmlGenerator::EHC_SRC_PATH, 'template'),
+      File.join(EasyHtmlGenerator::EHG_SRC_PATH, 'template'),
       File.join(EasyHtmlGenerator::SRC_PATH, name))
   end

data/lib/easy_html_generator.rb CHANGED Viewed

@@ -1,7 +1,6 @@
 # encoding: utf-8
-# add lib folder to paths
-$LOAD_PATH.unshift File.dirname(__FILE__)
+require 'easy_html_generator/version'
 # just require bootsrap and it will be in the sass path
 require 'bootstrap-sass'
@@ -13,14 +12,14 @@ require 'thin'
 # main module loads projects and dispatches rack requests
 module EasyHtmlGenerator
-  EHC_WORKSPACE_PATH      =
+  EHG_WORKSPACE_PATH =
     File.expand_path File.join(File.dirname(__FILE__), '..')
-  EHC_SRC_PATH            = File.join(EHC_WORKSPACE_PATH, 'src')
-  EHC_SHARED_PATH         = File.join(EHC_SRC_PATH, 'shared')
-  EHC_SHARED_HELPER_PATH  = File.join(EHC_SHARED_PATH, 'lib', 'helper')
-  EHC_SHARED_GENERATORS_PATH = File.join(EHC_SHARED_PATH, 'lib', 'generators')
-  EHC_SHARED_STYLES_PATH  = File.join(EHC_SHARED_PATH, 'assets', 'styles')
+  EHG_SRC_PATH            = File.join(EHG_WORKSPACE_PATH, 'src')
+  EHG_SHARED_PATH         = File.join(EHG_SRC_PATH, 'shared')
+  EHG_SHARED_HELPER_PATH  = File.join(EHG_SHARED_PATH, 'lib', 'helper')
+  EHG_SHARED_GENERATORS_PATH = File.join(EHG_SHARED_PATH, 'lib', 'generators')
+  EHG_SHARED_STYLES_PATH  = File.join(EHG_SHARED_PATH, 'assets', 'styles')
   WORKSPACE_PATH          = Bundler.root
   SRC_PATH                = File.join(WORKSPACE_PATH, 'src')
@@ -35,9 +34,9 @@ module EasyHtmlGenerator
     DIST_PATH
   ]
-  COPY_ON_INIT            = {
-    EHC_SHARED_PATH            => SHARED_PATH,
-    "#{EHC_SRC_PATH}/template" => "#{SRC_PATH}/demo"
+  COPY_ON_INIT = {
+    EHG_SHARED_PATH            => SHARED_PATH,
+    "#{EHG_SRC_PATH}/template" => "#{SRC_PATH}/demo"
   }
   Dir[File.dirname(__FILE__) + '/easy_html_generator/*.rb']
@@ -75,7 +74,7 @@ module EasyHtmlGenerator
   end
   def self.generate_all
-    Workspace.projects.each{|name, project| project.generate }
+    Workspace.projects.each { |_name, project| project.generate }
   end
   def self.generate_project(project)
@@ -85,24 +84,26 @@ module EasyHtmlGenerator
   def self.rack_app
     Rack::Builder.new do
       use Rack::ShowExceptions
-      use Rack::Reloader, 0
       use EasyHtmlGenerator::RackDispatcher
       use Rack::Deflater
       use Rack::ContentLength
       use Rack::StaticCache, urls: [''], root: EasyHtmlGenerator::DIST_PATH
       use Rack::Static,
-        urls: [''],
-        root: EasyHtmlGenerator::DIST_PATH,
-        index: 'index.html'
+          urls: [''],
+          root: EasyHtmlGenerator::DIST_PATH,
+          index: 'index.html'
-      run lambda { |env| [404, {'Content-Type' => 'text/plain'}, ['404 File not found!']] }
+      run -> (_env) do
+        [404, { 'Content-Type' => 'text/plain' }, ['404 File not found!']]
+      end
     end
   end
   def self.start_server(host, port)
     config = { Host: host,
-               Port: port}
+               Port: port }
+    Thin::Logging.debug = true
     Rack::Handler.get('thin').run(rack_app, config)
   end
 end

data/src/demo/assets/styles/app.css.sass CHANGED Viewed

@@ -1,2 +1,47 @@
-body
-  background-color: red
+@import "bootstrap/variables"
+@import "bootstrap/mixins"
+@import "mixins/css3"
+@import "mixins/helper"
+@import "mixins/normalize"
+@import "mixins/buttons"
+@import "mixins/arrows"
+*
+  font-family: 'Open SANS',sans-serif
++headlines
+  +text-shadow(1px, 1px, 3px, #555)
+h1
+  font-size: 42px
+  +bold
+img
+  +transition(all, .3s, ease-in-out)
+.semibold
+  font-weight: 600
+.content-left, .content-right
+  +make-xs-column(12)
+  +make-sm-column(6)
+.button.magenta
+  +make-magenta-button()
+  +zoom-on-hover
+.button.green
+  +make-green-button()
+  +zoom-on-hover
+.arrow-up
+  +arrow-up(60px, 20px, #62bc19)
+  +inline-block
+.arrow-down
+  +arrow-down(40px, 40px, #c83c29)
+  +inline-block
+.section
+  padding: 30px 0
+  +make-row

data/src/demo/lib/helper/projecthelper.rb CHANGED Viewed

@@ -2,4 +2,7 @@
 # this helper will be loaded into the haml render context for this project
 module Projecthelper
+  def action_view_link
+    link_to 'action_view', 'http://guides.rubyonrails.org/action_view_overview.html#overview-of-helpers-provided-by-action-view', target: 'blank'
+  end
 end

data/src/demo/project.yml ADDED Viewed

@@ -0,0 +1,142 @@
+generate_on_request_path_match:
+  - '.*html$'
+paths:
+  src:
+    images:     'assets/images'
+    scripts:    'assets/scripts'
+    styles:     'assets/styles'
+    public:     'assets/public'
+    helper:     'lib/helper'
+    generators:  'lib/generators'
+    views:      'views'
+  dist:
+    public:     ''
+    views:      ''
+    images:     'images'
+    scripts:    'scripts'
+    styles:     'styles'
+generators:
+  - delete:
+      enabled: false
+      source: 'dist://**/*'
+  - structure:
+      enabled: true
+  - service_bower:
+      enabled: true
+      source: 'src://'
+      target: 'dist://lib'
+  - compile_coffee:
+      enabled: true
+      minimize: true
+      source: 'src.scripts://'
+      target: 'dist.scripts://'
+      selector: '**/*.js.coffee'
+  - compile_sass:
+      enabled: true
+      minimize: true
+      source: 'src.styles://'
+      target: 'dist.styles://'
+      selector: '**/*.css.sass'
+  - copy:
+      enabled: true
+      repetitive:
+        -
+          source: 'src.styles://'
+          target: 'dist.styles://'
+          selector: '**/*.css'
+        -
+          source: 'src.scripts://'
+          target: 'dist.scripts://'
+        -
+          source: 'src.images://'
+          target: 'dist.images://'
+        -
+          source: 'src.public://'
+          target: 'dist.public://'
+  - compile_haml:
+      enabled: true
+      minimize: true
+      source: 'src.views://'
+      target: 'dist.views://'
+      selector: '**/*.html.haml'
+      default_layout: 'views/layout.haml'
+      renderer:
+        attr_wrapper: '"'
+        format: :html5
+        shared_helper_path: 'shared/lib'
+  - service_analytics:
+      enabled: false
+      source: 'dist.views://'
+      target: 'dist.views://'
+      selector: '**/*.html'
+      repetitive:
+        -
+          enabled: true
+          name: 'google'
+          code: "<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', '{GOOGLE_UA_ID}', 'auto');ga('send', 'pageview');</script>"
+          params:
+            GOOGLE_UA_ID: google_id
+  - minimize_js:
+      enabled: true
+      source: 'src.scripts://'
+      target: 'dist.scripts://'
+      selector: '**/*.js'
+      prefix_extension: '.min'
+  - minimize_css:
+      enabled: true
+      source: 'src.styles://'
+      target: 'dist.styles://'
+      selector: '**/*.css'
+      prefix_extension: '.min'
+  - minimize_html:
+      enabled: true
+      source: 'src.public://'
+      target: 'dist.public://'
+      selector: '**/*.html'
+      prefix_extension: ''
+  - minimize_images:
+      enabled: false
+      source: 'src.images://'
+      target: 'dist.images://'
+      selector: '**/*.{jpg,jpeg,png}'
+      options:
+        quality: 90
+        level: 3
+        verbose: true
+  - combine:
+      enabled: false
+      repetitive:
+        -
+          target: 'dist.scripts://combined.js'
+          sources:
+            - 'dist.scripts://**/*.js'
+        -
+          target: 'dist.styles://combined.css'
+          sources:
+            - 'dist.styles://**/*.css'
+  - service_grunt:
+      enabled: true
+      source: 'src://Gruntfile.coffee'
+      task: 'default'
+  - service_sitemap:
+      enabled: false
+      domain: www.demo.com
+      source: 'dist.views:'
+      target: 'dist.views://sitemap.xml'
+      selector: '**/*.html'

data/src/demo/views/index/_bower_and_grunt.haml ADDED Viewed

@@ -0,0 +1,7 @@
+%h2.semibold
+  use bower and grunt in your projects
+%p
+  just put a bower.json or a Gruntfile into your source folder and configure the generators in your project.yml. don't forget to install bower 'npm install -g bower\'
+  = link_to 'http://bower.io/', 'http://bower.io/', target: 'blank'
+  = link_to 'http://gruntjs.com/', 'http://gruntjs.com/', target: 'blank'

data/src/demo/views/index/_dry.haml ADDED Viewed

@@ -0,0 +1,16 @@
+%h2.semibold
+  Dont`t repeat your self!
+%p
+  Layouts, templates, partials, helpers and static assets. There are shared helper for haml, sass and coffee. You can extend these helpers. You can add per project helpers and generators or per workspace.
+%p
+  So Dont Repeat Your self! There are tons of features allready implemented and there will be more!
+  = link_to 'Follow on github', 'https://github.com/creative-workflow/easy-html-generator', target: '_blank'
+  The copyright for ex.
+  %br
+  %code
+    \= copyright 'ehg'
+  %br
+  = copyright 'ehg'

data/src/demo/views/index/_haml_sass_coffee.haml ADDED Viewed

@@ -0,0 +1,11 @@
+%h2.semibold
+  sass, haml, coffee
+%p
+  We use sass, haml and coffe script. We also include
+  = action_view_link
+  for easier displaying images for ex.
+  %br
+  %code
+    \= image_tag('demo.png', class: 'img-thumbnail', style: 'height: 50px; width: auto')
+  %br
+  = image_tag('demo.png', class: 'img-thumbnail', style: 'height: 50px; width: auto')

data/src/demo/views/index/_inline_coffee_and_sass.haml ADDED Viewed

@@ -0,0 +1,43 @@
+%h2.semibold
+  inline coffee and sass, with minimization support
+.content-left
+  %h3
+    inline sass
+  %p.inline-sass
+    text styled from inline sass
+  = with_sass do
+    :plain
+      p.inline-sass
+        color: green
+  %pre.code
+    = preserve do
+      :escaped
+        = with_sass do
+          :plain
+            p.inline-sass
+              color: green
+.content-right
+  %h3
+    inline coffee
+  %p
+    %button.inline-coffee
+      click me
+  = with_coffee do
+    :plain
+      $('.inline-coffee').click ->
+        alert 'button clicked'
+  %pre.code
+    = preserve do
+      :escaped
+        = with_coffee do
+          :plain
+            $('.inline-coffee').click ->
+              alert 'button clicked'

data/src/demo/views/index/_sass_mixins.haml ADDED Viewed

@@ -0,0 +1,76 @@
+%h2.semibold
+  For sass we offer mixins for ...
+.content-left
+  %h3
+    bootsrap, reset, normalize and headjs
+  %pre.code
+    = preserve do
+      :escaped
+        @import "bootstrap/variables"
+        @import "bootstrap/mixins"
+        @import "mixins/normalize"
+        *
+          font-family: 'Open SANS',sans-serif
+        .content-left, .content-right
+          +make-xs-column(12)
+          +make-sm-column(6)
+.content-right
+  %h3
+    css3 and helper mixins
+  %pre.code
+    = preserve do
+      :escaped
+        @import "mixins/css3"
+        @import "mixins/helper"
+        +headlines
+          +text-shadow(1px, 1px, 3px, #555)
+        h1
+          +bold
+        img
+          +transition(all, .3s, ease-in-out)
+.content-left
+  %h3
+    buttons
+  %p
+    .button.green
+      green button
+    .button.magenta
+      magenta button
+  %pre.code
+    = preserve do
+      :escaped
+        @import "mixins/buttons"
+        .button.magenta
+          +make-magenta-button()
+          +zoom-on-hover
+.content-right
+  %h3
+    arrows
+  %p
+    .arrow-up
+    .arrow-down
+  %pre.code
+    = preserve do
+      :escaped
+        @import "mixins/arrows"
+        .arrow-up
+          +arrow-up(60px, 20px, #62bc19)
+          +inline-block

data/src/demo/views/index.html.haml CHANGED Viewed

@@ -1 +1,13 @@
-= render_partial "index/_lore_ipsum"
+%h1
+  easy-html-generator - It speeds up your web developement ...easy! =)
+- partials= ['_dry',
+             '_haml_sass_coffee',
+             '_sass_mixins',
+             '_inline_coffee_and_sass',
+             '_bower_and_grunt']
+- partials.each do |partial|
+  .section
+    = render_partial "index/#{partial}"

data/src/demo/views/layout/_assets.javascripts.haml ADDED Viewed

@@ -0,0 +1,7 @@
+= javascript_include_tag 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'
+= javascript_include_tag 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js'
+/[if lt IE 9]
+  = javascript_include_tag 'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js'
+  = javascript_include_tag 'https://oss.maxcdn.com/respond/1.4.2/respond.min.js'
+  %script
+    var ltie9 = true

data/src/demo/views/layout/_assets.metadata.haml ADDED Viewed

@@ -0,0 +1,12 @@
+%title
+  easy-html-generator #demo
+= meta_tag_http 'Content-Type',    'text/html; charset=utf-8'
+= meta_tag_http 'X-UA-Compatible', 'IE=edge'
+= meta_tag 'robots',               'noindex,follow,noodp,noydir'
+= meta_tag 'description',          ''
+= meta_tag 'keywords',             ''
+= meta_tag 'viewport',             'width=device-width, initial-scale=1.0'
+= link_tag 'favicon.ico', 'icon', 'image/x-icon'
+= link_tag 'favicon.ico', 'shortcut icon', 'image/x-icon'

data/src/demo/views/layout/_assets.stylesheets.haml ADDED Viewed

@@ -0,0 +1,9 @@
+= stylesheet_link_tag 'http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'
+= stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Open+Sans:400'
+= stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Open+Sans:400italic'
+= stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Open+Sans:600'
+= stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Open+Sans:700'
+= inline_stylesheet_link_tag 'app.css'

data/src/demo/views/layout/_footer.haml ADDED Viewed

@@ -0,0 +1,3 @@
+.footer
+  .copyright
+    = copyright('ehg')

data/src/demo/views/layout/_header.haml ADDED Viewed

	@@ -0,0 +1 @@
1	+

data/src/demo/views/layout.haml CHANGED Viewed

@@ -1,8 +1,12 @@
 !!!
 %html{lang: 'de'}
   %head
+    = render_partial 'layout/_assets.metadata'
+    = render_partial 'layout/_assets.stylesheets'
+    = render_partial 'layout/_assets.javascripts'
-  %body{class: [body_class, 'loading']}
-    = image_tag('demo.png', width: '100', alt: 'Gear', class: 'gear')
-    = yield
+  %body{class: body_class}
+    = render_partial 'layout/_header'
+    .container
+      = yield
+    = render_partial 'layout/_footer'

data/src/demo/views/plain.html CHANGED Viewed

	@@ -0,0 +1 @@
1	+ this is a plain html demo file ...it works ...but please use haml and the full pwer of ehg ;)

data/src/shared/assets/styles/mixins/_bootstrap-fixes.sass CHANGED Viewed

@@ -10,3 +10,15 @@ $grid-gutter-width: 0
 .form-horizontal .form-group
   margin-left: 0
   margin-right: 0
+.navbar-default
+  background: transparent
+  border: none
+  border-radius: 0
+.navbar-collapse
+  padding: 0
+.container-fluid
+  margin: 0
+  padding: 0

data/src/shared/assets/styles/mixins/_headjs-bootstrap-mediaqueries.sass CHANGED Viewed

@@ -40,3 +40,33 @@
 @mixin min-width-lg
   html.gte-1200 &
     @content
+// hide element in specific viewport range
+@mixin hide-xs
+  html.lt-768 &
+    display: none
+@mixin hide-sm
+  html.gte-768.lt-992 &
+    display: none
+@mixin hide-md
+  html.gte-992.lt-1200 &
+    display: none
+@mixin hide-lg
+  html.gte-1200 &
+    display: none
+// classes for hiding elements
+.hidden-xs
+  +hide-xs
+.hidden-sm
+  +hide-sm
+.hidden-md
+  +hide-md
+.hidden-lg
+  +hide-lg