Travel_fluid Template

Travel_fluid is a free, archived, one-page travel website template that uses Pug, Sass, and Grunt to turn editable source files into a static, responsive HTML site. Designed by cssauthor and coded by Maxim Orlov, this MIT-licensed template is hosted in the website-templates GitHub organization and includes a complete Grunt-based build system for local development and production output.

What is Travel_fluid Template?

Travel_fluid Template is a static website template for travel-related one-page sites. Its source lives in a dev/ folder containing Pug templates, Sass stylesheets, data configuration, fonts, and images; running the build tasks outputs a ready-to-publish site in a build/ folder with minified CSS, images, and HTML. The template works entirely on front-end technologies and needs no server-side runtime, making it suitable for any static host.

Key Features

• Fluid one-page layout — The design adapts to different screen widths, and the repository includes responsive test screenshots in the screenshots/ folder.
• Pug template engine — Pages and layouts are written as Pug files under dev/pug, organized into blocks, helpers, vendor, and layouts, with page templates for index.html and page.html.
• Sass preprocessing — Styles in dev/sass use a block-based structure plus helpers, vendor files, custom.sass, screen.sass, and noscript.sass for both regular and no-script experiences.
• Grunt task runner — The project includes Gruntfile.js with tasks for cleanup, dev, build, rebuild, server, and sprite, covering the entire compile-to-deploy workflow.
• BrowserSync live reload — The dev and server tasks start a static server, and the dev task watches source files and reloads the browser automatically on change.
• Production build output — The build task minifies images, stylesheets, and HTML into build/static/css, build/static/images, and build/static/fonts for deployment.
• Configurable data file — Site-wide settings live in dev/data/config.json and are accessible inside Pug templates as config.key-name properties, so content changes don't require touching markup.

Who is it for?

• Front-end developers who want a working Grunt + Pug + Sass setup can study the folder structure and task configurations as a reference for their own static projects.
• Travel bloggers and agencies need a free, responsive one-page site; they can edit the data file and Pug templates to replace demo content with their own destinations and contact details.
• Designers looking to reuse an existing cssauthor design can customize the block library and Sass variables rather than starting a travel landing page from zero.

What can you do with Travel_fluid Template?

• Travel agencies: publish a one-page promotional site with fluid responsive layout by editing config.json and running grunt build to generate minified assets.
• Freelance photographers: use the template as a static personal page for travel photography, swapping placeholder images and fonts with their own.
• Open-source learners: explore how Pug mixins, Sass blocks, and Grunt aliases combine in a real project; the repository includes an .editorconfig for consistent code style.

How does Travel_fluid Template work?

First, install Node.js and Grunt globally; optionally install Ruby and Ruby Sass for the Sass compilation. After running npm install, edit dev/data/config.json with your site settings, then run grunt dev to compile sources, start a BrowserSync server, and watch for changes. When ready to publish, run grunt build to minify everything into the build/ folder.

Note: this project is archived, so it is no longer actively maintained, but its source and documentation remain available under the MIT license.