Linearizing issues

Owned by heidi valles
Last updated: Mar 30, 2011Version comment
2 min read

FSS has a class in fss-layout.css called fl-layout-linear. The idea is that if you apply this class to your page, it will linearize all columns and containers (or everything?). The styles as they are in 1.3.1 seem to exclude certain layouts so I created a test page to try to narrow down what was going on and a bunch of stuff came up:

1. fl-linearEnabled
    -what is it and why do we have it?
    -the only place we can find it being used is in the sakai integration-demo

2. linear class adds padding to buttons
    -this seems to be stepping outside of the bounds of linearizing
    -further investigation shows that the linearizing styles break buttons so this is likely a hack to fix them
    -if bigger buttons makes sense for a linear layout, should prob have it as its own style/usable elsewhere vs being included here

3. linear class makes all cols 100% width
    -is that what we want?
    -this breaks absolutely positioned columns (which we haven't styled to linearize yet)
    -no way to override this to 'go back to set widths'

4. linear class doesn't align stuff
    -chatted with james and he suggested the alignment be consistent in a linear layout
    -need to create classes that offer the choices for aligning everything left, centre, right (esp for RTL langs)

5. using the universal selector (*)
    -best practices? is styling "everything" ok?

6. using !important
    -used to override specificity (ex to get rid of the margin on .fl-layout-mixed-200 .fl-col-flex for example)
    -not really any other way to do it unless we create a huge list of specific styles to override. !important makes sense here?
    -should we be more explicit about the "super class"-ness of fl-layout-linear (obliterates things with its !importants) ...i.e. change to fl-layout-linear-important or something?
    -or is it inherent in its nature/ability to change everything that it would behave this way

7. edge cases
    -how would it work for say, a div that sticks in a certain position even when page is scrolled
    -any other prickly layouts we can think of?