Light weight, front-end boilerplate. Developed this project for personal use but you can use it if you find it useful.

What is Slim Fish?

Slim Fish is a light weight front-end boilerplate where it provides you a basic setup for getting started with your front-end project. Spend less time setting up gulp, dir structure, basic files and write some real code instead!

Too many boilerplates, why Slim Fish?

I have came across many boilerplates but some are either bloated with unnecessary third party libraries or some are using common mixins, classes which I don't find useful.

Slim Fish is for you if you like to get started with minimal code. Again, front-end devs have their own preference setting up a dir structure and so on, but I've developed this keeping best practices in mind.

Setup

Nothing complicated to install this, follow the steps mentioned below and you are good to go in few seconds!

git-clone

git@github.com:i-break-codes/slim-fish.git

Change your directory to slim-fish folder and follow the steps below to compile assets.

Install Node Modules

npm install

Now you have the node modules, time to compile files, run gulp.

Compile Assets

gulp

List of included Gulp Modules

Libraries Included

  • jQuery 3.1.0 [JavaScript]
  • CSS Reset [CSS]

Directory Structure

  • /root
    • app
      • assets
        • fonts
        • images
        • scripts [after compiled]
          • lib
        • stylesheets [after compiled]
      • index.html
    • src
      • scripts
        • lib
          • jquery-3.1.0.js
        • App.js
      • stylesheets
        • components
          • _buttons.scss
          • _inputs.scss
          • _lists.scss
          • _tables.scss
        • helpers
          • variables
            • _colors.scss
            • _config.scss
            • _images.scss
            • _typography.scss
          • _all_helpers.scss
          • _functions.scss
          • _mixins.scss
          • _variables.scss
        • modules
          • _footer.scss
          • _header.scss
          • _nav.scss
          • _sidebar.scss
        • root
          • _base.scss
          • _grid.scss
          • _reset.scss
          • _typography.scss
        • vendor
        • _temp.scss
        • app.scss
    • gulpfile.js
    • package.json