From 9a7c405a1035d6134f61fd9d8ccac801096ea153 Mon Sep 17 00:00:00 2001 From: Shajed Evan Date: Sun, 19 Apr 2015 18:05:39 +0600 Subject: [PATCH] Fixing dependencies --- Gruntfile.js | 2 - README.md | 2 +- app/css/app.css | 169 +-------------------- app/dev/css/app.css | 169 +-------------------- app/dev/index.html | 61 ++++---- app/dev/js/min/app.min.js | 2 +- app/dev/js/min/plugins.min.js | 2 +- app/js/min/app.min.js | 2 +- app/js/min/plugins.min.js | 2 +- app/scss/app.scss | 5 +- app/scss/app/widgets/_widget-ad.scss | 112 -------------- app/scss/app/widgets/_widget-articles.scss | 12 ++ app/scss/app/widgets/_widget-logo.scss | 13 -- app/scss/app/widgets/_widget-media.scss | 20 --- app/scss/app/widgets/_widget-teaser.scss | 84 ---------- app/scss/app/widgets/_widgets.scss | 1 + app/templates/_includes/howto.html | 33 ++++ app/templates/_layouts/default.html | 22 --- app/templates/_layouts/icon-page.html | 22 --- app/templates/_layouts/post.html | 9 -- app/templates/index.html | 46 +----- bower.json | 2 +- package.json | 8 +- 23 files changed, 103 insertions(+), 697 deletions(-) delete mode 100644 app/scss/app/widgets/_widget-ad.scss create mode 100644 app/scss/app/widgets/_widget-articles.scss delete mode 100644 app/scss/app/widgets/_widget-logo.scss delete mode 100644 app/scss/app/widgets/_widget-media.scss delete mode 100644 app/scss/app/widgets/_widget-teaser.scss create mode 100644 app/templates/_includes/howto.html delete mode 100644 app/templates/_layouts/default.html delete mode 100644 app/templates/_layouts/icon-page.html delete mode 100644 app/templates/_layouts/post.html diff --git a/Gruntfile.js b/Gruntfile.js index c49d8e1..a803104 100755 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -7,8 +7,6 @@ module.exports = function (grunt) { var CODEBASE_STATIC_PATH = "webapp/"; var CODEBASE_SKIN_PATH = CODEBASE_STATIC_PATH; - var gulp = require('gulp'), - styleguide = require('sc5-styleguide'); // ## Initialing Grunt Configuration // `grunt.initConfig()` Initializes all the tasks diff --git a/README.md b/README.md index 59a3a63..c4f9a78 100644 --- a/README.md +++ b/README.md @@ -53,7 +53,7 @@ Resources used in this project gives Front-End developers a common platform to k * Uglify * CssLint * **ImageMin** (Minify Images using [**grunt-contrib-imagemin**](https://npmjs.org/package/grunt-contrib-imagemin)) - * LiveReload and Watch for changes and reload browser automatically. + * LiveReload Watch for changes and reload browser automatically. ## [How to use](id:howto)? Make sure you have [**Node.js**](http://nodejs.org/download/) installed. diff --git a/app/css/app.css b/app/css/app.css index 4765657..661c09d 100644 --- a/app/css/app.css +++ b/app/css/app.css @@ -697,171 +697,14 @@ em{ font-size:1em; } -/* line 1, ../scss/app/widgets/_widget-logo.scss */ -.brand-desktop{ - margin-top:10px; -} -/* line 3, ../scss/app/widgets/_widget-logo.scss */ -.brand-desktop .brand{ - background:url('../img/logo.png') no-repeat; background-size:cover; background-position:center; display:block; overflow:hidden; text-indent:101%; white-space:nowrap; width:217px; height:118px; -} - -/* line 2, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad img{ - width:100%; -} -/* line 7, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad iframe div{ - width:284px; -} -/* line 15, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad .forum-list img{ - width:100%; -} -/* line 22, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad .publication{ - width:33.33%; float:left; padding:5px; -} -/* line 29, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad .rssHeadline .header{ - background:url(http://www.hegnar.no/gfx/lederkunnskap_logo.png) no-repeat; background-size:contain; width:284px; height:22px; -} -/* line 36, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad .rssHeadline div.content{ - background-color:#EEF1F3; -} -/* line 38, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad .rssHeadline div.content ul{ - margin:0 0 10px 0; list-style:none; padding:10px 15px; -} -/* line 42, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad .rssHeadline div.content ul li{ - border-bottom:1px solid #95A5A6; padding-bottom:10px; -} -/* line 45, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad .rssHeadline div.content ul li:last-child{ - border-bottom:0; -} -/* line 49, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad .rssHeadline div.content ul li a{ - color:#2C3E50; -} - -/* line 63, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad.header-chart{ - margin-top:10px; -} -/* line 65, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad.header-chart .x144x144{ - margin-top:10px; -} -/* line 67, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad.header-chart .x144x144 .column-1,.widget-ad.header-chart .x144x144 .column-2{ - display:inline-block; -} -/* line 72, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad.header-chart .x144x144 .column-2{ - float:right; -} -/* line 75, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad.header-chart .x144x144 .column-2 form input[type='text']{ - width:80px; -} -/* line 78, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad.header-chart .x144x144 .column-2 form input[type=submit]{ - background-color:white; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border:1px solid #CCC; font-size:12px; -} - -/* line 91, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad.header-table-chart{ - margin-top:18px; -} -/* line 93, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad.header-table-chart ul{ - margin:0; -} - -/* line 99, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad .time-chart{ - margin-left:-24px; margin-top:10px; -} -/* line 103, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad .time-chart .column-2 a{ - text-align:center; font-size:0.625rem; display:block; -} - -/* line 1, ../scss/app/widgets/_widget-teaser.scss */ -.teaser-single-item{ - -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; padding:10px 10px 10px; background-color:#ECF8FF; background-color:#F3F9FA; background-image:-webkit-linear-gradient(#F3F9FA, #ECF8FF); background-image:linear-gradient(#F3F9FA, #ECF8FF); border:1px solid #CFEAFA; -} - -/* line 16, ../scss/app/widgets/_widget-teaser.scss */ -.teaser .teaser-head{ - position:relative; display:block; -} -/* line 19, ../scss/app/widgets/_widget-teaser.scss */ -.teaser .teaser-head .title-meta-section{ - float:left; -} -/* line 23, ../scss/app/widgets/_widget-teaser.scss */ -.teaser .teaser-head .teaser-time{ - display:inline-block; position:absolute; right:0; -} -/* line 30, ../scss/app/widgets/_widget-teaser.scss */ -.teaser .title-meta-section{ - font-size:0.875rem; margin-bottom:0.625em; -} -/* line 33, ../scss/app/widgets/_widget-teaser.scss */ -.teaser .title-meta-section a{ - color:#444; -} -/* line 35, ../scss/app/widgets/_widget-teaser.scss */ -.teaser .title-meta-section a:hover{ - color:black; -} -/* line 38, ../scss/app/widgets/_widget-teaser.scss */ -.teaser .title-meta-section a:before{ - content:''; width:5px; height:12px; background-color:#F56363; display:inline-block; margin-right:6px; -} -/* line 50, ../scss/app/widgets/_widget-teaser.scss */ -.teaser .title{ - font-size:1.875rem; -} -/* line 54, ../scss/app/widgets/_widget-teaser.scss */ -.teaser .title-mid{ - font-size:1.5rem; -} -/* line 59, ../scss/app/widgets/_widget-teaser.scss */ -.teaser .title-small{ - font-size:1.25rem; line-height:1.2; -} -/* line 64, ../scss/app/widgets/_widget-teaser.scss */ -.teaser .teaser-time{ - font-style:italic; margin-bottom:10px; display:block; color:#7F8C8D; -} -/* line 71, ../scss/app/widgets/_widget-teaser.scss */ -.teaser .teaser-leadtext{ - font-size:0.875rem; -} - -/* line 78, ../scss/app/widgets/_widget-teaser.scss */ -.teaser-section{ - margin:1.25em 0; display:block; overflow:hidden; -} - -/* line 2, ../scss/app/widgets/_widget-media.scss */ -.media .media-heading{ - font-size:0.6em; -} - -/* line 9, ../scss/app/widgets/_widget-media.scss */ -.media-lists-two:nth-child(2n+1){ - clear:left; +/* line 1, ../scss/app/widgets/_widget-articles.scss */ +.widget{ + margin-bottom:2em; } -/* line 16, ../scss/app/widgets/_widget-media.scss */ -.media-lists-three:nth-child(3n+1){ - clear:left; +/* line 7, ../scss/app/widgets/_widget-articles.scss */ +.article-section pre{ + padding:1em; margin:1em 0; } /* line 1, ../scss/app/components/_menu.scss */ diff --git a/app/dev/css/app.css b/app/dev/css/app.css index 4765657..661c09d 100644 --- a/app/dev/css/app.css +++ b/app/dev/css/app.css @@ -697,171 +697,14 @@ em{ font-size:1em; } -/* line 1, ../scss/app/widgets/_widget-logo.scss */ -.brand-desktop{ - margin-top:10px; -} -/* line 3, ../scss/app/widgets/_widget-logo.scss */ -.brand-desktop .brand{ - background:url('../img/logo.png') no-repeat; background-size:cover; background-position:center; display:block; overflow:hidden; text-indent:101%; white-space:nowrap; width:217px; height:118px; -} - -/* line 2, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad img{ - width:100%; -} -/* line 7, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad iframe div{ - width:284px; -} -/* line 15, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad .forum-list img{ - width:100%; -} -/* line 22, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad .publication{ - width:33.33%; float:left; padding:5px; -} -/* line 29, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad .rssHeadline .header{ - background:url(http://www.hegnar.no/gfx/lederkunnskap_logo.png) no-repeat; background-size:contain; width:284px; height:22px; -} -/* line 36, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad .rssHeadline div.content{ - background-color:#EEF1F3; -} -/* line 38, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad .rssHeadline div.content ul{ - margin:0 0 10px 0; list-style:none; padding:10px 15px; -} -/* line 42, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad .rssHeadline div.content ul li{ - border-bottom:1px solid #95A5A6; padding-bottom:10px; -} -/* line 45, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad .rssHeadline div.content ul li:last-child{ - border-bottom:0; -} -/* line 49, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad .rssHeadline div.content ul li a{ - color:#2C3E50; -} - -/* line 63, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad.header-chart{ - margin-top:10px; -} -/* line 65, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad.header-chart .x144x144{ - margin-top:10px; -} -/* line 67, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad.header-chart .x144x144 .column-1,.widget-ad.header-chart .x144x144 .column-2{ - display:inline-block; -} -/* line 72, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad.header-chart .x144x144 .column-2{ - float:right; -} -/* line 75, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad.header-chart .x144x144 .column-2 form input[type='text']{ - width:80px; -} -/* line 78, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad.header-chart .x144x144 .column-2 form input[type=submit]{ - background-color:white; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border:1px solid #CCC; font-size:12px; -} - -/* line 91, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad.header-table-chart{ - margin-top:18px; -} -/* line 93, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad.header-table-chart ul{ - margin:0; -} - -/* line 99, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad .time-chart{ - margin-left:-24px; margin-top:10px; -} -/* line 103, ../scss/app/widgets/_widget-ad.scss */ -.widget-ad .time-chart .column-2 a{ - text-align:center; font-size:0.625rem; display:block; -} - -/* line 1, ../scss/app/widgets/_widget-teaser.scss */ -.teaser-single-item{ - -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; padding:10px 10px 10px; background-color:#ECF8FF; background-color:#F3F9FA; background-image:-webkit-linear-gradient(#F3F9FA, #ECF8FF); background-image:linear-gradient(#F3F9FA, #ECF8FF); border:1px solid #CFEAFA; -} - -/* line 16, ../scss/app/widgets/_widget-teaser.scss */ -.teaser .teaser-head{ - position:relative; display:block; -} -/* line 19, ../scss/app/widgets/_widget-teaser.scss */ -.teaser .teaser-head .title-meta-section{ - float:left; -} -/* line 23, ../scss/app/widgets/_widget-teaser.scss */ -.teaser .teaser-head .teaser-time{ - display:inline-block; position:absolute; right:0; -} -/* line 30, ../scss/app/widgets/_widget-teaser.scss */ -.teaser .title-meta-section{ - font-size:0.875rem; margin-bottom:0.625em; -} -/* line 33, ../scss/app/widgets/_widget-teaser.scss */ -.teaser .title-meta-section a{ - color:#444; -} -/* line 35, ../scss/app/widgets/_widget-teaser.scss */ -.teaser .title-meta-section a:hover{ - color:black; -} -/* line 38, ../scss/app/widgets/_widget-teaser.scss */ -.teaser .title-meta-section a:before{ - content:''; width:5px; height:12px; background-color:#F56363; display:inline-block; margin-right:6px; -} -/* line 50, ../scss/app/widgets/_widget-teaser.scss */ -.teaser .title{ - font-size:1.875rem; -} -/* line 54, ../scss/app/widgets/_widget-teaser.scss */ -.teaser .title-mid{ - font-size:1.5rem; -} -/* line 59, ../scss/app/widgets/_widget-teaser.scss */ -.teaser .title-small{ - font-size:1.25rem; line-height:1.2; -} -/* line 64, ../scss/app/widgets/_widget-teaser.scss */ -.teaser .teaser-time{ - font-style:italic; margin-bottom:10px; display:block; color:#7F8C8D; -} -/* line 71, ../scss/app/widgets/_widget-teaser.scss */ -.teaser .teaser-leadtext{ - font-size:0.875rem; -} - -/* line 78, ../scss/app/widgets/_widget-teaser.scss */ -.teaser-section{ - margin:1.25em 0; display:block; overflow:hidden; -} - -/* line 2, ../scss/app/widgets/_widget-media.scss */ -.media .media-heading{ - font-size:0.6em; -} - -/* line 9, ../scss/app/widgets/_widget-media.scss */ -.media-lists-two:nth-child(2n+1){ - clear:left; +/* line 1, ../scss/app/widgets/_widget-articles.scss */ +.widget{ + margin-bottom:2em; } -/* line 16, ../scss/app/widgets/_widget-media.scss */ -.media-lists-three:nth-child(3n+1){ - clear:left; +/* line 7, ../scss/app/widgets/_widget-articles.scss */ +.article-section pre{ + padding:1em; margin:1em 0; } /* line 1, ../scss/app/components/_menu.scss */ diff --git a/app/dev/index.html b/app/dev/index.html index 0142e22..012e6ab 100644 --- a/app/dev/index.html +++ b/app/dev/index.html @@ -103,7 +103,7 @@

A practical workflow for effective, rap
-
+

Built for rapid development.

Front-End developers deal with so many different tasks to deliver a perfect UI front usable for it's users and obviously the browsers. On any new project we face a common problem - setting up a good development platform.

@@ -113,7 +113,7 @@

Built for rapid developm

-
+

Features.

Front-End Workflow package comes up with features that helps you to be more productive yet efficient! Below you will find the dependencies included in this package.

@@ -161,45 +161,42 @@

Resources

-

How to use?

-

Make sure you have Node.js installed.

-

Open your terminal and clone Front-End-Workflow repository.

+
+

How to use?

+

Make sure you have Node.js installed.

+

Open your terminal and clone Front-End-Workflow repository.

-

git clone https://github.com/themestent/front-end-workflow.git

+

git clone https://github.com/themestent/front-end-workflow.git

-

You can also use GUI tools for Mac or Windows. You will need to use terminal anyway! Better get used to it!!

+

You can also use GUI tools for Mac or Windows. You will need to use terminal anyway! Better get used to it!!

-

When you are done with the cloning get into the directory: - cd front-end-workflow - Now type ls just to have an overview on what you will be working with?

+

When you are done with the cloning get into the directory: + cd front-end-workflow + Now type ls just to have an overview on what you will be working with?

-

You will see two directories called app and doc. We will work on this directory for our front-end development process. doc has been automatically generated which you will be doing so very soon! But First let's try the following line on our terminal: - npm install

+

You will see two directories called app and doc. We will work on this directory for our front-end development process. doc has been automatically generated which you will be doing so very soon! But First let's try the following line on our terminal: + npm install

-

This command will start downloading all the depended libraries and packages defined into package.json file into a newly created node_modules directory. Downloaded packages are only available and works for the current project only.

+

This command will start downloading all the depended libraries and packages defined into package.json file into a newly created node_modules directory. Downloaded packages are only available and works for the current project only.

-

When npm install finished downloading all it's packages you can run following line npm ls to see all the available packages downloaded inside node_modules. That tree view looks amazing right? It holds all types of dependencies we have mentioned on package.json file. Each of those packages has it's own role and certain tasks to process.

+

When npm install finished downloading all it's packages you can run following line npm ls to see all the available packages downloaded inside node_modules. That tree view looks amazing right? It holds all types of dependencies we have mentioned on package.json file. Each of those packages has it's own role and certain tasks to process.

-

Download Front-End Resources

-

Ok now we have all required node modules installed locally for this project and we are ready to download some resources, files that we actually will require for Front-End Development project. In this workflow I will be using Twitter Bootstrap scss files, Bourbon - Sass Mixins Library, Some JavaScript plugins like FitText, FitVids, Echo etc. I want those to download and place those automatically into right directory according file type.

+

Download Front-End Resources

+

Ok now we have all required node modules installed locally for this project and we are ready to download some resources, files that we actually will require for Front-End Development project. In this workflow I will be using Twitter Bootstrap scss files, Bourbon - Sass Mixins Library, Some JavaScript plugins like FitText, FitVids, Echo etc. I want those to download and place those automatically into right directory according file type.

-

We can do this by typing following line on terminal:

-

grunt download

-

If you don't get any unwanted alien like error you will see line like these: - 

Running "bower:install" (bower) task

-          

-          

-          
Installed bower packages
-          Copied packages to /Users/evanshajed/Working Projects/front-end-workflow/app
-          Cleaned bower dir /Users/evanshajed/Working Projects/front-end-workflow/components

-          

-          

-          
Done, without errors.
-

+

We can do this by typing following line on terminal:

+

grunt download

+

If you don't get any unwanted alien like error you will see line like these: +

Running "bower:install" (bower) task
Installed bower packages
+    Copied packages to /Users/evanshajed/Working Projects/front-end-workflow/app
+    Cleaned bower dir /Users/evanshajed/Working Projects/front-end-workflow/components

+
Done, without errors.
-

Get inside app directory and you will see all the files are downloaded and placed to their right destination according to their file type. Then finally you will need to start grunt task to watch and build whenever any changes occurs in files or directories mentioned in Gruntfile.js. To start this task type this line:

-

grunt

-

You will then see several process starts running and waiting for changes. Start your usual development process inside app directory. Just to get used to this workflow start with index.html file. Include some image inside img or make some changes inside scss files. Grunt will generate, concatenate .js files, build scss to css files and reload the browser for you.

+

Get inside app directory and you will see all the files are downloaded and placed to their right destination according to their file type. Then finally you will need to start grunt task to watch and build whenever any changes occurs in files or directories mentioned in Gruntfile.js. To start this task type this line:

+

grunt

+

You will then see several process starts running and waiting for changes. Start your usual development process inside app directory. Just to get used to this workflow start with index.html file. Include some image inside img or make some changes inside scss files. Grunt will generate, concatenate .js files, build scss to css files and reload the browser for you.

+ +
diff --git a/app/dev/js/min/app.min.js b/app/dev/js/min/app.min.js index 49afe01..cc7d047 100644 --- a/app/dev/js/min/app.min.js +++ b/app/dev/js/min/app.min.js @@ -1,2 +1,2 @@ -/*! front-end-workflow 26-03-2015 */ +/*! front-end-workflow 17-04-2015 */ jQuery(function(a){a("#mainTitle").fitText(1.5,{minFontSize:"30px",maxFontSize:"72px"}),a("#subTitle").fitText(1.2,{minFontSize:"24px",maxFontSize:"48px"})}); \ No newline at end of file diff --git a/app/dev/js/min/plugins.min.js b/app/dev/js/min/plugins.min.js index d488b3f..d12d54c 100644 --- a/app/dev/js/min/plugins.min.js +++ b/app/dev/js/min/plugins.min.js @@ -1,2 +1,2 @@ -/*! front-end-workflow 26-03-2015 */ +/*! front-end-workflow 17-04-2015 */ !function(a){a.fn.fitText=function(b,c){var d=b||1,e=a.extend({minFontSize:Number.NEGATIVE_INFINITY,maxFontSize:Number.POSITIVE_INFINITY},c);return this.each(function(){var b=a(this),c=function(){b.css("font-size",Math.max(Math.min(b.width()/(10*d),parseFloat(e.maxFontSize)),parseFloat(e.minFontSize)))};c(),a(window).on("resize.fittext orientationchange.fittext",c)})}}(jQuery),function(a){"use strict";a.fn.fitVids=function(b){var c={customSelector:null};if(!document.getElementById("fit-vids-style")){var d=document.head||document.getElementsByTagName("head")[0],e=".fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}",f=document.createElement("div");f.innerHTML='

x

",d.appendChild(f.childNodes[1])}return b&&a.extend(c,b),this.each(function(){var b=["iframe[src*='player.vimeo.com']","iframe[src*='youtube.com']","iframe[src*='youtube-nocookie.com']","iframe[src*='kickstarter.com'][src*='video.html']","object","embed"];c.customSelector&&b.push(c.customSelector);var d=a(this).find(b.join(","));d=d.not("object object"),d.each(function(){var b=a(this);if(!("embed"===this.tagName.toLowerCase()&&b.parent("object").length||b.parent(".fluid-width-video-wrapper").length)){var c="object"===this.tagName.toLowerCase()||b.attr("height")&&!isNaN(parseInt(b.attr("height"),10))?parseInt(b.attr("height"),10):b.height(),d=isNaN(parseInt(b.attr("width"),10))?b.width():parseInt(b.attr("width"),10),e=c/d;if(!b.attr("id")){var f="fitvid"+Math.floor(999999*Math.random());b.attr("id",f)}b.wrap('
').parent(".fluid-width-video-wrapper").css("padding-top",100*e+"%"),b.removeAttr("height").removeAttr("width")}})})}}(window.jQuery||window.Zepto),!function(a,b){"function"==typeof define&&define.amd?define(function(){return b(a)}):"object"==typeof exports?module.exports=b:a.echo=b(a)}(this,function(a){"use strict";var b,c,d,e,f,g={},h=function(){},i=function(a,b){var c=a.getBoundingClientRect();return c.right>=b.l&&c.bottom>=b.t&&c.left<=b.r&&c.top<=b.b},j=function(){(e||!c)&&(clearTimeout(c),c=setTimeout(function(){g.render(),c=null},d))};return g.init=function(c){c=c||{};var i=c.offset||0,k=c.offsetVertical||i,l=c.offsetHorizontal||i,m=function(a,b){return parseInt(a||b,10)};b={t:m(c.offsetTop,k),b:m(c.offsetBottom,k),l:m(c.offsetLeft,l),r:m(c.offsetRight,l)},d=m(c.throttle,250),e=c.debounce!==!1,f=!!c.unload,h=c.callback||h,g.render(),document.addEventListener?(a.addEventListener("scroll",j,!1),a.addEventListener("load",j,!1)):(a.attachEvent("onscroll",j),a.attachEvent("onload",j))},g.render=function(){for(var c,d,e=document.querySelectorAll("img[data-echo], [data-echo-background]"),j=e.length,k={l:0-b.l,t:0-b.t,b:(a.innerHeight||document.documentElement.clientHeight)+b.b,r:(a.innerWidth||document.documentElement.clientWidth)+b.r},l=0;j>l;l++)d=e[l],i(d,k)?(f&&d.setAttribute("data-echo-placeholder",d.src),null!==d.getAttribute("data-echo-background")?d.style.backgroundImage="url("+d.getAttribute("data-echo-background")+")":d.src=d.getAttribute("data-echo"),f||d.removeAttribute("data-echo"),h(d,"load")):f&&(c=d.getAttribute("data-echo-placeholder"))&&(null!==d.getAttribute("data-echo-background")?d.style.backgroundImage="url("+c+")":d.src=c,d.removeAttribute("data-echo-placeholder"),h(d,"unload"));j||g.detach()},g.detach=function(){document.removeEventListener?a.removeEventListener("scroll",j):a.detachEvent("onscroll",j),clearTimeout(c)},g}); \ No newline at end of file diff --git a/app/js/min/app.min.js b/app/js/min/app.min.js index 49afe01..cc7d047 100644 --- a/app/js/min/app.min.js +++ b/app/js/min/app.min.js @@ -1,2 +1,2 @@ -/*! front-end-workflow 26-03-2015 */ +/*! front-end-workflow 17-04-2015 */ jQuery(function(a){a("#mainTitle").fitText(1.5,{minFontSize:"30px",maxFontSize:"72px"}),a("#subTitle").fitText(1.2,{minFontSize:"24px",maxFontSize:"48px"})}); \ No newline at end of file diff --git a/app/js/min/plugins.min.js b/app/js/min/plugins.min.js index d488b3f..d12d54c 100644 --- a/app/js/min/plugins.min.js +++ b/app/js/min/plugins.min.js @@ -1,2 +1,2 @@ -/*! front-end-workflow 26-03-2015 */ +/*! front-end-workflow 17-04-2015 */ !function(a){a.fn.fitText=function(b,c){var d=b||1,e=a.extend({minFontSize:Number.NEGATIVE_INFINITY,maxFontSize:Number.POSITIVE_INFINITY},c);return this.each(function(){var b=a(this),c=function(){b.css("font-size",Math.max(Math.min(b.width()/(10*d),parseFloat(e.maxFontSize)),parseFloat(e.minFontSize)))};c(),a(window).on("resize.fittext orientationchange.fittext",c)})}}(jQuery),function(a){"use strict";a.fn.fitVids=function(b){var c={customSelector:null};if(!document.getElementById("fit-vids-style")){var d=document.head||document.getElementsByTagName("head")[0],e=".fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}",f=document.createElement("div");f.innerHTML='

x

",d.appendChild(f.childNodes[1])}return b&&a.extend(c,b),this.each(function(){var b=["iframe[src*='player.vimeo.com']","iframe[src*='youtube.com']","iframe[src*='youtube-nocookie.com']","iframe[src*='kickstarter.com'][src*='video.html']","object","embed"];c.customSelector&&b.push(c.customSelector);var d=a(this).find(b.join(","));d=d.not("object object"),d.each(function(){var b=a(this);if(!("embed"===this.tagName.toLowerCase()&&b.parent("object").length||b.parent(".fluid-width-video-wrapper").length)){var c="object"===this.tagName.toLowerCase()||b.attr("height")&&!isNaN(parseInt(b.attr("height"),10))?parseInt(b.attr("height"),10):b.height(),d=isNaN(parseInt(b.attr("width"),10))?b.width():parseInt(b.attr("width"),10),e=c/d;if(!b.attr("id")){var f="fitvid"+Math.floor(999999*Math.random());b.attr("id",f)}b.wrap('
').parent(".fluid-width-video-wrapper").css("padding-top",100*e+"%"),b.removeAttr("height").removeAttr("width")}})})}}(window.jQuery||window.Zepto),!function(a,b){"function"==typeof define&&define.amd?define(function(){return b(a)}):"object"==typeof exports?module.exports=b:a.echo=b(a)}(this,function(a){"use strict";var b,c,d,e,f,g={},h=function(){},i=function(a,b){var c=a.getBoundingClientRect();return c.right>=b.l&&c.bottom>=b.t&&c.left<=b.r&&c.top<=b.b},j=function(){(e||!c)&&(clearTimeout(c),c=setTimeout(function(){g.render(),c=null},d))};return g.init=function(c){c=c||{};var i=c.offset||0,k=c.offsetVertical||i,l=c.offsetHorizontal||i,m=function(a,b){return parseInt(a||b,10)};b={t:m(c.offsetTop,k),b:m(c.offsetBottom,k),l:m(c.offsetLeft,l),r:m(c.offsetRight,l)},d=m(c.throttle,250),e=c.debounce!==!1,f=!!c.unload,h=c.callback||h,g.render(),document.addEventListener?(a.addEventListener("scroll",j,!1),a.addEventListener("load",j,!1)):(a.attachEvent("onscroll",j),a.attachEvent("onload",j))},g.render=function(){for(var c,d,e=document.querySelectorAll("img[data-echo], [data-echo-background]"),j=e.length,k={l:0-b.l,t:0-b.t,b:(a.innerHeight||document.documentElement.clientHeight)+b.b,r:(a.innerWidth||document.documentElement.clientWidth)+b.r},l=0;j>l;l++)d=e[l],i(d,k)?(f&&d.setAttribute("data-echo-placeholder",d.src),null!==d.getAttribute("data-echo-background")?d.style.backgroundImage="url("+d.getAttribute("data-echo-background")+")":d.src=d.getAttribute("data-echo"),f||d.removeAttribute("data-echo"),h(d,"load")):f&&(c=d.getAttribute("data-echo-placeholder"))&&(null!==d.getAttribute("data-echo-background")?d.style.backgroundImage="url("+c+")":d.src=c,d.removeAttribute("data-echo-placeholder"),h(d,"unload"));j||g.detach()},g.detach=function(){document.removeEventListener?a.removeEventListener("scroll",j):a.detachEvent("onscroll",j),clearTimeout(c)},g}); \ No newline at end of file diff --git a/app/scss/app.scss b/app/scss/app.scss index fc9ede5..1a71cce 100644 --- a/app/scss/app.scss +++ b/app/scss/app.scss @@ -35,10 +35,7 @@ @import "app/layout/layout"; //Including Widgets -@import "app/widgets/widget-logo"; -@import "app/widgets/widget-ad"; -@import "app/widgets/widget-teaser"; -@import "app/widgets/widget-media"; +@import "app/widgets/widgets"; //Include Components @import "app/components/menu"; diff --git a/app/scss/app/widgets/_widget-ad.scss b/app/scss/app/widgets/_widget-ad.scss deleted file mode 100644 index 18b57cb..0000000 --- a/app/scss/app/widgets/_widget-ad.scss +++ /dev/null @@ -1,112 +0,0 @@ -.widget-ad{ - img{ - width:100%; - - } - iframe{ - div{ - width:284px; - - } - - } - - .forum-list{ - img{ - width:100%; - - } - - } - - .publication{ - width: 33.33%; - float: left; - padding:5px; - - } - .rssHeadline{ - .header{ - background: url(http://www.hegnar.no/gfx/lederkunnskap_logo.png) no-repeat; - background-size: contain; - width:284px; - height:22px; - - } - div.content{ - background-color: #eef1f3; - ul{ - margin:0 0 10px 0; - list-style: none; - padding: 10px 15px; - li{ - border-bottom: 1px solid $concrete; - padding-bottom: 10px; - &:last-child{ - border-bottom: 0; - - } - a{ - color: $midnight-blue; - - } - - } - - } - } - - } - -} - -.widget-ad.header-chart{ - margin-top: 10px; - .x144x144{ - margin-top: 10px; - .column-1,.column-2{ - @include inline-block(); - - - } - .column-2{ - float: right; - form{ - input[type='text']{ - width:80px; - } - input[type=submit]{ - background-color: white; - @include border-radius(4px); - border:1px solid #ccc; - font-size: 12px; - } - - } - } - } - -} - -.widget-ad.header-table-chart{ - margin-top:18px; - ul{ - margin:0; - - } - -} -.widget-ad .time-chart{ - margin-left: -24px; - margin-top: 10px; - .column-2{ - a{ - text-align: center; - font-size: rem(10px); - display: block; - } - - - } -} - diff --git a/app/scss/app/widgets/_widget-articles.scss b/app/scss/app/widgets/_widget-articles.scss new file mode 100644 index 0000000..052f4b5 --- /dev/null +++ b/app/scss/app/widgets/_widget-articles.scss @@ -0,0 +1,12 @@ +.widget{ + margin-bottom: 2em; + +} + +.article-section{ + pre{ + padding:1em; + margin:1em 0; + } + +} diff --git a/app/scss/app/widgets/_widget-logo.scss b/app/scss/app/widgets/_widget-logo.scss deleted file mode 100644 index c775bca..0000000 --- a/app/scss/app/widgets/_widget-logo.scss +++ /dev/null @@ -1,13 +0,0 @@ -.brand-desktop{ - margin-top:10px; - .brand{ - background: image-url("logo.png") no-repeat; - - background-size: cover; - background-position: center; - display: block; - @include hide-text(); - width:217px; - height: 118px; - } -} diff --git a/app/scss/app/widgets/_widget-media.scss b/app/scss/app/widgets/_widget-media.scss deleted file mode 100644 index f7d6cb5..0000000 --- a/app/scss/app/widgets/_widget-media.scss +++ /dev/null @@ -1,20 +0,0 @@ -.media{ - .media-heading{ - font-size: typl8-measure-margin(20,30,em); - - } -} - -.media-lists-two{ - &:nth-child(2n+1){ - clear: left; - } - -} - -.media-lists-three{ - &:nth-child(3n+1){ - clear: left; - } - -} diff --git a/app/scss/app/widgets/_widget-teaser.scss b/app/scss/app/widgets/_widget-teaser.scss deleted file mode 100644 index 7f94574..0000000 --- a/app/scss/app/widgets/_widget-teaser.scss +++ /dev/null @@ -1,84 +0,0 @@ -.teaser-single-item { - @include border-radius(4px); - padding: 10px 10px 10px; - // needs latest Compass, add '@import "compass"' to your scss - background-color: #ecf8ff; // Old browsers - @include linear-gradient(#F3F9FA, #ECF8FF); - border: 1px solid #cfeafa; - -} - -.widget-teaser-item { - -} - -.teaser { - .teaser-head { - position: relative; - display: block; - .title-meta-section { - float: left; - - } - .teaser-time { - @include inline-block(); - position: absolute; - right: 0; - } - - } - .title-meta-section { - font-size: rem(14); - margin-bottom: em(10); - a { - color: $ff-flat-black; - &:hover { - color: black; - } - &:before { - content: ""; - width: 5px; - height: 12px; - background-color: $link-color; - @include inline-block(); - margin-right: 6px; - - } - } - } - - .title { - font-size: rem(30); - - } - .title-mid { - font-size: rem(24); - - } - - .title-small { - font-size: rem(20); - line-height: 1.2; - } - - .teaser-time { - font-style: italic; - margin-bottom: 10px; - display: block; - color: $asbestos; - } - - .teaser-leadtext { - font-size: rem(14); - - } - -} - -.teaser-section { - margin: em(20) 0; - display: block; - overflow: hidden; - -} - diff --git a/app/scss/app/widgets/_widgets.scss b/app/scss/app/widgets/_widgets.scss index e69de29..5738612 100644 --- a/app/scss/app/widgets/_widgets.scss +++ b/app/scss/app/widgets/_widgets.scss @@ -0,0 +1 @@ +@import "widget-articles"; diff --git a/app/templates/_includes/howto.html b/app/templates/_includes/howto.html new file mode 100644 index 0000000..570061a --- /dev/null +++ b/app/templates/_includes/howto.html @@ -0,0 +1,33 @@ +

How to use?

+

Make sure you have Node.js installed.

+

Open your terminal and clone Front-End-Workflow repository.

+ +

git clone https://github.com/themestent/front-end-workflow.git

+ +

You can also use GUI tools for Mac or Windows. You will need to use terminal anyway! Better get used to it!!

+ +

When you are done with the cloning get into the directory: + cd front-end-workflow + Now type ls just to have an overview on what you will be working with?

+ +

You will see two directories called app and doc. We will work on this directory for our front-end development process. doc has been automatically generated which you will be doing so very soon! But First let's try the following line on our terminal: + npm install

+ +

This command will start downloading all the depended libraries and packages defined into package.json file into a newly created node_modules directory. Downloaded packages are only available and works for the current project only.

+ +

When npm install finished downloading all it's packages you can run following line npm ls to see all the available packages downloaded inside node_modules. That tree view looks amazing right? It holds all types of dependencies we have mentioned on package.json file. Each of those packages has it's own role and certain tasks to process.

+ +

Download Front-End Resources

+

Ok now we have all required node modules installed locally for this project and we are ready to download some resources, files that we actually will require for Front-End Development project. In this workflow I will be using Twitter Bootstrap scss files, Bourbon - Sass Mixins Library, Some JavaScript plugins like FitText, FitVids, Echo etc. I want those to download and place those automatically into right directory according file type.

+ +

We can do this by typing following line on terminal:

+

grunt download

+

If you don't get any unwanted alien like error you will see line like these: +

Running "bower:install" (bower) task
Installed bower packages
+    Copied packages to /Users/evanshajed/Working Projects/front-end-workflow/app
+    Cleaned bower dir /Users/evanshajed/Working Projects/front-end-workflow/components

+
Done, without errors.
+ +

Get inside app directory and you will see all the files are downloaded and placed to their right destination according to their file type. Then finally you will need to start grunt task to watch and build whenever any changes occurs in files or directories mentioned in Gruntfile.js. To start this task type this line:

+

grunt

+

You will then see several process starts running and waiting for changes. Start your usual development process inside app directory. Just to get used to this workflow start with index.html file. Include some image inside img or make some changes inside scss files. Grunt will generate, concatenate .js files, build scss to css files and reload the browser for you.

diff --git a/app/templates/_layouts/default.html b/app/templates/_layouts/default.html deleted file mode 100644 index d70aa2b..0000000 --- a/app/templates/_layouts/default.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - {% include header.html %} - - - -
- {% include nav/main-nav.html %} - - - {{ content }} - -
-
- {% include default-footer.html %} - - diff --git a/app/templates/_layouts/icon-page.html b/app/templates/_layouts/icon-page.html deleted file mode 100644 index 5c06d01..0000000 --- a/app/templates/_layouts/icon-page.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - {% include header-icons.html %} - - - -
- {% include nav/main-nav.html %} - - - {{ content }} - -
-
- {% include footer.html %} - - diff --git a/app/templates/_layouts/post.html b/app/templates/_layouts/post.html deleted file mode 100644 index 04e3586..0000000 --- a/app/templates/_layouts/post.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -layout: default ---- -

{{ page.title }}

-

{{ page.date | date_to_string }}

- -
-{{ content }} -
diff --git a/app/templates/index.html b/app/templates/index.html index a6aacd0..84ba439 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -14,54 +14,18 @@
-
+
{% include details.html %}
-
+
{% include features.html %}
-

How to use?

-

Make sure you have Node.js installed.

-

Open your terminal and clone Front-End-Workflow repository.

- -

git clone https://github.com/themestent/front-end-workflow.git

- -

You can also use GUI tools for Mac or Windows. You will need to use terminal anyway! Better get used to it!!

- -

When you are done with the cloning get into the directory: - cd front-end-workflow - Now type ls just to have an overview on what you will be working with?

- -

You will see two directories called app and doc. We will work on this directory for our front-end development process. doc has been automatically generated which you will be doing so very soon! But First let's try the following line on our terminal: - npm install

- -

This command will start downloading all the depended libraries and packages defined into package.json file into a newly created node_modules directory. Downloaded packages are only available and works for the current project only.

- -

When npm install finished downloading all it's packages you can run following line npm ls to see all the available packages downloaded inside node_modules. That tree view looks amazing right? It holds all types of dependencies we have mentioned on package.json file. Each of those packages has it's own role and certain tasks to process.

- -

Download Front-End Resources

-

Ok now we have all required node modules installed locally for this project and we are ready to download some resources, files that we actually will require for Front-End Development project. In this workflow I will be using Twitter Bootstrap scss files, Bourbon - Sass Mixins Library, Some JavaScript plugins like FitText, FitVids, Echo etc. I want those to download and place those automatically into right directory according file type.

- -

We can do this by typing following line on terminal:

-

grunt download

-

If you don't get any unwanted alien like error you will see line like these: - 

Running "bower:install" (bower) task

-          

-          

-          
Installed bower packages
-          Copied packages to /Users/evanshajed/Working Projects/front-end-workflow/app
-          Cleaned bower dir /Users/evanshajed/Working Projects/front-end-workflow/components

-          

-          

-          
Done, without errors.
-

- -

Get inside app directory and you will see all the files are downloaded and placed to their right destination according to their file type. Then finally you will need to start grunt task to watch and build whenever any changes occurs in files or directories mentioned in Gruntfile.js. To start this task type this line:

-

grunt

-

You will then see several process starts running and waiting for changes. Start your usual development process inside app directory. Just to get used to this workflow start with index.html file. Include some image inside img or make some changes inside scss files. Grunt will generate, concatenate .js files, build scss to css files and reload the browser for you.

+
+ {% include howto.html %} +
diff --git a/bower.json b/bower.json index 5389bba..e81f9e2 100755 --- a/bower.json +++ b/bower.json @@ -13,7 +13,7 @@ "codekit-config.json" ], "dependencies": { - "jquery": "2.0.0", + "jquery": "2.1.3", "bootstrap-sass": "*", "requirejs": "*", "typeplate-starter-kit": "*", diff --git a/package.json b/package.json index c6fee10..ae01e76 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "url":"https://github.com/themestent/front-end-workflow.git" }, "bugs":{ - "url":"" + "url":"https://github.com/themestent/front-end-workflow/issues" }, "licenses":[ { @@ -43,7 +43,7 @@ "grunt-contrib-csslint": "*", "grunt-contrib-clean": "*", "grunt-csscomb": "*", - "grunt-contrib-cssmin": "~0.6.0", + "grunt-contrib-cssmin": "~0.12.2", "grunt-cssshrink":"*", "grunt-htmlhint":"*", "grunt-contrib-watch": "*", @@ -54,8 +54,8 @@ "grunt-contrib-copy": "*", "grunt-bower-task":"*", "grunt-contrib-livereload": "*", - "grunt-contrib-jst": "~0.5.0", - "grunt-contrib-uglify": "~0.3.0", + "grunt-contrib-jst": "~0.6.0", + "grunt-contrib-uglify": "~0.9.1", "grunt-pagespeed":"*", "grunt-stylestats":"*", "jpegtran-bin": "*",