oneagency-jacket/src/jade/index.jade

Jacket is a Scss starterkit based on Gulp, Libsass and scss-lint with some sane default tasks and based on the Smacss and BEVM structures.

doctype html
html.no-js(lang='nl-BE')
  head
    meta(charset='utf-8')
    meta(http-equiv='x-ua-compatible', content='ie=edge')

    title Jacket
    meta(name='description', content='A starterkit with a sane default setup, a good starting structure and powerfull front-end tools.')
    meta(name='viewport', content='width=device-width, initial-scale=1')

    // FAVICONS

    // STYLES
    link(rel='stylesheet', href='css/base-styles.css')
    link(rel='stylesheet', href='css/helper-styles.css')
    link(rel='stylesheet', href='css/component-styles.css')
    link(rel='stylesheet', href='css/layout-styles.css')

  body
    .container.hor-p5
      .center-col-4.tablet
        header
          h1(style="line-height: 2.5rem; margin-bottom: 0;") Hi there, #[small #[span(style="color: #d27020") Awesome Front-end developer.]]
          p.-mt0 You are using #[strong Jacket]. #[img(style="position: relative; top: 4px;" src="https://img.shields.io/npm/v/oneagency-jacket.svg?label=version")]

          img(src="https://nodei.co/npm/oneagency-jacket.png?downloads=true")

          blockquote.-mb2(style="margin-left: 0; padding: 10px; padding-left: 15px; border-left: 3px solid #808080; color: #808080; font-size: 1.1rem; line-height: 1.5rem").
            A starterkit with a #[strong sane default setup], #[strong a good starting structure] and #[strong powerfull front-end tools] to back you up.

        h3 What #[span(style="color: #d27020") front-end tools] are included?
        ul.-mb2(style="line-height: 1.6rem; list-style-type: none;")
          li #[strong Npm] -- Jacket is an npm package. You can find the package #[a(target="_blank", href="https://www.npmjs.com/package/oneagency-jacket") here].
          li #[strong Gulp] -- As a build tool, Jacket uses #[a(target="_blank", href="http://gulpjs.com/") Gulp].
          li #[strong Sass] -- #[a(target="_blank", href="http://bourbon.io/") Bourbon] & #[a(target="_blank", href="http://neat.bourbon.io/") Neat], #[a(target="_blank", href="https://html5boilerplate.com/") h5bp normalize], #[a(target="_blank", href="https://twitter.com/autoprefixer") autoprefixer] and more.
          li #[strong Smacss and BEVM] -- Structure is #[a(target="_blank", href="http://smacss.com/") Smacss] based and #[a(target="_blank", href="https://viget.com/extend/bem-sass-modifiers") BEVM] is encouraged.
          li #[strong Scss linting] -- Scss linting lets you #[a(target="_blank", href="https://github.com/brigade/scss-lint") lint] your scss code.
          li #[strong BrowserSync] -- For crossdevice testing Jacket uses #[a(target="_blank", href="https://www.browsersync.io/") Browsersync].
          li #[strong Jade] -- Jacket is set up with #[a(target="_blank", href="http://jade-lang.com/") Jade] as templating language.
          li #[strong Sassdoc] -- Scss Mixins, functions and more are documented with #[a(target="_blank", href="http://sassdoc.com/") Sassdoc].


        h3 What #[span(style="color: #d27020") Gulp tasks] can be run?
        .-ml3.-mb2(style="line-height: 1.4rem")
          h4.-mb0 #[small gulp] help
          p.-mt1.
            The Help task displays all the gulp tasks.

          h4.-mb0 #[small gulp] favicons
          p.-mt1.
            The Favicons task can generate your favicons with #[a(target="_blank", href="http://realfavicongenerator.net/") Realfavicongenerator].

          h4.-mb0 #[small gulp] sass
          p.-mt1.
            The Sass task compiles your #[strong scss] to #[strong css]. <br>
            This task can do: Globbing, Autoprefixing, Sourcemaps, it includes a jsonImporter and sends a terminal notification when compilation fails.

          h4.-mb0 #[small gulp] scss-lint
          p.-mt1.
            Based on the .scss-lint.yml the Scss-lint task will check if all the scss code you wrote respects the codig standards.

          h4.-mb0 #[small gulp] jade
          p.-mt1.
            The Jade task wil compile all the Jade templates to html files in the dist folder.

          h4.-mb0 #[small gulp] browser-sync
          p.-mt1.
            The Browser sync task will serve this index.html file at localhost:3000/
            and it will watch the scss and jade files and refresh all the devices that are hooked up when these files change.

          h4.-mb0 #[small gulp] sassdoc
          p.-mt1.
            This task can generate all the scss documentation used in Jacket.

          h4.-mb0 #[small gulp] watch
          p.-mt1.
            This task watches all your files.

          h4.-mb0 gulp
          p.-mt1.
            The default tasks executes a sequence of tasks, see the #[strong gulpfile.js].


        h3 Sassdoc?
        p You can find the doc #[a(target="_blank", href="sassdoc/index.html") here]

        footer(style="margin-top: 70px;")
          p(style="text-align: center; color: #808080; font-size: 0.8rem").
            Jacket &bull; License MIT &bull; &copy; One Agency #{new Date().getFullYear()} &bull; Repository on #[a(target="_blank", href="https://github.com/Crosscheck/Jacket") Github]