Menu icon Foundation

Designer

My Posts

  • 1
    Reply
  • Responsive issue

    By Nik Sol

    Responsive

    Hi, I am trying to achieve a responsive email block that has 3 columns. Each column consisting of image, title and paragraph stacked on each other. When on mobile I want each column to be stacked on each other and the contents reordered with image t... (continued)

    Last Reply by cs joshi over 1 year ago


  • NEW
  • A very "sticky" question

    By Nik Sol

    sticky

    I have a question concerning sticky plugin. I am using this code: <div class="grid-x img-front"> <div class="cell" id="anchor1"> <img src="@asset('images/img-front.jpg')"> </div> <div class="cell" data-sticky-container... (continued)


  • 3
    Replies
  • Sticky-shrinknav issue

    By Nik Sol

    building-blockssticky-shrinknav

    Hello, So I have included sticky-shrinknav into the ZURB stack default project (deleting all the content from index.html and adding the Panini for the sticky-shrinknav). I am trying it out and in it's default configuration I have noticed that t... (continued)

    Last Reply by Rakesh about 1 year ago



My Comments

Nik Sol commented on Gregor's post about 2 years

You can use Roy's solution and in case you wanted to have the 12 images nested inside 10 columns (at least this is what I deduce from this line: <div class="small-10 small-centered cell">) here is an example with nested option:
<div class="grid-container fluid">
<div class="grid-x grid-margin-x align-center">
<div class="small-10">
<div class="grid-x">
<div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-1" alt="Space"></div>
<div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-2" alt="Space"></div>
<div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-3" alt="Space"></div>
<div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-4" alt="Space"></div>
<div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-5" alt="Space"></div>
<div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-6" alt="Space"></div>
<div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-7" alt="Space"></div>
<div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-8" alt="Space"></div>
<div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-9" alt="Space"></div>
<div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-10" alt="Space"></div>
<div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-11" alt="Space"></div>
<div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-12" alt="Space"></div>
</div>
</div>
</div>
</div>
 

Nik Sol commented on Craig Wright's post about 2 years

Hello Nigel,
You can use this base code that uses XY grid to create your footer:
<div class="grid-y grid-padding-x grid-frame">
<div class="cell auto">
</div>
<div class="cell footer">
<h3>Here's my footer</h3>
</div>
</div>
With .grid-frame your footer will always stay at the bottom even with empty body.

Nik Sol commented on Ben Marshall's post about 2 years

Hello Ben,
Here is the css that have worked for me: 
.fr_gallery {
@include xy-grid(horizontal, true);
@include xy-grid-layout(3, '.fr_gallery-item', true, $grid-margin-gutters, margin, right left top bottom);
background-color: $dark-gray;
}

.fr_gallery-item {
background-color: $black;
border: rem-calc(1) dashed $white;
color: $white;
width: calc(33.33333% - 0.834rem) !important;
}
.fr_gallery-item:nth-child(3n+0) {
margin-right: 0;
}
.fr_gallery-item:nth-child(3n+1) {
margin-left: 0;
}
As you can see I had to modify a bit your .fr-gallery and I had to add custom width to the items as eliminating left and right margins leads to unbalanced total width of the container. 
But I think the best would be to use custom padding instead. Here is another code using them:
.fr_gallery {
@include xy-grid(horizontal, true);
@include xy-grid-layout(3, '.fr_gallery-item', true, $grid-margin-gutters, padding, right left top bottom);
background-color: $dark-gray;
}

.fr_gallery-item {
background-color: $black;
border: rem-calc(1) dashed $white;
color: $white;
}
.fr_gallery-item:nth-child(3n+0) {
padding-right: 0;
}
.fr_gallery-item:nth-child(3n+1) {
padding-left: 0;
}
 As you can see I have programmatically converting margin into padding values and then with :nth-child eliminating those paddings from every 1st and 3rd item. This way I don't have to touch width.
This is not the cleanest solution, but it looks like it works.

Nik Sol commented on Suman Haldar's post about 2 years

Hello Suman,
I think your problem with alignment comes from adding <a> tag to the image which breaks the img alignment. To solve this you can do 2 things:

Add <a> tag to the whole card div (this will preserve the original formatting, but will make the whole card a link
Add in css 
.card a {text-align: center;}
this will center the image


Also I would recommend you cleaning your code a bit:

You do not need large-up-3 when you already have medium-up-3 as medium-up-3 would apply the rule to any screen from medium breakpoint and larger.
If you would like to align .card section to center too, you could use this:
.card > a, card-section {text-align: center;}
 


Hope this helps you!

Nik Sol commented on Sven's post about 2 years

Hello Sven,
I might be wrong, but I think the best solution for you would be to do it like this. Put all your prototype pages here:
/src/partials/sufolder/
After if you just need to keep the content in sync with the content here:
/src/pages/subfolder/
You can either use a software that would always keep these folders in sync (if the content is constantly changed) or you can just copy paste once you finish working on the files.
I am not sure if this is the only solution, but it works.
Bests!

Nik Sol commented on Nik Sol's post over 2 years

Yes, that has fixed it. I am seeing another issue with the blocks, but I will post it separately. Thanks for the help Rafi

Nik Sol commented on Nik Sol's post over 2 years

foundation -v returns Foundation CLI version 2.2.1
And here is the options I chose during the creation:
? What are you building today? A website (Foundation for Sites)
? What's the project called? (no spaces) test-site
 
? Which template would you like to use? ZURB Template: includes Handlebars templates and Sass/JS compilers

Posts Followed

  • 4
    Replies
  • XY grid images not fitting on one line

    By Gregor

    Hi&nbsp; I am trying to place 12 pictures side-by-side on one line. The issue is that the last image is place on a second line rather than all 12 in on one line. If I check the css-styles in the browser, each images has a correct width of 8.33% (wich is... (continued)

    Last Reply by Gregor about 2 years ago





  • 8
    Replies
  • Nested pages with Panini

    By Sven

    panini

    I have a prototype with dozens of pages. Half of them use one type of layout, another half uses another layout.&nbsp; How do I create nested pages? I tried creating subfolders /src/pages/subfolder/subpage but&nbsp; {{&gt; subfolder/subpage}} does not... (continued)

    Last Reply by Adam009 about 2 years ago


Following

    No Content

Followers

My Posts



My Comments

You commented on Gregor's post about 2 years

You can use Roy's solution and in case you wanted to have the 12 images nested inside 10 columns (at least this is what I deduce from this line: <div class="small-10 small-centered cell">) here is an example with nested option:
<div class="grid-container fluid">
<div class="grid-x grid-margin-x align-center">
<div class="small-10">
<div class="grid-x">
<div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-1" alt="Space"></div>
<div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-2" alt="Space"></div>
<div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-3" alt="Space"></div>
<div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-4" alt="Space"></div>
<div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-5" alt="Space"></div>
<div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-6" alt="Space"></div>
<div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-7" alt="Space"></div>
<div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-8" alt="Space"></div>
<div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-9" alt="Space"></div>
<div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-10" alt="Space"></div>
<div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-11" alt="Space"></div>
<div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-12" alt="Space"></div>
</div>
</div>
</div>
</div>
 

You commented on Craig Wright's post about 2 years

Hello Nigel,
You can use this base code that uses XY grid to create your footer:
<div class="grid-y grid-padding-x grid-frame">
<div class="cell auto">
</div>
<div class="cell footer">
<h3>Here's my footer</h3>
</div>
</div>
With .grid-frame your footer will always stay at the bottom even with empty body.

You commented on Ben Marshall's post about 2 years

Hello Ben,
Here is the css that have worked for me: 
.fr_gallery {
@include xy-grid(horizontal, true);
@include xy-grid-layout(3, '.fr_gallery-item', true, $grid-margin-gutters, margin, right left top bottom);
background-color: $dark-gray;
}

.fr_gallery-item {
background-color: $black;
border: rem-calc(1) dashed $white;
color: $white;
width: calc(33.33333% - 0.834rem) !important;
}
.fr_gallery-item:nth-child(3n+0) {
margin-right: 0;
}
.fr_gallery-item:nth-child(3n+1) {
margin-left: 0;
}
As you can see I had to modify a bit your .fr-gallery and I had to add custom width to the items as eliminating left and right margins leads to unbalanced total width of the container. 
But I think the best would be to use custom padding instead. Here is another code using them:
.fr_gallery {
@include xy-grid(horizontal, true);
@include xy-grid-layout(3, '.fr_gallery-item', true, $grid-margin-gutters, padding, right left top bottom);
background-color: $dark-gray;
}

.fr_gallery-item {
background-color: $black;
border: rem-calc(1) dashed $white;
color: $white;
}
.fr_gallery-item:nth-child(3n+0) {
padding-right: 0;
}
.fr_gallery-item:nth-child(3n+1) {
padding-left: 0;
}
 As you can see I have programmatically converting margin into padding values and then with :nth-child eliminating those paddings from every 1st and 3rd item. This way I don't have to touch width.
This is not the cleanest solution, but it looks like it works.

You commented on Suman Haldar's post about 2 years

Hello Suman,
I think your problem with alignment comes from adding <a> tag to the image which breaks the img alignment. To solve this you can do 2 things:

Add <a> tag to the whole card div (this will preserve the original formatting, but will make the whole card a link
Add in css 
.card a {text-align: center;}
this will center the image


Also I would recommend you cleaning your code a bit:

You do not need large-up-3 when you already have medium-up-3 as medium-up-3 would apply the rule to any screen from medium breakpoint and larger.
If you would like to align .card section to center too, you could use this:
.card > a, card-section {text-align: center;}
 


Hope this helps you!

You commented on Sven's post about 2 years

Hello Sven,
I might be wrong, but I think the best solution for you would be to do it like this. Put all your prototype pages here:
/src/partials/sufolder/
After if you just need to keep the content in sync with the content here:
/src/pages/subfolder/
You can either use a software that would always keep these folders in sync (if the content is constantly changed) or you can just copy paste once you finish working on the files.
I am not sure if this is the only solution, but it works.
Bests!

You commented on Nik Sol's post over 2 years

Yes, that has fixed it. I am seeing another issue with the blocks, but I will post it separately. Thanks for the help Rafi

You commented on Nik Sol's post over 2 years

foundation -v returns Foundation CLI version 2.2.1
And here is the options I chose during the creation:
? What are you building today? A website (Foundation for Sites)
? What's the project called? (no spaces) test-site
 
? Which template would you like to use? ZURB Template: includes Handlebars templates and Sass/JS compilers

Posts Followed

Following

  • No Content

Followers