felipefialho / kratos-boilerplate Goto Github PK

View Code? Open in Web Editor NEW

312.0 13.0 36.0 8.72 MB

:fire: A simple boilerplate for creating statics PWA using Webpack, Pug, PostCSS and CSS Modules

License: MIT License

JavaScript 43.84% SCSS 39.07% Pug 17.09%

boilerplate pug postcss sass cssmodules css webpack yeoman es6 javascript css-modules kratos-boilerplate kratos badge

kratos-boilerplate's Introduction

Kratos Boilerplate

A simple boilerplate for creating a static PWA using Webpack, Pug, PostCSS and CSS Modules

Generate a new project with Yeoman

To make easy create a new projects, Kratos has a generator using Yeoman

To use it:

# install yeoman
$ npm install -g yo

# install kratos generator
$ npm install -g generator-kratos-boilerplate

# generate a new project
$ yo kratos-boilerplate

Getting Started

# install dependencies
$ npm i

# run the project
$ npm start

With the commands above, you have everything to start.

The app.config.json file has all minimal config to create your scaffolding.

About CSS

This project use Sass as CSS preprocessor 😁

Post CSS libs

For grid system uses Autoprefixer to make easy use browser prefixes, Lost with some help from, Rucksack for animations, reset and a lot of great mixins, Rupture for responsive utilities. And Font Magician to get the webfonts.

CSS Modules

To make easier create your components and avoid a lot of problems, it boilerplate use CSS Modules.

Example

.host text-align center .title font-size 4rem .description font-size 2rem;

After the transformation it will become like this

._host_4897k_1 {
  text-align: center;
}

._title_4897k_9 {
  font-size: 4rem;
}

._description_4897k_12 {
  font-size: 2rem;
}

Tasks

npm start: run all tasks and initialize watch for changes and a server
npm run build: run all production tasks create a dist folder to deploy
npm run lint: lint javascript and css
npm run fix: command to fix all eslint errors
npm run deploy: run all tasks to build and deploy on gh-pages

License

MIT License © Felipe Fialho

kratos-boilerplate's People

Contributors

Stargazers

Watchers

kratos-boilerplate's Issues

Converting Jade => Pug

Queria saber o porque foi trocado de Jade para Pug

Vlw o/

Add mdcss and some descriptions

Add a generator to init a new project

Problems generating SVG and SVG icons

When I put a .svg file in thesrc/svg folder the gulp task until it finds, however, it creates a folder inside the src/svg/svg folder and also in build/svg and both empty.

Improve documentation

Error in "npm run setup"

Hi @lfeh
I installed Kratos and had the following error, I understood that the folder was not found. The intention to report this is to know if there is a solution you know.

> cp ./node_modules/flexibility/flexibility.js public/js/

cp: directory public/js does not exist

npm ERR! Darwin 16.3.0
npm ERR! argv "/usr/local/Cellar/node/7.2.1/bin/node" "/usr/local/bin/npm" "run" "vendors"
npm ERR! node v7.2.1
npm ERR! npm  v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] vendors: `cp ./node_modules/flexibility/flexibility.js public/js/`
npm ERR! Exit status 1

config.yml Problem

Hi LFeh
When I change the title in the config.yml, than gulp breaks and i get the error message

fs.js:640
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
^

Error: ENOENT: no such file or directory, open 'src/data//.yml'

What do I do wrong? Wanted to build my Portfolio with your Boilerplate.

Thanks

How can I Inject the icons.svg after the body tag?

Hi this boilerplate is really great, but one thing I can't get my head around.
As described I want to put the svgs after my body-tag and I do not want to do it with php.
I tried the method of gulp-inject, but someone mentioned it does not work with babel.
Therefore I would be thrilled to see how I can implement that feature.
U ask why, here is a screencast... I love the workflow https://css-tricks.com/video-screencasts/screencast-134-tour-site-progress-built-jekyll-grunt-sass-svg-system/.
He uses Jekyll to inject the svg, can i do that with pug too?
Thxs and happy coding

Add plugin to css modules

Problems with typography

When the user mixin font(), passing as parameter the weight using numbers, it is not being applied to the CSS generated only works when bold step as a parameter. I do not know if I was clear, but below is an example.

// font
p
  font(p2, 500)

// source
p {
    font-size: 1.6rem;
    line-height: 2.4rem;
}

or 

// font
p
  font(p2, bold)

// source
.article p {
    font-size: 1.6rem;
    line-height: 2.4rem;
    font-weight: 700;
}