SCSS mixins in Zurb Foundation 4 designed for creating small and large columns that are fluid and responsive

Question

SCSS mixins in Zurb Foundation 4 designed for creating small and large columns that are fluid and responsive

Currently in the process of developing a responsive website for my company, I am utilizing SASS and Foundation 4 CSS Framework for the first time. Progress has been smooth thus far. However, I have encountered an issue related to mixins.

 class="large-6 small-3 columns"

When attempting to create a column that is size 6 in large views and size 3 in small views using the built-in CSS classes, I realized that it may be more efficient to achieve this through a Foundation SASS mixin. The only column-related mixin I came across can be found here:

@include grid-column($columns, $last-column, $center, $offset, $push, $pull, $collapse, $float);

Upon closer inspection, it seems that viewports cannot be specified within this particular mixin.

I would greatly appreciate any insights or suggestions on how to address this matter. Thank you in advance.

html css responsive-design sass zurb-foundation

Answer 1

Answer №1

I have created some useful mixins to simplify the process:

Check out the code on GitHub here

@mixin rgrid($phone-grid:"",$desktop-grid:""){
    @extend .small-#{$phone-grid};
    @extend .large-#{$desktop-grid};
    @extend .columns;
}

This mixin makes it easy to utilize F4 grid classes and media queries.

$phone-grid: indicates the number of grid columns for mobile devices.
$desktop-grid: specifies the number of grid columns for desktops, overriding $phone-grid when the window width is 768px or higher.
Only one parameter should be defined to set a value for all window widths.

For example:

@include rgrid(3,6); => 3 columns for phone, 6 columns for desktop.
@include rgrid(6); => 6 columns.

Answer 2

I have created some useful mixins to simplify the process:

Check out the code on GitHub here

@mixin rgrid($phone-grid:"",$desktop-grid:""){
    @extend .small-#{$phone-grid};
    @extend .large-#{$desktop-grid};
    @extend .columns;
}

This mixin makes it easy to utilize F4 grid classes and media queries.

$phone-grid: indicates the number of grid columns for mobile devices.
$desktop-grid: specifies the number of grid columns for desktops, overriding $phone-grid when the window width is 768px or higher.
Only one parameter should be defined to set a value for all window widths.

For example:

@include rgrid(3,6); => 3 columns for phone, 6 columns for desktop.
@include rgrid(6); => 6 columns.

Answer 3

Answer №2

One way to achieve this is by using the @extend feature with a Foundation class instead of using @include with a Foundation mixin. This allows you to leverage all the functionalities that Foundation offers in their grid classes, while also being able to layer them on top of each other.

You can define the desired classes in your CSS like so:

.my-super-semantic-div {
    @extend .large-6, .small-3, .columns;
}

Rather than in the HTML markup:

<div class="large-6 small-3 columns">...</div>

Answer 4

One way to achieve this is by using the @extend feature with a Foundation class instead of using @include with a Foundation mixin. This allows you to leverage all the functionalities that Foundation offers in their grid classes, while also being able to layer them on top of each other.

You can define the desired classes in your CSS like so:

.my-super-semantic-div {
    @extend .large-6, .small-3, .columns;
}

Rather than in the HTML markup:

<div class="large-6 small-3 columns">...</div>

Answer 5

Answer №3

I was curious if there is an integrated SASS mixin available for this particular task. If not, I plan to explore their @media settings and implement it on my own.

Unfortunately, it seems they do not have a built-in solution. :( For further information, you can refer to the documentation:

However, there's no need to create something from scratch! You can simply utilize the convenient respond-to Compass extension by Snugug.

In addition to using media queries by names as explained in respond-to's readme, you also have the option to trigger them based on their designated numbers.

For instance, take a look at this example with a clean indented syntax:

// Defining the breakpoint ranges
$breakpoints: 'xs' (0 400px), 's' (401px 600px), 'm' (601px 800px)

// Creating a function to access a breakpoint by number
@function bp($number)
  @return nth(nth($breakpoints, $number),1)

// Using a media query conventionally by its name
.bar
  +respond-to('s')
    @include grid-column(6)

// Implementing a media query by its assigned number
.foo
  +respond-to(bp(2))
    @include grid-column(6)

Hooray!

Answer 6

I was curious if there is an integrated SASS mixin available for this particular task. If not, I plan to explore their @media settings and implement it on my own.

Unfortunately, it seems they do not have a built-in solution. :( For further information, you can refer to the documentation:

However, there's no need to create something from scratch! You can simply utilize the convenient respond-to Compass extension by Snugug.

In addition to using media queries by names as explained in respond-to's readme, you also have the option to trigger them based on their designated numbers.

For instance, take a look at this example with a clean indented syntax:

// Defining the breakpoint ranges
$breakpoints: 'xs' (0 400px), 's' (401px 600px), 'm' (601px 800px)

// Creating a function to access a breakpoint by number
@function bp($number)
  @return nth(nth($breakpoints, $number),1)

// Using a media query conventionally by its name
.bar
  +respond-to('s')
    @include grid-column(6)

// Implementing a media query by its assigned number
.foo
  +respond-to(bp(2))
    @include grid-column(6)

Hooray!

Answer 7

Answer №4

It is essential to employ semantic classes for these purposes.

class="meaningful-description"

You can also utilize various mixins in your SASS code for handling different sizes, such as:

.meaningful-description {
    @include grid-column(3)
}

@media screen and (min-width: 700px) {
    .meaningful-description {
        @include grid-column(6)
    }
}

Answer 8

It is essential to employ semantic classes for these purposes.

class="meaningful-description"

You can also utilize various mixins in your SASS code for handling different sizes, such as:

.meaningful-description {
    @include grid-column(3)
}

@media screen and (min-width: 700px) {
    .meaningful-description {
        @include grid-column(6)
    }
}

Answer 9

Answer №5

When working with Sass Mixins, it is necessary to utilize media queries in order to explicitly adjust the grid layout. My approach involves creating a Mobile First website and then duplicating the Sass code defining the grid into two separate media queries:

// Mobile Grid
@media only screen and (max-width: 768px) { ... }
// Desktop & Tablet Grid
@media #{$small} { ... }

Despite my efforts, I struggled to find clear examples illustrating this process. While it is theoretically possible to define the grid in Sass and override it using the @media #{$small} {} media query, I encountered difficulties making it work in practice. Regardless of whether I placed the media query before or after the original grid declaration, the initial grid configuration persisted.

For a more detailed example, consider the case of the #dashboard element stacking and centering on mobile devices, while displaying as a 3-column layout on desktops and tablets. This would translate to

class="small-10 small-centered large-4 columns"

when using presentational classes.

// Mobile Grid
@media only screen and (max-width: 768px) {
  #dashboard { @include grid-row;
    & > #stats { @include grid-column(10, false, true); }
    & > #records { @include grid-column(10, false, true); }
    & > #results { @include grid-column(10, false, true); }
  }
}

// Desktop & Tablet Grid
@media #{$small} {
  #dashboard { @include grid-row;
    & > #stats { @include grid-column(4, false, false); }
    & > #records { @include grid-column(4, false, false); }
    & > #results { @include grid-column(4, false, false); }
  }
}

Please remember that you can further customize this approach by incorporating additional breakpoints using mixins. However, the provided method closely mirrors the default Zurb F4 presentational class behavior.

Answer 10

When working with Sass Mixins, it is necessary to utilize media queries in order to explicitly adjust the grid layout. My approach involves creating a Mobile First website and then duplicating the Sass code defining the grid into two separate media queries:

// Mobile Grid
@media only screen and (max-width: 768px) { ... }
// Desktop & Tablet Grid
@media #{$small} { ... }

Despite my efforts, I struggled to find clear examples illustrating this process. While it is theoretically possible to define the grid in Sass and override it using the @media #{$small} {} media query, I encountered difficulties making it work in practice. Regardless of whether I placed the media query before or after the original grid declaration, the initial grid configuration persisted.

For a more detailed example, consider the case of the #dashboard element stacking and centering on mobile devices, while displaying as a 3-column layout on desktops and tablets. This would translate to

class="small-10 small-centered large-4 columns"

when using presentational classes.

// Mobile Grid
@media only screen and (max-width: 768px) {
  #dashboard { @include grid-row;
    & > #stats { @include grid-column(10, false, true); }
    & > #records { @include grid-column(10, false, true); }
    & > #results { @include grid-column(10, false, true); }
  }
}

// Desktop & Tablet Grid
@media #{$small} {
  #dashboard { @include grid-row;
    & > #stats { @include grid-column(4, false, false); }
    & > #records { @include grid-column(4, false, false); }
    & > #results { @include grid-column(4, false, false); }
  }
}

Please remember that you can further customize this approach by incorporating additional breakpoints using mixins. However, the provided method closely mirrors the default Zurb F4 presentational class behavior.

SCSS mixins in Zurb Foundation 4 designed for creating small and large columns that are fluid and responsive

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Is there a way to asynchronously load image src URLs in Vue.js?

Having trouble retrieving a particular element using xpath in selenium with Python

CSS tooltip within the document styling

Unable to generate webpage source code

D3: Ensuring Map is Scaled Correctly and Oriented Correctly

Navigational assistance on the keyboard - Improving Accessibility

The website showcases mobile responsiveness; however, it does not translate to mobile devices

What is the step-by-step process for executing the following functions: 1. magnify -> 2. spin 360 degrees -> 3. restore to original size before magnification -> 4. switch colors on and

Creating a div that takes up 100% of its parent's height, regardless of the children's dimensions, in a sophisticated layout

CSS not reflecting changes after the href of the <link> tag has been updated

How can I float a square to the right in Bootstrap with a col-md-4 size but with a height restricted to only 200 px

Creating an Android game with the utilization of HTML5 and Javascript involves the adaptation of images to various screen resolutions

Adjust the appearance of an element in a different parent when hovering over a specific element with a matching index

Capturing Vuejs data for various pathways

Bootstrap 4 offers a full-height, full-width layout that is optimized for Chrome, but may not display as well on Firefox or

Investigate the dynamic form validation using jQuery

Tips for swapping out text with a hyperlink using JavaScript

I'm attempting to render HTML emails in ReactJS

Tips for transferring an array between pug mixins?

How can I implement a loop to showcase bootstrap popover content?