generator-posw

POSW stands for Plain Old Semantic Website. It's an opinionated Yeoman generator that will help you code a static website from design mockups. As Yeoman uses npm and Bower you need to have those two installed too, but you already know that, don't you? :)

Those who don't like the word Semantic when I speak about a website, not markup, can freely substitute that for something similar... Spectacular perhaps.

Features

POSW comes with a bunch of stuff:

• It allows you to code either in PHP or HTML.
• It uses Sass as a CSS preprocessor. You need to have Ruby and Sass installed and in your PATH for this to work.
• The styles folder structure is made with BEM in mind.
• Also it has a bunch of ready-to-use Grunt tasks that just work. More on that below.
• It encourages you to use Bower as your dependencies manager

Getting Started

Depending on your setup, you may need to run the commands with sudo.

First you need to install Yeoman:

npm install -g yo

Then you need to install generator-posw from npm:

npm install -g generator-posw

Create a directory for your project and cd into it.

Finally, initiate the generator:

yo posw

Running this command will get you through a couple of questions to set you up. You'll need to specify what minimal version of Internet Explorer you need to support, what your language of preference is (PHP or HTML) and some other stuff.

The question about the minimal IE version is needed for two things: a) to print out the corresponding conditional comments on the html tag and b) to include two versions of jQuery (via again a conditional comment) if you choose to add it via Google's CDN and not Bower. If your minimal IE version is 10 or 11, you may freely choose the No IE option

If you choose PHP as your coding language, after this command you will hopefully get the following folder structure:

<project-folder>
|_<mockups>
|_<source>
|___<images>
|___<partials>
|___<scripts>
|______<libs>
|______project-slug.js
|___<styles>
|______<blocks>
|______<libs>
|______some default scss files
|___index.php
.bowerrc
bower.json
Gruntfile.js
package.json

and that's it, just a Plain Old Semantic Website.

Grunt tasks

There are three powerful Grunt tasks that are pre-configured for you:

grunt

The default task will wire your Bower dependencies, compile the default sass files, supply the needed vendor prefixes for some CSS properties and will watch for changes to the files. After this task successfully runs and waits watching your files, you can start coding :)

grunt build

The build task will create the build folder and copy the source files there making them production ready. Making HTML from PHP (if you choose PHP, otherwise grunt will copy the source files), concating Bower dependencies into one file and uglifying it, optimizing images using grunt-contrib-imagemin and so on. Do make sure to open at least one file to check if the paths to files are correct, which they should be :)

The build folder will look like this:

<project-folder>
|_<build>
|___<images>
|___<scripts>
|______vendor.js
|______project-slug.min.js
|___<styles>
|______libs.css
|______project-slug.css
|___index.html

The vendor.js file will contain all of the Bower dependencies plus the files you choose to include into it (like custom jQuery plugins you don't want to inject by Bower and what not).

grunt pack

The pack task will make a fresh build, then compress it into a zipball with a name <projectSlug>.<dd-mm-yyyy>.zip and put it into the archives folder.

PHP

As it's said in the features description you can choose to code in PHP. It will add the grunt-php2html task to convert PHP to HTML when running the build task. Make sure you carefully set up the php-cgi binary for your system.

In order to just open the coded PHP in the browser you need a PHP interpreter. It may come in a form of a WAMP, MAMP, XAMPP or any other ..AMP of your choice. If you speak Russian you may prefer to use Denwer. Besides that, if you happen to use PHPStorm, you can set this up even fancier.

If you have any troubles making PHP work for you, please fire an issue and I'll do my best to help, if I can.

License

MIT