flexnav icon indicating copy to clipboard operation
flexnav copied to clipboard

Separate function from design in sass

Open jstoller opened this issue 10 years ago • 1 comments

It would make it much easer to integrate flexnav into projects if the styles needed for the basic layout and functionality were separated from the design and ornamentation. I would suggest creating five different partials: _flexnav-layout.scss, _flexnav-design.scss, _flexnav-onepage.scss, _flexnav-oldie-layout.scss, and _flexnav-oldie-design.scss. All of these could then be combined in a single flexnav.scss file.

_flexnav-laout.scss should contain only the bare minimum styling required to get the menus to work, without any ornamentation at all. All measurements and such should be declared in variables at the top, using the "!default" designation, so they can easily be overridden without editing the original sass file.

_flexnav-design.scss should contain any backgrounds, borders, etc., needed for a default implementation to look OK on screen. This can also serve as an example for people wanting to create there own style. The assumption should be that designers implementing flexnav will likely want to edit this file.

_flexnav-onepage.scss would contain the layout overrides for your one-page implementation.

_flexnav-oldie-layout.scss and _flexnav-oldie-design.scss would contain the layout and design overrides, respectively, for people supporting older IE browsers.

This little segmentation of styles would make the project much easer to implement and maintain.

jstoller avatar Dec 25 '13 23:12 jstoller

Sounds good. Feel free to send a pull request.

mrjasonweaver avatar Dec 26 '13 17:12 mrjasonweaver