Giters

studio404pl / test

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Rdbrck kit to start a new html/js project

Features

Browser support

  • Chrome (latest 2)
  • Edge (latest 2)
  • Firefox (latest 2)
  • Internet Explorer 9+ (but generally IE8 should work fine with included ie-love and cssnext)
  • Opera (latest 2)
  • Safari (latest 2)

Installation

1. Install nodejs with npm

2. Install bower globally

npm install -g bower

3. Install gulp globally

npm install --global gulp-cli

4. Install npm packages inside project directory

npm install

5. Install bower packages inside project directory

bower install

6. Run gulp inside project directory

gulp

Included tools

Lost Grid

Powerful grid system built in PostCSS. By default, template has flexbox support disabled to support IE9.

Why not bootstrap?

Bootstrap is fine, but it's not enough. Large css file with lot of mess, fixed breakpoints, fixed layout to 12 columns. In Lost Grid you can define fixed gutters, different grid layouts, define cycles, control shifts etc. Everything is described in docs. Recently the author of that plugin started to work on video tutorials.

Gulp packages / PostCSS plugins

js libraries

  • lightcase - lightweight and beautiful lightbox with lot of options and support different content. Unfortunately it's based on jQuery. If you know similar library but without dependencies - please let me know.
  • remodal - responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking. Requires jQuery.
  • retinajs - supports retina images, included in js and sass already. No dependencies.
  • scrollreveal - lightweight and simple animation library. No dependencies.
  • slick - simple and powerfull tool for slider modules and carousels. No dependencies.

All above libraries are optional and kit supports them. You can include them easily just by declaring true/false value next to library name in gulpfile.js at the very top. Everything else (including js/css files, concatenating) is handled automatically.

If you want to add something to that list - create an issue.

favicon generator

To easily generate favicon images in all formats you just have to replace source file (minimum 260x260 pixels):

assets/images/favicon_src.png

and run command that will generate all favicons related files:

gulp generate-favicon

to inject necessary code into header section of main template file you just have to run:

gulp inject-favicon-markups

and you are ready to roll.

You can adjust background colors, application name etc. in gulpfile.js

image optimization

Place all your original image files in:

assets/images/org/

and run:

gulp images

optimized version of all images will be saved in assets/images/ directory.

Additional information

structure

  • page content should be placed in pagename_content.php file. You can display page content by adding in kit url parameter page.
?page=pagename

main is default value.

  • all assets should be placed in assets directory,
  • all assets have to be loaded from assets directory. Do not link to bower_components directory in any case.
  • all libraries should be installed via package managers (bower or npm),
  • try to separate css styling to different layouts and modules files ie.
@import 'layouts/header';
@import 'layouts/footer';

@import 'layouts/form';

@import 'layouts/main';
@import 'layouts/single';
@import 'layouts/contact';

FAQ

That section will be filled out in near future. You can also create an issue if you have question or new idea for extending kit or modifying some things.

what about icons?

By icons, I mean a situation where I have 10 or more images and want to use them in different sizes and places.

For solid (one color) icons, I recommend fontello - fontface generator. It supports literally all platforms. You can review uploaded icons, export the file for future use, and style sizes and colours through css.

For multiple colours, I recommend grumpicon. It's a webapp wrapper for grunticon that handles all necessary processes and generates svg images with png fallbacks and stylesheets.

Of course you can go with svg, but from what I know it's not a bulletproof solution - if you have another opinion on that - please let me know.

CHECKLIST before pushing project to acceptation

  • if you are using retinajs plugin and don't have retina device you have to test it on your own. Place below code in head section to spoof retina device:
<script type="text/javascript">
  // Spoof the browser into thinking it is Retina
  // comment the next line out to make sure it works without retina
  window.devicePixelRatio = 2;
</script>

and check developer console against any 404 errors for image files.

  • test button/input elements against different states like :focus, :hover, :active,
  • button and inputs should get appearance: none; attribute if you want to get rid of unnecessary styling and be sure that they will look the same across all browsers.
  • textareas should be non-resizable. Add resize: none; attribute to achieve that,
  • remember about wrapping phone numbers links in <a href="tel:000000">000000</a>. Default formatting for phone numbers is disabled with below code:
<meta name="format-detection" content="telephone=no">

  • check your project on Google PageSpeed Insights - you should get mobile score larger than 70 and for desktops it should be more than 85.

  • check your project on GTmetrix - it should be at least A grade for PageSpeed and YSlow (~90%)

TODO

  • create basic template for header with standard navigation that supports responsive mode

About