Menu icon Foundation

Designer

My Posts

  • 3
    Replies
  • Mega menu

    By Val Ery

    zf 6.4.3mega menudropdown

    Hi All! I wanted to create a building block. But, today the building blocks do not work with xy-grid. Therefore, see the example here. Happy New Year to all! P.S. In ex. - simple two-column menu - menu with vertical tabs - simple block grid All... (continued)

    Last Reply by Rafi Benkual 5 months ago



  • 2
    Replies
  • ZF 6 Callouts

    By Val Ery

    Callout

    Hi All! Quote: "Callouts combine panels and alerts from Foundation 5 into one generic container component." (http://foundation.zurb.com/sites/docs/callout.html) Now I'm trying to create a theme based on the foundation for sites 6 for my favorite CMS... (continued)

    Last Reply by Val Ery over 2 years ago


My Comments

Val Ery commented on Natasha McDiarmid's post about 2 months

Hi Natasha!
I do not know what specifically hinders the correct display of the modal window ... Therefore, I guess ..
1. You use Wordpress. The default version of jQuery in WordPress is 1.12. (see below)2. Instead of writing
<script>
jQuery(document).foundation();
</script>
you can add (not necessary) an additional file (for example, app.js) with the following content:
$(document).foundation();
3. Delete Foundation's initialization lines from slider.js
I am adding the following code when developing new themes for Wordpress (based on the Foundation):
function newtheme_scripts() {
// Theme stylesheet
wp_enqueue_style( 'main-style', get_stylesheet_uri() );
// Framework stylesheet
wp_enqueue_style( 'foundation', get_template_directory_uri() . '/assets/css/foundation.min.css' );
// Custom stylesheet
wp_enqueue_style( 'app', get_template_directory_uri() . '/assets/css/app.css?v=1.0.1' );

// Deregister jQuery
wp_deregister_script( 'jquery' );
// Register new jQuery (needs a download)
wp_register_script( 'jquery', get_template_directory_uri() . '/assets/js/vendor/jquery.js', false, '3.3.1', true );
// Enqueue new jQuery
wp_enqueue_script( 'jquery' );
// Apps script
wp_enqueue_script( 'foundation', get_template_directory_uri() . '/assets/js/vendor/foundation.min.js', array('jquery'), '6.4.3', true );
// What input
wp_enqueue_script( 'what-input', get_template_directory_uri() . '/assets/js/vendor/what-input.js', false, '4.2.0', true );
// Custom scrits
wp_enqueue_script( 'app', get_template_directory_uri() . '/assets/js/app.js', array('foundation'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'newtheme_scripts' );
newtheme - it's just a prefix;all the styles and scripts - in the directory "assets"

Val Ery commented on hassan gul's post 2 months

Hi Hassan!
I did a similar. LinkMenu "with tabs" has a submenu.
Does this suit you?

Val Ery commented on Jay Todtenbier's post 4 months

holmescreek!
I see two problems:
1) npm ERR! missing script: start
See here - string 6
"scripts": {
"start": "grunt"
},
and compare it with your file.
2) 'libsass' binding was not found
I think the reason is confusion in the versions. To resolve problems with nodejs, you can run 'npm rebuild node-sass'.
P.S. I have now tried to install 5.5.3. Also got an error - not installed bundler. It's true, I do not have it. Therefore, on this I stopped. I think, problems would not arise. My steps - f) git clone, b) npm install, c) bower install, d) npm start.
P.P.S. Here there is a detailed description of the installation (link). The recommended installation contains the following: gem install foundation. To install a specific version of the framework, you can use the search: gem search foundation - and then install the one you need.
 
 

Val Ery commented on Jay Todtenbier's post 4 months

Hi holmescreek!
What is displayed in the console when1) executing npm install2) performing npm startAre there any error messages in the console? Warnings?

Val Ery commented on Val Ery's post 5 months

Editor view - here

Val Ery commented on Xavier Oncken's post 6 months

Hi Xavier!
Not sure what I understood correctly :)
1 - centering (for .grid-container) - add an additional block with class grid-x
<div class="grid-container">
<div class="grid-x">
<div class="small-8 float-center">
Your code here...
</div>
</div>
</div>
2 - top indent
variant one (for block with class float-center set this)
.float-center {
padding: .5rem 0;
}
In this case, all the added styles will be applied to block with class grid-8
variant two - apply padding to grid-x block

Val Ery commented on IOTheme's post 6 months

Hi!
And Thanks!
I liked the following in the generated apperance:1. font (I like condensed fonts, but unfortunately it does not support Cyrillic)2. the ability to use scss3. support for Woocommerce (you forgot to specify it in description)

Val Ery commented on Matthew Meaklim's post 7 months

Hi Matthew!
Initial data: remote server, Zurb template + text editor.Yes it is possible.Since you need to run some commands that are run from the command line, try PuTTY (Windows + Unix) or KiTTY (Windows only). For Linux and Mac there are built-in ssh-clients.
1. Launch PuTTY (enter your hostname or IP, type is ssh and click Open)2. Go to the directory with your project (cd /my/project/folder)3. Do "foundation watch" (if use foundation-cli) or "npm start" (for sass-version)4. Now you can use your local text editor (via ftp).When you finish editing your files, in PuTTY do "ctrl + C" (finish the work of foundation-cli) and enter "exit" (break connection). All!

Val Ery commented on Julian's post 7 months

JointsWP uses foundation 6.3.1
WP-Forge theme based on foundation 6.4.3
IMHO, any CMS is good for working with the Foundation. The main thing is to be able to integrate the styles and scripts of the framework in it. Recently I use Wordpress (with my own theme).

Val Ery commented on Jay Todtenbier's post 7 months

Hi Jay!
For projects based on version 5.5.3, you must use the old cli-version. Try to do so:
sudo npm install -g foundation-cli@2.0.0
This will install globally version 2.0.0 in the directory foundation-cli@2.0.0 After that, check which version is installed
foundation -v
P.S. I do not know which cli-version was used when working with Foundaton 5.5.3. If it is even older, the procedure is as follows:- delete the installed cli-version
sudo npm uninstall -g foundation-cli@2.0.0
- install the version you need
sudo npm install -g foundation-cli@1.1.2
 
P.P.S. foundation-cli here (change version in Tag list), Foundation 5.5.3 here , a small guide to working with other versions here
I hope this will help you.
 

Posts Followed






  • 5
    Replies
  • CMS for Foundation

    By Julian

    cms

    So looking a developing with Foundation and want to know what the best CMS is for basic website edits by users? I don't need to bloat of wordpress or the ability to add multiple pages etc. Cheers

    Last Reply by Val Ery 7 months ago






Following

    No Content

Followers

My Posts



My Comments

You commented on Natasha McDiarmid's post about 2 months

Hi Natasha!
I do not know what specifically hinders the correct display of the modal window ... Therefore, I guess ..
1. You use Wordpress. The default version of jQuery in WordPress is 1.12. (see below)2. Instead of writing
<script>
jQuery(document).foundation();
</script>
you can add (not necessary) an additional file (for example, app.js) with the following content:
$(document).foundation();
3. Delete Foundation's initialization lines from slider.js
I am adding the following code when developing new themes for Wordpress (based on the Foundation):
function newtheme_scripts() {
// Theme stylesheet
wp_enqueue_style( 'main-style', get_stylesheet_uri() );
// Framework stylesheet
wp_enqueue_style( 'foundation', get_template_directory_uri() . '/assets/css/foundation.min.css' );
// Custom stylesheet
wp_enqueue_style( 'app', get_template_directory_uri() . '/assets/css/app.css?v=1.0.1' );

// Deregister jQuery
wp_deregister_script( 'jquery' );
// Register new jQuery (needs a download)
wp_register_script( 'jquery', get_template_directory_uri() . '/assets/js/vendor/jquery.js', false, '3.3.1', true );
// Enqueue new jQuery
wp_enqueue_script( 'jquery' );
// Apps script
wp_enqueue_script( 'foundation', get_template_directory_uri() . '/assets/js/vendor/foundation.min.js', array('jquery'), '6.4.3', true );
// What input
wp_enqueue_script( 'what-input', get_template_directory_uri() . '/assets/js/vendor/what-input.js', false, '4.2.0', true );
// Custom scrits
wp_enqueue_script( 'app', get_template_directory_uri() . '/assets/js/app.js', array('foundation'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'newtheme_scripts' );
newtheme - it's just a prefix;all the styles and scripts - in the directory "assets"

You commented on hassan gul's post 2 months

Hi Hassan!
I did a similar. LinkMenu "with tabs" has a submenu.
Does this suit you?

You commented on Jay Todtenbier's post 4 months

holmescreek!
I see two problems:
1) npm ERR! missing script: start
See here - string 6
"scripts": {
"start": "grunt"
},
and compare it with your file.
2) 'libsass' binding was not found
I think the reason is confusion in the versions. To resolve problems with nodejs, you can run 'npm rebuild node-sass'.
P.S. I have now tried to install 5.5.3. Also got an error - not installed bundler. It's true, I do not have it. Therefore, on this I stopped. I think, problems would not arise. My steps - f) git clone, b) npm install, c) bower install, d) npm start.
P.P.S. Here there is a detailed description of the installation (link). The recommended installation contains the following: gem install foundation. To install a specific version of the framework, you can use the search: gem search foundation - and then install the one you need.
 
 

You commented on Jay Todtenbier's post 4 months

Hi holmescreek!
What is displayed in the console when1) executing npm install2) performing npm startAre there any error messages in the console? Warnings?

You commented on Val Ery's post 5 months

Editor view - here

You commented on Xavier Oncken's post 6 months

Hi Xavier!
Not sure what I understood correctly :)
1 - centering (for .grid-container) - add an additional block with class grid-x
<div class="grid-container">
<div class="grid-x">
<div class="small-8 float-center">
Your code here...
</div>
</div>
</div>
2 - top indent
variant one (for block with class float-center set this)
.float-center {
padding: .5rem 0;
}
In this case, all the added styles will be applied to block with class grid-8
variant two - apply padding to grid-x block

You commented on IOTheme's post 6 months

Hi!
And Thanks!
I liked the following in the generated apperance:1. font (I like condensed fonts, but unfortunately it does not support Cyrillic)2. the ability to use scss3. support for Woocommerce (you forgot to specify it in description)

You commented on Matthew Meaklim's post 7 months

Hi Matthew!
Initial data: remote server, Zurb template + text editor.Yes it is possible.Since you need to run some commands that are run from the command line, try PuTTY (Windows + Unix) or KiTTY (Windows only). For Linux and Mac there are built-in ssh-clients.
1. Launch PuTTY (enter your hostname or IP, type is ssh and click Open)2. Go to the directory with your project (cd /my/project/folder)3. Do "foundation watch" (if use foundation-cli) or "npm start" (for sass-version)4. Now you can use your local text editor (via ftp).When you finish editing your files, in PuTTY do "ctrl + C" (finish the work of foundation-cli) and enter "exit" (break connection). All!

You commented on Julian's post 7 months

JointsWP uses foundation 6.3.1
WP-Forge theme based on foundation 6.4.3
IMHO, any CMS is good for working with the Foundation. The main thing is to be able to integrate the styles and scripts of the framework in it. Recently I use Wordpress (with my own theme).

You commented on Jay Todtenbier's post 7 months

Hi Jay!
For projects based on version 5.5.3, you must use the old cli-version. Try to do so:
sudo npm install -g foundation-cli@2.0.0
This will install globally version 2.0.0 in the directory foundation-cli@2.0.0 After that, check which version is installed
foundation -v
P.S. I do not know which cli-version was used when working with Foundaton 5.5.3. If it is even older, the procedure is as follows:- delete the installed cli-version
sudo npm uninstall -g foundation-cli@2.0.0
- install the version you need
sudo npm install -g foundation-cli@1.1.2
 
P.P.S. foundation-cli here (change version in Tag list), Foundation 5.5.3 here , a small guide to working with other versions here
I hope this will help you.
 

Posts Followed

Following

  • No Content

Followers

  • No Content