davidhellmann / generator-dhboilerplate Goto Github PK

Boilerplate made by David Hellmann

JavaScript 11.50% CSS 4.74% PHP 53.31% HTML 28.93% Vue 0.01% Shell 0.08% ApacheConf 1.42%

boilerplate craftcms yo-generator generator-dhboilerplate prototyping wordpress wordpress-boilerplate craftcms-boilerplate gulp browserify

generator-dhboilerplate's Introduction

IMPORTANT

dhBoilerplate is renamed and moved to:
Baukasten

From now on use 'Baukasten'

Cheers
David

generator-dhboilerplate's People

Contributors

Stargazers

Watchers

Forkers

pandroid schobiwan paulwooddesign luanzanchet christophpaster dedaluz indisc eatasnack keramzyt marcelweder

generator-dhboilerplate's Issues

WebP transforms with Imager

Perhaps?

As per https://www.vaersaagod.no/en/using-webp-images-in-craft-with-imager

EM for Media Querries

Add a PX to em function which do the magic.

Add a Social Icon Set as Default…

All Modules in one Level

current:

MODULES
-- module a
-- module b
-- module c
-- CONTENTBUILDER
-- -- module a
-- -- module b

afterwards:

MODULES
-- module a
-- module b
-- module c
-- module d
-- module e

Refactoring Module Names

_button.style.scss > _style.scss
_button.scripts.js > main.js
_button.template.html > _template.html

Sass Namespacing use $root

.m-navCategories {
  $root: &;

  #{$root}__list {
    list-style: none;
    margin-bottom: 0;
    font-size: fs('ms-2');
    text-transform: uppercase;
  }

  #{$root}__item {
    display: inline-block;
    margin-right: s(4);
    margin-bottom: s(2);

    &:before {
      display: none;
    }

    &.is-active #{$root}__link {
      color: c('martini');
    }
  }

  #{$root}__link {
    display: inline-block;

    &::before {
      content: '#';
    }
  }
}

Error on gulp init (Prototyping Option)

Installing this generator for the first time.
Receiving this error:

Requiring external module babel-register
module.js:471
    throw err;
    ^

Error: Cannot find module 'gulp-twig-up-to-date'
at Function.Module._resolveFilename (module.js:469:15)
 at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/spinline/Sites/thegen/gulp/tasks/templates.js:3:1)
    at Module._compile (module.js:570:32)
    at loader (/Users/spinline/Sites/thegen/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/spinline/Sites/thegen/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)

Is babel-register something that needs to be installed and configured separately?

Add srcset Macro from Viget

Make the Responsive thing easier to use!
Maybe remove Imager to reduce Third Party Stuff

{% macro srcset(image, outputWidths, aspectRatio) %}
  {# setup #}
  {%- set outputWidths = outputWidths | default([640, 1024, 1600]) -%}
  {%- set srcset = [] -%}
  {# if output width is smaller than or equal to the original image width #}
  {%- for outputWidth in outputWidths -%}
    {%- if outputWidth <= image.width -%}
      {%- if aspectRatio -%}
        {%- set transformOptions = { width: outputWidth, height: outputWidth * aspectRatio } -%}
      {%- else -%}
        {%- set transformOptions = { width: outputWidth } -%}
      {%- endif -%}
      {%- set srcset = srcset | merge([image.url(transformOptions) ~ ' ' ~ outputWidth ~ 'w']) -%}
    {%- endif -%}
  {%- endfor -%}
  {# output srcset #}
  {{- srcset | join(', ') -}}
{% endmacro %}

Example

{% set image = entry.singleHeroImage.one %}
  {% if image %}
    {% import '_macros/_macro-srcset.html' as macroSrcset %}
    {% set outputWidths = [640, 1024, 1440] %}
    {% set aspectRatio = (1/1) %}
    <div class="{{ classname ~ '__image' }}">
      <figure class="lazyload"
              style="background-image: url('{{ image.getUrl('preview') }}');"
              data-bgset="{{ macroSrcset.srcset(image, outputWidths, aspectRatio) }}"
              data-sizes="auto">
      </figure>
    </div>
  {% endif %}

Default Fields Backend adden

Single: Seo Title adden
Single: Preview Image

Yeoman generator not working

TypeError: Cannot read property 'extend' of undefined
    at Object.<anonymous> (/Users/albertpi/.nvm/versions/node/v6.5.0/lib/node_modules/generator-dhboilerplate/app/index.js:12:43

Import dependencies in each .scss File

Read: https://medium.com/@marcmintel/how-to-use-the-module-pattern-in-your-scss-sass-stylesheets-89fe38a6e1f3

Page Transitions Again?

https://www.smashingmagazine.com/2016/07/improving-user-flow-through-page-transitions/

.htaccess not working in craft public folder

Installation of Craft can't be reached because of a issue in your .htaccess.

The following lines are missing in your dist/public/.htaccess
(coming from the original Craft installation)

<IfModule mod_rewrite.c>
    RewriteEngine On
    # Send would-be 404 requests to Craft
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !^/(favicon\.ico|apple-touch-icon.*\.png)$ [NC]
    RewriteRule (.+) index.php?p=$1 [QSA,L]
</IfModule>

Styleline Task anpassen (Error Layer)

Update Var Test to this…

https://straightupcraft.com/articles/testing-if-something-exists-is-defined-length-is-not-null-is-not-empty

{% if pageTitle is defined and pageTitle %}
    <h1>{{ pageTitle }}</h1>
{% endif %}

{% if pageTitle is defined and pageTitle is not empty %}
    <h1>{{ pageTitle }}</h1>
{% endif %}

Padding / Margin Stuff

$minGutter: 8px;
$maxGutter: 16px;

@mixin make-section() {
  @include ft($minGutter * 2, $maxGutter * 2, margin-left margin-right);
}

@mixin make-row() {
  @include ft(-$minGutter, -$maxGutter, margin-left margin-right);
}

@mixin make-col() {
  @include ft($minGutter, $maxGutter, padding-left padding-right);
  @include ft($minGutter * 2, $maxGutter * 2, margin-top);
}

.container {
  @include make-section();
}

.row {
  @include make-row();
}

.col {
  @include make-col();
}

Sections
oben immer mit oben - margin unten normal.

Generate JSON File within index.js

Thanks to Marcel for this way.

// Setup package.json
const packageJson = this.fs.readJSON(this.templatePath('_package.json'));

Object.assign(packageJson, {
    title: params.projectName,
    name: params.projectName,
    description: params.projectDescription,
    version: params.projectVersion,
    author: {
        name: params.projectAuthor,
        email: params.projectMail,
        url: params.projectUrl
    }
});

if (params.projectVue == true) {
    Object.assign(packageJson.devDependencies, {
        vue: '^2.0.2',
        'vue-resource': '^0.9.3',
        'vue-router': '^0.7.13',
        'browserify-hmr': '^0.3.1',
        'vue-hot-reload-api': '^2.0.8',
        vueify: '^9.4.0'
    });

    Object.assign(packageJson.dependencies, {
        axios: '^0.15.3'
    });

    Object.assign(packageJson.browser, {
        vue: 'vue/dist/vue.common'
    });

    packageJson.browserify.transform.unshift('vueify');
}

if (params.projectjQuery == true) {
    Object.assign(packageJson.dependencies, {
        jquery: '^3.0.0'
    });
    Object.assign(packageJson.browser, {
        'jquery': './node_modules/jquery/dist/jquery.js',
    });
}

this.fs.writeJSON(this.destinationPath('package.json'), packageJson);

New Update having bugs ?

Since I updated, I get this error:

node_modules/critical/node_modules/fs-extra/lib/copy-sync/copy-file-sync.js:6
const _buff = Buffer.alloc(BUF_LENGTH)...

And even when I remove this dependency completely, I still get compilation error with the task 'sass' and 'babel-register'. Is there something I am missing?

Not able to run the generator

It seems these lines break it for me:

    var gitInfo = {
        name: exec('git config user.name', {silent: true}).replace(/\n/g, ''),
        email: exec('git config user.email', {silent: true}).replace(/\n/g, ''),
        github: exec('git config github.user', {silent: true}).replace(/\n/g, '')
    }

With the error message by Yo:

ReferenceError: exec is not defined

Add Theme Color

Go.

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">

http://stackoverflow.com/questions/26960703/how-to-change-the-color-of-header-bar-and-address-bar-in-newest-android-chrome-v

Test Stuff

.inTmpDir(function(dir) {
console.log(dir);
return dir;
})

an Run Task ankleben :) danke Martin

jQuery is Yes, but Vue is No - Error in Scaffolding/Installation

Nature of Issue:
Scaffolding is stopped because of package.json error at Line 144, if jQuery is Yes, but Vue is No.

How to Replicate:
Choose the WordPress Install, but 'Yes' jQuery, 'No' Vue.js. This will cause an error as the package.json file is invalid.
package.json Line 144: "jquery": "./node_modules/jquery/dist/jquery.js",
How to Solve:
Remove the comma , if only one of these Browser dependencies are within the package.json file.

For more information, please try json-linting, this package.json file in the error.

Add Plugin Image Resizer as Default

https://github.com/engram-design/ImageResizer

Generator crashing

When I attempt to run the generator with "yo dhboilerplace" I get the following error:

events.js:160
throw er; // Unhandled 'error' event
^

ReferenceError: gitInfo is not defined
at child.askFor (C:\Users\erik\AppData\Roaming\npm\node_modules\generator-dhboilerplate\app\index.js:229:26)
at Object. (C:\Users\erik\AppData\Roaming\npm\node_modules\generator-dhboilerplate\node_modules\yeoman-generator\lib\base.js:439:23)
at C:\Users\erik\AppData\Roaming\npm\node_modules\generator-dhboilerplate\node_modules\run-async\index.js:25:25
at C:\Users\erik\AppData\Roaming\npm\node_modules\generator-dhboilerplate\node_modules\run-async\index.js:24:19
at C:\Users\erik\AppData\Roaming\npm\node_modules\generator-dhboilerplate\node_modules\yeoman-generator\lib\base.js:440:9
at runCallback (timers.js:651:20)
at tryOnImmediate (timers.js:624:5)
at processImmediate [as _immediateCallback] (timers.js:596:5)

I've reinstalled npm/yeoman/the generator multiple times without any luck, any idea what could be going on?

Center Mixin

HASS

@mixin center {
float: none;
margin-left: auto;
margin-right: auto;
}

Write more Docu about Mixins and Stuff like this

Babel env

yarn add --develop babel-preset-env

{
  "presets": [
    ["env",
      {
        "targets": {
          "browsers": [
            "last 2 versions",
            "Safari >= 7",
            "Explorer 11"
          ]
        }
      }
    ],
    "es2015",
    "stage-0"
  ]
}

Yeoman Updaten — rewrite

Update to ^1.0.0
http://yeoman.io/authoring/running-context.html

Craft Scripts includen

https://github.com/nystudio107/craft-scripts

yo dhboilerplate

npm -v 5.0.4

AppData\Roaming\npm\node_modules\generator-dhboilerplate\generators\app\index.js:71
async initializing() {
^^^^^^^^^^^^
SyntaxError: Unexpected identifier
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)

Refactor Image Slider Modul

Create a category for Settings

Refactor Slider Module

Reduce Options! Less is more, you know!