Menu icon Foundation

Designer

My Posts


  • 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 1 year ago


My Comments

Val Ery commented on Konstantin Gorskov's post 6 days

Hi Konstantin!Example uses flexbox - http://foundation.zurb.com/sites/docs/flex-grid.html

Val Ery commented on Zeka's post 8 days

Жека, привет!
Такой пример тебе подойдет? - https://codepen.io/Val_Ery/pen/vZyegx
Translation:
Hi Zeka!
Such an example suits you?
css (.reveal):
.reveal {
background-color: transparent;
border: none;
outline: none;
padding: 2rem;
}
css (.reveal-content):
.reveal-content {
background-color: #efefef;
padding: 1rem;
}
css (.close-button):
.close-button {
width: 1.8rem;
height: 1.8rem;
right: .3rem;
top: .3rem;
}

Val Ery commented on Elisandro Martinez's post 9 days

 Hi Elisandro!
I understood...Everything is not as difficult as it seems. With the right approach.In your case, you need1) know the width of all the elements in the right top-bar (for example, 71em), including the "Storage..." item.2) add your own breakpoint (docs), in which to write the rules for the blocks.
@media screen and (max-width: 71em) {
.title-bar {
...
}
.top-bar {
...
}
}
But this approach involves making a large number of changes. It's not just "display: none;"/"display: block;".
The easiest way to do this is to use the sass version. And this is the right way. Because you can use the full power of the framework. You just need to specify the width of the screen. The rest will be done by the framework itself:
In settings.scss add new breakpoint. In ex. I added a point 'custom-width'
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
custom-width: 1136px,
xlarge: 1200px,
);
$breakpoint-classes: (small medium large custom-width xlarge);
Now you can use the attribute data-hide-for="custom-width"
<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="custom-width">
<button class="menu-icon" type="button" data-toggle></button>
</div>
I'm using the command line interface. Therefore, adding an additional breakpoint takes 3 seconds. Foundation itself does the rest :)

Val Ery commented on Leesa Ward's post 10 days

 Hi Leesa!
This example is suitable for you? - https://codepen.io/Val_Ery/pen/yXJWYd
In example: title one and title three
...
<a href="#three" class="accordion-title"><h3>Title Three</h3></a>
...
Title two (with slightly modified styles):
...
<h3 class="inline">Title Two</h3>
<a href="#two" class="accordion-title inline"></a>
...
All this within a single accordion :)

Val Ery commented on Elisandro Martinez's post 12 days

 Hi Elisandro!
Lay out please sketches of how it should look for small and large screens. Then it will be easier to find the best solution for you.At the moment I don't understand:1) why do you use top-bar,2) if you use top-bar, then why divide it into the right and left?Look at this example of including a logo - https://codepen.io/Val_Ery/full/OgNoRO/
Hope that helps :)

Val Ery commented on Dmytro Palaniichuk's post 13 days

Hi Dmytro!
Try it like this:
<ul data-accordion-menu class="vertical menu">
<li>
<span><a href="parent.html">should be clickable on mobile</a></span>
<a href="#"></a>
<ul class="menu vertical">
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
</ul>
</li>
</ul>
You will only align elements with css (for accordion title links - display: inline; float: right;).
Here is an old example of such use - https://codepen.io/Val_Ery/pen/YWJmBW (Accordion with links)

Val Ery commented on william saemann's post 19 days

Hi William!
See the templates for your WordPress theme. In one of the templates, there are probably similar lines:
if ( is_single(); ):
the_content();
else:
the_excerpt();
the_permalink();
endif;
There is no markup here. In your template, it will be present. The code itself is only needed so that you can understand the principle of how WordPress works.That is, for single pages, the content should be displayed. For archival pages - only excerpt and link to Post.In your case, there is probably an indication to display links for single posts. Like that:
if ( is_single(); ):  the_content();  the_permalink();
Now you need to find similar lines in the templates of your theme. Start on the hierarchy of templates: first index.php, next - the content.php, etc.

Val Ery commented on Ariel Frailich's post 19 days

 Hi Ariel!
It is possible "to move" dropdown pane relative to toggler on the selected pixel values. For this1) you need to remove the class responsible for the position (top, bottom, right, left)2) add data-attributes for a block with the class .dropdown-pane. For example:
<div class="row">
<button class="button" type="button" data-toggle="mypane">CTA</button>
<div class="dropdown-pane" id="mypane" data-dropdown data-auto-focus="true" data-h-offset="300" data-v-offset="100">
<h3 class="text-center">You are Welcome!</h3>
</div>
</div>
Here, the offset relative to the button is 300 pixels to the right and 100 pixels down.

Val Ery commented on Tom Elliott's post 22 days

I really want to know why my comments are being deleted :(

Val Ery commented on Tom Elliott's post 23 days

I think this: if the code works, then you did it right.The other side of the coin - the code should be clear and brief. Plus ... There are all possible coding standards. They need to be adhered to.
I do this:1) I create several small files in directory src/assets/scss/components/. For example, a _customglobal.scss or _banner.scss2) at the end of apps.scss file I add this:
// Custom import
@import 'components/customglobal';
@import 'components/banner';
This will ensure that the default rules are overwritten. (Rem.: foundation-cli plus zurb template)
I think it's convenient. Because I do not change the files of the framework, in such files it is easy to apply snippets, the structure is semantic etc.
P.S. Another principle of use (do not delete, but copy and comment out):
// 1. Global
// ---------

// $black: #0a0a0a;
$black: #121212;
// $white: #fefefe;
$white: #e6e6e6;
Maybe I'm wrong :)
P.P.S. Sorry for my Google-English
P.P.P.S. I really want to know why my comments are being deleted :(

Posts Followed


  • 2
    Replies
  • Close button outside of reveal

    By Zeka

    reveal

    Hi.  Is there any predefined way of placing a close button outside of reveal box? Like on the screenshot: The issue is that ".revel" class has overflow:hidden property which makes it impossible absolute positioning of the close button.

    Last Reply by Zeka 8 days ago



  • 12
    Replies
  • Responsive header

    By Elisandro Martinez

    navigation

    By resizing the home page one can easily notice the the scrolling banner images and the top navigation header have issues. &nbsp;I can seem to locate in the CSS where I should make adjustment. &nbsp;Can some one help me please? http://melhartindustries.c... (continued)

    Last Reply by John Show 7 days ago





  • 4
    Replies
  • Styling Top Bar With SASS

    By Tom Elliott

    top-bar

    I am trying to style a simple test Top Bar. I am using 6.3.1, project created May 29, using basic template. I am clearly missing something about the SASS setup. Do I need to put the overrides into the main body of _settings, replacing the standard assign... (continued)

    Last Reply by Val Ery 22 days ago




Following

    No Content

Followers

My Posts


My Comments

You commented on Konstantin Gorskov's post 6 days

Hi Konstantin!Example uses flexbox - http://foundation.zurb.com/sites/docs/flex-grid.html

You commented on Zeka's post 8 days

Жека, привет!
Такой пример тебе подойдет? - https://codepen.io/Val_Ery/pen/vZyegx
Translation:
Hi Zeka!
Such an example suits you?
css (.reveal):
.reveal {
background-color: transparent;
border: none;
outline: none;
padding: 2rem;
}
css (.reveal-content):
.reveal-content {
background-color: #efefef;
padding: 1rem;
}
css (.close-button):
.close-button {
width: 1.8rem;
height: 1.8rem;
right: .3rem;
top: .3rem;
}

You commented on Elisandro Martinez's post 9 days

 Hi Elisandro!
I understood...Everything is not as difficult as it seems. With the right approach.In your case, you need1) know the width of all the elements in the right top-bar (for example, 71em), including the "Storage..." item.2) add your own breakpoint (docs), in which to write the rules for the blocks.
@media screen and (max-width: 71em) {
.title-bar {
...
}
.top-bar {
...
}
}
But this approach involves making a large number of changes. It's not just "display: none;"/"display: block;".
The easiest way to do this is to use the sass version. And this is the right way. Because you can use the full power of the framework. You just need to specify the width of the screen. The rest will be done by the framework itself:
In settings.scss add new breakpoint. In ex. I added a point 'custom-width'
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
custom-width: 1136px,
xlarge: 1200px,
);
$breakpoint-classes: (small medium large custom-width xlarge);
Now you can use the attribute data-hide-for="custom-width"
<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="custom-width">
<button class="menu-icon" type="button" data-toggle></button>
</div>
I'm using the command line interface. Therefore, adding an additional breakpoint takes 3 seconds. Foundation itself does the rest :)

You commented on Leesa Ward's post 10 days

 Hi Leesa!
This example is suitable for you? - https://codepen.io/Val_Ery/pen/yXJWYd
In example: title one and title three
...
<a href="#three" class="accordion-title"><h3>Title Three</h3></a>
...
Title two (with slightly modified styles):
...
<h3 class="inline">Title Two</h3>
<a href="#two" class="accordion-title inline"></a>
...
All this within a single accordion :)

You commented on Elisandro Martinez's post 12 days

 Hi Elisandro!
Lay out please sketches of how it should look for small and large screens. Then it will be easier to find the best solution for you.At the moment I don't understand:1) why do you use top-bar,2) if you use top-bar, then why divide it into the right and left?Look at this example of including a logo - https://codepen.io/Val_Ery/full/OgNoRO/
Hope that helps :)

You commented on Dmytro Palaniichuk's post 13 days

Hi Dmytro!
Try it like this:
<ul data-accordion-menu class="vertical menu">
<li>
<span><a href="parent.html">should be clickable on mobile</a></span>
<a href="#"></a>
<ul class="menu vertical">
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
</ul>
</li>
</ul>
You will only align elements with css (for accordion title links - display: inline; float: right;).
Here is an old example of such use - https://codepen.io/Val_Ery/pen/YWJmBW (Accordion with links)

You commented on william saemann's post 19 days

Hi William!
See the templates for your WordPress theme. In one of the templates, there are probably similar lines:
if ( is_single(); ):
the_content();
else:
the_excerpt();
the_permalink();
endif;
There is no markup here. In your template, it will be present. The code itself is only needed so that you can understand the principle of how WordPress works.That is, for single pages, the content should be displayed. For archival pages - only excerpt and link to Post.In your case, there is probably an indication to display links for single posts. Like that:
if ( is_single(); ):  the_content();  the_permalink();
Now you need to find similar lines in the templates of your theme. Start on the hierarchy of templates: first index.php, next - the content.php, etc.

You commented on Ariel Frailich's post 19 days

 Hi Ariel!
It is possible "to move" dropdown pane relative to toggler on the selected pixel values. For this1) you need to remove the class responsible for the position (top, bottom, right, left)2) add data-attributes for a block with the class .dropdown-pane. For example:
<div class="row">
<button class="button" type="button" data-toggle="mypane">CTA</button>
<div class="dropdown-pane" id="mypane" data-dropdown data-auto-focus="true" data-h-offset="300" data-v-offset="100">
<h3 class="text-center">You are Welcome!</h3>
</div>
</div>
Here, the offset relative to the button is 300 pixels to the right and 100 pixels down.

You commented on Tom Elliott's post 22 days

I really want to know why my comments are being deleted :(

You commented on Tom Elliott's post 23 days

I think this: if the code works, then you did it right.The other side of the coin - the code should be clear and brief. Plus ... There are all possible coding standards. They need to be adhered to.
I do this:1) I create several small files in directory src/assets/scss/components/. For example, a _customglobal.scss or _banner.scss2) at the end of apps.scss file I add this:
// Custom import
@import 'components/customglobal';
@import 'components/banner';
This will ensure that the default rules are overwritten. (Rem.: foundation-cli plus zurb template)
I think it's convenient. Because I do not change the files of the framework, in such files it is easy to apply snippets, the structure is semantic etc.
P.S. Another principle of use (do not delete, but copy and comment out):
// 1. Global
// ---------

// $black: #0a0a0a;
$black: #121212;
// $white: #fefefe;
$white: #e6e6e6;
Maybe I'm wrong :)
P.P.S. Sorry for my Google-English
P.P.P.S. I really want to know why my comments are being deleted :(

Posts Followed

Following

  • No Content

Followers

  • No Content