dhBoilerplate is renamed and moved to:
Baukasten
Cheers
David
Boilerplate made by David Hellmann
dhBoilerplate is renamed and moved to:
Baukasten
Cheers
David
JS Files durch Webpack schleifen…
Add a PX to em function which do the magic.
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
_button.style.scss > _style.scss
_button.scripts.js > main.js
_button.template.html > _template.html
.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: '#';
}
}
}
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?
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 %}
Single: Seo Title adden
Single: Preview Image
Markup is not so nice…
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
Siehe einige Artikel…
@include f($dh-gutterWidthMin * 6, $dh-gutterWidthMax * 6, padding-top);
@include f($dh-gutterWidthMin * 8, $dh-gutterWidthMax * 8, padding-bottom);
do that smarter!
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>
Some rules are deprecated…
{% if pageTitle is defined and pageTitle %}
<h1>{{ pageTitle }}</h1>
{% endif %}
{% if pageTitle is defined and pageTitle is not empty %}
<h1>{{ pageTitle }}</h1>
{% endif %}
$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.
Error in plugin 'gulp-sass'
Message:
___src/assets/css/_modules.scss
Error:
File to import not found or unreadable:
../../templates/_modules/_accordion/style.
Parent style sheet:
/Applications/MAMP/htdocs/_sandbox/yo-dhbp/___src/assets/css/_modules.scss
on line 7 of ___src/assets/css/_modules.scss
>> @import '../../templates/_modules/_accordion/style';
Details:
status:
1
file:
/Applications/MAMP/htdocs/_sandbox/yo-dhbp/___src/assets/css/_modules.scss
line:
7
column:
1
formatted:
Error:
File to import not found or unreadable:
../../templates/_modules/_accordion/style.
Parent style sheet:
/Applications/MAMP/htdocs/_sandbox/yo-dhbp/___src/assets/css/_modules.scss
on line 7 of ___src/assets/css/_modules.scss
>> @import '../../templates/_modules/_accordion/style';
^
messageFormatted:
___src/assets/css/_modules.scss
Error:
File to import not found or unreadable:
../../templates/_modules/_accordion/style.
Parent style sheet:
/Applications/MAMP/htdocs/_sandbox/yo-dhbp/___src/assets/css/_modules.scss
on line 7 of ___src/assets/css/_modules.scss
>> @import '../../templates/_modules/_accordion/style';
^
messageOriginal:
File to import not found or unreadable:
../../templates/_modules/_accordion/style.
Parent style sheet:
/Applications/MAMP/htdocs/_sandbox/yo-dhbp/___src/assets/css/_modules.scss
relativePath:
___src/assets/css/_modules.scss
Viel Spaß ;)
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);
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?
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
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">
Whats more robust=
.inTmpDir(function(dir) {
console.log(dir);
return dir;
})
an Run Task ankleben :) danke Martin
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.
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?
HASS
@mixin center {
float: none;
margin-left: auto;
margin-right: auto;
}
yarn add --develop babel-preset-env
{
"presets": [
["env",
{
"targets": {
"browsers": [
"last 2 versions",
"Safari >= 7",
"Explorer 11"
]
}
}
],
"es2015",
"stage-0"
]
}
Update to ^1.0.0
http://yeoman.io/authoring/running-context.html
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)
Create a category for Settings
Reduce Options! Less is more, you know!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.