The structure that I use to start new front-end projects. Download only the `frontend-init` and run it on your terminal. :)

.scss-lint.yml

# This is the lint file for .scss files. It uses https://github.com/causes/scss-lint
# to search through .scss files and point out errors.
# You can view these errors in your editor.
#
# Here's a link to all the default configurations
# https://github.com/causes/scss-lint/blob/master/config/default.yml
# below is our settings.

linters:
  BangFormat:
    enabled: true
    space_before_bang: true
    space_after_bang: false

  BorderZero:
    enabled: true
    convention: zero # or `none`

  ColorKeyword:
    enabled: true

  ColorVariable:
    enabled: false

  Comment:
    enabled: true

  DebugStatement:
    enabled: true

  DeclarationOrder:
    enabled: true

  DuplicateProperty:
    enabled: true

  ElsePlacement:
    enabled: true
    style: same_line # or 'new_line'

  EmptyLineBetweenBlocks:
    enabled: true
    ignore_single_line_blocks: true

  EmptyRule:
    enabled: true

  FinalNewline:
    enabled: true
    present: true

  HexLength:
    enabled: true
    style: short # or 'long'

  HexNotation:
    enabled: true
    style: lowercase # or 'uppercase'

  HexValidation:
    enabled: true

  IdSelector:
    enabled: true

  ImportantRule:
    enabled: true

  ImportPath:
    enabled: true
    leading_underscore: false
    filename_extension: false

  Indentation:
    enabled: true
    allow_non_nested_indentation: false
    character: space # or 'tab'
    width: 2

  LeadingZero:
    enabled: true
    style: exclude_zero

  MergeableSelector:
    enabled: true
    force_nesting: false

  NameFormat:
    enabled: true
    convention: hyphenated_lowercase # or 'BEM', or a regex pattern

  NestingDepth:
    enabled: false
    max_depth: 3

  PlaceholderInExtend:
    enabled: false

  PropertySortOrder:
    enabled: true
    ignore_unspecified: true
    severity: warning
    order:
      - content # content gets precedence to help identify pseudo selectors.
      - position
      - top
      - right
      - bottom
      - left
      - z-index
      - display
      - float
      - width
      - min-width
      - max-width
      - height
      - min-height
      - max-height
      - box-sizing
      - padding
      - padding-top
      - padding-right
      - padding-bottom
      - padding-left
      - margin
      - margin-top
      - margin-right
      - margin-bottom
      - margin-left
      - overflow
      - overflow-x
      - overflow-y
      - clip
      - clear
      - font
      - font-family
      - font-size
      - font-style
      - font-weight
      - font-variant
      - font-size-adjust
      - font-stretch
      - font-effect
      - font-emphasize
      - font-emphasize-position
      - font-emphasize-style
      - font-smooth
      - hyphens
      - line-height
      - color
      - text-align
      - text-align-last
      - text-emphasis
      - text-emphasis-color
      - text-emphasis-style
      - text-emphasis-position
      - text-decoration
      - text-indent
      - text-justify
      - text-outline
      - text-overflow
      - text-overflow-ellipsis
      - text-overflow-mode
      - text-shadow
      - text-transform
      - text-wrap
      - letter-spacing
      - word-break
      - word-spacing
      - word-wrap
      - tab-size
      - white-space
      - vertical-align
      - list-style
      - list-style-position
      - list-style-type
      - list-style-image
      - pointer-events
      - fill
      - fill-opacity
      - stroke
      - stroke-opacity
      - stroke-width
      - shape-rendering
      - cursor
      - visibility
      - zoom
      - flex-direction
      - flex-order
      - flex-pack
      - flex-align
      - flex-grow
      - table-layout
      - empty-cells
      - caption-side
      - border-spacing
      - border-collapse
      - quotes
      - counter-reset
      - counter-increment
      - resize
      - user-select
      - nav-index
      - nav-up
      - nav-right
      - nav-down
      - nav-left
      - background
      - background-color
      - background-image
      - filter
      - background-repeat
      - background-attachment
      - background-position
      - background-position-x
      - background-position-y
      - background-clip
      - background-origin
      - background-size
      - border
      - border-color
      - border-style
      - border-width
      - border-top
      - border-top-color
      - border-top-style
      - border-top-width
      - border-right
      - border-right-color
      - border-right-style
      - border-right-width
      - border-bottom
      - border-bottom-color
      - border-bottom-style
      - border-bottom-width
      - border-left
      - border-left-color
      - border-left-style
      - border-left-width
      - border-radius
      - border-top-left-radius
      - border-top-right-radius
      - border-bottom-right-radius
      - border-bottom-left-radius
      - border-image
      - border-image-source
      - border-image-slice
      - border-image-width
      - border-image-outset
      - border-image-repeat
      - outline
      - outline-width
      - outline-style
      - outline-color
      - outline-offset
      - box-shadow
      - opacity
      - transition
      - transition-delay
      - transition-timing-function
      - transition-duration
      - transition-property
      - transform
      - transform-origin
      - animation
      - animation-name
      - animation-duration
      - animation-fill-mode
      - animation-play-state
      - animation-timing-function
      - animation-delay
      - animation-iteration-count
      - animation-direction

  PropertySpelling:
    enabled: true
    extra_properties: []

  QualifyingElement:
    enabled: false

  SelectorDepth:
    enabled: true
    max_depth: 4

  SelectorFormat:
    enabled: false
    convention: strict_BEM # or 'BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern

  Shorthand:
    enabled: true

  SingleLinePerProperty:
    enabled: true
    allow_single_line_rule_sets: true

  SingleLinePerSelector:
    enabled: true

  SpaceAfterComma:
    enabled: true

  SpaceAfterPropertyColon:
    enabled: true
    style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'

  SpaceAfterPropertyName:
    enabled: true

  SpaceBeforeBrace:
    enabled: true
    style: space # or 'new_line'
    allow_single_line_padding: true

  SpaceBetweenParens:
    enabled: true
    spaces: 0

  StringQuotes:
    enabled: true
    style: single_quotes

  TrailingSemicolon:
    enabled: true

  TrailingZero:
    enabled: false

  UnnecessaryMantissa:
    enabled: true

  UnnecessaryParentReference:
    enabled: true

  UrlFormat:
    enabled: true

  UrlQuotes:
    enabled: true

  VariableForProperty:
    enabled: false
    properties: []

  VendorPrefix:
    enabled: true
    identifier_list: base
    additional_identifiers: []
    excluded_identifiers: []

  ZeroUnit:
    enabled: true

application.scss

@import 'vendor/normalize';

@import 'config/variables';
@import 'config/base';

@import 'mixins/media';

// @import 'components/...';

base.scss

html {
  box-sizing: border-box;
  font-size: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  // font-family: $primary-font;
  font-size: 1rem;
  line-height: 1.6;
  color: $text-color;
  letter-spacing: .01em;
  // background-color: $background-color;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

frontend-init

#!/usr/bin/env bash

set -e

red() {
  echo -e "\033[31m $1\033[0m"
}

green() {
  echo -e "\033[0;32m$1\033[0m"
}

white() {
  echo -e "\033[0;37m$1\033[0m"
}


if [[ -z "$1" ]]; then
  red "Usage: front-init APP_PATH."
  exit 1
else
  app_path="$1"
fi

echo "Creating the front-end structure..."

# Create all the structure directories.
for dir in \
  stylesheets \
  javascripts \
  images \
  bin \
  scss \
  scss/config \
  scss/components \
  scss/vendor \
  scss/mixins
do
  green "Creating $app_path/$dir"
  mkdir -p "$app_path/$dir"
done

green "Cloning files from https://gist.github.com/andrielfn/4c54e1b527768298e1ec0e20a9a95314"
git clone --quiet git@gist.github.com:4c54e1b527768298e1ec0e20a9a95314.git "$app_path/tmp"

declare -A files
files=(
    [".scss-lint.yml"]=""
    ["index.html"]=""
    ["scss-watch"]="bin"
    ["server"]="bin"
    ["application.scss"]="scss"
    ["base.scss"]="scss/config"
    ["variables.scss"]="scss/config"
    ["media.scss"]="scss/mixins"
)

for i in "${!files[@]}"
do
    file=$i
    dir=${files[$i]}
    green "Placing $file into $app_path/$dir"
    mv "$app_path/tmp/$file" "$app_path/$dir"
done

rm -rf "$app_path/tmp"

chmod -R +x "$app_path/bin"

curl -s -o "$app_path/scss/vendor/normalize.scss" https://raw.githubusercontent.com/necolas/normalize.css/master/normalize.css

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <meta name="description" content="DESCRIPTION"/>
    <meta name="keywords" content="KEYWORDS"/>

    <meta http-equiv="cache-control" content="no-cache"/>

    <!-- ADD OG TAGS -->

    <title>TITLE</title>

    <link rel="stylesheet" href="stylesheets/application.css">
  </head>
  <body>
    <h1>Front-end structure by @andrielfn</h1>
  </body>
</html>

media.scss

@mixin media($breakpoint) {
  $raw-query: map-get($breakpoints, $breakpoint);

  @if $raw-query {
    $query: if(
      type-of($raw-query) == 'string',
      unquote($raw-query),
      inspect($raw-query)
    );

    @media #{$query} {
      @content;
    }
  }
}

scss-watch

#!/bin/bash

scss --watch scss/application.scss:stylesheets/application.css

server

#!/bin/bash

function server() {
  local port="${1:-8000}"
  python -m SimpleHTTPServer "$port"
}

server

variables.scss

// Colors
$text-color: #333;

// Breakpoints
$breakpoints: (
  'tablet': (min-width: 768px),
  'desktop': (min-width: 960px)
) !default;