-
-
Save rveitch/84cea9650092119527bc to your computer and use it in GitHub Desktop.
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 |
Thanks to Almighty God!
Where the Abstracts Folder
+1 @devabdulbarik ;-)
@devabdulbarik
The utils here represents the abstract. Both practically have the same expected content.
I'm having a hard time understanding "themes". Does anybody have further reading?
@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
How would you swap between 2 themes @DenisBun?
@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.
Thanks for the insight @chlorophyllkid. I was thinking something similar, I just didn't know if there was a "magic" way to swap.
Thanks you my friend.
Create a file called script.sh in your ./sass folder and paste this code.
mkdir abstract pages layout base components
cd abstract
touch _function.scss _mixins.scss _variables.scss
cd ..
cd base
touch _animations.scss _typography.scss _utilities.scss _base.scss
# This is a comment
# Use below imports in your main inde.scss file
# @import "./abstract/variables";
# @import "./layout/header";
# @import "./base/animations";
# @import "./base/typography";
# @import "./components/button";
Navigate to ./sass folder and double click on this file (script.sh)
It will automatically create some of the folder and files for you. 😁
I'll update this script as I create more files for myself 😛
What is the difference between layout/
and component/
in the context of react/vue applications? A navigation file is both a component and layout at the same time.
Is there any distinction?
A component would be something like a "button" where layout would be like "the CSS grid that lives inside "
great :)
I like this idea, but the Sass docs suggest moving away from @import
and toward @use
. Finding practical organizational guidelines using @use
and @forward
seems complicated. A good read nonetheless.
I like the idea of this but the Sass docs suggest moving away from
@import
and toward@use
. Find practical organizational guidelines using@use
and@forward
seems to be difficult. Good read none-the-less.
fyi: nonetheless is one word
I think that utils is the equivalent abstract
thank you, this is great i will use
Thanks, that's perfect!
Thanks a lot !
Here's the setup that I'm currently using for a project. Ignore the custom-partials
folder, it is not part of the 7-1, I use it for writing temporary stuff which in most cases will eventually be moved to one of the other folders
This is implemented using the new @forward
and @use
module system, each folder contains an _index.scss
file used to forward the refs to individual files in that folder. Below is the _index.scss
file for the components folder, the other folders' index files are similar
@forward './checkbox-toggle';
@forward './flex-text';
CC: @carolyn01 , @HowdyMcGee hope this helps
Create a file called script.sh in your ./sass folder and paste this code.
mkdir abstract pages layout base components cd abstract touch _function.scss _mixins.scss _variables.scss cd .. cd base touch _animations.scss _typography.scss _utilities.scss _base.scss # This is a comment # Use below imports in your main inde.scss file # @import "./abstract/variables"; # @import "./layout/header"; # @import "./base/animations"; # @import "./base/typography"; # @import "./components/button";
Navigate to ./sass folder and double click on this file (script.sh)
It will automatically create some of the folder and files for you. 😁
I'll update this script as I create more files for myself 😛
Thanks for the code @abhagsain
For those interested I made a similar batch version
- Open your favourite text editor
- Paste the code below
- Save it as .bat
- Copy/paste it and launch it wherever you need to
@ECHO OFF
:: This batch file creates all necessary files for SASS
:: Inspired by @abhagsain https://gist.github.com/abhagsain
:: https://gist.github.com/rveitch/84cea9650092119527bc#gistcomment-3040049
TITLE SASS Automatic Setup
ECHO ==========================
ECHO SASS AUTOMATIC SETUP
ECHO ============================
ECHO/
ECHO This program automatically creates all the files and folders you need for your SASS project.
ECHO/
PAUSE
ECHO Please wait... Creating files and folders
ECHO/
:: SASS Folder
ECHO Creating SASS folder...
if exist sass\NUL echo - SASS folder already exists
if not exist sass\NUL (
mkdir sass
echo + SASS folder creation: done.
)
ECHO/
ECHO Moving to SASS folder
cd sass
ECHO Creating SASS Subfolders...
ECHO/
:: Abstract folder
if exist abstract echo - abstract folder already exists
if not exist abstract (
mkdir abstract
echo + Abstract folder creation: Done.
)
:: Pages folder
if exist pages echo - pages folder already exists
if not exist pages (
mkdir pages
echo + Pages folder creation: Done.
)
:: Layout folder
if exist layout echo - layout folder already exists
if not exist layout (
mkdir layout
echo + Layout folder creation: Done.
)
:: Base folder
if exist base echo - base folder already exists
if not exist base (
mkdir base
echo + Base folder creation: Done.
)
:: Components folder
if exist components echo - components folder already exists
if not exist components (
mkdir components
echo + Components folder creation: Done.
)
ECHO/
ECHO Moving to Abstract...
cd abstract
ECHO\
ECHO Creating Abstract files
ECHO -------------------
:: _function.scss
if exist _function.scss echo - _function.scss already exists
if not exist _function.scss (
type nul >_function.scss
ECHO + _function.scss created
)
:: _mixins.scss
if exist _mixins.scss echo - _mixins.scss already exists
if not exist _mixins.scss (
type nul >_mixins.scss
ECHO + _mixins.scss created
)
:: _variables.scss
if exist _variables.scss echo - _variables.scss already exists
if not exist _variables.scss (
type nul >_variables.scss
ECHO + _variables.scss created
)
ECHO -------------------
ECHO/
ECHO Moving to Base
cd ..
cd base
ECHO Creating base files
ECHO -------------------
if exist _animations.scss echo - _animations.scss already exists
if not exist _animations.scss (
type nul >_animations.scss
ECHO + _animations.scss created
)
if exist _typography.scss echo - _typography.scss already exists
if not exist _typography.scss (
type nul >_typography.scss
ECHO + _typography.scss created
)
if exist _utilities.scss echo - _utilities.scss already exists
if not exist _utilities.scss (
type nul >_utilities.scss
ECHO + _utilities.scss created
)
if exist _base.scss echo - _base.scss already exists
if not exist _base.scss (
type nul >_base.scss
ECHO + _base.scss created
)
ECHO -------------------
ECHO/
ECHO You're all set up! Enjoy
ECHO/
ECHO Psst... Before you go :
ECHO Use below imports in your main inde.scss file :
ECHO/
ECHO @import "./abstract/variables";
ECHO @import "./layout/header";
ECHO @import "./base/animations";
ECHO @import "./base/typography";
ECHO @import "./components/button";
PAUSE
@saini-g Thank you very much.
However, are you familiar with variables using this format?
Some variables are globally usable and some are not, even if declared in same *_.scss file.
Hi, thanks for this. But I have a problem. I use bootstrap with npm, how should I setup this? I'm a bit lost :( (New)
Thanks a lot! Very helpful.
Love it ::D
I Love it, Thanks man. :)
Create a file called script.sh in your ./sass folder and paste this code.
mkdir abstract pages layout base components cd abstract touch _function.scss _mixins.scss _variables.scss cd .. cd base touch _animations.scss _typography.scss _utilities.scss _base.scss # This is a comment # Use below imports in your main inde.scss file # @import "./abstract/variables"; # @import "./layout/header"; # @import "./base/animations"; # @import "./base/typography"; # @import "./components/button";
Navigate to ./sass folder and double click on this file (script.sh) It will automatically create some of the folder and files for you. 😁 I'll update this script as I create more files for myself 😛
man thank a lot for your help :)
thanks,very helpful
Source: http://sass-guidelin.es/#the-7-1-pattern