search

duckduckgo / duckduckgo-styles

Common styling elements for all DuckDuckGo properties
Other
40 stars 13 forks source link

Hacky '!important' #24

Open GuiltyDolphin opened 8 years ago

GuiltyDolphin commented 8 years ago

There's a few places, such as https://github.com/duckduckgo/duckduckgo-styles/blob/master/objects/_forms.scss#L121, where we are using !important - could we move away from this? I've been experiencing a few issues with alignment when mixing grids and 'forms'.

alohaas commented 8 years ago

Thanks @GuiltyDolphin – can you please provide some screenshots and points of reference where the UI is having alignment issues?

GuiltyDolphin commented 8 years ago

@alohaas I'm not terribly experienced with CSS/HTML so it is entirely possible it was my own fault!

When using gw for grid alignment I was using (roughly):

<div class="frm__select">
    <select class="g forty" />
</div>

Which was leading to under-filling such as: screenshot from 2016-04-21 16 37 29

When I moved the g forty into the <div> it was fine:

<div class="frm__select g forty">
    <input />
</div>

screenshot from 2016-04-21 16 36 56

It appears to be that I was just aligning the wrong element; so it wasn't filling the parent?

I don't know how you guys do it :wink:

@alohaas By the way, there doesn't appear to be any documentation on certain elements such as frm__select on https://duckduckgo.com/style-guide; is this updated often?