[NEW] Feature: Clean article with a determinate markup

GruntFile.coffee

@@ -34,6 +34,7 @@ module.exports = (grunt) ->
         'src/modules/Lungo.Router.coffee',
         'src/modules/Lungo.Aside.coffee',
         'src/modules/Lungo.Section.coffee',
+        'src/modules/Lungo.Article.coffee',
         'src/boot/*.coffee',
         'src/element/*.coffee']
       javascripts: [
@@ -80,7 +81,9 @@ module.exports = (grunt) ->
 
     watch:
       files: ['<%= resources.core %>', '<%= resources.modules %>', '<%= resources.stylesheets %>', '<%= resources.theme %>']
-      tasks: ["coffee", "uglify", "stylus:stylesheets", "stylus:theme"]
+      # tasks: ["coffee", "uglify", "stylus:stylesheets", "stylus:theme"]
+      tasks: ["coffee", "uglify"]
+      # tasks: ["stylus:stylesheets", "stylus:theme"]
 
   grunt.loadNpmTasks "grunt-contrib-coffee"
   grunt.loadNpmTasks "grunt-contrib-uglify"

example/app/sections/layout.html

@@ -12,14 +12,39 @@
         <a href="#" data-view-article="layout-art4" data-label="Settings"></a>
     </nav>
 
-    <article id="layout-art1" class="active"></article>
-    <article id="layout-art2"></article>
-    <article id="layout-art3"></article>
-    <article id="layout-art4"></article>
+    <article id="layout-art1"><div class="empty">
+            <span class="icon user"></span>
+            <strong>Profile Empty</strong>
+            <small>When you back a project or follow a friend, their activity will show up here.</small>
+            <button class="anchor" data-label="Please update..."></button>
+        </div>
+
+    </article>
+    <article id="layout-art2">
+        <div class="empty">
+            <span class="icon inbox"></span>
+            <strong>Inbox Empty</strong>
+            <small>When you back a project or follow a friend, their activity will show up here.</small>
+        </div>
+    </article>
+    <article id="layout-art3">
+        <div class="empty">
+            <span class="icon comments"></span>
+            <strong>Comments Empty</strong>
+            <small>When you back a project or follow a friend, their activity will show up here.</small>
+        </div>
+    </article>
+    <article id="layout-art4">
+        <div class="empty">
+            <span class="icon cog"></span>
+            <strong>Settings Empty</strong>
+            <small>When you back a project or follow a friend, their activity will show up here.</small>
+        </div>
+    </article>
 
     <footer>
         <nav>
-            <a href="#" data-view-article="layout-art1" data-icon="home" class="active"></a>
+            <a href="#" data-view-article="layout-art1" data-icon="user" class="active"></a>
             <a href="#" data-view-article="layout-art2" data-icon="inbox" data-count="80"></a>
             <a href="#" data-view-article="layout-art3" data-icon="comments"></a>
             <a href="#" data-view-article="layout-art4" data-icon="cog"></a>

src/modules/Lungo.Article.coffee

@@ -0,0 +1,33 @@
+###
+Initialize the <articles> layout of a certain <section>
+
+@namespace Lungo
+@class Article
+
+@author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+###
+
+Lungo.Article = do(lng = Lungo) ->
+  C = lng.Constants
+
+  ###
+  Clean the content of a particular article with a specific markup
+  @method clean
+  @param  {string} Article ID
+  @param  {string} Icon
+  @param  {string} Title
+  @param  {string} Description [OPTIONAL]
+  @param  {string} Button label [OPTIONAL]
+  ###
+  clean = (id, icon, title, description = "", button = null) ->
+    if el = lng.dom "#{C.ELEMENT.ARTICLE}##{id}"
+      markup = ""
+      if icon? then markup = """<div class="empty">
+                                  <span class="icon #{icon}"></span>
+                                  <strong>#{title}</strong>
+                                  <small>#{description}</small>
+                                </div>"""
+      el.html markup
+      if button then el.children().append "<button class='anchor'><abbr>#{button}</abbr></button>"
+
+  clean: clean

src/stylesheets/lungo.widget.styl

@@ -68,7 +68,6 @@
     -webkit-transform: translate3d(0, 0, 0)
 
 
-
 /* ================================  TEXT  ================================ */
 .text
   &.thin
@@ -159,6 +158,7 @@ size = 5px
     left: 1px
     font-size: FONT_SIZE_TINY
 
+
 /* ================================  CAROUSEL  ================================ */
 [data-control=carousel]
   overflow: hidden
@@ -183,3 +183,23 @@ body > section > article.splash
     left: 0px
     font-size: FONT_SIZE_TINY
     padding: 0px
+
+/* ================================  MESSAGE  ================================ */
+body > section > article > .empty
+  text-align: center
+  width: 256px
+  display: block
+  margin: 0 auto
+  padding-top: 15%
+  & > *
+    display: block
+    margin-bottom: 3%
+  & > .icon
+    font-size: S = 120px
+    line-height: S
+  & > strong
+    font-weight: 700
+    font-size: FONT_SIZE_LARGE
+  & > small
+    font-weight: 600
+    margin-bottom: 5%

src/stylesheets/theme/theme.widget.styl

@@ -12,14 +12,23 @@
 [data-control="pull"]
     text-shadow: 0 1px 0 #fff
 
-/* -------------------------- TAG -------------------------- */
+/* =================================  TAG  ================================= */
 .tag:not(.icon)
   color: #fff
   border-radius BORDER_radius
   font-weight: 700 !important
   &.count
-    background-color: THEME
+    background-color: COLOR_theme
   header .count
-    background-color: THEME-dark !important
+    background-color: COLOR_theme-dark !important
   footer &
     box-shadow inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5)
+
+/* ===============================  MESSAGE  =============================== */
+body > section > article > .empty
+  & > .icon, > small
+    color: darken(BACKGROUND, 20%)
+    text-shadow: 0 1px 0 lighten(BACKGROUND, 90%)
+  & > strong
+    color: darken(BACKGROUND, 40%)
+    text-shadow: 0 2px 0 lighten(BACKGROUND, 90%)