Menu icon Foundation

Designer

My Posts




My Comments

James Donnelly commented on Zihang He's post over 1 year

Ok.
Does npm start work?

James Donnelly commented on Zihang He's post over 1 year

Hi Traci,
What operating system are you on?
Just to confirm you are running build on the project folder that contains the src folder?
JD

James Donnelly commented on Mads's post over 1 year

Hi,
The buttons on desktop will fit to the content, but it's an easy fix to make full width on mobile.
In your _template.scss file add the following:
@media only screen and (max-width: #{$global-breakpoint}) {
table.button{
width:100% !important;
td{
text-align:center !important;
}
}
}
You will then have to play around with text-align depending on where you want it to appear (default is left).
JD

James Donnelly commented on Zihang He's post over 1 year

Hi,
Does your HTML file have any spaces or odd characters that may not be visible in your editor?
You could try deleting the node_modules folder and run npm install to get a fresh batch of modules.
JD

James Donnelly commented on Hao Yu's post over 1 year

Antoine, in your solution all I get is "Error: The partial test could not be found"
What is your folder structure?
JD

James Donnelly commented on Hao Yu's post over 1 year

Hi,
I'm guessing you want it use like snippets of code that get re-used?
Most editors will have some sort of snippet/partial system built in. I use Sublime for example and I can create custom snippets so I just type a short code hit tab and my code magically appears. See how to use snippets here.
You would then just amend the snippet if you need to update it. Only problem with this is if your existing templates are using a partial then you'd manually have to go in and change them all.
JD

James Donnelly commented on Daniel Urrea's post over 1 year

Hi,
Try opening the project folder in CMD and enter 'npm install'. It should install all required nodes. Then try and run 'npm start'
JD

James Donnelly commented on Zihang He's post over 1 year

Hi,
Try running 
npm install
It will try to re-install the packages needed, then run npm run build
 
 
 
 

James Donnelly commented on Tony Strack's post over 1 year

Hi Tony,
You probably are but are you running npm run build to get an inlined HTML file?
JD

James Donnelly commented on Henrique Zambonin's post over 1 year

Hi all,
Simple solution I use for this below.
Add this into your _template.scss file and it will work and Outlook won't screw up fallback fonts.
Obviously replace with the fonts you require.
Where you want to use the font just use:
font-family: 'Playfair Display', 'Times New Roman', Times, Baskerville, Georgia, serif;
And use font weights to change the appearance of the font.
@media screen {
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
src: local('Playfair Display'), local('PlayfairDisplay-Regular'), url(https://fonts.gstatic.com/s/playfairdisplay/v10/2NBgzUtEeyB-Xtpr9bm1CV4QaRhHkZLZrsruvIjJ6Xo.woff) format('woff');
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700;
src: local('Playfair Display Bold'), local('PlayfairDisplay-Bold'), url(https://fonts.gstatic.com/s/playfairdisplay/v10/UC3ZEjagJi85gF9qFaBgIAjfA_CkPizPaBJKI36cCAY.woff) format('woff');
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 900;
src: local('Playfair Display Black'), local('PlayfairDisplay-Black'), url(https://fonts.gstatic.com/s/playfairdisplay/v10/UC3ZEjagJi85gF9qFaBgIFG5nCscAKpKP81nraB-v6E.woff) format('woff');
}
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 400;
src: local('Playfair Display Italic'), local('PlayfairDisplay-Italic'), url(https://fonts.gstatic.com/s/playfairdisplay/v10/9MkijrV-dEJ0-_NWV7E6N9QroGjXLbbdFByKqKsSrKI.woff) format('woff');
}
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 700;
src: local('Playfair Display Bold Italic'), local('PlayfairDisplay-BoldItalic'), url(https://fonts.gstatic.com/s/playfairdisplay/v10/n7G4PqJvFP2Kubl0VBLDENo6rfrboWJUlegBR-uMPb6glnMp3_3A8V8Ai8YosRtX.woff) format('woff');
}
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 900;
src: local('Playfair Display Black Italic'), local('PlayfairDisplay-BlackItalic'), url(https://fonts.gstatic.com/s/playfairdisplay/v10/n7G4PqJvFP2Kubl0VBLDEJdn2vTjPB9XMnyp27gz3a6glnMp3_3A8V8Ai8YosRtX.woff) format('woff');
}
}

Posts Followed

  • 4
    Replies
  • resize buttons

    By Mads

    buttonsresizegrid

    Hello. Is there not a way to resize buttons in Foundation emails 2? It seems so crazy for me, that there only is 4 sizes. I need to have to buttons below eachother. I can choose expanded or small-expanded, thats it?.... I need the buttons to go full... (continued)

    Last Reply by miss ziva over 1 year ago







Following

    No Content

Followers

My Posts

My Comments

You commented on Zihang He's post over 1 year

Ok.
Does npm start work?

You commented on Zihang He's post over 1 year

Hi Traci,
What operating system are you on?
Just to confirm you are running build on the project folder that contains the src folder?
JD

You commented on Mads's post over 1 year

Hi,
The buttons on desktop will fit to the content, but it's an easy fix to make full width on mobile.
In your _template.scss file add the following:
@media only screen and (max-width: #{$global-breakpoint}) {
table.button{
width:100% !important;
td{
text-align:center !important;
}
}
}
You will then have to play around with text-align depending on where you want it to appear (default is left).
JD

You commented on Zihang He's post over 1 year

Hi,
Does your HTML file have any spaces or odd characters that may not be visible in your editor?
You could try deleting the node_modules folder and run npm install to get a fresh batch of modules.
JD

You commented on Hao Yu's post over 1 year

Antoine, in your solution all I get is "Error: The partial test could not be found"
What is your folder structure?
JD

You commented on Hao Yu's post over 1 year

Hi,
I'm guessing you want it use like snippets of code that get re-used?
Most editors will have some sort of snippet/partial system built in. I use Sublime for example and I can create custom snippets so I just type a short code hit tab and my code magically appears. See how to use snippets here.
You would then just amend the snippet if you need to update it. Only problem with this is if your existing templates are using a partial then you'd manually have to go in and change them all.
JD

You commented on Daniel Urrea's post over 1 year

Hi,
Try opening the project folder in CMD and enter 'npm install'. It should install all required nodes. Then try and run 'npm start'
JD

You commented on Zihang He's post over 1 year

Hi,
Try running 
npm install
It will try to re-install the packages needed, then run npm run build
 
 
 
 

You commented on Tony Strack's post over 1 year

Hi Tony,
You probably are but are you running npm run build to get an inlined HTML file?
JD

You commented on Henrique Zambonin's post over 1 year

Hi all,
Simple solution I use for this below.
Add this into your _template.scss file and it will work and Outlook won't screw up fallback fonts.
Obviously replace with the fonts you require.
Where you want to use the font just use:
font-family: 'Playfair Display', 'Times New Roman', Times, Baskerville, Georgia, serif;
And use font weights to change the appearance of the font.
@media screen {
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
src: local('Playfair Display'), local('PlayfairDisplay-Regular'), url(https://fonts.gstatic.com/s/playfairdisplay/v10/2NBgzUtEeyB-Xtpr9bm1CV4QaRhHkZLZrsruvIjJ6Xo.woff) format('woff');
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700;
src: local('Playfair Display Bold'), local('PlayfairDisplay-Bold'), url(https://fonts.gstatic.com/s/playfairdisplay/v10/UC3ZEjagJi85gF9qFaBgIAjfA_CkPizPaBJKI36cCAY.woff) format('woff');
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 900;
src: local('Playfair Display Black'), local('PlayfairDisplay-Black'), url(https://fonts.gstatic.com/s/playfairdisplay/v10/UC3ZEjagJi85gF9qFaBgIFG5nCscAKpKP81nraB-v6E.woff) format('woff');
}
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 400;
src: local('Playfair Display Italic'), local('PlayfairDisplay-Italic'), url(https://fonts.gstatic.com/s/playfairdisplay/v10/9MkijrV-dEJ0-_NWV7E6N9QroGjXLbbdFByKqKsSrKI.woff) format('woff');
}
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 700;
src: local('Playfair Display Bold Italic'), local('PlayfairDisplay-BoldItalic'), url(https://fonts.gstatic.com/s/playfairdisplay/v10/n7G4PqJvFP2Kubl0VBLDENo6rfrboWJUlegBR-uMPb6glnMp3_3A8V8Ai8YosRtX.woff) format('woff');
}
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 900;
src: local('Playfair Display Black Italic'), local('PlayfairDisplay-BlackItalic'), url(https://fonts.gstatic.com/s/playfairdisplay/v10/n7G4PqJvFP2Kubl0VBLDEJdn2vTjPB9XMnyp27gz3a6glnMp3_3A8V8Ai8YosRtX.woff) format('woff');
}
}

Posts Followed




Following

  • No Content

Followers

  • No Content