cupboard 0.2.0 → 0.2.1

data/app/assets/stylesheets/{components/_grid.scss → layouts/_grids.scss}

@@ -1,14 +1,16 @@
 // --------------------------------
-// Grid
+// Layouts - Grids
 // --------------------------------
 
 /*doc
 ---
-title: Grid
-name: 03_grid
-category: UI components
+title: Grids
+name: 01_grids
+category: layouts
 ---
 
+We use Bootstrap's grid system.
+
 <div class="ic-grid">
   <div class="row">
     <div class="col-xs-12">

data/app/assets/stylesheets/layouts/_headers.scss

@@ -4,8 +4,8 @@
 
 /*doc
 ---
-title: Header
-name: 01_headers
-category: modular_widgets
+title: Headers
+name: 02_headers
+category: layouts
 ---
 */

data/app/assets/stylesheets/layouts/_sub-header-market.scss

@@ -1,12 +1,12 @@
-// --------------------------------
-// Layouts - Market channel header
-// --------------------------------
+// ---------------------------------------------
+// Layouts - Headers - market channel header
+// ---------------------------------------------
 
 /*doc
 ---
-parent: 01_headers
+parent: 02_headers
 title: Channel header
-name: sub_header_market
+name: 02_sub_header_market
 ---
 
 <div class="ic-header">

data/lib/cupboard/version.rb

@@ -1,3 +1,3 @@
 module Cupboard
-  VERSION = "0.2.0"
+  VERSION = "0.2.1"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: cupboard
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.1
 platform: ruby
 authors:
 - Stan Lo
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-09-09 00:00:00.000000000 Z
+date: 2016-10-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -166,103 +166,94 @@ files:
 - app/assets/images/setting-pr.jpg
 - app/assets/images/step-placeholder.jpg
 - app/assets/images/vip-icon.svg
-- app/assets/pages/atomic.md
 - app/assets/pages/index.md
 - app/assets/stylesheets/_base.scss
-- app/assets/stylesheets/_basic.scss
 - app/assets/stylesheets/_components.scss
-- app/assets/stylesheets/_forms.scss
-- app/assets/stylesheets/_global.scss
-- app/assets/stylesheets/_images.scss
+- app/assets/stylesheets/_helpers.scss
 - app/assets/stylesheets/_layouts.scss
-- app/assets/stylesheets/_lists.scss
-- app/assets/stylesheets/_mixins.scss
-- app/assets/stylesheets/_tables.scss
-- app/assets/stylesheets/_typography.scss
-- app/assets/stylesheets/_variables.scss
-- app/assets/stylesheets/_widgets.scss
-- app/assets/stylesheets/base/_badge.scss
-- app/assets/stylesheets/base/_buttons.scss
-- app/assets/stylesheets/components/_accordion.scss
+- app/assets/stylesheets/base/_base.scss
+- app/assets/stylesheets/base/_basic.scss
+- app/assets/stylesheets/base/_forms.scss
+- app/assets/stylesheets/base/_lists.scss
+- app/assets/stylesheets/base/_table.scss
+- app/assets/stylesheets/base/_typography.scss
+- app/assets/stylesheets/components/_alerts.scss
+- app/assets/stylesheets/components/_badges.scss
 - app/assets/stylesheets/components/_breadcrumbs.scss
+- app/assets/stylesheets/components/_buttons.scss
 - app/assets/stylesheets/components/_cards.scss
-- app/assets/stylesheets/components/_grid.scss
+- app/assets/stylesheets/components/_comments.scss
+- app/assets/stylesheets/components/_covers.scss
+- app/assets/stylesheets/components/_features.scss
+- app/assets/stylesheets/components/_icons.scss
+- app/assets/stylesheets/components/_modals.scss
 - app/assets/stylesheets/components/_navigations.scss
 - app/assets/stylesheets/components/_pagination.scss
+- app/assets/stylesheets/components/_recipes.scss
 - app/assets/stylesheets/components/_search-form.scss
+- app/assets/stylesheets/components/_sidebars.scss
 - app/assets/stylesheets/components/_sorting-cards.scss
-- app/assets/stylesheets/components/_text.scss
+- app/assets/stylesheets/components/_user.scss
 - app/assets/stylesheets/components/alerts/_alert-global.scss
 - app/assets/stylesheets/components/alerts/_alert-market.scss
+- app/assets/stylesheets/components/alerts/_alert-no-result.scss
+- app/assets/stylesheets/components/cards/_brand-product-card.scss
 - app/assets/stylesheets/components/cards/_dish-card.scss
+- app/assets/stylesheets/components/cards/_feeds-card.scss
 - app/assets/stylesheets/components/cards/_list-card.scss
 - app/assets/stylesheets/components/cards/_photo-card.scss
 - app/assets/stylesheets/components/cards/_product-card.scss
 - app/assets/stylesheets/components/cards/_recipe-card.scss
 - app/assets/stylesheets/components/cards/_video-card.scss
 - app/assets/stylesheets/components/comments/_comment-form.scss
-- app/assets/stylesheets/components/medias/_blog-feeds.scss
-- app/assets/stylesheets/components/medias/_brand-cover.scss
-- app/assets/stylesheets/components/medias/_brand-product.scss
-- app/assets/stylesheets/components/medias/_business-kitchen.scss
-- app/assets/stylesheets/components/medias/_categories-cover.scss
-- app/assets/stylesheets/components/medias/_hot-categories.scss
-- app/assets/stylesheets/components/medias/_popular-categories.scss
-- app/assets/stylesheets/components/medias/_popular-recipes.scss
-- app/assets/stylesheets/components/medias/_pr-lists.scss
-- app/assets/stylesheets/components/medias/_recipe-reference.scss
-- app/assets/stylesheets/components/medias/_user-recipes.scss
-- app/assets/stylesheets/components/navigations/_blog-nav.scss
-- app/assets/stylesheets/components/navigations/_brand-tabs-nav.scss
-- app/assets/stylesheets/components/navigations/_categories-nav-responsive.scss
-- app/assets/stylesheets/components/navigations/_categories-nav.scss
-- app/assets/stylesheets/components/navigations/_recipe-nav.scss
-- app/assets/stylesheets/components/navigations/_tv-nav.scss
+- app/assets/stylesheets/components/comments/_single-comment.scss
+- app/assets/stylesheets/components/covers/_brand-cover.scss
+- app/assets/stylesheets/components/covers/_categories-cover.scss
+- app/assets/stylesheets/components/features/_feature-events.scss
+- app/assets/stylesheets/components/features/_feature-slides.scss
+- app/assets/stylesheets/components/icons/_footer-social-icons.scss
+- app/assets/stylesheets/components/icons/_icon-status.scss
+- app/assets/stylesheets/components/icons/_icookfont.scss
+- app/assets/stylesheets/components/modals/_modal-reset.scss
+- app/assets/stylesheets/components/modals/_recipe-list-modal.scss
+- app/assets/stylesheets/components/navigations/_blog-navi.scss
+- app/assets/stylesheets/components/navigations/_brand-tabs-navi.scss
+- app/assets/stylesheets/components/navigations/_categories-navi-responsive.scss
+- app/assets/stylesheets/components/navigations/_categories-navi.scss
+- app/assets/stylesheets/components/navigations/_tv-navi.scss
 - app/assets/stylesheets/components/recipes/_ingredients.scss
 - app/assets/stylesheets/components/recipes/_notes.scss
+- app/assets/stylesheets/components/recipes/_recipe-details.scss
+- app/assets/stylesheets/components/recipes/_recipe-navi.scss
 - app/assets/stylesheets/components/recipes/_steps.scss
-- app/assets/stylesheets/components/single_comment/_single-comment.scss
+- app/assets/stylesheets/components/sidebars/_brand-ingredients.scss
+- app/assets/stylesheets/components/sidebars/_brand-popular-lists.scss
+- app/assets/stylesheets/components/sidebars/_brand-recent-events.scss
+- app/assets/stylesheets/components/sidebars/_brand-video.scss
+- app/assets/stylesheets/components/sidebars/_business-kitchen.scss
+- app/assets/stylesheets/components/sidebars/_hot-categories.scss
+- app/assets/stylesheets/components/sidebars/_icook-video.scss
+- app/assets/stylesheets/components/sidebars/_popular-recipes.scss
+- app/assets/stylesheets/components/sidebars/_popular-search.scss
+- app/assets/stylesheets/components/sidebars/_recipes-collect.scss
+- app/assets/stylesheets/components/sidebars/_sidebar-basic.scss
+- app/assets/stylesheets/components/sidebars/_tv-more-recipes.scss
+- app/assets/stylesheets/components/sidebars/_tv-popular-tags.scss
+- app/assets/stylesheets/components/users/_fav-list.scss
+- app/assets/stylesheets/components/users/_user-stats.scss
+- app/assets/stylesheets/helpers/_mixin-alert.scss
+- app/assets/stylesheets/helpers/_mixin-animation.scss
+- app/assets/stylesheets/helpers/_mixin-badge.scss
+- app/assets/stylesheets/helpers/_mixin-buttons.scss
+- app/assets/stylesheets/helpers/_mixin-icons.scss
+- app/assets/stylesheets/helpers/_variables-color.scss
+- app/assets/stylesheets/layouts/_base-footer.scss
 - app/assets/stylesheets/layouts/_footer-nav.scss
-- app/assets/stylesheets/layouts/_footer.scss
 - app/assets/stylesheets/layouts/_footers.scss
 - app/assets/stylesheets/layouts/_global-navbar.scss
+- app/assets/stylesheets/layouts/_grids.scss
 - app/assets/stylesheets/layouts/_headers.scss
 - app/assets/stylesheets/layouts/_sub-header-market.scss
-- app/assets/stylesheets/mixins/_mixin-alert.scss
-- app/assets/stylesheets/mixins/_mixin-animation.scss
-- app/assets/stylesheets/mixins/_mixin-badge.scss
-- app/assets/stylesheets/mixins/_mixin-buttons.scss
-- app/assets/stylesheets/mixins/_mixin-icons.scss
-- app/assets/stylesheets/mixins/_mixin-type.scss
-- app/assets/stylesheets/variables/_color-palette.scss
-- app/assets/stylesheets/widgets/_brand-sidebar-widgets.scss
-- app/assets/stylesheets/widgets/_recipe-mark.scss
-- app/assets/stylesheets/widgets/_sidebar-widgets.scss
-- app/assets/stylesheets/widgets/_tv-sidebar-widgets.scss
-- app/assets/stylesheets/widgets/_user-sidebar-widgets.scss
-- app/assets/stylesheets/widgets/_widgets.scss
-- app/assets/stylesheets/widgets/brands/_pr-ingredients.scss
-- app/assets/stylesheets/widgets/brands/_pr-latest.scss
-- app/assets/stylesheets/widgets/brands/_pr-popular-recipe-lists.scss
-- app/assets/stylesheets/widgets/brands/_pr-recent.scss
-- app/assets/stylesheets/widgets/brands/_pr-video.scss
-- app/assets/stylesheets/widgets/features/_feature-events.scss
-- app/assets/stylesheets/widgets/features/_feature-slides.scss
-- app/assets/stylesheets/widgets/feeds/_blog-feeds.scss
-- app/assets/stylesheets/widgets/feeds/_tv-feeds.scss
-- app/assets/stylesheets/widgets/modal/_modal-reset.scss
-- app/assets/stylesheets/widgets/modal/_recipe-list-modal.scss
-- app/assets/stylesheets/widgets/sidebar-widgets/_business-kitchen.scss
-- app/assets/stylesheets/widgets/sidebar-widgets/_icook-video.scss
-- app/assets/stylesheets/widgets/sidebar-widgets/_popular-recipe-lists.scss
-- app/assets/stylesheets/widgets/sidebar-widgets/_popular-recipes.scss
-- app/assets/stylesheets/widgets/sidebar-widgets/_popular-search.scss
-- app/assets/stylesheets/widgets/sidebar-widgets/_recipes-collect.scss
-- app/assets/stylesheets/widgets/sidebar-widgets/_sidebar-widget.scss
-- app/assets/stylesheets/widgets/tv/_tv-more-recipes.scss
-- app/assets/stylesheets/widgets/tv/_tv-popular-tags.scss
-- app/assets/stylesheets/widgets/users/_fav-list.scss
-- app/assets/stylesheets/widgets/users/_user-stats.scss
 - bin/console
 - bin/setup
 - config/initializers/assets.rb

data/app/assets/pages/atomic.md

@@ -1,56 +0,0 @@
----
-hologram: true
-title: Atomic design
-name: 2_atomic
-category: Atomic design
----
-
-> Here to briefly describe about Atomic Design for management of our systems.
-
-## DRY is important
-
-It's very important to know that design systems allow us to build through a recureent process that we can use across projects. And alse they can be customized to fit specific needs.
-
-We use he concept of Atomic design for better managing, sorting and maintenance, make the things to be re-useful, scalable and modular as well.
-
-Keep DRY! Don't Repeat Yourself.
-
-## What is Atomic design
-
-Atomic design is a methodology for creating design systems. There are five distinct levels describe from general to the specific of whole designing elements in our design flow. Below shows you each stage in more detail. (following source from: [Atomic WebDesign](http://bradfrost.com/blog/post/atomic-web-design/))
-
-<br/>
-
-#### Atoms
-
-Atoms are the basic building blocks of matter. they are **HTML tags**, such as a label, an input or a button in our web interfaces.
-
-<br/>
-
-#### Molecules
-
-Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. For example, a form label, input or button aren't too useful by themselves, but combine them together as a form element and now they can actually do something together.
-
-<br/>
-
-#### Organisms
-
-Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. For example, a form label, input or button aren't too useful by themselves, but combine them together as a form element and now they can actually do something together.
-
-<br/>
-
-#### Templates
-
-At this stage, Templates consist mostly of groups of organisms stitched together to form pages. it's here where we start to see the design coming together and start seeing things like layout in action.
-
-Yes, you can see this is where clients start seeing the final design in place as HTML wireframe.
-
-<br/>
-
-#### Pages
-
-Pages are specific instances of templates.( placeholder contents are set ex. image...) and accurate depiction of what a user will ultimately see. They are also the place to test variations in templates...(what a headline containing 40 characters looks like...etc.), they are the templates given context.
-
-<br/>
-
-references from: [Atomic Web Design](http://bradfrost.com/blog/post/atomic-web-design/)

data/app/assets/stylesheets/_basic.scss

@@ -1,22 +0,0 @@
-//
-// Default global definitons
-//
-// --------------------------------
-// default body styles
-// --------------------------------
-body {
-  font-family: $font-family;
-  letter-spacing: $letter-spacing;
-}
-
-::selection {
-  color: #564e42;
-  background: #e3d6cc;
-}
-
-.inner-block {
-  background-color: #fff;
-  border: 1px solid #ebe5e1;
-  margin-bottom: 10px;
-  padding: 20px 15px;
-}

data/app/assets/stylesheets/_global.scss

@@ -1,40 +0,0 @@
-// ----------------------------
-// Global
-// ----------------------------
-
-/*doc
----
-title: Global
-name: 1_global
-category: Design elements
----
-
-Fonts, Colors, Animations these can be used in multi sites.
-
-### Fonts
-
-Currently we're using
-`"Helvetica Neue", "Microsoft Jhenghei", Helvetica, Arial, Geneva, sans-serif` as our default body font sets, and with default `letter-spacing: 0.06em;` .
-
-[Normal] Cooking is a happiness thing, sharing recipes is that to share happiness to more people.<br/>
-[一般] 料理是一件幸福的事，分享食譜則是分享幸福給更多的人。
-
-**[Bold] Cooking is a happiness thing, share recipes is that to share happiness to more people.<br/>
-[粗體] 料理是一件幸福的事，分享食譜則是分享幸福給更多的人。**
-
-*[Italic] Cooking is a happiness thing, share recipes is that to share happiness to more people.<br/>
-[斜體] 料理是一件幸福的事，分享食譜則是分享幸福給更多的人。*
-<hr/>
-
-
-### Animations
-
-in tv/index - hover state of tv series-nav
-
-<div class="ic-animation clearfix">
-  <p>Ease-in-out - Duraion: 0.5s, Ease-in-out (Hover to see effect)</p>
-  <div class="ease-in-block pull-left">Hover over me</div>
-</div>
-
-*/
-

data/app/assets/stylesheets/_images.scss

@@ -1,125 +0,0 @@
-// ----------------------------
-// Images
-// ----------------------------
-
-/*doc
----
-title: Images
-name: 8_images
-category: Design elements
----
-
-Logo, feature image, card image, covers, avatar, etc.
-
-### Logo
-
-<div class="row">
-  <div class="col-xs-6 col-md-3">
-    <p>header</p>
-    <img width="75" src="/images/icook-logo.svg" alt="Icook logo">
-  </div>
-  <div class="col-xs-6 col-md-4">
-    <p>footer</p>
-    <img width="130" class="logo-2x" src="/images/logo-2x.png" alt="Logo 2x">
-  </div>
-</div>
-
-<hr />
-### Feature image
-<p>recipes/index</p>
-
-<div>
-  <img width="560" height="240" class="img-responsive" src="http://placehold.it/560x240" alt="560x240">
-</div>
-
-<hr/>
-### Card image
-
-<div class="row card-img">
-  <div class="col-xs-12 col-md-3">
-    <small>recipe-card #list card</small>
-    <img width="200" height="150" class="img-responsive" src="http://placehold.it/200x150" alt="200x150">
-    <small class="help">//for 160x120(layout)</small>
-  </div>
-  <div class="col-xs-12 col-md-4">
-    <small>recipe-card #photo card</small>
-    <img width="400" height="300" class="img-responsive" src="http://placehold.it/400x300" alt="400x300">
-    <small class="help">//for 172x129(layout)</small>
-  </div>
-  <div class="col-xs-12 col-md-4">
-    <small>dish-card</small>
-    <img width="150" height="150" class="img-responsive" src="http://placehold.it/150" alt="150">
-  </div>
-</div>
-
-<hr/>
-### Cover
-
-<div class="row ic-cover">
-  <div class="col-xs-12 col-md-4">
-    <small>recipe cover &nbsp;&nbsp;# recipes/show</small>
-    <img width="800" height="600" class="img-responsive" src="http://placehold.it/800x600" alt="800x600">
-    <small class="help">//for 480x360(layout)</small>
-  </div>
-  <div class="col-xs-12 col-md-4">
-    <small>categories cover &nbsp;&nbsp;# categories/show</small>
-    <img width="800" height="600" class="img-responsive" src="http://placehold.it/800x167" alt="800x167">
-    <small class="help">//for 718x150(layout)</small>
-  </div>
-  <div class="col-xs-12 col-md-4">
-    <small>brand cover &nbsp;&nbsp;# brands/recipes</small>
-    <img width="1140" height="300" class="img-responsive" src="http://placehold.it/1140x300" alt="1140x300">
-  </div>
-</div>
-
-<hr/>
-### Avatar
-
-<div class="row ic-avatar">
-  <div class="col-xs-12 col-md-3">
-    <small>user</small>
-    <img width="80" height="80" class="img-circle" src="http://placehold.it/80" alt="80">
-  </div>
-  <div class="col-xs-12 col-md-3">
-    <small>comment</small>
-    <img width="55" height="55" class="img-circle" src="http://placehold.it/55" alt="55">
-    <small class="help">//tv comment</small>
-  </div>
-  <div class="col-xs-12 col-md-3">
-    <small>brand avatar</small>
-    <img width="200" height="198" class="img-responsive" src="http://placehold.it/200x198" alt="200x198">
-    <small class="help">//for 96x96(layout)</small>
-  </div>
-  <div class="col-xs-12 col-md-3">
-    <small>dish comment</small>
-    <img width="182" height="182" class="img-responsive" src="http://placehold.it/182" alt="182">
-    <small class="help">//for 40x40(layout)</small>
-  </div>
-</div>
-
-<hr/>
-### Market
-<p>images used in Market</p>
-<div class="row">
-  <div class="col-xs-12 col-md-3">
-    <p>list cover - index</p>
-    <img width="640" height="480" class="img-responsive" src="http://placehold.it/640x480" alt="640x480">
-    <small class="help">//for 263x197(layout)</small>
-  </div>
-  <div class="col-xs-12 col-md-3">
-    <p>Main cover - Jumbotron</p>
-    <img width="800" height="600" class="img-responsive" src="http://placehold.it/800x600" alt="800x600">
-    <small class="help">//for 653x489(layout)</small>
-  </div>
-  <div class="col-xs-12 col-md-3">
-    <p>Brand logo - Jumbotron</p>
-    <img width="280" height="80" class="img-responsive" src="http://placehold.it/280x80" alt="280x80">
-  </div>
-  <div class="col-xs-12 col-md-3">
-    <p>SKU</p>
-    <img width="800" height="581" class="img-responsive" src="http://placehold.it/800x581" alt="800x581">
-    <small class="help">//for 120x90(layout)</small>
-  </div>
-</div>
-
-*/