README
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