Starter Lp

screenshot of Starter Lp
bootstrap
scss

Template para scaffolding de `Landing Pages` (sem uso de Laravel)

Overview

This document is a guide for a initial project setup for a Landing Page without using Laravel. It provides instructions on how to enable BrowserSync, customize the environment.js file, use critical-path.js and post-prod.js scripts, and deploy the project using Docker.

Features

  • Environment.js: Centralizes project information and allows for simpler HTML coding process. Can customize SEO page, domain, directory name, existing HTML pages, and critical-css.
  • Critical-path.js: Extracts CSS from critical-css files and adds it to the head of existing HTML pages for improved site performance.
  • Post-prod.js: Modifies PostScripts data in environment.js and saves it to a new file in the public folder.

Docker

  1. In the Dockerfile, replace the string "Meu-App-Docker" with the corresponding project name.
  2. In the Deploy.yml file, replace the strings "meuappdocker" with the project name, excluding special characters and uppercase letters.
  3. To run the project in watch mode, start the docker-compose file. Open the docker-compose.yml and find the line container_name: {NAME_PROJECT}. Replace {NAME_PROJECT} with the desired container name.
  4. In the line ports: - "12345:80", choose the preferred port for the application execution. Replace 12345 with the desired port number. Do not modify port 80, as it is the default port for the Docker container.

Summary

This document provides instructions for setting up an initial project for a Landing Page without using Laravel. It covers enabling BrowserSync, customizing the environment.js file, using critical-path.js and post-prod.js scripts, and deploying the project using Docker.

bootstrap
Bootstrap

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

template
Templates & Themes

A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.