Merge pull request #143 from kabisa/feature/basic-css-structure

Use CSS directory structure and flexbox-based CSS for example app

project_template/.scss-lint.yml

@@ -15,3 +15,5 @@ linters:
   PropertySpelling:
     extra_properties:
       - text-size-adjust
+  Indentation:
+    width: 4

project_template/app/modules/home/home_app.coffee

@@ -16,4 +16,3 @@ class HomeRouter extends Marionette.AppRouter
 
 app.on 'start', ->
   new HomeRouter
-

project_template/app/modules/home/templates/detail.hamlc

@@ -1,5 +1,8 @@
-.header
-  %a{href:'#/', class:'btn left', 'data-rel': 'back'}
-  = 'Detail'
+%header.app-header
+    %a.app-header-back{href:'#/', 'data-rel': 'back'}
+    %h1= 'Detail'
 
-.body
+
+%main.app-content
+    %p
+        This is the detail page

project_template/app/modules/home/templates/index.hamlc

@@ -1,15 +1,19 @@
-.header= '##APP_NAME##'
+%header.app-header
+    %h1= '##APP_NAME##'
 
-.body
-  %p.welcome{style: 'margin-top: 0'}= @t('hello')
+%main.app-content
+    %p= @t('hello')
 
-  %p
-    %strong Some example transitions:
+    %p
+        %strong Some example transitions:
 
-  %ul.listview
-    %li
-      %a{href: '#/detail', 'data-transition': 'slide'}= 'Slide'
-    %li
-      %a{href: '#/detail', 'data-transition': 'slideup'}= 'Slide up'
-    %li
-      %a{href: '#/detail', 'data-transition': 'flip'}= 'Flip'
+    %ul.navigation-list
+        %li
+            %a{href: '#/detail', 'data-transition': 'slide'}
+                %span= 'Slide'
+        %li
+            %a{href: '#/detail', 'data-transition': 'slideup'}
+                %span= 'Slide up'
+        %li
+            %a{href: '#/detail', 'data-transition': 'flip'}
+                %span= 'Flip'

project_template/app/modules/home/views/index_page.coffee

@@ -6,10 +6,9 @@ class IndexPage extends ApplicationPage
   template: template
 
   events:
-    'click': (e) ->
-      e.preventDefault()
-      target = $(e.target)
-
+    'click a[data-transition]': (e) ->
+      target = $(e.currentTarget)
       @navigate(target.attr('href'), transition: target.data('transition'))
+      return false
 
 module.exports = IndexPage

project_template/app/styles/application.scss

@@ -1,127 +1,57 @@
-@import 'normalize';
-@import 'maji/screen_transitions';
-@import 'fonts/icons';
-@import 'variables';
-@import 'forms';
-@import 'platforms/ios';
-
 @charset 'utf-8';
 
-html, body {
-  margin: 0;
-  padding: 0;
-  // use native font stack
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
-  text-size-adjust: 100%;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  user-select: none;
-}
-
-a, a:active, a:hover, a:visited {
-  text-decoration: none;
-  color: $color-link;
-}
-
-#maji-app {
-  position: relative;
-}
-
-.page {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0px;
-  top: 0px;
-
-  z-index: 2;
-  background: $color-page-background;
-
-  &.animated .header, &.slideout {
-    position: absolute;
-  }
-}
-
-.header {
-  left: 0;
-  right: 0;
-  position: absolute;
-  z-index: 1000;
-
-  margin: 0;
-  height: 30px;
-  line-height: 30px;
-
-  padding: 10px;
-  background: $color-header-bg;
-
-  text-align: center;
-  color: $color-header-text;
-  font-size: 1.2em;
-
-  .btn {
-    position: absolute;
-    top: 0px;
-
-    color: $color-header-text;
-    font-size: 0.8em;
-
-    &[data-rel=back] {
-      @include icon(back);
-      margin-left: -10px;
-
-      // scss-lint:disable NestingDepth
-      &:before { float: left; }
-    }
-
-    &.left {
-      left: 5px;
-    }
-
-    &.right {
-      right: 5px;
-    }
-  }
-}
-
-.body {
-  padding: 65px 15px 15px;
-  box-sizing: border-box;
-}
-
-.btn {
-  display: inline-block;
-  padding: 10px;
-}
-
-.listview {
-  list-style-type: none;
-  padding: 0;
-
-  margin: -15px;
-
-  li {
-    @include icon(back, after);
-
-    position: relative;
-    padding: 10px 15px;
-
-    border-bottom: 1px solid $color-listview-li-border;
-
-    &:after {
-      font-size: 12px;
-      position: absolute;
-      top: 50%;
-      right: 10px;
-      margin-top: -6px;
-      transform: rotate(180deg);
-    }
-
-    a {
-      display: block;
-      margin: -10px -15px;
-      padding: 10px 15px;
+///////////////////////////////////////////////////////////
+//
+// Use Maji's app-like screen transitions
+//
+///////////////////////////////////////////////////////////
+@import 'maji/screen_transitions';
+@import 'fonts/icons';
 
-      -webkit-tap-highlight-color: rgba(130, 130, 130, 0.2);
-    }
-  }
-}
+///////////////////////////////////////////////////////////
+//
+// Global settings for the project
+//
+///////////////////////////////////////////////////////////
+@import 'settings/general';
+@import 'settings/colors';
+@import 'settings/typography';
+
+///////////////////////////////////////////////////////////
+//
+// Globally available tooling
+//
+///////////////////////////////////////////////////////////
+@import 'tools/mixins';
+
+///////////////////////////////////////////////////////////
+//
+// High-level styles
+//
+///////////////////////////////////////////////////////////
+@import 'generic/reset';
+@import 'generic/box-sizing';
+
+///////////////////////////////////////////////////////////
+//
+// Bare, unclassed Elements
+//
+///////////////////////////////////////////////////////////
+@import 'elements/base';
+
+///////////////////////////////////////////////////////////
+//
+// Basic building blocks of the layout
+//
+///////////////////////////////////////////////////////////
+@import 'objects/media-object';
+
+///////////////////////////////////////////////////////////
+//
+// UI components
+//
+///////////////////////////////////////////////////////////
+@import 'components/page';
+@import 'components/header';
+@import 'components/content';
+@import 'components/navigation-list';

project_template/app/styles/components/_content.scss

@@ -0,0 +1,13 @@
+///////////////////////////////////////////////////////////
+//
+// Main content for your application
+//
+///////////////////////////////////////////////////////////
+.app-content {
+    background: $page-background;
+    color: $text-color;
+
+    overflow-y: auto;
+    flex: 1;
+    padding: $page-padding;
+}

project_template/app/styles/components/_header.scss

@@ -0,0 +1,50 @@
+///////////////////////////////////////////////////////////
+//
+// Header for your application
+//
+///////////////////////////////////////////////////////////
+.app-header {
+    background: $header-background;
+    color: $header-text;
+    height: $header-height;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    // Make room for iOS bar
+    .platform-ios & {
+        height: calc(#{$header-height} + #{$header-ios-offset});
+        padding-top: $header-ios-offset;
+    }
+
+    a,
+    h1 {
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    a {
+        width: $header-button-width;
+    }
+
+    h1 {
+        flex: 1;
+
+        &:first-child {
+            // Compensate for no button on the left side
+            margin-left: $header-button-width;
+        }
+
+        &:last-child {
+            // Compensate for no button on the right side
+            margin-right: $header-button-width;
+        }
+    }
+}
+
+.app-header-back {
+    @include icon(back);
+}

project_template/app/styles/components/_navigation-list.scss

@@ -0,0 +1,33 @@
+///////////////////////////////////////////////////////////
+//
+// List of clickable links
+//
+///////////////////////////////////////////////////////////
+.navigation-list {
+    li {
+        margin-left: -$page-padding;
+        margin-right: -$page-padding;
+        border-bottom: 1px solid $navigation-list-border;
+
+        &:first-child {
+            border-top: 1px solid $navigation-list-border;
+        }
+    }
+
+    a {
+        @include icon(forward, after);
+
+        height: $navigation-list-height;
+        padding: 0 $page-padding;
+        display: flex;
+        align-items: center;
+
+        span {
+            flex: 1;
+        }
+
+        &::after {
+            color: $navigation-list-chevron;
+        }
+    }
+}