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 8 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 Tom Hogan's post 13 days

Hi Tom!
I assume that you should also use jQuery Migrate Plugin (last update for multizoom.js was 6 years ago). Try it, if it does not work out, we'll think of something :)

Val Ery commented on sarovara's post 19 days

No no no!
In this case, the jQuery will work correctly. After
a) adding a document type,
b) correcting the meta description according to the selected doctype,
c) correcting the syntax errors (not closed tags, missed quotes) ... And so on.Check your page here

Val Ery commented on mark's post about 1 month

 Hi Mark!
This example is suitable?
<nav class="container">
<ul class="menu align-center">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">How it work</a></li>
</ul>
</nav>
CSS:
body {
background-color: #acabae;
}
.container {
margin: 1rem 0;
width: 100%;
}
/* Step 1 - Display + Position /
a {
color: #fff;
font-family: sans-serif;
font-size: .8rem;
text-transform: uppercase;
position: relative;
display: block;
margin: 0 .5rem;
}
a:hover, a:focus {
color: #fff;
outline: none;
}
/
Step 2 - Pseudo ::before and ::after - Common rules /
a::before, a::after {
content: "";
position: absolute;
border-bottom: 3px solid #182536;
top: 100%;
opacity: 0;
transition: all 0.5s ease;
}
/
Step 3 - Double dash /
a::before {
left: 0;
right: 55%;
}
a::after {
left: 55%;
right: 0%;
}
/
Step 4 - Hover */
a:hover::before, a:hover::after {
opacity: 1;
}
How it work - Codepen
When values is a::before {right: 50%;} and a::after {left: 50%;}, the dashes will merge into a single line.
Rule .menu a {padding: .7rem 0;} - will reduce the width of the hyperlink

Val Ery commented on Wousto's post about 2 months

Hi Wousto!
Show a sketch of what you want to get. Which cell do you want to center?
The easiest way to set an element in the center is to add the following rules to the parent block:
.parent {
display: flex;
justify-content: center;
align-items: center;
}

Val Ery commented on Kyle Westendorf's post 2 months

Hi Kyle!I do not understand what you want to get as a result :)Therefore ... Two sentences.1. Try this:
<div class="grid-container">
Your markup here
</div>
2. Use "padding" instead of "margins"
<div class="grid-x grid-padding-x">
Your markup here
</div>
P.S. You use cells (4 * medium-4) for a grid with 12 columns. Is not it better to do so?
<div class="grid-container">
<div class="grid-x grid-margin-x grid-margin-y">
<div class="cell medium-4 medium-offset-4">1</div>
<div class="cell medium-4">2</div>
</div>
<div class="grid-x grid-margin-x grid-margin-y">
<div class="cell medium-4">3</div>
<div class="cell medium-4">4</div>
</div>
</div>

Val Ery commented on Natasha McDiarmid's post 5 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 5 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 7 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 7 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 8 months

Editor view - here

Posts Followed


  • 1
    Reply
  • Javascript against Jquery

    By sarovara

    javascriptjquery

    I am programmer. I worked in programming sphere C++ C#. But recently my interests change more to Web programming - ASP.NET and PHP.I worked for about six years to develop my knowlege in WEB programming. The point i want to concern here is what is the best... (continued)

    Last Reply by Val Ery 19 days ago


  • 3
    Replies
  • Center in column

    By Wousto

    flex-dir-column center

    Hi, &nbsp; I&nbsp;just want center one cell in the column&nbsp; My code : &nbsp; &lt;div id="blockImportant" class="grid-container"&gt; &lt;div class="grid-x"&gt; &lt;div class="cell large-4 flex-dir-column" style="width: 28.3%;!importa... (continued)

    Last Reply by Wousto about 2 months ago








Following

    No Content

Followers

My Posts



My Comments

You commented on Tom Hogan's post 13 days

Hi Tom!
I assume that you should also use jQuery Migrate Plugin (last update for multizoom.js was 6 years ago). Try it, if it does not work out, we'll think of something :)

You commented on sarovara's post 19 days

No no no!
In this case, the jQuery will work correctly. After
a) adding a document type,
b) correcting the meta description according to the selected doctype,
c) correcting the syntax errors (not closed tags, missed quotes) ... And so on.Check your page here

You commented on mark's post about 1 month

 Hi Mark!
This example is suitable?
<nav class="container">
<ul class="menu align-center">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">How it work</a></li>
</ul>
</nav>
CSS:
body {
background-color: #acabae;
}
.container {
margin: 1rem 0;
width: 100%;
}
/* Step 1 - Display + Position /
a {
color: #fff;
font-family: sans-serif;
font-size: .8rem;
text-transform: uppercase;
position: relative;
display: block;
margin: 0 .5rem;
}
a:hover, a:focus {
color: #fff;
outline: none;
}
/
Step 2 - Pseudo ::before and ::after - Common rules /
a::before, a::after {
content: "";
position: absolute;
border-bottom: 3px solid #182536;
top: 100%;
opacity: 0;
transition: all 0.5s ease;
}
/
Step 3 - Double dash /
a::before {
left: 0;
right: 55%;
}
a::after {
left: 55%;
right: 0%;
}
/
Step 4 - Hover */
a:hover::before, a:hover::after {
opacity: 1;
}
How it work - Codepen
When values is a::before {right: 50%;} and a::after {left: 50%;}, the dashes will merge into a single line.
Rule .menu a {padding: .7rem 0;} - will reduce the width of the hyperlink

You commented on Wousto's post about 2 months

Hi Wousto!
Show a sketch of what you want to get. Which cell do you want to center?
The easiest way to set an element in the center is to add the following rules to the parent block:
.parent {
display: flex;
justify-content: center;
align-items: center;
}

You commented on Kyle Westendorf's post 2 months

Hi Kyle!I do not understand what you want to get as a result :)Therefore ... Two sentences.1. Try this:
<div class="grid-container">
Your markup here
</div>
2. Use "padding" instead of "margins"
<div class="grid-x grid-padding-x">
Your markup here
</div>
P.S. You use cells (4 * medium-4) for a grid with 12 columns. Is not it better to do so?
<div class="grid-container">
<div class="grid-x grid-margin-x grid-margin-y">
<div class="cell medium-4 medium-offset-4">1</div>
<div class="cell medium-4">2</div>
</div>
<div class="grid-x grid-margin-x grid-margin-y">
<div class="cell medium-4">3</div>
<div class="cell medium-4">4</div>
</div>
</div>

You commented on Natasha McDiarmid's post 5 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 5 months

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

You commented on Jay Todtenbier's post 7 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 7 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 8 months

Editor view - here

Posts Followed

Following

  • No Content

Followers

  • No Content