Setup


This is a summary and explanation of how I usually start a new project. Which tools do I use, where to download them and how does my general setup look like.

§Sublime Text

Packages

These are the packages I find the most useful. Package Control makes them easy to install and improves your workflow by a lot.

Package Control

Emmet

Sidebar Enhancements

Bracket Highlighter

Alignment

Git

SCSS

AutoFileName

Advanced New File

Color Picker

Shortcuts

Here are some very useful shortcuts I use all the time. I'm working on Windows, but for Mac they should be about the same when using Cmd instead of Ctrl.

Ctrl + Shift + DCopy and paste the current line.
Ctrl + Shift + GWrap the current selection with an HTML-Tag.
Alt + .Close the preceding open tag.
Ctrl + K, Ctrl + BShow/hide the sidebar.
Ctrl + DFind and expand the current selection.
Ctrl + Shift + VPaste and indent.
Ctrl + Shift + Up/DownMove the current line/selection up/down.
Ctrl + GJump to a specific line number.
Ctrl + PGo to a specific file.
Ctrl + LSelect line.
Ctrl + Shift + AExpand selection to brackets.

Settings

These are some of the user settings I added under Preferences > Settings-User.

"bold_folder_labels": trueThe folder labels in your sidebar are displayed in bold, making them more distinguishable from the files.
"highlight_modified_​tabs": trueHighlight tabs that have not been saved yet.
"scroll_past_end": trueEnables you to scroll past the last line of your file.
"match_brackets": trueMatch your open bracket directly with a closing one while typing.
"tab_size": 4This underlines your indentations a bit more.
"trim_trailing_white_​space_on_save": trueYour whitespaces will be trimmed on save.
"folder_exclude_patterns": [".sass-cache", "node_modules", ".git"]This will ignore some folders and files when pressing Ctrl+P to search for a file.

Theme

Here's the theme I use. It's a flat theme that comes with a nice color scheme as well:

Material Theme

§Boilerplate

The boilerplate I use is based on the HTML5 boilerplate. I modified it and added my personal folder structure to suit my needs. It is available on Github.

Basic Boilerplate

Structure

Working with Gulp and trying to use a meaningful CSS naming and structuring methodology I came up with the following folder structure:

Folder Structure

The src folder is for development only, where you can find all of the SCSS code, uncompressed JavaScript and uncompressed images or placeholders used for development.

The dist folder is the one you upload on a server when deploying your project. Here are all minified and compressed files and images, automatically created by Gulp.

Here you can read more about CSS naming methodologies:

SMACCS

BEM

Gulpfile

This is how my gulpfile.js looks like.

gulpfile.js

It handles the SCSS preprocessing, hints mistakes in my JavaScript code, compresses all images, minifies the HTML, CSS and JavaScript and puts the output in the dist/, dist/css and dist/js folders. The only thing I have to do when I start coding is to navigate to the project folder and type gulp or gulp watch in the command line.

I switched to Cmder as an alternative to the Windows Console, adding some really neat features like tabs and colors. It can be found here:

Cmder

§Gulp

These are the steps for installing Gulp when using my boilerplate:

npm install -g gulp-cliInstall the gulp command line interface globally on your pc.
npm install --save-dev gulpInstall the gulp dev dependendy in your project.
npm installInstall the dev dependencies specified in the package.json file.

For any further information go to the Gulp Github repository:

Gulp Repo

Top