search

trendwerk / sphynx

A light & simple WordPress starter theme 😽
16 stars 2 forks source link

Sass architecture #473

Closed haroldangenent closed 9 years ago

haroldangenent commented 9 years ago

We should implement a better Sass file architecture. Some examples:

sboerrigter commented 9 years ago

@gewoonderrik, @luukdv and I are all in favor of the 7-1 pattern.

haroldangenent commented 9 years ago

Let's implement this as quickly as possible. I'll assign @luukdv to take the lead in the research implementation. Feel free to consult a lot.

luukdv commented 9 years ago

A proposal for our architecture:

sass/
|
|– base/
|   |– _typography.scss   # Typography
|
|– components/
|   |– _buttons.scss      # Buttons
|   |– _comments.scss     # Comments, respond
|   |– _gallery.scss      # Gallery
|   |– _icons.scss        # Burger icon, glass icon
|   |– _meta.scss         # Post meta, tags
|   |– _pagination.scss   # Pagination
|   |– _tables.scss       # Tables
|   |– _videos.scss       # Video container styling
|
|– layout/
|   |– _container.scss    # Container system (wrapper, main)
|   |– _footer.scss       # Footer
|   |– _forms.scss        # Default form, search form
|   |– _header.scss       # Header
|   |– _images.scss       # Images (default image styling)
|   |– _navigation.scss   # Main navigation, mobile navigation
|
|– pages/
|   |– _single.scss       # Single template specific styles
|   |– _search.scss       # Search template specific styles
|
|– utils/
|   |– _editor.scss       # Editor helpers (tinymce, video)
|   |– _functions.scss    # Sass functions (respond-to, shade, transform)
|   |– _helpers.scss      # Class helpers (clear, hide)
|   |– _variables.scss    # Sass Variables
|
|– vendors/
|   |– _normalize.scss    # Normalize
|
|– main.scss              # One file to rule them all
haroldangenent commented 9 years ago

Seems like a good plan.

gewoonderrik commented 9 years ago

The structure as mentioned above by @luukdv has been implemented in the OOCSS branche. I'm adding this to the milestone. Can someone review this?

haroldangenent commented 9 years ago

I see it has been implemented, but I'm still wondering how the 7-1 pattern will be dealt with when OOCSS is finished. I'll give remarks on that issue and let this be auto-closed when merged.