search

bannertime / generator-bannertime

Yeoman generator to help build and manage HTML5 banner campaigns.
https://bannertime.github.io/
58 stars 35 forks source link

Border width question. #99

Closed rgfx closed 7 years ago

rgfx commented 7 years ago

I know it's not an issue, not sure where else to ask.

I noticed you removed 2px for the border width "width: $banner-width - 2;" is there a specific reason for this or just aesthetic?

Oh and, amazing work, thank you so much for this. It's my first banner, and I know am doing it right because of you. I also learned a shit load about grunt looking at your work. found you on GSAP forum.

jasonbaciulis commented 7 years ago

.border is a div with a default CSS box model which adds a border to the total width/height. For example, those 2 pixels would add up to the total of 300px if you set a 1px border and width of 298px.

rgfx commented 7 years ago

Oh yeah, I have been using border-box for so long I forgot about that. Is there a specific reason you don't use it?

jasonbaciulis commented 7 years ago

That is the good question. I also wondered why to use this setup with separate div as a border instead of setting banner to border-box and adding a 1px border. But we'll have to wait for @pyramidium or @joemidi as I just contribute to this project.

pyramidium commented 7 years ago

Good point, I guess this was done out of habit with support for legacy browsers... I'll be releasing a new version without the border div asap.

rgfx commented 7 years ago

May I suggest you do your border-box like so. 

*, *:before, *:after {
  box-sizing: inherit;
}

.banner {
  box-sizing: border-box;
}

Many moons ago I read this . May not apply.

"This will give you the same result, and make it easier to change the box-sizing in plugins or other components that leverage other behavior."

https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/

pyramidium commented 7 years ago

Updated 👍