html5-template-starter-kit 1.0.0

.gitignore

@@ -0,0 +1,6 @@
+node_modules/*
+!node_modules/.gitkeep
+bower_components/*
+!bower_components/.gitkeep
+dist/*
+!dist/.gitkeep

LICENSE

@@ -0,0 +1,28 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Vitalijs Karpusa <[email protected]>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+====
+
+All files located in the node_modules and bower_components directory are externally maintained
+libraries used by this software which have their own licenses; we recommend
+you read them, as their terms may differ from the terms above.

README.md

@@ -0,0 +1,49 @@
+# html5-template-starter-kit
+HTML5 responsive template starter. Usefull for fast development HTML pages. Fast & easy start with example page.
+
+## Starter kit include
+* Less - CSS pre-processor, bonus folders structure with Media Queries breakpoints with support responsive
+* Autoprefixer - Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website
+* Normalize.css - Modern, HTML5 CSS reset
+* jQuery - Default include
+* Nunjucks - Templating engine
+* gulp-imagemin - Minify PNG, JPEG, GIF and SVG images with imagemin
+* gulp-minify - UglifyJS 2 is a JavaScript parser, minifier, compressor or beautifier toolkit.
+* Browsersync - Time-saving synchronised browser testing
+
+## Folder structure
+
+    ├── app               # source
+    │   ├── i             # images
+    │   ├── js            # JavaScript files
+    │   ├── less          # less files
+    │   └── template      # template with nunjucks
+    └── dist              # build folder
+
+## Quickstart
+
+Install [Node.js](https://nodejs.org/en/).
+
+First run
+
+```bash
+npm start          # install nodejs and bower dependencies, running browserSync on http://localhost:3000/ and watch files changes.
+```
+
+Another commands
+
+```bash
+npm run serve      # Only watch change files
+```
+
+```bash
+npm run build      # Only build files
+```
+
+## License
+
+MIT
+
+## Author
+
+[Vitalijs Karpusa](http://www.karpusa.lv)

app/js/module.js

@@ -0,0 +1,6 @@
+// It can be you js
+
+// Handler for .ready() jQuery called.
+$(function() {
+  //$('.header').css('background-color','red');
+});

app/less/_fonts.less

@@ -0,0 +1,3 @@
+// ==========================================================================
+// Custom fonts
+// ==========================================================================

app/less/_layout.less

@@ -0,0 +1,87 @@
+html {
+    width: 100%;
+    height: 100%;
+}
+
+
+body {
+    min-width: 320px;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+}
+
+.container {
+    max-width: 1240px;
+    margin: 0 auto;
+    padding: 0 12px;
+}
+
+.header {
+    padding: 20px 0;
+    background-color: #1b1c1d;
+}
+
+.footer {
+    border-top: 1px solid #1b1c1d;
+}
+
+.is-hide {
+    display: none;
+}
+
+.table {
+    display: table;
+}
+
+.table-row {
+    display: table-row;
+}
+
+.table-cell {
+    display: table-cell;
+}
+
+.pull-left {
+    float: left;
+}
+
+.pull-right {
+    float: right;
+}
+
+.full-width {
+    width: 100%;
+}
+
+.no-wrap {
+    white-space: nowrap;
+}
+
+.align-right {
+    text-align: right;
+}
+
+.align-center {
+    text-align: center;
+}
+
+.valign-center {
+    vertical-align: middle;
+    font-weight: inherit;
+}
+/*
+//for preload image add empty div with class "preloaded-images"
+.preloaded-images {
+    width: 0px;
+    height: 0px;
+    display: inline;
+    //you images for preload
+    //background-image: url('image.jpg');
+}
+*/
+
+@media @MqDesktop2 {
+    .container {
+        padding: 0;
+    }
+}

app/less/_media_queries.less

@@ -0,0 +1,15 @@
+// ==========================================================================
+// Media Queries breakpoints (First mobile)
+// ==========================================================================
+
+@MqiPhone6: ~"screen and (min-width: 375px)";
+//@MqiPhone6Plus: ~"screen and (min-width: 414px)";
+@MqMobile1: ~"screen and (min-width: 400px)";
+@MqMobile2: ~"screen and (min-width: 480px)";
+@MqMobile3: ~"screen and (min-width: 600px)";
+@MqMobile4: ~"screen and (min-width: 640px)";
+@MqTablet: ~"screen and (min-width: 768px)";
+@MqTablet2: ~"screen and (min-width: 960px)";
+@MqDesktop1: ~"screen and (min-width: 1005px)";
+@MqDesktop2: ~"screen and (min-width: 1280px)";
+@MqDesktopWide1: ~"screen and (min-width: 1600px)";

app/less/_mixin.less

@@ -0,0 +1,13 @@
+// ==========================================================================
+// Mixin
+// ==========================================================================
+
+.bgtransparent1px {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=);
+}
+
+//Disable highlight tap on touch devices
+.no-tap-highlight {
+   -webkit-tap-highlight-color: rgba(0,0,0,0);
+   -webkit-tap-highlight-color: transparent;
+}

app/less/_typography.less

@@ -0,0 +1,79 @@
+/**
+ * Typography
+ * =================================
+ * Base
+ * Paragraphs
+ * Headings
+ * Links
+ * Lists
+ * Definition lists
+ * Blockquotes
+ * Misc
+ * Utilities
+ *
+ * Body font size, leadings etc have been set in variables.less
+ * Resources:
+ * http://www.gridlover.net/
+ * http://modularscale.com/
+ * http://lamb.cc/typograph/
+ *
+ */
+
+html {
+    //Prevent HTML font-size change when iPhone orientation changes from portrait to landscape
+    text-size-adjust: 100%;
+}
+
+body {
+    font-family: @font;
+    font-size: @baseFontSize;
+    color: @textColor;
+}
+
+select, input, textarea {
+    font-family: @font;
+}
+
+button, label {
+   user-select: none;
+   .no-tap-highlight();
+}
+
+h1 {
+    font-size: 30px;
+}
+
+h2 {
+    font-size: 24px;
+}
+
+h3 {
+    font-size: 20px;
+}
+
+h4 {
+    font-size: 18px;
+}
+
+h5 {
+    font-size: 16px;
+}
+
+h6 {
+    font-size: 14px;
+}
+
+strong, b {
+    font-weight: 600;
+}
+
+a {
+    color: @linkDefaultColor;
+    &:hover {
+        color: @linkDefaultHoverState;
+    }
+    &:active {
+        color: @linkDefaultActiveState;
+    }
+    .no-tap-highlight();
+}

app/less/_variables.less

@@ -0,0 +1,20 @@
+// ==========================================================================
+// Variables
+// ==========================================================================
+
+@font:                          Arial, 'Helvetica Neue', Helvetica, sans-serif;
+@baseFontSize:                  16px;
+
+// Colors
+@white:                         #FFF;
+@black:                         #000;
+@blue:                          #0000FF;
+@straw:                         #d5b577;
+
+// Additional colors
+@textColor:                     @black;
+
+//Default link in typography.less
+@linkDefaultColor:              @blue;
+@linkDefaultHoverState:         @black;
+@linkDefaultActiveState:        @black;

app/less/components/_img.less

@@ -0,0 +1,16 @@
+.img {
+    width: 120px;
+}
+
+
+@media @MqTablet {
+    .img {
+        width: 240px;
+    }
+}
+
+@media @MqDesktop1 {
+    .img {
+        width: 400px;
+    }
+}

app/less/components/_input.less

@@ -0,0 +1,3 @@
+.input {
+
+}

app/less/components/_page.less

@@ -0,0 +1,3 @@
+.page {
+    padding-bottom: 10px;
+}

app/less/components/_top-menu.less

@@ -0,0 +1,19 @@
+.top-menu {
+    &__link {
+        font-size: 16px;
+        color: rgba(255, 255, 255, 0.7);
+        text-decoration: none;
+        margin-left: 20px;
+        padding-bottom: 3px;
+        &:first-child {
+            margin-left: 0;
+        }
+        &.is-active {
+            border-bottom: 2px solid #FFFFFF;
+            color: #FFFFFF;
+        }
+        &:hover {
+            color: #FFFFFF;
+        }
+    }
+}