Menu icon Foundation
Using Semantic Grid but in which sass file?

Hi I am learning the new Foundation 6 and working with Sass, I wanted to try building semantically and using the sass stylesheets. Wondering what .scss file do I work with to make the semantic grid? I was wondering if we use the _main.scss or if we have to make an entirely new .scss file. If so what do you name it and how do we hook it up so that it complies correctly?

Thanks, 
Christina

 

grid sass

Hi I am learning the new Foundation 6 and working with Sass, I wanted to try building semantically and using the sass stylesheets. Wondering what .scss file do I work with to make the semantic grid? I was wondering if we use the _main.scss or if we have to make an entirely new .scss file. If so what do you name it and how do we hook it up so that it complies correctly?

Thanks, 
Christina

 

Jacob Brooks over 3 years ago

Hey Christina!

Quick question and then I can give you a better response.

What are you trying to do with a different grid that the Foundation grid doesn't accomplish?

Christina Testana over 3 years ago

Hi Jacob,

Thank you for the quick response.

I am redesigning my portfolio website to foundation 6. I watched a video of the new release and in the video they mentioned you can set your columns and rows in the sass stylesheet which was a cleaner way of working. I wanted to try it out.

Jacob Brooks over 3 years ago

Hi Christina,

It is not letting me submit my response. I will try to send it to you again later. Sorry for the delay.

Christina Testana over 3 years ago

Hi Jacob,

No worries, take your time would like to try and start my website soon.

Thanks

Christina 

Jacob Brooks over 3 years ago

I will try to simplify my response because I typed a long detailed response and it wouldnt submit.... :(

Im not sure if you have messed around with the Foundation grid that is coded into the framework, but it is very flexible. I suggest reading over the docs which can be found at: http://foundation.zurb.com/sites/docs/grid.html

The base Foundation grid is a float grid that uses rows and columns to achieve the desired size/placement. I can give you a great rundown on how to accomplish things that you need once you have more specific questions.

 

To add your own Sass files:

The app.scss file is the master Sass file. if you open that file you will see a bunch of @import and @include files. Those files are being pulled into the master file. If you wanted to add your own, you would need to create a new file (it can be named whatever you want), but it must start with an underscore. An example would be '_my-styles.scss'. Save that file in the scss folder. After you have created your new file, open the app.scss file, go to the bottom of that file and @import your file. If you were using my example the last line of your app.scss file would read like this:

@import 'my-styles';

After you do those 2 things you can code your own sass in your own file and it will compiled into the master app.scss file. 

I hope that helps (and I hope it submits this time). If you have more specific questions, let me know!

Christina Testana over 3 years ago

I got your message :) Sorry to hear, technology can fail us sometimes. Do appreciate you taking the time to write a detailed response. 

I have worked with foundation 4 and 5 and understand the framework and read the docs as well. 

I will try was you mention about the sass file, if not I will stick with the basics. I am using working with a boiler plate called JointsWP it has Foundation 6 and sass together, this theme is a starter them for Wordpress.

Thank you this was helpful I will try it out.

Thanks,
Christina