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.
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.
stylesfolder 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
Depending on your setup, you may need to run the commands with
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:
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.
There are three powerful Grunt tasks that are pre-configured for you:
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 :)
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 :)
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
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).
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
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.