I bought the book Jump start foundations from sitepoint and I am going through the lessons on there and I am having a few issues and have some questions.
I’m doing this from my own computer so the only was I can think of showing you is via screenshot.
1 - The first thing I’m stuck on is I have added a div to my row with the class of large-12 column and an unordered list within it with the class of small-block-grid-1 medium-block-grid-3. The autor says this should show them nicely side by side (see attachment 1) but all I’m getting is an unstyled list and I don’t know what I’m missing. I’m assuing foundations should already style these classes but not sure why mine is like it is so (see my result in attachment 2)
I’ve also attached a screenshot of my code and the code the book is telling me but I’m not sure if this is helpful or if you are able to know why it’s like it is for me? I’m not sure how else to show it?
2 - The second issue is the autor tell me to add an Icon bar to the footer. He says you can download the fonts from foundation and simply add them to the images folder however when I downloaded them they are a load of font and css files. I added the css files to my css folders and added a fonts file and added all the font files there and then added the links to them all in the header but unsurprisingly I get nothing? So what is the correct manner to add all these files etc for foundations?
Sorry for the long winded explations but I’m hoping you will know what i’m talking about but if not let me know what info I can add and how to make it clear.
Hey, I’m the technical editor for that book…can you get this example up on codepen, or a live website?
I ran through it with my eyes, and I couldn’t spot any invalid HTML or anything which would lead to that (that’d be my first guess since it looks like some styling is missing there.
It appears your foundation file doesn’t have the block grid classes in there. Are you sure you downloaded Foundation that includes this? I know you can customize the Foundation build, so I’m wondering whether you did this, and if you left off block grid. Either way, it appears your foundation CSS file is incomplete.
I just went to the foundations site and downloaded the complete pacage and extracted it.
Also what about the footer?
I’ve added the markup for the footer. And downloaded the icon files and added them in the header. I’m sure I’ve done it wrong but in the book it says just to add them in the images file but that can’t be right either?
It appears block grids in Foundation 6 were merged into the main grid. When we wrote this book, Foundation 6 had not come out yet. It looks like the block grid CSS (the classes) are in foundation 5.x, but in 6 they were removed. Check out their documentation.
As far as the footer, I’m not seeing any HTML code referencing the footer. Revisit that chapter. What are the instructions? I don’t have the book in front of me. Looks like a step (or several) are missing.
Within each of these item anchors we add the items themselves, which are simply blank elements with a class corresponding to the Foundation icon we’d like to use. These are font icons provided for free by Zurb. The advantage of using font icons is that they will look crisp in any display resolution. These icons can be found at Foundation’s website,2 and simply need to be downloaded and stored in the img folder of your root directory. By adding href=“” attributes to the anchor tags, we can direct these icons wherever we wish. Just like that, our footer has a beautiful icon bar with elegant (not to mention scalable) icons directing our users to various contact links.
But after going to foundation site and downloading the fonts they come is css and font files not images so I just added the files to the relevant folders and added the links in the header.
That’s looking in the CSS folder for the font icons. Change the directory to look in the fonts folder so the CSS can actually make use of the font icons.
Those paths are pointing to /foundations/css/[icon font file name here].[extension]. That’s incorrect since they live in /foundations/fonts/[icon font file name here].[extension].
I see what you mean. I did it on my computer first and it didn’t work on there and uploaded it. I changed it to the proper URL but is that how it is supposed to be? In the book it looked like a grey footer with white icons.
Also I took a look at the new classes for blobk grids and I changed the block grod class but no change there either. Did I put the class in the wrong place or put it wrong?
The URL of your files will vary depending on how you decide to set up the folder structure. There is no “right” or “wrong” way . [quote=“hantaah, post:14, topic:213518”]
Also I took a look at the new classes for blobk grids and I changed the block grod class but no change there either. Did I put the class in the wrong place or put it wrong?
[/quote]
You changed the classes but look at their HTML structure in their examples on the doucmentation site, and now look at yours.
oh right. The book says to do it as an ul so should I scrap that idea completely then and use their guide?
What should I do about the footer still? It’s still not styled like it is in the book? It has the font icons there but looks like there’s no styling for the icon-bar ?
.