Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tomchen/starter-web-app

Starter / boilerplate / scaffolding web app with decent dev tools and a cool demo page (en & fr) 🚀🌐
https://github.com/tomchen/starter-web-app

boilerplate css demo ecmascript6 gulp html javascript livereload sass starter

Last synced: 26 days ago
JSON representation

Starter / boilerplate / scaffolding web app with decent dev tools and a cool demo page (en & fr) 🚀🌐

Host: GitHub
URL: https://github.com/tomchen/starter-web-app
Owner: tomchen
License: mit
Created: 2020-06-15T17:44:39.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2023-03-06T08:21:33.000Z (over 1 year ago)
Last Synced: 2024-09-28T00:52:21.086Z (about 2 months ago)
Topics: boilerplate, css, demo, ecmascript6, gulp, html, javascript, livereload, sass, starter
Language: HTML
Homepage: https://starter-web-app.tomchen.org
Size: 17.6 MB
Stars: 0
Watchers: 1
Forks: 1
Open Issues: 8
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Starter Web App

[![MIT License](https://img.shields.io/github/license/tomchen/starter-web-app)](https://github.com/tomchen/starter-web-app/blob/master/LICENSE "MIT License")

**Starter Web App** is a boilerplate project to start a simple static web site or web app with. Based on [Yeoman's generator-webapp](https://github.com/yeoman/generator-webapp), Starter Web App comes with:

* ECMAScript 6 transpilation with Babel
* Sass compilation
* CSS autoprefixing
* Live-reloading preview + watch mode with BrowserSync
* Task runner gulp
* JavaScript beautification (Prettier) and linting (ESLint)
* CSS and JavaScript minification (production mode)
* Image optimization
* Image to favicon convertion and code injection
* Source maps
* Pre-set .editorconfig, .gitattributes, .gitignore configuration files
* Script to publish files to GitHub Pages (deploy `dist` folder to `gh-pages` branch. If you don't need this feature, you may delete the last block `!dist` in .gitignore)
* etc.

[The Starter Web App default page](https://starter-web-app.tomchen.org/) is a demo showing some basic and/or popular techniques and effects in front-end web development written in vanilla JavaScript and Sass (CSS). The images used here are in the public domain or may be used for any purpose. Techniques used / features shown by this demo include:

* Basic HTML5 tags, table, list
* Responsive design
* Gallery with CSS Flexbox
* AJAX form (with a back-end PHP script available)
* Lots of CSS alpha transparency, text shadow and hover transition effect
* Carousel with CSS transformation
* Pop-up window (disappears after 3.5 seconds OR clicking)
* Effect based on cursor position
* Parallax scrolling
* Smooth scrolling
* "Fade-in" title with CSS animation
* SVG Progress Bar
* Web font icons
* Vanilla JavaScript and Sass: pure, native JavaScript and Sass (CSS) without jQuery, Bootstrap or other framework
* etc.

---

**Starter Web App** est un projet boilerplate pour démarrer un simple site web statique ou une application web. Basé sur [generator-webapp de Yeoman](https://github.com/yeoman/generator-webapp), Starter Web App est livré avec :

* ECMAScript 6 transpilation avec Babel
* Compilation de Sass
* Autoprefixing CSS
* Mode prévisualisation avec rechargement en direct en utilisant BrowserSync
* Task runner gulp
* Beautification (Prettier) et linting (ESLint) de JavaScript
* Minification de CSS et de JavaScript (mode production)
* Optimisation d'image
* Conversion d'image en favicon et injection de code
* Source maps
* Fichiers de configuration prédéfinis: .editorconfig, .gitattributes, .gitignore
* Script pour publier fichiers sur GitHub Pages (déployer le dossier `dist` vers la branche `gh-pages`. Si vous n'en avez pas besoin, vous pouvez supprimer le dernier bloc `!dist` dans .gitignore)
* etc.

[La page par défaut de Starter Web App](https://starter-web-app.tomchen.org/) est une démo montrant quelques techniques et effets basiques et/ou populaires en développement web front-end écrit en vanilla JavaScript et Sass (CSS). Les images utilisées ici sont dans le domaine public ou peuvent être utilisées à toutes fins. Techniques utilisées / fonctionnalités effectuées par cette démo incluent:

* Balises HTML5 de base, table, liste
* Responsive design
* Galerie avec CSS Flexbox
* Formulaire AJAX (avec un script PHP back-end disponible)
* Beaucoup de transparence alpha CSS, de text shadow et d’effet de transition au survol de la souris
* Carrousel avec CSS transformation
* Fenêtre pop-up (à disparaît après 3,5 secondes OU un clic)
* Effet basé sur la position du curseur
* Défilement parallaxe (Parallax scrolling)
* Défilement lisse (smooth scrolling)
* Titre "fade-in" avec CSS animation
* Barre de progression en SVG
* Icônes avec web font
* Vanilla JavaScript et Sass : JavaScript et Sass (CSS) pur, natif sans jQuery, Bootstrap ou autre framework
* etc.