hardcoded border-radius

quark-zju commented 11 years ago

I does not like rounded corners. So I overrides compass's border-radius and border-corner-radius mixins to do nothing. However, table still has rounded corners.

I searched the code and found three hardcoded border-radius:

./scss/foundation/common/_forms.scss:  fieldset { border: solid 1px #ddd; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; padding: 12px 12px 0; margin: 18px 0;
./scss/foundation/components/modules/_ui.scss:  .tooltip { display: none; background: $tooltipBackgroundColor; background: rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity); position: absolute; color: $tooltipFontColor; font-weight: $tooltipFontWeight; @include font-size($tooltipFontSize); padding: 5px; z-index: 999; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; line-height: normal;
./scss/foundation/components/modules/_ui.scss:  table { background: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; margin: 0 0 18px; border: 1px solid #ddd;  }

Shouldn't them use compass's border-radius mixin?

EDIT: foundation version 3.1.1

keilmillerjr commented 11 years ago

Yes, you can just use compass to over-ride this. http://compass-style.org/reference/compass/css3/border_radius/

I do agree that foundation should use the compass mixin everywhere, and not mix and match it. Maybe I'll push a mix for it sometime when I get a chance, unless some one beats me to it.

Tagging myself: @keilmillerjr

quark-zju commented 11 years ago

I do can override compass to remove all the rounded corners. But I don't like this hacky way.

Besides, I want to use rounded labels. To achieve this:

import compass/css3
border-radius related override
import foundation/all
import compass/css3 again
import foundation's labels

This looks ugly. I think all border-radius px numbers should be adjustable instead of hardcoded 2px, 3px, etc. However, this seems to be another issue.

On Tue, Oct 23, 2012 at 2:42 AM, Keil Miller notifications@github.comwrote:

Yes, you can just use compass to over-ride this. http://compass-style.org/reference/compass/css3/border_radius/

I do agree that foundation should use the compass mixin everywhere, and not mix and match it. Maybe I'll push a mix for it sometime when I get a chance, unless some one beats me to it.

Tagging myself: @keilmillerjr https://github.com/keilmillerjr

— Reply to this email directly or view it on GitHubhttps://github.com/zurb/foundation/issues/1051#issuecomment-9675454.

keilmillerjr commented 11 years ago

I understand your frustration, but it is just a default style and can easily be over-riden with proper planning.

Remember that compass will compile with other assets when you push for production. So anything "included" that is a function or mixin should only slow down your development and test environments. I finally have got the hang of asset pipeline. Are you using rails?

quark-zju commented 11 years ago

Yes, I am using rails. sass is pre-compiled in production, so it's not a performance issue. Even in development environment, compiled css files are properly cached. Thus only first requests are slow down.

A little off topic: imo, things should be flexible, easy to customize. Twitter Bootstrap does not attract me because it's very hard to customize, and it is based on LESS.

I do more backend work, do not know frontend very well. However, in most programming languages, it's a rule of thumb to get rid of 'magic' numbers by introducing constants with meaningful names. It increases compiling time a little, but worthes.

On Tue, Oct 23, 2012 at 3:16 AM, Keil Miller notifications@github.comwrote:

I understand your frustration, but it is just a default style and can easily be over-riden with proper planning.

Remember that compass will compile with other assets when you push for production. So anything "included" that is a function or mixin should only slow down your development and test environments. I finally have got the hang of asset pipeline. Are you using rails?

— Reply to this email directly or view it on GitHubhttps://github.com/zurb/foundation/issues/1051#issuecomment-9676678.

keilmillerjr commented 11 years ago

What I do is create a single sass file and make all my imports there. Then, on my views sass file, I import just that one sass file with all of the imports. It makes life easier.

You shouldn't need to import compass twice and foundation at all on your views sass files. The only thing you might need from foundation is variables. I just pulled the ones I used into a separate file from foundation_and_overrides and imported it where needed.

quark-zju commented 11 years ago

The ideal situation is one 'foundation_and_overrides.scss', or some 'base.scss'. But things are complex currently if I want to override all foundation elements' border-radius except for foundation labels. I have to re-import compass's border-radius mixin to resume its function after my override.

To avoid this, foundation need more configurable setting varibles to replace hard-coded 2px or 3px, for example:

$inputRadius $tableRadius

Currently only $buttonRadius and $thumbRadius are provided.

In the beginning, this issue is requesting replace hardcoded 'border-radius' to mixin ones.

My second post is to say, hardcoded '2px', '3px' in border-radius may be extracted to configurable variables. Since they are already in mixin form, I note that 'may be another issue'.

./foundation/common/_forms.scss: input[type="text"],

input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea { font-family: $bodyFontFamily; border: 1px solid darken($white, 20%); @include border-radius(2px); @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.1)); color: rgba(0,0,0,0.75); display: block; font-size: ms(0); margin: 0 0 $formSpacing 0; padding: ($formSpacing / 2); height: (ms(0) + ($formSpacing * 1.5)); width: 100%; @include transition(all 0.15s linear); ./foundation/components/modules/_ui.scss: ul.breadcrumbs { display: block; background: lighten($secondaryColor, 5%); padding: 6px 10px 7px; border: 1px solid $secondaryColor; @include border-radius(2px); overflow: hidden; ./foundation/components/modules/ui.scss: .meter { @include border-radius(2px);_ } ./foundation/components/modules/ui.scss: div.alert-box { display: block; padding: 6px 7px 7px; font-weight: bold; font-size: ms(0); color: $white; background-color: $mainColor; border: 1px solid rgba(#000,.1); margin-bottom: 12px; @include border-radius(3px);_ text-shadow: 0 -1px rgba(#000,.3); position: relative;

On Tue, Oct 23, 2012 at 3:45 AM, Keil Miller notifications@github.comwrote:

What I do is create a single sass file and make all my imports there. Then, on my views sass file, I import just that one sass file with all of the imports. It makes life easier.

You shouldn't need to import compass twice and foundation at all on your views sass files. The only thing you might need from foundation is variables. I just pulled the ones I used into a separate file from foundation_and_overrides and imported it where needed.

— Reply to this email directly or view it on GitHubhttps://github.com/zurb/foundation/issues/1051#issuecomment-9677702.

keilmillerjr commented 11 years ago

Why not just make a foundation_plain.css.sass file and import it after the @import 'foundation'; line in foundation_and_overrides.css.scss file.? Compass should already be loaded and ready to go!

quark-zju commented 11 years ago

You mean append additional styles after foundation styles like:

a, b c, d e f, .... {

@import border-radius(0px);

}

?

That theoretically works, but:

It requires reading foundation source to know a, b c, d e f ... all rules that uses border(-corner-)-radius. There are just many. If foundation upgrades, the code need change accordingly. This is the same reason why Twitter BS is hard to customize.
It increases final css file size.

If I override compass border-radius mixin in the first place and resume it (by re-import that part of compass) after import partial of foundation I want no border-radius,

No knowledge about foundation class names are required. The code possibly works after foundation upgrades.
Final css file size decreases, because border-radius(*) generates nothing and no additional styles.

On Tue, Oct 23, 2012 at 4:12 AM, Keil Miller notifications@github.comwrote:

Why not just make a foundation_plain.css.sass file and import it after the @import 'foundation'; line in foundation_and_overrides.css.scssfile.? Compass should already be loaded and ready to go!

— Reply to this email directly or view it on GitHubhttps://github.com/zurb/foundation/issues/1051#issuecomment-9678641.

hatefulcrawdad commented 11 years ago

Thanks for all the comments! We closed this issue since the named issue was fixed. We do plan to extend a lot more classes to and make more variables to make things more customizable, it just takes time :)

foundation / foundation-sites

hardcoded border-radius #1051