Support from Acquia helps fund testing for Drupal Acquia logo

Comments

markhalliwell’s picture

Status: Active » Fixed

The following [default] breakpoints have been added. If you need to override them in the sub-theme, simply copy them from the base-theme, paste them into your sub-theme's .info file and change the values:

breakpoints[screen-xs-max] = (max-width: 767px)
breakpoints[screen-sm-min] = (max-width: 768px)
breakpoints[screen-sm-max] = (max-width: 991px)
breakpoints[screen-md-min] = (max-width: 992px)
breakpoints[screen-md-max] = (max-width: 1199px)
breakpoints[screen-lg-min] = (min-width: 1200px)

  • Mark Carver committed b87cdb5 on 7.x-3.x
    Issue #2319215 by Mark Carver: Added Breakpoints module support.
    
bkosborne’s picture

Sorry to comment on a closed issue, but why are you adding individual breakpoints for the min and max separately? Shouldn't it be something like:

breakpoints[screen-xs] = (min-width: 0px) and (max-width: 767px)
breakpoints[screen-sm] = (min-width: 768px) and (max-width: 991px)
breakpoints[screen-md] = (min-width: 992px) and (max-width: 1199px)
breakpoints[screen-lg] = (min-width: 1200px)
markhalliwell’s picture

http://petegale.com/blog/css-media-queries-min-width-vs-max-width/
http://stackoverflow.com/questions/19472199/why-does-mobile-first-respon...

Using min and max limits rulesets to a specific "size" and ultimately (IMO) completely unnecessary.

The problem I see with RWD is kind of summed up perfectly in the following quote of one of the responses to that Stack Overflow question:

Mobile first responsive design is a philosophy, an idea, a goal. How you achieve that goal is open for interpretation.

Most of the time you'll just need a max-width min-width, especially when it's just involving determining which image style to use. This is 90% of the use case of the breakpoints module (at least to my knowledge).

edit: meant to say min, not max. Also the decision was primarily based on keeping in-line with Bootstrap's variable implementations (not the deprecated ones) and letting the site builder determine how they wish to implement their "groupings": https://github.com/twbs/bootstrap/blob/v3.2.0/less/variables.less#L259-L295

bkosborne’s picture

Thanks, I see your point now. Providing both max and min breakpoints allows you to create breakpoint groups that use either the max as a limiter or the min as a limiter (mobile first).

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

bserem’s picture

Assigned: Unassigned » bserem
Category: Feature request » Bug report
Priority: Normal » Major
Status: Closed (fixed) » Needs review
FileSize
625 bytes

Sorry for bringing this up again, and forgive my ignorance if I'm wrong, but shouldn't there be a 'min-width' on screen-sm-min and screen-md-min ?

See attached patch.

Thanks

markhalliwell’s picture

Assigned: bserem » Unassigned
Category: Bug report » Feature request
Priority: Major » Normal
Status: Needs review » Closed (fixed)

Please do not re-open already closed (fixed) issues. Open a new issue and reference this one in the related issues field.

bserem’s picture

darol100’s picture

Version: 7.x-3.x-dev » 8.x-3.x-dev
Status: Closed (fixed) » Needs review
FileSize
1.37 KB

This still need to be port it to Drupal 8. Here is the patch for support for D8.

  • markcarver committed e669eb1 on 8.x-3.x authored by darol100
    Issue #2319215 by bserem, darol100: Add Breakpoints module support
    
markhalliwell’s picture

Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.