tttanaka/generator-alchemist

:mushroom: Yeoman generator for development a front-end web app using Gulp and PostCSS

generator-alchemist

Yeoman generator for development a front-end web app using Gulp and PostCSS for the build process.

Start your new project in a few seconds!

Getting Started

To use Alchemist Generator you need to set a few things:

Node.js

Yo:

$ sudo npm install -g yo

Gulp:

$ sudo npm install -g gulp

BrowserSync:

$ sudo npm install -g browser-sync

Usage

To install generator-alchemist from npm, run:

$ sudo npm install -g generator-alchemist

Finally, initiate the generator to your project folder:

$ yo alchemist

Jade language is optional in Alchemist generator. Put Y or N to use it or not.

After installation run gulp

$ gulp

That's all! You can start to work with your project files:

• Write your Jade / HTML code in the folder /src/jade/ or /src/html/
• Write your CSS code in the folder /src/css/
• Write your JavaScript code in the folder /src/js/
• Put your images to the folder /src/images/

And all of this files will be automatically optimize and paste to your production folder /dist/

Thank's for usage!

Contents

Jade (optional)

The use of language Jade is optional. If you want to use it, select the option to install the program.

Write your code in the folder /src/jade/ and it will automatically be compiled into html.

HTML

HTML Hint

Validate your HTML code.

CSS

Normalize CSS

Grid System

<div class="container">
  <div class="row">
    <div class="col-8">
      Content block
    </div>
    <div class="col-4">
      Right sidebar
    </div>
  </div>
</div>

PostCSS

Clearfix

Adds fix and fix-legacy attributes to the clear property, for self-clearing of children

from:

.foo {
  clear: fix;
}

.bar {
  clear: fix-legacy;
}

to:

.foo:after{
  content: '';
  display: table;
  clear: both;
}

.bar {
    clear: fix-legacy;
}

.bar:before,
.bar:after {
  content: '';
  display: table;
}

.bar:after {
  clear: both;
}

.bar {
  zoom: 1;
}

Color Short

Short CSS colors

from:

.hello {
  border-bottom: 1px solid rgb(200);
  background: #20;
  color: #f;
  box-shadow: 0 1px 5px rgba(0, 0.5);
}

to:

.hello {
  border-bottom: 1px solid rgb(200, 200, 200);
  background: #202020;
  color: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

CSS Mqpacker

Pack same CSS media query rules into one media query rule.

CSS Nano

Best way to minify your CSS code

CSS Next

Add vendor prefixes to CSS. And allow to use tomorrow's CSS syntax, today. Some examples:

CSS Custom Properties for cascading variables.

from:

:root {
  --color: red;
}

div {
  color: var(--color);
}

to:

div { color: red; }

Transform W3C CSS Custom Media Queries to more compatible CSS.

from:

@custom-media --small-viewport (max-width: 30em);

@media (--small-viewport) {
  /* styles for small viewport */
}

to:

@media (max-width: 30em) {
  /* styles for small viewport */
}

Writing simple and graceful media queries.

from:

@media screen and (width >= 500px) and (width <= 1200px) {
  .bar {
    display: block;
  }
}

to:

@media screen and (min-width: 500px) and (max-width: 1200px) {
  .bar {
    display: block;
  }
}

Transform W3C CSS color function to more compatible CSS.

from:

body {
  background: color(red a(90%))
}
to:

body {
  background: rgba(255, 0, 0, 0.9)
}

And much more. A full list of features you can found here.

Focus

Add :focus selector to every :hover

from:

.button:hover {
  background: red;
}

to:

.button:hover, .button:focus {
  background: red;
}

PreCSS

Use Sass-like markup in your CSS files. Enjoy a familiar syntax with variables, mixins, conditionals, and other goodies.

from:

$blue: #056ef0;
$column: 200px;

header {
  background: $blue;
  width: $column;
    h1 {
      font-size: 18px;
    }
}

to:

header {
  background: #056ef0;
  width: 200px;
}

header h1 {
  font-size: 18px;
}

etc.

PxtoRem

A plugin for PostCSS that generates rem units from pixel units.

from:

p {
  font-size: 16px;
}

to:

p {
  font-size: 1rem;
}

Responsive Images

PostCSS plugin for making responsive images.

from:

.boo img {
  image-size: responsive;
}

to:

.boo img {
  max-width:100%;
  height:auto;
  display:block;
}

Short

Write more concise and often more readable style sheets, saving time and energy.

from:

.banner {
  position: fixed 0 0 *;
  size: 100% 48px;
}

.section {
  margin: 40px;
  text: bold center uppercase dimgrey 1.25em 1.5 .05em;
}

.section.inset {
  margin: * auto;
}

to:

.banner {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 48px;
}

.section {
  margin: 40px;
  color: dimgrey;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.25em;
  line-height: 1.5;
  letter-spacing: .05em;
}

.section.inset {
  margin-right: auto;
  margin-left: auto;
}

Size

Plugin for size shortcut to set width and height properties

from:

.two {
    size: 20px 10px;
}
.one {
    size: 10px;
}

to:

.two {
    width: 20px;
    height: 10px;
}
.one {
    width: 10px;
    height: 10px;
}

JavaScript

Uglify

Minify JavaScript files.

Images

Upload images to the folder:

/src/images/

And images will be automatically minify with Gulp plugin Image Optimization and puts to the folder /dist/images/

Server

You can use local webserver with BrowserSync here:

http://localhost:3000

Author

Azat S.

License

MIT