pariskwsto / corporate_one-page-template

A professional, responsive one-page template for corporate websites

Corporate - One page template

A corporate one-page responsive template

• Live Demo: https://github.pariskwsto.com/corporate_one-page-template/
• GitHub Pages: https://pariskwsto.github.io/corporate_one-page-template/

Contents

• Getting Started
• Tasks
  • Build
  • Icons
  • Preview Dist
  • Scripts
  • Styles
  • Watch
  • See all available tasks
• Technologies Used
• Credits
• License
• Support

This is a mobile-first HTML template website that promotes businesses. The website is built using the BEM methodology for CSS and uses PostCSS for style processing. The JavaScript code follows the object-oriented programming and module pattern, is transpiled with Babel, and is bundled with Webpack. The build process is handled by Gulp and includes support for CSS prefixes such as Autoprefixer and other Gulp plugins. The template also includes lazy loading for images to improve performance.

Getting Started

Start by cloning this repository

# HTTPS
git clone https://github.com/pariskwsto/corporate_one-page-template.git

# cd into project root
cd corporate_one-page-template

then

# install node modules
npm install

# install gulp-cli globally (if you don't have it already)
npm install gulp-cli -g

Continue with the website development

# start the development server
gulp watch

or build and preview the website

# build the project
gulp build

# preview the built project
gulp previewDist

Tasks

Build

# build the project
gulp build

• It deletes the dist directory (if already exists)
• It creates a new copy of svg and png icons set
• It copies all directories and files from src to dist
• It optimizes the images
• It generate the stylesheets from the PostCSS of the css files
• It bundles the javascript files
• It minifies the css and js files

Icons

# create new svg and png icons sprite
gulp icons

• It creates a new copy of svg and png icons set

Preview Dist

# preview the built project
gulp previewDist

• It runs the BrowserSync static server to preview the built project

Scripts

# bundle the javascript files
gulp scripts

• It bundles the javascript files
• It transforms the javascript files from ES6+ to older version

Styles

# generate the stylesheets from the PostCSS of the css files
gulp styles

• It generates the stylesheets from the PostCSS of the css files
• It minifies the css files

Watch

# start the development server
gulp watch

• It runs the BrowserSync static server to preview the project
• It watches for changes to the html file and reloads the browser
• It compiles the PostCSS of the css files
• It watches for changes to the css files and injects them into the browser
• It bundles the js scripts and transforms them from ES6 to older version
• It watches for changes to the js files and reloads the browser

See all available tasks

gulp --tasks

Technologies Used

• HTML5
• CSS3
• Flexbox
• PostCSS
• Normalize.css
• BEM Methodology
• Mobile-first
• JavaScript
• jQuery
• Gulp
• BrowserSync
• Autoprefixer
• Lazy loading images
• Responsive images
• Modernizr
• Babel
• Webpack
• LazySizes
• Picturefill
• Waypoints

Credits

This template was designed and built by pariskwsto.

License

This template is licensed under the MIT License.

Support

For support and questions, please open an issue in the repository or contact the designer directly.