Modular approach

[haroldangenent]

• Separate structure and skin
• Separate container and content

[sboerrigter]

@luukdv will talk ofzo. On monday

[haroldangenent]

OOCSS will be implemented for 1.1.0.

[haroldangenent]

By the way: This means a complete rewrite, taking into account the main principles of OOCSS:

• Separate structure from skin
• Separate container and content

[haroldangenent]

Please update https://github.com/trendwerk/trendpress/wiki/Mixins after fixing this.

[haroldangenent]

Soms remarks on _functions.scss:

• I wouldn't call the mixins by the name of functions. This is confusing, since functions are a thing;
• We could use some functions to simplify things;
• Commenting with @section and @subsection seems needless, let's simplify our comments and use SassDoc for re-usable lego's, functions and mixins;
• Some mixins can be removed, because they're not useful or needless because of autoprefixer.

[haroldangenent]

I'm really enthusiastic about this, thanks for your work @gewoonderrik and @luukdv! Did a small review, you'll find a better overview on the current situation below. A lot of things are questions, I hope one of you could answer these.

General

• [x] My biggest remark: On a lot of occasions, structure and skin are not separated #543
• [x] All strings (except valid CSS properties) should be wrapped in quotes

main.scss

• [x] Inclusion order seems strange. Has to be done alphabetically after the first directory/, except when this is impossible.

_functions.scss

• [x] Create separate mixins for separate button types
• [x] How about a mixin for display: block with margin-bottom and display: block with float: left? Maybe even a structure like this (I'm not sure about this):
• block()
• block-float() (extends block())
• block-margin() (extends block())
• This could be further extended for site-specific things. Partially implemented. Modularity can be improved in the future.
• [x] Seperate this file anyway. Each mixin or function should have it's own file, especially when looking at SassDoc which we will implement soon.
• [x] I wouldn't call the file with mixins by the name of functions. This is confusing, since functions are a thing
• [x] border-radius mixin can be removed, it's not useful anymore (since autoprefixer)
• [x] Move meta mixins to it's single declarations location
• [x] The current block() mixin is too non-description. I'm not sure what it does and it doesn't even display: block
• [x] Remove gradient(), it's not used and this is not intended as a library. Fezcat might be interested :-)
• [x] Some mixins have parenthesis() and some don't. Should all have parenthesis.
• [x] Remove placeholder() in favor of style simplification. Current use is exactly the same on both occasions: @include placeholder($text-color, $text-light);. This should be default styling on the element level.
• [x] Rename remove-list-styles to list-style-none.
• [x] Remove sprite() (the images as well probably): It is not used and this is not intended as a library. They are site-specific things and should be implemented on a site-specific level. Of course, that implementation method should be efficient.
• [x] Remove the $white-space: nowrap declaration from the button mixin. It's unused.
• [x] Remove main as default for $type, since main is never evaluated to

_helpers.scss

• [x] This should not be in utils/. According to the guidelines used):

The utils/ folder gathers all Sass tools and helpers used across the project. Every global variable, function, mixin and placeholder should be put in here.

(so only for Sass things, I'd recommend giving them their own file)

• [x] Actually, remove all helpers, since they are not in use anywhere at this moment (and probably not on a lot of other websites as well). If we need them, they should probably be a Sass mixin as well.

_typography.scss

• [x] Separate this file in multiple files (maybe even folders), so the folder structure gives a better overview of the styles. For example, headings, links and lists could use their own file. I don't think there's such a thing as 'too many files' in this approach

In a separate directory:

• _base.scss (also includes paragraphs)
• _headings.scss
• _italic.scss maybe remove this
• _lists.scss
• _quotes.scss
• _code.scss
• [x] Remove italic declarations (in case they are not necessary, has to be cross-browser tested)

_footer.scss

• [x] Use the element footer as a selector, instead of a class. This is also done on main and there's only one footer by default. Maybe there should always be one footer each page.

_header.scss

• [x] Use the element header as a selector, instead of a class. This is also done on main and there's only one header by default. Maybe there should always be one header each page.

_article.scss

• [x] I'm not sure if .hentry is the right class. This would inherit the same styling to new post types and you'd have to change this file afterwards. How about .type-post?

_button.scss

• [x] The argument for the secondary button, secondary, should be wrapped in quotes.

_comment-form.scss

• [x] This file should be called _comment-respond.scss, since it contains that class and only that class.
• [x] Remove small a declaration - doesn't do anything
• [x] Remove p:last-of-type declaration

_comments.scss

• [x] The first declaration can be nested in .comments with the same output (no chance on specifity problems)
• [x] Remove ul, it's not used

_gallery.scss

• [x] Can't this code be more compact or at least more DRY / calculated? Started on this, but not finished yet. Could use some help on this. See #532

_logo.scss

• [x] Rename .sitename and .sitedescription to .site-name and .site-description for readability

_navigation-icon.scss

• [x] Rename this file to _burger.scss or rename .burger to .navigation-icon. I'd recommend the latter (maybe even .mobile-navigation-icon, to keep things description and consistent)

_search-form.scss

• [x] Why are all elements named .search-form-... except for .glass? Would it be possible to make things more consistent?

_search-icon.scss

• [x] Rename this file to _glass.scss or rename .glass to .search-icon. I'd recommend the latter (maybe even .search-form-icon, to keep things descriptive and consistent)

_wordpress-images.scss

• [x] I'm not sure this file is descriptive. .alignleft can be used for more things than images, right? Maybe this file should be split or something.
• [x] If this file keeps to exist, it should be called _wp-images.scss, since we also have _wp-caption.scss.

wordpress/ folder

• [x] Create components/wordpress/ for all WordPress components we need.

Everything in pages/

• [x] Remove it

Conclusion

I'll start working on this as well. Maybe you guys can add to this list and keep it updated, so we have some kind of overview on the status. Big items or features can be placed as new issues.

I'd love to hear your thoughts.

[haroldangenent]

We talked about this. Notes:

Separate structure and skin

We should do this.

Inclusion order

Alphabetically, except when it's impossible.

Mixins / functions

Will get their own directory. One mixin or function per file.

Button mixin

Split in several mixins. Mixins used once will be declared in the appropriate class.

Meta mixin

Will be removed.

Block mixin (proposal)

We should try this.

Block mixin (old one)

Rename it to something semantic.

Gradient

Move to Fezcat.

Parenthesis

Every mixins should have parenthesis.

Placeholder

Remove as proposed.

List-style-none

Yes.

Sprite mixin

Remove as proposed.

Helpers

Remove.

Typography

In a separate directory:

• _base.scss (also includes paragraphs)
• _headings.scss
• _italic.scss maybe remove this
• _lists.scss
• _quotes.scss
• _code.scss

Footer

Keep the class.

Header

Keep the class.

Hentry

Different class and file name.

Small a

Keep it.

p.last-of-type

Remove it.

Comments ol, ul

Put in parent. Remove ul.

Gallery

Improve. Should be a separate issue.

.burger

Rename to .mobile-navigation-icon.

.glass

Rename to .search-form-icon or something. Also rename the file.

_wordpress-images.scss

Split if .alignleft is used for more than just images.

New idea: create a wordpress/ folder for all WordPress components.

pages/

Remove.

[haroldangenent]

The current block() mixin is too non-description. I'm not sure what it does and it doesn't even display: block

Based on some other frameworks and readings, I'd name it .panel, .card or .box. Maybe .box is the best one, since it's the most descriptive. The content is literally boxed in. I'll use that one, feel free to protest if you disagree.

[haroldangenent]

Just refactored wordpress/ components. They include:

• .wp-caption
• .comment-respond
• .comments
• .gallery
• _images.scss (containing WYSIWYG image classes)

WordPress components can be defined as such: Components which HTML is generated by either WordPress itself or it's WYSIWYG editor.

[haroldangenent]

I have decided to drop #543 out of this issue and rename this one. The modular approach is practically finished and can be improved upon in time. Separation of skin and structure is a separate issue completely.

[luukdv]

Agreed, as discussed. Excited about the merge.

[haroldangenent]

@gewoonderrik has tested it. Removed assignment.