2

Is there a recommended way to override/alter the form styles in inuit.css?

The inuit.css/base/_forms.scss has a rule setting label tags to display: block;, which is breaking a CMS I'm using. Certainly I could modify this file, or remove the import from _inuit.scss, but neither seems like a good approach.

Adding a rule in _vars.scss, which is a recommended approach for overriding defaults doesn't work. Both rules end up in the compiled css file, and the built-in one takes precedence.

kleinfreund
  • 6,546
  • 4
  • 30
  • 60
joelt
  • 2,672
  • 2
  • 24
  • 32

1 Answers1

4

In css/style.scss you add your own files like this:

/**
 * She’s all yours, cap’n... Begin importing your stuff here.
 */
//@import "ui/example";
@import
        "ui/base",
        "ui/forms"
;

Now you override display: block; in your own _forms.scss:

label {
    display: inline;
}

Notes:

  • The _vars.scss is the recommended way to override inuit.css variables, not styles – Use own imported CSS files to override styles (see above)
  • Don't alter the inuit.css files itself, because you'll lose these changes as soon as you update
  • Check out the README.md for instructions on how to use inuit.css
kleinfreund
  • 6,546
  • 4
  • 30
  • 60
  • Make sure your CSS comes AFTER inuit.css, though. Otherwise, it will be your own CSS being overwritten instead – Hiigaran Jan 22 '14 at 20:09
  • @Hiigaran Exactly. That's why I kept the comment. It's after `@import "inuit.css/inuit";`. This is crucial. – kleinfreund Jan 22 '14 at 20:10