[Define New Theme] 15. The css needs broken out into components and elements for easier maintainability and portability.

General discussion of development ideas and the approaches taken in the 3.x branch of phpBB. The current feature release of phpBB 3 is 3.3/Proteus.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB 3.3.x. If you need support for phpBB 3.3.x please visit the 3.3.x Support Forum on phpbb.com.

If you have questions regarding writing extensions please post in Extension Writers Discussion to receive proper guidance from our staff and community.
Post Reply
User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

[Define New Theme] 15. The css needs broken out into components and elements for easier maintainability and portability.

Post by hanakin »

*Note This is part 15 of a series found here

So just for clarification this is a two fold discussion really. I am not saying lots of little css files. The CSS should be broken out into smaller files yes but not as many as we have no. The really break-out would come in the form of something like less files to be more module and then the generated css files would be broken out differently then they are now but in all merged and minified and compressed.

Please respond accordingly
This is not a discussion on compressing/minifying that is being discussed here: https://area51.phpbb.com/phpBB/viewtopi ... 81&t=45669
This is not a discussion on the use of a pre-processor that is being discussed here: viewtopic.php?f=81&t=45549

With that out of the way here is the proposal

PROPOSAL:
given the use of a preprocessor the content should be broken something like the following

LESS folder:
  • + core
    • _normalize.less
      _base.less
      _defaults.less
      _layout-grid.less
      _utilities-layout.less
      _utilities-text.less
      _utilities-responsive.less
      _common-type.less
      _common-lists.less
      _common-tables.less
      _common-forms.less
    + mixins
    + theme
    • _vars.less
      _block-header.less
      component-navbar.less
      _element-button.less
    _mixins.less <- used to include all mixins
    core.less <- used to include all core parts
    style.less <- master file
    theme.less <- used to include modular blocks, components, & elements
    [page].less <- can create page specific combinations of modules in order to reduce the amount of styles on different sections
Then you render it into something like the following

style.css <- this is then minified and compressed containing all styles
core.css <- only includes the core styles to be included in combination with a page specific style sheet
theme.css <- used to replace the core values with theme specific globals. Also used in combination with page specific
cp.css <- contains all none global theme related styles for the control panels

This is all still kind of debatable and am open for suggestions. For example its totally possible to put all the utility files into a folder rather than prepending them, same for common, block, component, and elements.

Also it may not be 100% necessary to have individual page specific styles depending on how small the overall stylesheet is.

Thoughts & Suggestions
Donations welcome via Paypal Image

Post Reply