@extends("layouts.docs") @section("content")

Thank you for purchasing our template

Laapp is a Bootstrap 4.x App Landing Page built for Laravel 7, it's ready to showcase your SaaS, Startup and Software solution. The download includes the complete source and configuration files to help you get started from the very beginning.

If you have any questions that are beyond the scope of this help file, please feel free to write direct to support@5studios.net, please include your purchase code in order for us to verify you. Thank you so much !!!

Here are some other templates you will surely like.

Prerequisites

This version is for Laravel 7, your system needs to meet some prerequisites before you can work with it. If you don't already have an Apache local development environment with PHP, here are some useful resources for you:
  1. Mac installing MAMP
  2. Windows Install XAMPP Server
  3. Linux setting a LAMP Server
And of course you will need Laravel, we recommend you to follow the official documentation here.

Installation

There is actually no need for any fashion installation process, once you have your environment ready for PHP development then you're good to go.

However, you need to install all the dependencies the project has, please open a terminal console on the root of your project and run:

Important!

As for Laravel 7, we're working with Laravel Mix to buid all of the frontend stuffs. So, getting familiar with it could improve your development process

Code

Starter Layout structure

This template uses a main layout structure which contains pretty much of what you need to get up and ready in minutes. The main layout structure looks like this:

{!!' 
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield("title", config("app.name").config("app.desc"))</title>
    <meta name="description" content="">
    <meta name="author" content="@@yield("meta_author", "5studios.net")">
    @@yield("meta")

    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,600,700,900" rel="stylesheet">
    <link rel="stylesheet" href="{{ mix("/css/laapp.css") }}">
</head>
<body>
@@include("includes.nav")

<main>
    @@yield ("content");
</main>

@@yield("footer")

<script src="{{ mix("/js/manifest.js") }}"></script>
<script src="{{ mix("/js/vendor.js") }}"></script>
<script src="{{ mix("/js/app.js") }}"></script>

</body>
</html>
' !!}

Note we're including our frontend files such as css and javascript using the mix function, this is because of versioning, in order to automatically append a unique hash to the filenames of compiled files.

Compiling SCSS

This template uses SCSS for stylesheets. For more information about SCSS, visit http://sass-lang.com/guide.

The template's SCSS files are located in the /SASS directory under resources.

We need to compile SCSS files to CSS to make them usable. All compiled files are located in the /css folder.

All SCSS files are separated by component types for easy customization. There is a main file for the theme laapp.scss file which has references to all .scss files that compose the theme. Those files use Bootstrap variables and mixins in order to compile to CSS.

You can modify those files to include additional style or remove any unwanted reference, one use case could be to leave the variation of a section you like and remove references to the others.

Important!

Do not remove references to Bootstrap and FontAwesome components as it will not compile.

// Overriding Bootstrap
@import "themes/living-coral/variables/override";
@import "laapp/bootstrap";

// Import third party libraries. Do not remove these references.
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/brands';

@import "~angled-edges/angled-edges";
@import "~pe7-icon/dist/scss/pe-icon-7-stroke";

// Import theme variables here,
@import "laapp/reset";
@import "themes/living-coral/variables";

// Template Styles
@import "laapp/__variables";
@import "laapp/__core";
@import "laapp/__pages";

// Override some core stuff
@import "laapp/custom";

// Theme you want to use
@import "themes/living-coral";

Please pay special attention to the directory structure, we've included two main folders: laapp and themes. The former is intended to have all core and particular pages/sections styles. The idea is to keep the components, utilities, sections and pages ease to customize and ease to remove or add particular elements you want.

The SASS structure may seem overworked at the beginning, but once you get into it, it becomes right straightforward to customize.

The themes directory is used to hold all components and variables for use with a particular theme, it should define the palette for the theme.

Bootstrap reference

Note Bootstrap styles are included withing your main style file, this will help us compile Bootstrap itself to customize any of the aspects of the framework

All Bootstrap defaults overrides should be located inside themes/[your-theme]/variables/_override.scss to keep a standard behavoir.

JavaScript

This template uses several JS files. Those files are loaded at the bottom of the page to increase the site speed and rendering.

We've extracted some of the javascript files used:

  • jquery.js - Javascript framework library. Used for almost every javascript code.
  • bootstrap.js - Bootstrap framework functions.
  • popper.js - Bootstrap dependency to work with tooltips.

Credits

Please refer to Credits section to see the complete list of js files.

Besides those, we have created multiple files to give the template some uniqueness, some other are for working with the plugins we've included with the template. All of those are referenced from the app.js file
Compiling Assets

As stated earlier we use mix to work with frontend stuffs, please go through it's docs to fully understand how it works, for the sake of the template you only need to run once command:

  • npm run dev

After the process ends you should end-up with all the files generated (css, js, fonts) inside public folder

Important

Please make sure you have node.js installed before running those commands. You can check your node version by running node --version from the terminal.

MailChimp Integration

We have plans to include in the short term OOTB functionality to work with MailChimp API 3.0 to connect to the service, our implementation will only include Adding a member to a list.

Credits

The following resources were used to create this template. We are much obligated to their developers.

Scripts

CSS

Images

Any Images or logos used in previews are not included in this item or final purchase and you need to contact authors to get permission in case you want to use them in your commercial or non-commercial projects.

For some of them we are allowed to make reference, in case you wanted to use them in your design

@endsection