Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sass 7-1 Pattern
sass/
|
|– base/
| |– _reset.scss # Reset/normalize
| |– _typography.scss # Typography rules
| ... # Etc…
|
|– components/
| |– _buttons.scss # Buttons
| |– _carousel.scss # Carousel
| |– _cover.scss # Cover
| |– _dropdown.scss # Dropdown
| ... # Etc…
|
|– layout/
| |– _navigation.scss # Navigation
| |– _grid.scss # Grid system
| |– _header.scss # Header
| |– _footer.scss # Footer
| |– _sidebar.scss # Sidebar
| |– _forms.scss # Forms
| ... # Etc…
|
|– pages/
| |– _home.scss # Home specific styles
| |– _contact.scss # Contact specific styles
| ... # Etc…
|
|– themes/
| |– _theme.scss # Default theme
| |– _admin.scss # Admin theme
| ... # Etc…
|
|– utils/
| |– _variables.scss # Sass Variables
| |– _functions.scss # Sass Functions
| |– _mixins.scss # Sass Mixins
| |– _helpers.scss # Class & placeholders helpers
|
|– vendors/
| |– _bootstrap.scss # Bootstrap
| |– _jquery-ui.scss # jQuery UI
| ... # Etc…
|
|
`– main.scss # Main Sass file
@rveitch

This comment has been minimized.

Copy link
Owner Author

commented Dec 17, 2015

@devabdulbarik

This comment has been minimized.

Copy link

commented Nov 29, 2018

Thanks to Almighty God!
Where the Abstracts Folder

@mikesparr

This comment has been minimized.

Copy link

commented Dec 11, 2018

@kayoderock

This comment has been minimized.

Copy link

commented Jan 9, 2019

The utils here represents the abstract. Both practically have the same expected content.

@grepsedawk

This comment has been minimized.

Copy link

commented May 15, 2019

I'm having a hard time understanding "themes". Does anybody have further reading?

@DenisBun

This comment has been minimized.

Copy link

commented May 24, 2019

@grepsedawk
themes folder is used whenever a site has multiple themes. For instance, the example project above includes both admin and default themes. We can, therefore, assume this example site is styled entirely differently for logged-in admins. Perhaps to better present and accommodate the additional features an Admin has. Some websites also offer a "night mode", where the background of the site is darker with lighter-colored text for easier reading in low-light environments. An option like this would be represented in its own theme file too.
Source: https://www.learnhowtoprogram.com/user-interfaces/building-layouts-preprocessors/7-1-sass-architecture

@grepsedawk

This comment has been minimized.

Copy link

commented May 24, 2019

How would you swap between 2 themes @DenisBun?

@chlorophyllkid

This comment has been minimized.

Copy link

commented Jun 16, 2019

@grepsedawk
I would recommend you using css variables scoped in a class at the body tag.
You could use any kind of switch (e.g. a checkbox) with an event handler that toggles this theme class.

@grepsedawk

This comment has been minimized.

Copy link

commented Jun 16, 2019

Thanks for the insight @chlorophyllkid. I was thinking something similar, I just didn't know if there was a "magic" way to swap.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.