Menu icon Foundation

Coder | Melbourne, Australia

My Posts

  • 2
    Replies
  • Broken building blocks

    By JordyV

    Foundation Website

    Hi, Has anyone else been having troubles with the building blocks lately? or is it just me? It seem's that more than a few of them have broken or are misbehaving For example http://zurb.com/building-blocks/showcase-card   -    imag... (continued)

    Last Reply by JordyV over 2 years ago


My Comments

JordyV commented on Roland's post over 2 years

When I installed F6 I didn't even end up with a settings file haha, not sure what happened.
I rolled back to Foundation 5 and haven't tried 6 again, not out of spite or anything, hell it took me until 2016 to switch from plain css to sass haha

JordyV commented on Alec Stewart's post over 2 years

Foundation Icons comes with the .svg files for each individual icon.
Once you download and extract the .zip, you should see a directory named 'svgs'
Have a look in there for the file 'fi-social-zurb.svg', that's the icon you're looking for.
You can just call the .svg in your page as you normally would with any other .svg/sprite.
 
Or you could always just delete the .svg's you won't be using, however the css for the svg's will still be in place but you can easily strip if from fontawesome.css if you wish.

JordyV commented on newbie5's post over 2 years

Hi,
Sorry, I don't know anything about ruby but it sounds like the scss files haven't been compiled to css.
If you were using compass, I'm pretty sure running 'bundle exec compass watch' would fix your problem.
I just don't know what the ruby equivalent would be, hopefully someone else who does can chime in.

JordyV commented on JordyV's post over 2 years

It seem's to have been like this for a few days, the forum spam has gotten out of hand too

JordyV commented on TJinOhio's post over 2 years

I know your pain mate, I've been going through the same. I was confused too, a lot of documentation for web projects now just assume that you already know npm, grunt, ect.
I'll try to help you, but I may not be 100% on the proper terms as I'm learning myself.
I'd suggest that you start by reading some articles about SASS, nothing too complicated you should be able to find a good one on one of the various design blogs out there.
Basically SASS is a way of extending what we can already do with CSS
 
I'll give you an idea of how editing a basic site with sass would work.
You have your project folder with all your files, to keep it simple, lets make it just two files
-index.html
-style.css
As usual, your HTML is in one and your CSS in the other. Now with SASS, instead of editing 'style.css' you have a separate '_style.scss' file
As you make your changes a precompiler watches your folder. I know, sounds complicated, but on a very basic level it's just a program that watches a folder for file changes, when it detects a file change to a .scss file it will run through and convert it to css.
I mentioned before that you could extend css, heres a basic example.
First we have a basic css class

body{
background: #000000;
color: #FFFFFF;
}

Now, let's say you need to use these two colors all over throughout your design as I'm sure you've needed to before.

Well, with sass you could use a mixin

// define your colors
$white : #FFFFFF;
$black : #000000;

Now, wherever you need the color white just use $white, the same for $black

body{
background: $black;
color: $white;
}

This is just a simple example, but you can achieve much more
That should help you start to get how it works.
As for Foundation CLI
CLI stand for Command Line Interface
You said you are familiar with ASP.NET so I'm guessing you are familiar with using a command line, or at least you aren't scared of it.
You need to have a few things installed before you get to the foundation cli, the process will differ depending on your operating system. The Windows & Linux installs are pretty straightforward, I'm not sure about Mac's as I don't use them, but there should be plenty of help for mac users out there.
You'll need to install
Git - http://git-scm.com/
NodeJS - http://nodejs.org/
Ruby - https://www.ruby-lang.org/en/
Once those have been installed you can follow the steps in the documentation to install the foundation cli but i;; give a quick run down for you here (I use Foundation 5, but I'll assume you want to install Foundation 6)
Open a command line or terminal
( cmd on windows, terminal on linux/ubuntu or your favourite alternative )

Now we want to install the foundation cli globally ( you may need to be sudo/admin for this )

npm install --global foundation-cli


npm ~ node package manage
install --global ~ installs the package globally

foundation-cli ~ the package to install

now cd to your project directory, for example

cd Desktop/project

and run the command:

foundation new

This will run you through a small setup that copies all the foundation 6 files into your project directory and sets them up for you to edit
That should help get you started, I'd also suggest looking at the doc's for Foundation 5 as they are more fleshed out with the install process http://foundation.zurb.com/sites/docs/v/5.5.3/sass.htmlOnce again, I'm just getting back into design/development myself so hopefully someone more versed in Foundation will come along and correct anything I've gotten wrong

JordyV commented on Bull18 Movers Brisbane's post over 2 years

Not as long as it will take you to get the correct answer here

Posts Followed

  • 5
    Replies
  • Why no more Settings defaults?

    By Roland

    settings

    Hello,   I really liked the pattern to set ONLY the specific changes I need in my _settings.scss, which keeps it small and clean and makes the adoptions different. Then the foundation settings applied default values. The new foundation 6.2 seems t... (continued)

    Last Reply by Roland over 2 years ago




  • 2
    Replies
  • Where to start?

    By TJinOhio

    Where to Start

    For someone who is getting back into web development after having been out of it for a few years - I've done a lot of ASP.NET, JavaScript, HTML, it's overwhelming with all the new tools and terms. The Starter Projects on your site leave me baffled. "You c... (continued)

    Last Reply by Jarryd Fillmore over 2 years ago



Following

    No Content

Followers

My Posts


My Comments

You commented on Roland's post over 2 years

When I installed F6 I didn't even end up with a settings file haha, not sure what happened.
I rolled back to Foundation 5 and haven't tried 6 again, not out of spite or anything, hell it took me until 2016 to switch from plain css to sass haha

You commented on Alec Stewart's post over 2 years

Foundation Icons comes with the .svg files for each individual icon.
Once you download and extract the .zip, you should see a directory named 'svgs'
Have a look in there for the file 'fi-social-zurb.svg', that's the icon you're looking for.
You can just call the .svg in your page as you normally would with any other .svg/sprite.
 
Or you could always just delete the .svg's you won't be using, however the css for the svg's will still be in place but you can easily strip if from fontawesome.css if you wish.

You commented on newbie5's post over 2 years

Hi,
Sorry, I don't know anything about ruby but it sounds like the scss files haven't been compiled to css.
If you were using compass, I'm pretty sure running 'bundle exec compass watch' would fix your problem.
I just don't know what the ruby equivalent would be, hopefully someone else who does can chime in.

You commented on JordyV's post over 2 years

It seem's to have been like this for a few days, the forum spam has gotten out of hand too

You commented on TJinOhio's post over 2 years

I know your pain mate, I've been going through the same. I was confused too, a lot of documentation for web projects now just assume that you already know npm, grunt, ect.
I'll try to help you, but I may not be 100% on the proper terms as I'm learning myself.
I'd suggest that you start by reading some articles about SASS, nothing too complicated you should be able to find a good one on one of the various design blogs out there.
Basically SASS is a way of extending what we can already do with CSS
 
I'll give you an idea of how editing a basic site with sass would work.
You have your project folder with all your files, to keep it simple, lets make it just two files
-index.html
-style.css
As usual, your HTML is in one and your CSS in the other. Now with SASS, instead of editing 'style.css' you have a separate '_style.scss' file
As you make your changes a precompiler watches your folder. I know, sounds complicated, but on a very basic level it's just a program that watches a folder for file changes, when it detects a file change to a .scss file it will run through and convert it to css.
I mentioned before that you could extend css, heres a basic example.
First we have a basic css class

body{
background: #000000;
color: #FFFFFF;
}

Now, let's say you need to use these two colors all over throughout your design as I'm sure you've needed to before.

Well, with sass you could use a mixin

// define your colors
$white : #FFFFFF;
$black : #000000;

Now, wherever you need the color white just use $white, the same for $black

body{
background: $black;
color: $white;
}

This is just a simple example, but you can achieve much more
That should help you start to get how it works.
As for Foundation CLI
CLI stand for Command Line Interface
You said you are familiar with ASP.NET so I'm guessing you are familiar with using a command line, or at least you aren't scared of it.
You need to have a few things installed before you get to the foundation cli, the process will differ depending on your operating system. The Windows & Linux installs are pretty straightforward, I'm not sure about Mac's as I don't use them, but there should be plenty of help for mac users out there.
You'll need to install
Git - http://git-scm.com/
NodeJS - http://nodejs.org/
Ruby - https://www.ruby-lang.org/en/
Once those have been installed you can follow the steps in the documentation to install the foundation cli but i;; give a quick run down for you here (I use Foundation 5, but I'll assume you want to install Foundation 6)
Open a command line or terminal
( cmd on windows, terminal on linux/ubuntu or your favourite alternative )

Now we want to install the foundation cli globally ( you may need to be sudo/admin for this )

npm install --global foundation-cli


npm ~ node package manage
install --global ~ installs the package globally

foundation-cli ~ the package to install

now cd to your project directory, for example

cd Desktop/project

and run the command:

foundation new

This will run you through a small setup that copies all the foundation 6 files into your project directory and sets them up for you to edit
That should help get you started, I'd also suggest looking at the doc's for Foundation 5 as they are more fleshed out with the install process http://foundation.zurb.com/sites/docs/v/5.5.3/sass.htmlOnce again, I'm just getting back into design/development myself so hopefully someone more versed in Foundation will come along and correct anything I've gotten wrong

You commented on Bull18 Movers Brisbane's post over 2 years

Not as long as it will take you to get the correct answer here

Posts Followed




Following

  • No Content

Followers