Structures and Layouts for styles in different projects

Static sites

.
├── base
│   ├── __mixins.scss
│   ├── _animations.scss
│   ├── _breakpoints.scss
│   ├── _colours.scss
│   ├── _elevation.scss
│   ├── _icons.scss
│   ├── _layout.scss
│   └── _typography.scss
├── components
│   ├── _app-promo.scss
│   ├── _button.scss
│   ├── _common-info-box.scss
│   ├── _grid.scss
│   ├── _home_overview.scss
│   ├── _input.scss
│   ├── _list-row.scss
│   ├── _loading.scss
│   ├── _loyalty-cards.scss
│   ├── _modal.scss
│   ├── _progress-bar.scss
│   ├── _row-tiles.scss
│   ├── _single-tile.scss
│   ├── _skiplinks.scss
│   ├── _slick.scss
│   └── _third-nav.scss
├── fonts
│   ├── OpenSans-Bold.ttf
│   ├── OpenSans-BoldItalic.ttf
│   ├── OpenSans-ExtraBold.ttf
│   ├── OpenSans-ExtraBoldItalic.ttf
│   ├── OpenSans-Italic.ttf
│   ├── OpenSans-Light.ttf
│   ├── OpenSans-LightItalic.ttf
│   ├── OpenSans-Regular.ttf
│   ├── OpenSans-SemiBold.ttf
│   └── OpenSans-SemiBoldItalic.ttf
├── main.scss
└── sections
    ├── _account-settings.scss
    ├── _addcard.scss
    ├── _edit-password.scss
    ├── _grid-view.scss
    ├── _help.scss
    ├── _home-divider.scss
    ├── _home.scss
    ├── _login.scss
    ├── _loyalty-info.scss
    ├── _modal.scss
    ├── _nav-qr.scss
    ├── _nav-user.scss
    ├── _optus.scss
    ├── _profile-details.scss
    ├── _profile.scss
    ├── _signup.scss
    ├── _tile-details.scss
    └── _transactions.scss
copy

React sites

.
├── components
│   └── addcardpathway
│       ├── AddCardPathway.js
│       ├── AddCardPathwayView.js
│       ├── styles.js
│       └── AddCardScreens.js
├── styles
│   ├── base
│   │   ├── __mixins.scss
│   │   ├── _animations.scss
│   │   ├── _breakpoints.scss
│   │   ├── _colours.scss
│   │   ├── _elevation.scss
│   │   ├── _icons.scss
│   │   ├── _layout.scss
│   │   └── _typography.scss
│   ├── fonts
│   │   ├── OpenSans-Bold.ttf
│   │   ├── OpenSans-BoldItalic.ttf
│   │   ├── OpenSans-ExtraBold.ttf
│   │   ├── OpenSans-ExtraBoldItalic.ttf
│   │   ├── OpenSans-Italic.ttf
│   │   ├── OpenSans-Light.ttf
│   │   ├── OpenSans-LightItalic.ttf
│   │   ├── OpenSans-Regular.ttf
│   │   ├── OpenSans-SemiBold.ttf
│   │   └── OpenSans-SemiBoldItalic.ttf
│   ├── main.scss
│   └── sections
│       ├── _account-settings.scss
│       ├── _addcard.scss
│       ├── _edit-password.scss
│       ├── _grid-view.scss
│       ├── _help.scss
│       ├── _home-divider.scss
│       ├── _home.scss
│       ├── _login.scss
│       ├── _loyalty-info.scss
│       ├── _modal.scss
│       ├── _nav-qr.scss
│       ├── _nav-user.scss
│       ├── _optus.scss
│       ├── _profile-details.scss
│       ├── _profile.scss
│       ├── _signup.scss
│       ├── _tile-details.scss
│       └── _transactions.scss
copy