CODEWITHSUNDEEP
responsive-designzurb-foundation
kylemac
kylemac

Reputation: 189

Foundation Breakpoints

I'm looking into the foundation framework and downloaded the files. I noticed that there are defined Breakpoints for "small" "medium" "large" etc.

Is there a way to add additional Breakpoints? Specifically, I would like to define a few more for sizes the "small" includes such as a size for mobile phones and tablets vertical and horizontal.

Is there a better way than to just add more Media Queries as defined here: http://foundation.zurb.com/docs/media-queries.html ?

I'm not using saas, just using the straight CSS and adding a custom.css file with my class overrides and custom CSS.

Upvotes: 1

Views: 1048

Answers (2)

Jesus Lugo
Jesus Lugo

Reputation: 796

You can add any code you want, overriding foundation ones, I personally think the approach from Zurb is very good:

  • Small: For smartphones
  • Medium: For tablets
  • Large: For desktop

Remember that Foundation latest version are "mobile first", so if a behavior is defined for small, is assumed to be for the other two levels, if is not overwritten.

As I said, you can add your code... just be careful to override properly... you don't need to edit SASS or get hands dirty on foundation's guts, just add your plain CSS code (and call it after foundation's)

Upvotes: 2

Will
Will

Reputation: 4724

Foundation has those sizes set as (more or less) phones, tablets, desktops. The idea is the site design is flexible within those boundaries so it works for any size.

Inevitably you will need to tweak the odd design element to look perfect for some sizes. Add your own media queries to target those things.

Upvotes: 2

Related Questions