Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Reorganize Scss folder structure

See original GitHub issue

Our current scss file and folder architecture is a bit unclear. We have a _variables.scss file on the same level as the components. There’s also a _mixins.scss file which includes the mixins in another folder. There might be some room for reorganisation.

We could come up with our own folder structure but it might be interesting to have a look at existing solutions. Maybe ITCSS could help us out.

ITCSS has been discussed already in https://github.com/twbs/bootstrap/issues/18233 but this was also about splitting our variables file, I wouldn’t do that for now. Just reorganising the files into folders would be a great start.

Feel free to spread your thoughts on this here

/CC @twbs/css-review

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:5
  • Comments:10 (9 by maintainers)

github_iconTop GitHub Comments

6reactions
MartijnCuppenscommented, Apr 3, 2019

I guess a folder structure like this would be the result in the end:

bootstrap/
└── scss/
    ├── settings/
    │   └── variables.scss
    ├── tools/
    │   ├── functions.scss
    │   └── mixins
    │       └── ... All mixin files here
    ├── generic/
    │   ├── reboot.scss
    │   └── root.scss
    ├── elements/
    │   └── type.scss
    ├── objects/
    │   ├── images.scss
    │   ├── code.scss
    │   ├── grid.scss
    │   └── transitions.scss
    ├── components/
    │   ├── tables.scss
    │   ├── forms.scss
    │   ├── buttons.scss
    │   ├── dropdown.scss
    │   ├── button-group.scss
    │   ├── input-group.scss
    │   ├── custom-forms.scss
    │   ├── nav.scss
    │   ├── navbar.scss
    │   ├── card.scss
    │   ├── breadcrumb.scss
    │   ├── pagination.scss
    │   ├── badge.scss
    │   ├── alert.scss
    │   ├── progress.scss
    │   ├── list-group.scss
    │   ├── close.scss
    │   ├── toasts.scss
    │   ├── modal.scss
    │   ├── tooltip.scss
    │   ├── popover.scss
    │   ├── carousel.scss
    │   └── spinners.scss
    ├── utilities/
    │   └── utilities.scss
    ├── bootstrap.scss
    ├── bootstrap-grid.scss
    └── bootstrap-reboot.scss

In each folder some files could be grouped into folders if needed (like the form stuff).

5reactions
GeoSotcommented, Apr 11, 2019

@mdo @MartijnCuppens

May I propose and a split on the variables.scss?

It has being too big… Or Maybe One main File with the main variables and a second which will have all the inherited variables

Read more comments on GitHub >

github_iconTop Results From Across the Web

2 Smartest Ways to Structure Sass - Webdesigner Depot
All you need to do is organize the partials in 7 different folders, and one single file (app.sass) should sit at the root...
Read more >
How To Organize And Structure Your SASS Code - LinkedIn
Our folders would typically contain the following like abstracts contains tools, helpers, variables, mixins etc. Base contains boilerplate code ...
Read more >
Practical way to organize your Sass files | by Bruno Leite
Key takeaways. We can view the website by it's components and sections like navigation bar, footer, header… 7–1 architecture (7 folders- 1 ...
Read more >
How I organize Sass projects - Prototypr
The first thing I do whenever I start a new project is to first create the folders where the code will live, then...
Read more >
Ask DN: How do you structure your SASS files in a large project?
I'm working with about 10000 lines of (desktop and mobile web) SCSS/CSS, which I'm aiming to minify and restructure. How do you structure...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

JS - button plugin stop event propagation on checkboxes/radio when browsing with keyboard

Next page

carousel is sliding on ios when clicking whitout controls