Blog Documentation Book a Demo
Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Vanilla CSS

SpookyETSpookyET
edited March 2007 in Vanilla 1.0 Help
I'm integrating Vanilla into http://www.ksuicehockey.com/community/ . It's not yet perfect. I didn't have to change much because I write sandboxed CSS: http://www.ksuicehockey.com/css/global-screen.css Most of the Vanilla CSS is sandboxed. However, there are parts that aren't, which created a few problems. Sandboxing means that instead of writing .Bar { }, you write div#Body div#Foo span.Bar { }. One thing annoyed me a lot is absolute positioning. A float with clearfix or relative position is much better. An element is absolutely positioned relative to a parent that it's not statically positioned. It's not positioned relative to the viewport, which is a common misconception. How do you use relative positioning? Around Vanilla.css line 1,200. div.Extensions ul li input { width: auto !important; margin: -2px 0 0 -20px !important; left: -13px; top: -2px; position: relative; } That element used to be absolutely positioned with a left of 260 px, and it was badly displayed when I integrated Vanilla into KSU. I changed it to relative positioning. Relative positioning means that the element is positioned relative to where it was supposed to be if it was statically (default browser positioning) positioned. Then it takes out of the normal flow, and positions it 13px to the left and 2px top of where it was supposed to be. Next, it leaves white space where the element was supposed to be. So, we have to adjust the margins. You usually put the same numbers for margin-left and margin-top. I had to increase it a little since I wanted the checkbox further from the label. Though Vanilla isn't em based like KSU, it resizes pretty well since it is relatively elastic. What is utility.css and where is it used?

Comments

  • MarkMark Vanilla Staff
    utility.css is used when Vanilla throws a fatal error. Try changing your db connection parameters to something that fails to connect and you'll see it in action. The template file it relates to is themes/fatal_error.php If you wanted to pass along all of the changes necessary to make Vanilla's css "sandboxed", I'd be open to adding it to the core...
  • mallow005mallow005
    I think SpookyET just means prepending the element tag before all classes and IDs and the parent elements. While not necessary for IDs, it helps for readability and maintainability (can tell what kind of element it is just from reading the stylesheet). Including the parent elements is also for readability and maintainability, but it also "sandboxes" the CSS in that it is very specific so it won't conflict easily with other stylesheets/sites. There isn't a rule of thumb for how specific you should make each rule, you just need to use your good judgment.

    While Vanilla does have some... questionable... CSS and markup, it's easy to make your own theme and control the markup!
  • SpookyETSpookyET
    mallow005, Yes, that is what I have meant. Look at the CSS file I linked. It's very specific, easy to read, and clean.
This discussion has been closed.