{"id":13630916,"url":"https://github.com/Pixel2HTML/pixel2html-generator","last_synced_at":"2025-04-17T17:32:01.973Z","repository":{"id":43918099,"uuid":"45048380","full_name":"Pixel2HTML/pixel2html-generator","owner":"Pixel2HTML","description":"PSA: this repo has been moved into Pixel2HTML/Pixel2HTML --\u003e ","archived":true,"fork":false,"pushed_at":"2018-02-21T13:19:53.000Z","size":749,"stargazers_count":23,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-10T09:32:33.932Z","etag":null,"topics":["es6","webpack","yeoman"],"latest_commit_sha":null,"homepage":"https://github.com/Pixel2HTML/Pixel2HTML/tree/master/packages/generator-frontend","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/Pixel2HTML.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-27T14:56:51.000Z","updated_at":"2023-01-28T20:44:08.000Z","dependencies_parsed_at":"2022-09-13T03:02:14.608Z","dependency_job_id":null,"html_url":"https://github.com/Pixel2HTML/pixel2html-generator","commit_stats":null,"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pixel2HTML%2Fpixel2html-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pixel2HTML%2Fpixel2html-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pixel2HTML%2Fpixel2html-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pixel2HTML%2Fpixel2html-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Pixel2HTML","download_url":"https://codeload.github.com/Pixel2HTML/pixel2html-generator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249360038,"owners_count":21257160,"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","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":["es6","webpack","yeoman"],"created_at":"2024-08-01T22:02:03.110Z","updated_at":"2025-04-17T17:32:01.559Z","avatar_url":"https://github.com/Pixel2HTML.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# @pixel2html/generator-frontend\n\n[![Build Status](https://travis-ci.org/Pixel2HTML/pixel2html-generator.svg?branch=master)](https://travis-ci.org/Pixel2HTML/pixel2html-generator)\n\n\u003cimg src=\"https://cldup.com/2znve50RiO.svg\" alt=\"Cool demo\" /\u003e\n\nWe aim to generate a boilerplate code for projects when we know the specs. 💕\n\n## How to install\n\n#### Node\n\nYou will need `node` installed in your machine. In case you don't have it (you can check this typing `node --version` in your terminal) please visit [this link](https://nodejs.org/en/download/).\n\nWe also need to install **Yeoman**, and the **Pixel2HTML Generator**, so run this command in your terminal. The `-g` parameter is to install them globally so can use it in every project.\n```shell\n$ npm install -g yo @pixel2html/generator-frontend\n```\n\n## Running the generator\n\nTo generate the **Pixel2HTML Boilerplate** go to your project folder and run this command in your shell\n\n```\n$ cd ~/your/project/folder\n$ yo @pixel2html/frontend\n```\nThe **Pixel2HTML Boilerplate** will ask you questions about this points. Answering with the desired options will generate the code.\n\n* Project Name?\n* Quantity of screens?\n* Markup Language? _Options: HTML / Pug_\n* Frontend Framework _Options: None / Bootstrap 3.*/ Bootstrap 4 Beta / Foundation_\n* jQuery? _Options: true / false_\n\nThere are also two more way to generate your files, you can find the instructions in the [Wiki](https://github.com/Pixel2HTML/pixel2html-generator/wiki/Running-the-Pixel2HTML-Generator)\n\n\n## Installing dependencies \u0026 running up\nTo work, the **Pixel2HTML Boilerplate** needs to install some dependencies to run the options you select.\nFor this job, run this command in your shell\n\n```\n$ npm run start\n```\n\n## Generated file structure\n\nThis boilerplate will create a set of files and folders\n\n```\n\n├──  dist/\n├──  gulp/\n├──  src/\n│    └──  assets/\n│    │    ├──  fonts/\n│    │    ├──  icons/\n│    │    ├──  images/\n│    │    ├──  js/\n│    │    ├──  styles/\n│    │    │    ├──  components/\n│    │    │    │    ├──  _buttons.scss\n│    │    │    │    ├──  _forms.scss\n│    │    │    │    └──  _nav.scss\n│    │    │    ├──  screens/\n│    │    │    │    ├──  _base.scss\n│    │    │    │    └──  screen_*.scss\n│    │    │    ├── _mixins.scss\n│    │    │    ├── _reset.scss\n│    │    │    ├── _variables.scss\n│    │    │    ├── main.scss\n│    │    │    └── vendor.scss\n│    └──  screen_*.[html|pug]\n├──  .editorcofig\n├──  .gitattributes\n├──  .gitignore\n├──  .project.conf\n├──  gulpfile.js\n├──  package.json\n└──  README.md\n```\n\n## How to work with script files\n\nWe are using [WebpackJS](https://webpack.js.org/) to bundle our script files. There's also ES6 on-demand transpilation and polyfills.\n\nLearn more about Javascript Modules here [Wes Bos Article About Modules](http://wesbos.com/javascript-modules/)\n\n### Example\n\n```js\nimport $ from 'jquery'\nimport 'bootstrap-sass'\n\n```\n\nWe also included the amazing `webpack-bundle-analyzer` you can fine tweak you JS bundle size if you wish to. Fire it up running this command:\n\n```\n$ npm run debug\n```\n\n\n\n## Available script commands.\n\n### Start to code.\n* `$ npm run code`\n\n### Build the project\n* `$ npm run build`\n\n\n## Available Gulp Commands\n\n### Helpers\n* `$ gulp clean` Clean /dist directory\n\n### Static Files\n* `$ gulp main:static` Compile static files (images, icons)\n* `$ gulp main:images` Move images\n* `$ gulp main:icons` Move icons\n\n### Fonts Files\n* `$ gulp main:fonts` Move project fonts\n* `$ gulp vendor:fonts` Move vendors fonts\n\n### Scripts\n* `$ gulp main:scripts` Concat, uglify and move project JS files\n* `$ gulp vendor:scripts` Concat, uglify and move vendors JS files\n\n### Styles\n* `$ gulp main:styles` Compile, concat, autoprefix and move [SCSS, Less, Stylus] project files\n* `$ gulp vendor:styles` Compile, concat, autoprefix and move [SCSS, Less, Stylus] vendor files\n\n### Delivery\n * `$ gulp build` Execute all the gulp directives and makes a `.zip` file with the latest code.\n * `$ gulp release` Execute all the gulp directives and makes a `.zip` file with the latest code.\n * `$ gulp release --prod` Execute all the gulp directives, prepare assets to production and makes a `.zip` file with the latest code.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPixel2HTML%2Fpixel2html-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPixel2HTML%2Fpixel2html-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPixel2HTML%2Fpixel2html-generator/lists"}