{"id":24461311,"url":"https://github.com/frontend-layers/html-base","last_synced_at":"2025-10-14T18:04:56.223Z","repository":{"id":57267435,"uuid":"244711889","full_name":"Frontend-Layers/html-base","owner":"Frontend-Layers","description":"Frontend toolset for comfortable handcoding","archived":false,"fork":false,"pushed_at":"2025-01-28T21:50:24.000Z","size":10154,"stargazers_count":3,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-14T18:04:49.967Z","etag":null,"topics":["autoprefixer","babel","boilerplate","bootstrap","css","gulp","html","javascript","postcss","rollup","sass","scss","starter-template"],"latest_commit_sha":null,"homepage":"https://html-base-intro.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Frontend-Layers.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-03-03T18:31:27.000Z","updated_at":"2025-01-28T21:50:28.000Z","dependencies_parsed_at":"2024-11-15T21:35:42.114Z","dependency_job_id":"4759ce67-5c48-4f21-9412-475f77b2c280","html_url":"https://github.com/Frontend-Layers/html-base","commit_stats":{"total_commits":114,"total_committers":2,"mean_commits":57.0,"dds":0.00877192982456143,"last_synced_commit":"aa2f697f5364068ca90cc8c6db8196a6f764c5af"},"previous_names":["andreymatin/html-initial-bundle","andreymatin/html-base"],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/Frontend-Layers/html-base","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontend-Layers%2Fhtml-base","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontend-Layers%2Fhtml-base/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontend-Layers%2Fhtml-base/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontend-Layers%2Fhtml-base/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Frontend-Layers","download_url":"https://codeload.github.com/Frontend-Layers/html-base/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontend-Layers%2Fhtml-base/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279020319,"owners_count":26086864,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autoprefixer","babel","boilerplate","bootstrap","css","gulp","html","javascript","postcss","rollup","sass","scss","starter-template"],"created_at":"2025-01-21T04:18:56.365Z","updated_at":"2025-10-14T18:04:56.207Z","avatar_url":"https://github.com/Frontend-Layers.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HTML Base\n\n[![License:MIT](https://img.shields.io/badge/License-MIT-lightgrey.svg)](https://github.com/frontend-layers/html-base/LICENSE)\n[![npm](https://img.shields.io/npm/v/html-base.svg)](https://www.npmjs.com/package/html-base)\n\n_Professional frontend toolset_\n\n## Why\n\n- Fullstack oriented infrastructure\n- Templates, themes prototyping\n- Integration with any CMS and frameworks\n- Modeling JavaScript applications\n- Routine web development tasks automation\n\n## Features\n\n- Advanced CSS Reset [scss-reset](https://github.com/frontend-layers/scss-reset)\n- Basic SCSS Mixins Collection [scss-mixins](https://github.com/frontend-layers/scss-mixins)\n- (Not so) Old browsers support\n- Predefined VSC workspace\n- Initial JavaScript modules and SCSS files\n- Automated test tasks\n- A lot of useful open source included\n\n### Structure\n\n```\nhtml-base/\n├── .gulp/              # Gulp tasks\n├── .vscode             # VSC custom settings\n├── src/                # Source files\n│   ├── favicons/       # Icons\n│   ├── fonts/          # Custom Fonts\n│   ├── javascript/     # Scripts and JS Resources\n│   ├── images/         # Images\n│   ├── images/sprite/  # SVG sprite\n│   ├── layouts         # HTML parts\n│   ├── scss/           # SCSS files\n│   └── video/          # For video files\n├── dest/               # Beautified Development build output\n├── build/              # Compressed Production build output\n├── test/               # Test scripts\n└── json/               # JSON files\n```\n\n## Output\n\n- Clean, tested, beautified, optimized and/or compressed HTML/CSS/JS\n\n## Usage\n\n### By Git Command\n\nClone the repository and install dependencies manually:\n\n```shell\ngit clone https://github.com/frontend-layers/html-base.git project-name\ncd project-name\nnpm install\n```\n\n### By Shell Command\n\n```shell\nnpx get-html-base project-name\ncd project-name\nnpm i\n```\n\n### Or [Download html-base](https://github.com/frontend-layers/html-base/archive/refs/heads/master.zip) Zip Package for Manual Installation\n\n* https://github.com/frontend-layers/html-base/archive/refs/heads/master.zip\n\n\n### JS Apps Mode Install\n\nPlease add ``` -js ``` key\n\n```shell\nnpx get-html-base project-name -js\ncd project-name\nnpm i\n```\n\n## Install via Package Managers\n\n### Using npm\n\n```shell\nnpm i html-base\n```\n### Using Yarn\n\n```shell\nyarn add html-base\n```\n### Using pnpm\n\n```shell\npnpm i html-base\n```\n\nAfter installation, copy the ```html-base``` folder from ```node_modules``` and rename it according to your project name.\n\nThen, update the ```package.json``` and related files based on your new project title, description, owner, etc.\n\nFinally, install all dependencies with:\n\n### Using npm\n\n```shell\nnpm i\n```\n### Using Yarn\n\n```shell\nyarn add\n```\n\n### Using pnpm\n\n```shell\npnpm i\n```\n\n## Usage\n\nAfter installation, launch the project using one of the following commands:\n\n```shell\ngulp\n```\n\nor\n\n```shell\nnpm start\n```\n\nTo update packages, use the following commands:\n\n```shell\nnpm updates\nnpm i\n```\n\n## Under the hood\n\n\u003cimg alt=\"Gulp\" src=\"https://img.shields.io/badge/-Gulp-CF4647?logo=gulp\u0026logoColor=white\u0026style=for-the-badge\" /\u003e \u003cimg alt=\"JavaScript\" src=\"https://img.shields.io/badge/JavaScript%20-%23F7DF1E.svg?style=for-the-badge\u0026logo=javascript\u0026logoColor=black\" /\u003e \u003cimg alt=\"HTML5\" src=\"https://img.shields.io/badge/-HTML5-E34F26?style=for-the-badge\u0026logo=html5\u0026logoColor=white\" /\u003e \u003cimg alt=\"CSS\" src=\"https://img.shields.io/badge/CSS%20-%231572B6.svg?style=for-the-badge\u0026logo=css3\u0026logoColor=white\" /\u003e \u003cimg alt=\"Sass\" src=\"https://img.shields.io/badge/-Sass-CC6699?style=for-the-badge\u0026logo=sass\u0026logoColor=white\" /\u003e \u003cimg alt=\"rollup.js\" src=\"https://img.shields.io/badge/-Rollup-EC4A3F?logo=rollup.js\u0026logoColor=white\u0026style=for-the-badge\" /\u003e \u003cimg alt=\"babel\" src=\"https://img.shields.io/badge/-babel-F9DC3E?logo=babel\u0026logoColor=white\u0026style=for-the-badge\" /\u003e \u003cimg alt=\"PostCSS\" src=\"https://img.shields.io/badge/-PostCSS-DD3A0A?logo=PostCSS\u0026logoColor=white\u0026style=for-the-badge\" /\u003e \u003cimg alt=\"Autoprefixer\" src=\"https://img.shields.io/badge/-autoprefixer-DD3735?logo=autoprefixer\u0026logoColor=white\u0026style=for-the-badge\" /\u003e \u003cimg alt=\"eslint\" src=\"https://img.shields.io/badge/-eslint-4B32C3?logo=eslint\u0026logoColor=white\u0026style=for-the-badge\" /\u003e \u003cimg alt=\"stylelint\" src=\"https://img.shields.io/badge/-stylelint-263238?logo=stylelint\u0026logoColor=white\u0026style=for-the-badge\" /\u003e \u003cimg alt=\"nunjucks\" src=\"https://img.shields.io/badge/-nunjucks-1C4913?logo=stylelint\u0026logoColor=white\u0026style=for-the-badge\" /\u003e \u003cimg alt=\"bootstrap\" src=\"https://img.shields.io/badge/-bootstrap-7952B3?logo=bootstrap\u0026logoColor=white\u0026style=for-the-badge\" /\u003e \u003cimg alt=\"npm\" src=\"https://img.shields.io/badge/-npm-CB3837?logo=npm\u0026logoColor=white\u0026style=for-the-badge\" /\u003e \u003cimg alt=\"nodedotjs\" src=\"https://img.shields.io/badge/-nodejs-339933?logo=nodedotjs\u0026logoColor=white\u0026style=for-the-badge\" /\u003e\n\n## Related Tools\n\n- Links with related tools [frontend-toolchain](https://github.com/frontend-layers/frontend-toolchain)\n\n## JavaScript plugins\n\n- Babel\n- Rollup\n\n## JavaScript utils\n\n- DomReady\n- NoJs\n\n## Tests\n\n- Deep HTML5 Validation\n- On fly HTML5 Validation\n- CSS3 Validation\n- Google Mobile-friendly test\n- Google PageInsight Performance test\n\n## Images\n\n- WEBP Convertor\n- SVG (SVGOmg compression)\n\n## Automation\n\nDevelopment bundle for fast and robust web development based on Gulp and Rollup\n\n### Files\n\n- .gulp/*\n- ./gulpfile.js\n- ./babel.config.js\n- ./package.json\n\n### Styles\n\n- autoprefixer\n- gulp-postcss\n- gulp-sass\n- sass\n\n### Server\n\n- gulp-connect\n- gulp-open\n- localtunnel\n\n### Notification\n\n- gulp-plumber\n- fancy-log\n\n### Source Maps\n\n- gulp-sourcemaps\n\n### JavaScript development\n\n- rollup\n- rollup-plugin-babel\n\n### Tests\n\n- gulp-w3c-html-validator\n- [html-test](https://www.npmjs.com/package/html-test)\n- [mobile-friendly-test-npm](https://www.npmjs.com/package/mobile-friendly-test-npm)\n\n## Editor\n\n- .vscode/settings.json\n- .editorconfig\n- .eslintrc.json\n- .prettierrc\n- .eslintrc.json\n\n### VSC Tweaks\n\n- liveSassCompile\n- Emmet \"commentAfter\"\n- Panel at the \"right\" (Terminal, hints etc.)\n- ESLint JS tweaks\n- Search exclusions\n\n## Tunneling\n\n.gulp/server.js\n\n```javascript\nconst subdomain = ''\n```\n\n## HTML Files\n\n- index.html - templates list\n- home.html - main landing page\n- product.html - product page\n- article.html - article page\n- test-design.html - design system\n- test-sprite.html - svg sprite test\n\n## SVG Sprite generation\n\n- copy svg files for sprite into ```'./images/sprite/'``` folder\n- launch in the terminal ```gulp sprite```\n- generated svg sprite is there - ```./images/sprite.svg```\n\n## Docker integration\n\nSteps to Set Up Docker Container and Run them locally\n\n### Log in to Docker Hub\n\n```shell\ndocker login\n```\n\n### Pull the Docker Image\n\nDownload the latest version of the ```html-base``` Docker image from Docker Hub.\n\n```shell\ndocker pull andreymatin/html-base:latest\n```\n\n### Copy Files from the Docker Container\n\nExtract the application files from the Docker container to your local machine. Replace html-base with the name of the running container if it's not html-base.\n\n```shell\ndocker cp html-base:/app ./\n```\n\n### Start the Application\n\nUse the make command to start the application with the up target defined in the Makefile. Ensure that the Makefile is in the same directory.\n\n```shell\nmake up\n```\n\n## Docker-Related Files\n\n* Makefile\n* Dockerfile\n* docker-compose.yml\n\n### Makefile\n\nThe Makefile provides an easy way to manage and automate Docker commands. It includes tasks such as:\n\n* Starting and stopping the Docker containers.\n* Automatically opening the application in a browser.\n* Following container logs.\n\n#### Key targets include:\n\n* ```up```: Builds and starts the application containers.\n* ```down```: Stops and removes the containers.\n* ```log```: Displays the application logs in real time.\n\n#### Makefile Windows Installation\n\nIf you have Chocolatey installed on your Windows system,\nyou can install make directly by running the following command in an elevated PowerShell (Administrator) terminal:\n\n```shell\nchoco install make\n```\n\n\n### Dockerfile\n\nThe ```Dockerfile``` is used to define the application’s image. It specifies:\n\n* Base image: The Node.js version (e.g., node:22).\n* Working directory: Where the application is stored in the container (e.g., /app).\n* Exposed ports: The ports used by the application, such as 4000.\n* Dependencies: Installs gulp globally and other npm dependencies.\n* Application entry point: Defines the command to start the\n* application (npm start).\n\n\n### docker-compose.yml\n\nThe docker-compose.yml file orchestrates multiple services and simplifies container management. It defines:\n\n* Services: Specifies the application (app) and its dependencies.\n* Image: Uses a predefined image or builds it locally (andreymatin/html-base:latest).\n* Container name: Assigns a recognizable name to the container (html-base).\n* Ports: Maps container ports to the host machine (e.g., 4000:4000).\n* Environment variables: Configures settings like NODE_ENV and PORT.\n* Volumes: Synchronizes files between the host and container for development.\n\n## Contributing\n\nFor issues, bugs or improvements please open an [issue](https://github.com/frontend-layers/html-base/issues/new)\n\n## Preferred Code concepts\n\n- HTML - https://google.github.io/styleguide/htmlcssguide.html\n- CSS - BEM - https://github.com/airbnb/css\n- SCSS - https://sass-guidelin.es/\n- JavaScript - https://standardjs.com/\n\n## Logscreen\n\n\u003cimg src=https://raw.githubusercontent.com/frontend-layers/html-base/master/screenshot.png alt=screenshot width=640\u003e\n\n## Inspiration\n\n- Google Web Fundamentals (https://developers.google.com/web/fundamentals/performance/why-performance-matters)\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontend-layers%2Fhtml-base","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrontend-layers%2Fhtml-base","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontend-layers%2Fhtml-base/lists"}