voidlabs / versafix-template Goto Github PK
View Code? Open in Web Editor NEWMaster template for Mosaico + scripts to help generate & maintain it.
License: MIT License
Master template for Mosaico + scripts to help generate & maintain it.
License: MIT License
Sounds like Windows 10 Mail have a default stile for "a strong" to render them in dark blue/black.
Unfortunately Windows 10 Mail does not support "color: inherit" so we need a different workaround.
Hi,
when trying to build the template using the provided script by running npm run-script build
, it fails with the following error:
ReferenceError: cmd is not defined at makeThumbs (/home/frederic/XR/versafix-template/src/makeThumbs.js:23:64)
The reason is that in line 5 of src/makeThumbs.js
the variable phantombin
is assigned the property path
of require(phantomjs-prebuilt)
, which exists, but is null
. This of course does not work when trying to run that variable as part of a shell command var result = cp.execSync(phantombin + ' ' + args.join(' '), { stdio: [0, 1, 2] });
in line 19.
My environment is as follows:
Any idea what I am doing wrong? Is my node version to new? Is phantombin not installed in the correct version?
Thanks,
Frederic
Hi, I'm trying to create a new template and I'm using the versafix as a base/learning template. I noticed that some of the links of the images have font preferences even though they don't have any text content in the output. Maybe clearing these unused parts would be useful... Or am I missing something? :)
Samsung Email app seems to supports styles and media queries but does something weird and adapts the viewport to the largest "width" attribute or style width property found on any html element in the email.
So versafix is rendered full width, like it does on desktop.
Samsung Email market share is around 5% in some countries, so we'd like to support it.
The issue is documented here, but there is no known workaround yet:
hteumeuleu/email-bugs#73
There's some hints also in this Litmus community discussion:
https://litmus.com/community/discussions/7133-samsung-mail-100-width-fix-for-left-aligned-mails
defined colors
#517bbe,#64ccf1,#dc4e41,#5e5656,#0079ba,#bd091d,#ff0082,#05b5ec,#4a79a3,#ef2922
social icons colors
#3b5998,#4099FF,#d34836,#606060,#007bb6,#C92228,#ff0084,#45bbff,#bc2a8d,#cd201f
We currently use "-ko-attr-alt: @image.alt" and this creates an empty ALT="" attribute when the alt variable is empty.
Images with empty alt are "special" for Firefox and Chrome and, for example, they are hidden when the source url is invalid. This make less usable the tool in some case.
The output and the preview is correct, but during editing on Firefox you can spot a couple of px coloured with the external background color under the block.
Could be an issue with the "display: inline-block" in the "editing div" here:
https://github.com/voidlabs/versafix-template/blob/master/template-def/template-versafix-1.mml#L401
Need to remember why it was inline-block before we try to remove it.
Currently, if you try to insert an emoji in a versafix-template, clients like Gmail convert the emoji into img
element. In versafix, all img elements are styled with display:block
. It's not possible to get an inline emoji for example in a section title.
Mosaico visualization
Gmail inbox visualization
From a fresh repo clone, I run npm install
then npm run translate
and I get the following error:
> [email protected] translate
> node src/translate.js
Missing translation: options bw=Gray Circle
|colors=Coloured Circle
|bwb=Black Circle
|sqbw=Gray Square
|sqcolors=Coloured Square
|sqbwb=Black Square
|rdcol=Rounded Colors
|rdbl=Rounded Black
|rdw=Rounded White
|sqrdcol=Squared Colors
|sqrdbl=Squared Black
|sqrdw=Squared White
|white=White
|coloured=Coloured
|black=Black
Missing translation: options colors=Coloured Circle
|bw=Gray Circle
|bwb=Black Circle
|sqbw=Gray Square
|sqcolors=Coloured Square
|sqbwb=Black Square
|rdcol=Rounded Colors
|rdbl=Rounded Black
|rdw=Rounded White
|sqrdcol=Squared Colors
|sqrdbl=Squared Black
|sqrdw=Squared White
|white=White
|coloured=Coloured
|black=Black
My env versions:
npm version
{
'versafix-template': '1.3.2',
npm: '8.19.2',
node: '16.18.0',
v8: '9.4.146.26-node.22',
uv: '1.43.0',
zlib: '1.2.11',
brotli: '1.0.9',
ares: '1.18.1',
modules: '93',
nghttp2: '1.47.0',
napi: '8',
llhttp: '6.0.10',
openssl: '1.1.1q+quic',
cldr: '41.0',
icu: '71.1',
tz: '2022b',
unicode: '14.0',
ngtcp2: '0.8.1',
nghttp3: '0.7.0'
}
Just as a note, the npm install
returns the following warnings:
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: this package is now deprecated
Screenreaders would thanks
When using "separator block", you will encounter a little misbehavior in IOS Mail, when using it in device with larger fonts (accessibility settings).
The "hr" (in fact a colored td cell) height will be enlarged too, maybe due to the use of "font-size: xpx; line-height: xpx;" css attributes, that is multiplied by the IOS font size selector.
is it possible to add background images to a template? I found this issue, that seems to imply it should be possible, but I am not sure where to add code to be able to reproduce this.
Is it possible to add an image picker to the template, and define a background image for either blocks or the whole template?
We have reports of very large social icons on outlook. Unfortunately we don't know which version of outlook and if it is related to high dpi or not.
We should test this and maybe add some "width/height" in the CSS styles (now they are only defined as html attributes).
Hello, Twitter recently changed the logo, would it be a good idea to include it in a new version?
Thanks
I created a template using mosaico.io. Once I downloaded and tested the newsletter through both Microsoft Word and our client relations management software, Sumac, there is a line that appears in my downloaded version of Outlook and not in my online outlook. I've read through the contributing file from mosaico.io, but I'm not a coder and don't understand most of the recommended solutions like "take note of the full log of your npm install, and grunt commands output" or "you have to build it and to run a backend server (either the node.js version bundled with this project or the php backend referenced above or write your own)".
I'm hoping someone can email me to help [email protected]
I am using the versafix-1: The versatile template
Microsoft Office 1808
I don't know what a backend is...
I have read the readme several times and believe I am including all the appropriate information. Please let me know if that is not the case, and I will include what is missing. I am viewing the versafix-1 template in Outlook 2016 on Windows 10. When I view the emails with Outlook 2016, I am seeing lines in the shown email. I am using the online Mosaico editor (the demo editor) to send myself a test email. I am also experiencing this issue with the code I have cloned from github and that is why I tried a test email in the online editor. I am not seeing this issue with other clients I have (Outlook 2010, Gmail and Android Email, MailCatcher in my dev environment also does not display them).
I generated the email below by going to the online demo editor, inserting the blocks I have seen the issue with thus far and used the Test button to send myself a test email.
If no textual elements "pushes" the width of the content to "100%" then the sideArticle/sideImage blocks fallback to a mobile layout.
This is a regression introduced in 1.2 and 1.3 code (mainly because of new "ltr" "rtl" code)
Good afternoon,
I am looking for a way to change the background color of a paragraph in a block.
I figured out how to change the color for the complete bloc and how to highlight only the text but how about the background color of the text zone (delimited by a square visible when writing the paragraph) ? I put an example attached
Thanks for your help.
Seems like Yandex is removing the whole style attribute when it find something "unexpected".
From some tests the issue is within the "calc(NUMBERpx - NUMBER%" we use to enable responsivity when media queries are not available. Whenever Yandex parser find a "-" a "_" a "+" an "*", an "&" in brackets it will remove the full style object. If it finds a "- " sequence or a "-NUMBER" or a "NUMBER-" in a property value (even not in brackets) it will also remove the full style object.
Otherwise Yandex removes only the unknown styles.
That calc is our current main responsive solution for multicolumns:
https://github.com/voidlabs/versafix-template/blob/master/template-def/template-versafix-1.mml#L467
I currently don't see how we could workaround Yandex, unless we find some way to target Yandex. We could try replacing the div with a span, but we have to check all of the other clients to see if this would work for them.
For sure the editor is not able to use the color for the "frame" but maybe the issue affects also the output email (being limited to ALT it is minor).
Hey! I am trying to edit the vesafix template to fit our needs. which includes defining default href URLs for the social Icons.
I wanted to ask if this is even possible because I have tried it in a few different ways including:
Defining the URL in the block definition:
socialBlock {
label: Social Block;
properties: -//- fbUrl=someUrl -//-
variant: socialIconType;
theme: frameTheme
}
which yields me this error:
Exception while parsing the template Exception parsing expression @[fbUrl] [] Trying to set a new default value for socialBlock fbUrl while it already exists (current: test, new: )
or defining it through the actual Url attribute:
fbUrl {
label: Facebook Link;
extend: url;
default: someURL
}
which does not throw an error but does not seem to set a default value.
When trying to run the provided script to clean the project, it complains about a missing package:
$ npm run-script clean
> [email protected] clean /home/frederic/XR/versafix-template
> node ./node_modules/rimraf/bin.js -- 'dist/template/*' 'dist/template.it/*'
internal/modules/cjs/loader.js:796
throw err;
^
Error: Cannot find module '/home/frederic/XR/versafix-template/node_modules/rimraf/bin.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
at Function.Module._load (internal/modules/cjs/loader.js:686:27)
at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
at internal/main/run_main_module.js:17:11 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] clean: `node ./node_modules/rimraf/bin.js -- 'dist/template/*' 'dist/template.it/*'`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] clean script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
The package rimraf
is indeed not mentioned in package.json
. Once it is installed by running npm install --save-dev rimraf
the script works as expected.
@bago Adding this here as the issue may effect just the versafix template.
It also seems that images used in templates are treated differently than in production emails. Attached you will see two of the same images, both on the triple block with text. The top image is what we had in the template, the bottom image, we added in the production email. the source is the same file.
empty url() is like referencing to the same url of the page being viewed: this is not an issue with real email clients, but webmails or "web versions" of the email will make sub-requests to the same url.
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.