Addictive Community's UI/SCSS is confuse and too complex

[brunnopleffken]

I've been taking a look at the *.scss file and wondering: theming it must be a nightmare! CSS classes are too attached and nested with each other. For example: buttons in Bootstrap are like: btn, and then just add btn-lg for large, btn-sm for small, btn-block to add full width, and so on. Well... In Addictive Community they're like: default-button, and add grey to make it grey. Small buttons is just another class: small-button with all those long statements (padding... font-size... border-radius...) rewritten, and add grey to make it grey. Oh, and add white to use color: #fff.

I intent to make theming more Bootstrap-like, with more independent and reusable CSS classes and MUCH more improved responsive mode. This approach will also be a GREAT step towards implementing extension support mentioned in #90, as other devs will build their extensions using the same flexible UI.

There will be no drastic changes to the UI. There will be margin and padding changes, some new buttons and controls, fonts and images sizes, etc. These HTML components will be rewritten. The SCSS file will be shorter, the HTML file will be easier to maintain and extend.

• Home
• View room
• Read thread
• Add/edit thread or poll
• Control Panel
• Member list
• Member profile
• Search engine
• Calendar
• Help topics
• Messenger
• Register
• Error pages: not logged in, HTTP 404/500, community offline, etc.
• Modal windows: delete post, login, post report, etc.

And about #90: I already have a scratch of the extension system. It need further tests but looks promising!

[xQuByte]

So maybe use bootstrap, or some litle css framework to make work easier?

[brunnopleffken]

@xQuByte Two or three months ago I tried to use Bootstrap but Addictive Community has a lot of unique components and text formatting. The "overwrite" file was SO large that seems to be easier to create a new one from scratch based on it. So, what have been made until now:

• Two separate files: framework.css and theme.css. The first file is the base file, dealing with flex grid components, alignment, container sizes, helpers, etc.; the second one with colors and fonts. So, if you want to create or change a theme you won't be facing all those flex grids and media queries because they'll be in framework.css.
• Use the most of Bootstrap-style CSS classes: there are btn btn-default btn-lg and alert > alert-success in it; those bordered boxes in form elements are created using form-group and grids with col-* for example. Theming will be a LOT easier using a standard that everyone know!
• The colors are quite inconsistent. The accent color is called fiord (hex #405169), so I created other 4 shades of this tone: -light, -lighter, -dark, -darker. I did the same with shades of grey.
• Currently, the spacing in/between elements (margin and padding) is way too inconsistent. There's 20px of spacing, 10px, 8px, 6px. I want to standardize the margins and spacing to make the layout more consistent.

Some of the "workarounds" I want to fix:

[xQuByte]

Ah. I understand. Thank You for this reply. After Christmas i back to contribute Addictive Comunity :)