in

Studio – Minimal Portfolio Template

minimal portfolio template

Studio Minimal Portfolio Template is a free template built on Bootstrap 4 framework. Studio template is fully customizable built on gulp,panini,scss that enable you to configure your website as per your needs. This is most flexible bootstrap template and it is completely free to use for private and commercial websites. It’s 100% responsive and device friendly. This template is also SEO friendly which will help you you attain the highest rankings on Google and other search engines.

Stand out with this fresh minimal template whatever your purpose may be- portfolio,photography template free, architecture, interior design, CV/resume, creative agency, model, travel/tourism…you name it!

Template Features

  • Easy To Customize (gulp,panini,scss)
  • Masonry Layouts
  • Responsive Design
  • Bootstrap 4
  • Clean design

Note

The dist folder is folder of your site.

Changes should be commited to src/ files only.

How to use

The template is built with Sass and Gulp build system with these features:

  • Handlebars HTML templates with Panini– Panini is a super simple flat file generator for use with Gulp. It compiles a series of HTML pages using a common layout. These pages can also include HTML partials, external Handlebars helpers, or external data as JSON.
  • Sass compilation, prefixing with Autoprefixer, and JavaScript concatenation
  • Built-in BrowserSync server – Will automatically reload your page when files are changed. It also live-injects CSS changes when you save a Sass file. This task runs continuously. Defaults to localhost.
  • For production builds – CSS compression, JavaScript compression, Image compression and more..

Requirements

To use this template, your computer needs:

  • Node.js is used to run the build processes. https://nodejs.org/en/download/
  • Test: run node -v in the terminal
  • Npm (Node comes with npm installed so you should have a version of npm.) Used to manage development dependencies.
  • Test: run npm -v in the terminal
  • Gulp – task runner npm install -g gulp
  • Test: run gulp -v in the terminal

Installing:

  • Download template.Sorry,but email verification needed.
  • Navigate into the folder: cd studio-template
  • Install all node packages: npm install
  • Run gulp dev
  • Your site is now viewable at this URL: http://localhost:3000
  • To create compressed, production-ready assets run gulp prod. This will delete everything in the dist folder and recreate all of your complied files. Never make updates directly into the dist folder as these files get overridden each time. Note: The dist folder is not kept in source control.

Folder Structure:

  • dist/ – compiled distribution files
  • node_modules – front-end dependencies
  • src/ – contains all of your core, working files—static assets, pages, templates, etc
  • src/assets/ – scss files, JS files, images, and fonts are here
  • src/data/ – external data
  • src/layouts/ – HTML layouts templates
  • src/pages/ – site pages
  • src/partials/ – handlebars partials files.
  • gulpfile.js – all task definitions
  • package.json – handles the front-end dependencies
  • .htmllintrc – handles the HTML lint rules
  • .sass-lint.yml – handles the SCSS lint rules
  • reports – txt generated file for accessibility issues

All images come from the following authors and sites:

  • Unsplush

Demo

free html bootstrap template

Trendy -Free Bootstrap template

free minimal portfolio template

Art Studio – Free minimal portfolio template