DEV Community

Zoltán Szőgyényi for Themesberg

Posted on • Originally published at themesberg.com

Swipe: a free one page Bootstrap 5 template for mobile applications

Swipe - One Page Bootstrap 5 Template

Swipe is a free mobile application One Page Bootstrap 5 Template featuring sections such as about, testimonials, frequently asked questions, and two app download CTA sections.

Using beautifully vibrant colors and illustrations you can create a stunning presentational page for your mobile app.

Sass source files

Although a very simple template, Swipe is powered by Sass source files that can make changing colors, sizing and fonts so much easier. The variables are an extension of the core values of Bootstrap 5.

Gulp & BrowserSync workflow

Swipe also comes with advanced Gulp commands such as compiling the Sass source files, generating both a minified and un-minified version of your project, and BrowserSync to make development a seamless process.

You can check out the official readme file to learn more about getting started with Swipe.

Built with Bootstrap 5 & Vanilla JS

Swipe is built using the latest version of Bootstrap 5 meaning that jQuery is not a required dependency neither for Bootstrap nor Swipe. We used good old vanilla Javascript for components such as the navigation bar, tooltips, and the smooth scrolling feature.

Built using Pixel Pro UI Kit

Swipe was built using our most advanced UI kit called Pixel Pro. This is just an example of how powerful the UI kit can be when building websites from different industries and categories.

Helpful links

Quick start

  1. Create an account and download from or clone this repository Themesberg
  2. Make sure you have Node locally installed.
  3. Download Gulp Command Line Interface to be able to use gulp in your Terminal.
npm install gulp-cli -g
Enter fullscreen mode Exit fullscreen mode
  1. After installing Gulp, run npm install in the main rocket/ folder to download all the project dependencies. You'll find them in the node_modules/ folder.
npm install
Enter fullscreen mode Exit fullscreen mode
  1. Run gulp in the swipe/ folder to serve the project files using BrowserSync. Running gulp will compile the theme and open /index.html in your main browser.
gulp
Enter fullscreen mode Exit fullscreen mode

While the gulp command is running, files in the assets/scss/, assets/js/ and components/ folders will be monitored for changes. Files from the assets/scss/ folder will generate injected CSS.

Hit CTRL+C to terminate the gulp command. This will stop the local server from running.

Theme without Sass, Gulp or Npm

If you'd like to get a version of our theme without Sass, Gulp or Npm, we've got you covered. Run the following command:

gulp build:dev
Enter fullscreen mode Exit fullscreen mode

This will generate a folder html&css which will have unminified CSS, Html and Javascript.

Minified version

If you'd like to compile the code and get a minified version of the HTML and CSS just run the following Gulp command:

gulp build:dist
Enter fullscreen mode Exit fullscreen mode

This will generate a folder dist which will have minified CSS, Html and Javascript.

Top comments (2)

Collapse
 
sm0ke profile image
Sm0ke

Niceee

Collapse
 
zoltanszogyenyi profile image
Zoltán Szőgyényi

Thank you :)