zurb/foundation-sites

The most advanced responsive front-end framework in the world.

celesteking

@celesteking

to zurb 6 environment where I can code

https://stackblitz.com/edit/angular-rjyndn is for angular, for example. Where's the one for zurb 6?

Daniel Ruf

@DanielRuf

There is no prebuilt one for stackblitz, you can use https://github.com/zurb/foundation-zurb-template as template

Angular, Vue, React and so on are JS frameworks, Foundation Sites like Bootstrap are just CSS Frameworks in general.

celesteking

@celesteking

great, I just wanted jsfiddle with sass $var: 123 support

Daniel Ruf

@DanielRuf

You can change the preprocessor on codepen to SCSS / Sass in the settings.

celesteking

@celesteking

yeah, but as shown above it just doesn't work

it won't pick up the settings

https://codepen.io/anon/pen/RdOdYr

Daniel Ruf

@DanielRuf

See the main scss of https://github.com/zurb/foundation-zurb-template

https://github.com/zurb/foundation-zurb-template/blob/master/src/assets/scss/app.scss

To use this on codepen you have to insert every SCSS file from Foundation and its content to the scss / css tab after the settings.

You should have a webpack setup in Rails to easily test the changes.

celesteking

@celesteking

why @import https://github.com/zurb/foundation-zurb-template/blob/master/src/assets/scss/app.scss wouldn't work?

is there a readied link on stackblitz.com with zurb 6?

Daniel Ruf

@DanielRuf

Because this won't work as the mimetype is not the right one. See https://codepen.io/DanielRuf/pen/oVRNWO and the console of the browser.

css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js:1 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://raw.githubusercontent.com/zurb/foundation-zurb-template/master/src/assets/scss/app.scss with MIME type text/plain. See https://www.chromestatus.com/feature/5629709824032768 for more details.

is there a readied link on stackblitz.com with zurb 6?

not that I knew.

celesteking

@celesteking

recent rails dropped jquery support by default and it looks like foundation6 requires jquery, which means docs should be updated

celesteking

@celesteking

it's said that all mixins are kept in one file https://foundation.zurb.com/sites/docs/sass-mixins.html , but this is incorrect. I wanted to override menu mixin and it's not there

I just wanted to change fonts and margins for a menu, but it looks like it's still a hard task

Daniel Ruf

@DanielRuf

which means docs should be updated

what aprt exactly regarding jQuery? Foundation Sites requires jQuery and this is documented.

celesteking

@celesteking

https://github.com/zurb/foundation-rails - no jquery mentions

Daniel Ruf

@DanielRuf

PRs are very welcome.

celesteking

@celesteking

I also don't quite understand how menu mxiing can be sourced. I'm doing .wrapper { @include foundation-menu; }, but it seems that won't allow me to override vars per inclusion scope, that is , for container only, but not for other wrappers that I'd like to have different menu settings

At what point does SASS resolve vars ? At @import or @include ?

celesteking

@celesteking

I'd like to have radius /styles for buttons. How do I achieve that? It's configured by a global, but I need several with different values.

MassDebates

@MassDebates

hmm

this isn't working well

Christopher Zavatchen

@cnc137

@celesteking I would suggest using your own CSS/SASS to override the global border radius setting you are using in other areas for the specific class or ID for your custom buttons that you want to look different. This will allow you to override the default border radius defined in the global settings located in the "src\assets\scss_settings.scss". I pull in my own custom styles located in my "style.scss" file located in the "src\assets\scss" directory by adding "@import 'style';" to the bottom of the "app.scss" file.

celesteking

@celesteking

I'm looking for horizontal form layout. What's the proper way?

stuffing everything in horizontal cells gives too much space between elements

Daniel Ruf

@DanielRuf

Do you mean inline form?

See https://foundation.zurb.com/sites/docs/forms.html#

celesteking

@celesteking

hi. Why can't I specify vars inside a selector to let included mixin use them?

.mydrop {
  $dropdown-padding: rem-calc(10);
  @include dropdown-container();
 }

why do I have to specify them globally, outside .mydrop context?

celesteking

@celesteking

How do I replicate top-bar menu with 6? I can't find how to do dividers and titles in submenus.

Stian A. Giltvedt

@Giltvedt

Hi! I'm working on a small website and it's ready to test on stage server. But is't something documentation missing where I need to run any command to run build.

Things seems to work fine, but js related functions aren't generated.

Stian A. Giltvedt

@Giltvedt

FYI: I'm using "Foundation for Sites Template" https://github.com/zurb/foundation-sites-template

celesteking

@celesteking

this chan is dead

Stian A. Giltvedt

@Giltvedt

@celesteking Also Foundation for Sites Template or this room?

Christopher Zavatchen

@cnc137

@Giltvedt This Gitter channel doesn't seem to get a lot of traffic. I think that is what @celesteking was referring to when he said "this chan is dead". There is an option to run the build command with the "--production" flag to get all your files ready for production and place them in the "dist" folder under your Foundation project folder. You can see some of this information if you look at the "gulpfile.babel.js" file in your project folder.

The following YouTube videos also go over the "ZURB Stack". They are a little old, but I think they should help you get an understanding of the build process.

What the ZURB Stack Does - Part 1 - https://www.youtube.com/watch?v=wSsPfuxngSM
What the ZURB Stack Does - Part 2 - https://www.youtube.com/watch?v=iNYYFikG5V4

There are a lot more tutorial videos about Zurb Foundation located at https://foundation.zurb.com/learn/tutorials.html that you may also want to check out.

This page also has more details about Zurb Template and the build commands: https://foundation.zurb.com/sites/docs/starter-projects.html

After everything is built you should be able to upload the "dist" folder to your web server and the pages should work like in your local development environment.

Daniel Ruf

@DanielRuf

@Giltvedt https://github.com/zurb/foundation-sites-template/blob/master/package.json#L7

just run npm / yarn start.

Stian A. Giltvedt

@Giltvedt

@cnc137 Yeah I guess it was that he mean. It's kinda sad for a great framework.

I'm not sure we are talking about same codebase. It's no any sight about --production or dist in gulpfile.js in project folder. Anyway… I've moved project to another codebase and can now run build command to make website ready for production-server.

@DanielRuf Sorry I was unclear when I ask for help. I've no problem to run npm/yarn start. I was asking how to run command to export site ready for production use. Also generate dist folder.

Dominik Pieper

@DominikPieper

Hey all, are there any informations about F7?

Daniel Ruf

@DanielRuf

@Giltvedt see the template repo that I have linked. This shows exactly the use case that you have.

M.Romecki

@filt3rek

Hej all ! I've a noob question, sorry I use foundation for years now and still can't understand if it's correct way to have more than 12 columns inside a row ? Let's say I have a section with a title that I want to be 12 columns wide, then I have some columns that I want to be inside this same section. Should I write a row for the title, then as many rows as columns to fit 12 columns ? Or I can have only one row then inside a title, then many columns (let's say 4 sub sections of 6 wide columns) ? I don't know if it's clear...

Anthony

@pyskell

No matter what functions I define in app.js they are not referenceable from my html documents. However if I just include a simple <script> tag of the exact same code directly in the html it works as expected.

Also app.js executes just fine, calling functions directly in app.js works as expected.

Where communities thrive

People

Repo info

Activity