Skip to content

Latest commit

 

History

History
262 lines (218 loc) · 9.79 KB

STRUCTURE.md

File metadata and controls

262 lines (218 loc) · 9.79 KB

Directories and files structure

The boilerplate contains the entire directory structure needed for a frontend project and can be easily integrated into any project type.

├── settings
│   ├── base-options.scss
│   ├── fonts-text.scss
│   ├── colors.scss
│   ├── modules-widgets.scss
│   ├── global-properties.scss
│   ├── animations.scss
│   ├── easings.scss
│   ├── transitions.scss
│   └── z-index.scss
├── validators
│   ├── contains.scss
│   ├── is-length.scss
│   ├── is-color.scss
│   └── is-size.scss
├── functions
│   ├── sh-setup.scss
│   ├── math.scss
│   ├── map-functions.scss
│   ├── list-functions.scss
│   ├── unitconversion.scss
│   ├── to-number.scss
│   ├── string-replace.scss
│   ├── strip-unit.scss
│   ├── animations.scss
│   ├── easings.scss
│   ├── color.scss
│   ├── tint.scss
│   ├── shade.scss
│   └── z-index.scss
├── mixins
│   ├── border-radius.scss
│   ├── centering.scss
│   ├── circle.scss
│   ├── clearfix.scss
│   ├── fonts.scss
│   ├── hide.scss
│   ├── strip-unit.scss
│   ├── line-clamp.scss
│   ├── nth-child.scss
│   ├── placeholder.scss
│   ├── position.scss
│   ├── pseudo.scss
│   ├── resize.scss
│   ├── scrollbars.scss
│   ├── selection.scss
│   ├── size.scss
│   ├── text-crop.scss
│   ├── triangle.scss
│   ├── z-index.scss
│   ├── context.scss
│   ├── parentState.scss
│   ├── parent-hover.scss
│   └── transitions.scss
│   └── debugger.scss
├── generic
│   ├── reset.scss
│   └── sanitize.scss
├── base
│   ├── config.scss
│   ├── global.scss
│   └── typography.scss
├── objects
│   ├── images.scss
│   └── svg.scss
├── animations
│   └── bouncing.scss
├── layouts
│   ├── grid.scss
│   └── main.scss
├── components
│   ├── header.scss
│   └── footer.scss
├── pages
│   ├── about.scss
│   ├── contact.scss
│   └── home.scss
├── overrides
│   ├── helper-float.scss
│   ├── helper-margin.scss
│   ├── helper-padding.scss
│   ├── helper-position.scss
│   ├── helper-text.scss
│   ├── helper-visibility.scss
│   ├── colors-classes.scss
│   ├── html-validator.scss
│   ├── debugger.scss
│   └── shame.scss
├── vendors
│   └── breakpoint-sass
│       └── _breakpoint.scss
└── app.scss
└── style.scss

Settings - /settings

This layer contains all of the variables needed to turn settings on and off as well as setting global values for commonly used properties.

Validators - /validators

Validators files are private helpers for mixins and functions.

Functions - /functions

Many useful functions for manipulating colors and other values.The functions layer contains a number of useful mathematical functions.

Mixins - /mixins

Many useful mixins for manipulating fonts and other values, mixins can be added by creating new files. Since mixins don't output any code until they're used there is no harm in them being there and not being utilised.

Generic - /generic

reset and/or normalize styles etc. This is the first layer which generates actual CSS.

Base - /base

The base layer is for the styling of common elements without the use of classnames, these are very generic and far reaching styles affecting all instances of any given element.

Objects - /objects

The objects layer contains a number of classed elements. Along with the components layer most of your time will be spent here. This is where you will add new files for the objects in your project. The files included are as follows;

Animations - /animations

Any CSS animations used in the project.

Layouts - /layouts

The layout/ directory (sometimes called partials/) usually contains a number of files, each of them setting some styles for the main sections of the layout (header, footer, and so on)

Components - /components

For smaller components. It can contain all kinds of specific modules like a slider, a loader, a widget, or anything along those lines. There are usually a lot of files in components/ since your site is should be mostly composed of tiny modules.

Pages - /pages

If you have page-specific styles, I think it’s cool to put them in a pages/ folder and in a file named after the page.

Overrides - /overrides

The overrides layer contains the helper classes broken down into multiple files for different property types and the shame file used for quick and dirty fixes.

Vendors - /Vendors

And last you will probably have a vendors/ folder containing all the CSS files from external libraries and frameworks

app.scss - app.scss

The app.scss file is where the entire project is stitched together. Consisting only of @import rules. only variables,functions,mixins of scss - not compile to css

style.scss - style.scss

The style.scss file is where the entire project is stitched together. Consisting only of @import rules it is responsible for the order in which the code is output into the single main stylesheet when compiled.