Menu icon Foundation
Images and CSS not appearing in Dist folder?

I am trying to use Curb Stack for the first time.

I designed a page and when I tried to inline styles (by running npm run build) I notice that neither images nor css have been copied from assets to list folder.

If I try to open the index page saved in the list folder I can see that my code has been processed by the stylesheet is completely missing.

I thought this would happen by default so I wonder how to fix this?

This is important in my case as I would like to upload the template to MailChimp.

Another issue I could not figure out is that I set my images to have 100% width on desktop (large) but if I narrow the browser window below the small breakpoint padding appears on the sides of the images. Setting padding of 0px to rows and columns did not help.

Any ideas on these issues would be much appreciated!

setupDistributionpadding

I am trying to use Curb Stack for the first time.

I designed a page and when I tried to inline styles (by running npm run build) I notice that neither images nor css have been copied from assets to list folder.

If I try to open the index page saved in the list folder I can see that my code has been processed by the stylesheet is completely missing.

I thought this would happen by default so I wonder how to fix this?

This is important in my case as I would like to upload the template to MailChimp.

Another issue I could not figure out is that I set my images to have 100% width on desktop (large) but if I narrow the browser window below the small breakpoint padding appears on the sides of the images. Setting padding of 0px to rows and columns did not help.

Any ideas on these issues would be much appreciated!

Corey Schaaf over 2 years ago

Izzy - I'll address the image problem first.  

If you are using images that are larger than the container they are setting inside of the padding issue may not be padding at all.  It may be the image scaling down to whatever proportions the container it's sitting inside of are. If you have images that are larger than the containers they are sitting inside of - make sure you include the height="" and width="" inside the img tag.  Note that you need to use the height="" width="" attributes and not style="height:XX; width:XX;" for this to work.  

I have a few other questions before I can answer your first question. When you use foundation watch vs foundation build there are two things that are different. Foundation watch is setting up a local view of you file and keeping folder structure intact which is why you should still be able to see a css folder and such.  If you open the index.html file in the dist folder you'll also notice that it's not minified. 

However if you run a foundation build, this creates a production ready file for you to top into your ESP (email service provider).  It should be inlined and your images should be optimized. 

If that is not happening - are you getting any errors during your build in cmd line?