{"id":19999691,"url":"https://github.com/novicell/novicell-frontend","last_synced_at":"2025-05-04T14:32:04.781Z","repository":{"id":31845700,"uuid":"35412891","full_name":"Novicell/novicell-frontend","owner":"Novicell","description":"Novicell default build setup, for compiling PostCSS to CSS, Babeling JS, making SVG sprites, optimizing images and more","archived":false,"fork":false,"pushed_at":"2023-01-04T09:54:51.000Z","size":26843,"stargazers_count":29,"open_issues_count":23,"forks_count":16,"subscribers_count":32,"default_branch":"master","last_synced_at":"2024-09-21T14:08:23.907Z","etag":null,"topics":["babel","build-tool","fractal","novicell","novicell-frontend","pattern-library","post-css","styleguide"],"latest_commit_sha":null,"homepage":"https://frontend.novicell.cloud","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Novicell.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-11T08:57:43.000Z","updated_at":"2022-06-05T19:30:27.000Z","dependencies_parsed_at":"2023-01-14T19:53:51.662Z","dependency_job_id":null,"html_url":"https://github.com/Novicell/novicell-frontend","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novicell%2Fnovicell-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novicell%2Fnovicell-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novicell%2Fnovicell-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novicell%2Fnovicell-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Novicell","download_url":"https://codeload.github.com/Novicell/novicell-frontend/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224393874,"owners_count":17303725,"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":["babel","build-tool","fractal","novicell","novicell-frontend","pattern-library","post-css","styleguide"],"created_at":"2024-11-13T05:12:31.069Z","updated_at":"2024-11-13T05:12:31.534Z","avatar_url":"https://github.com/Novicell.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Novicell Frontend\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/cd7530b5-4978-44cf-8719-be271a0b157a/deploy-status)](https://app.netlify.com/sites/novicell-frontend/deploys)\n\nNovicell Default Frontend package is a framework for your frontend setup. This setup helps developer by automizing frontend workflow using certain technologies like NPM Scripts and Webpack.\nIt includes PostCSS, Stylelint, Webpack, ESLint, Babel, Fractal.\nWhen setup, it also helps you optimize images, combine SVGs to a sprite, generate favicons, minifying/optimizing CSS and Javascript.\n\n## Table of content\n\n-   [Quick start](#setup)\n-   [Configuration and paths](#configuration-and-paths)\n-   [NPM Scripts](#npm-scripts)\n-   [Generate component](#generate-component)\n-   [Additional](#additional)\n-   [Contribution](#contribution)\n-   [License](#license)\n\n## Setup\n\n-   Download and install Node.js min. v. 8.9.2 (https://nodejs.org/en/download/)\n\n1. Clone the repo `git clone https://github.com/Novicell/novicell-frontend.git`.\n2. Run `npm install` to install all dependencies.\n3. Insert paths/variables to config.js and package.json. [Configuration and paths](#configuration-and-paths)\n4. Run `npm run build:dev` to build the dist folder with all the minified/optimized files.\n5. Run `npm run dev` to start watching file changes and continuous copilation.\n\n## Configuration and paths\n\nThe whole automized build system looks for paths and variables in order to work dynamically with different projects.\nTherefore, when starting new project edit options in 2 files (they are both in root directory):\n\n-   `config.js`\n-   `package.json`\n\nconfig.js:\n\n```js\nconst dist = '/dist/'; // /dist by default. Folder where all the built files will go to (minified/optimized/compiled)\nconst sourceRootFolder = '/src/'; // /src by default. Folder where ATOM modules belong\nconst modulesDir = '/src/modules/**/*.js'; // Where JavaScript files should be placed. Add CSS files here if you want them as separate bundle\nconst assetsDir = '/assets/'; // Wheer you keep images, fonts, icons...\n```\n\nLook for \"config\" field in package.json and fill in:\n\n```json\n    \"config\": {\n        \"DIST\": \"dist\",\n        \"CSS_MODULES\": \"src/modules/*.css\"\n    },\n```\n\n## NPM Scripts\n\nThese are most often used scripts:\n\n-   for development: `npm run dev` and `npm run build:dev`\n-   for production: `npm run prod` and `npm run build:prod`\n\nBut there are more available in this package (add `npm run` before script name):\n\n-   `fractal` - Runs fractal\n-   `fractal:build` - Builds static site\n-   `clean` - Deletes the files/directories defined in: `gulp/config.js \u003e pathsToClean`\n-   `fonts` - Copies the fonts defined in: `config.js` to `dist`\n-   `images` - Minifies images defined in: `config.js` to `dist/images`\n-   `sprites` - Minifies all sprites from `assets/icons` to `dist/icons`.\n-   `styles` - Minifies/lints and bundles CSS files defined in: `src/modules` to `dist/styles`\n-   `webpack` - Minifies/optimizes/lints and bundles JS files defined in: `src/modules` to `dist/scripts`\n-   `watch:styles` - Automatically bundles CSS changes while developing\n-   `watch:webpack` - Automatically bundles JS changes while developing\n-   `deploy` - Uploads file via FTP, configuration can be found in `gulp/config.js`\n-   `dev` - webpack:watch + styles:watch + fractal\n-   `start` - Equal to `dev`\n-   `prod` - Same as dev but in production (extra optimization) but slower build,\n-   `fix` - Fixes all possible linting for JavaScript\n-   `buildDrupal` - (For drupal projects) Bundles JavaScript and CSS into same location\n-   `generateFavicon` - generates a favicon based on config/favicon/faviconDescription.json settings\n\n## Generate component\n\n1. To allow generating components write: `npm link` in the root dir. (only have to do it once)\n2. Run\n\n```\ncreateComponent -t a -n my-component\n```\nThis example will create files in /src/01-atoms/my-component\n\n| Argument | Name | Type | Description |\n| --- | --- | --- | --- |\n| -t | Type | `a/m/o/p` | Defines the type of your component, this decides where the component is created. a = atom, m = molecule, o = organism, p = page;\n| -n | Name |`string` | Sets the filename of the component files, and a capitalized version will be used as title in the config file\n\n\n## Additional\n\nIf you need more information, we have a Wiki that contains in-depth explanations:\n\n-   [Home](https://github.com/Novicell/novicell-frontend/wiki)\n-   [Adding new files](https://github.com/Novicell/novicell-frontend/wiki/Adding-new-files)\n-   [Atomic guidelines](https://github.com/Novicell/novicell-frontend/wiki/Atomic-guidelines)\n-   [BEM](https://github.com/Novicell/novicell-frontend/wiki/BEM)\n-   [CSS (PostCSS)](\u003chttps://github.com/Novicell/novicell-frontend/wiki/CSS-(PostCSS)\u003e)\n-   [Fractal guidelines](https://github.com/Novicell/novicell-frontend/wiki/Fractal-guidelines)\n-   [FAQ](https://github.com/Novicell/novicell-frontend/wiki/Frequently-asked-questions)\n-   [HTML + Handlebars](https://github.com/Novicell/novicell-frontend/wiki/HTML-and-Handlebars)\n-   [VueJS Usage](https://github.com/Novicell/novicell-frontend/wiki/VueJS-in-the-setup)\n-   [Prettier extension](https://github.com/Novicell/novicell-frontend/wiki/Prettier-extension-on-VSCode)\n-   [Netlify](https://github.com/Novicell/novicell-frontend/wiki/Setting-up-Netlify-CI)\n\n## Contribution\n\nLooking to contribute something? **Here's how you can help.**\nPlease take a moment to review our [contribution guidelines](https://github.com/Novicell/novicell-frontend/wiki/Contribution-guidelines) in order to make the contribution process easy and effective for everyone involved.\n\n## License\n\nThe Novicell Frontend is licensed under the MIT license. (http://opensource.org/licenses/MIT)\n\n## Collaborators\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n\u003ctable\u003e\u003ctr\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"http://www.novicell.dk\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/1523780?v=4\" width=\"70px;\" alt=\"Danni Larsen\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDanni Larsen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Novicell/Novicell-Frontend/commits?author=Dan9boi\" title=\"Code\"\u003e\u003c/a\u003e\u003c/td\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ankeris\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/31132643?v=4\" width=\"70px;\" alt=\"Juozas Rastenis\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJuozas Rastenis\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Novicell/Novicell-Frontend/commits?author=ankeris\" title=\"Code\"\u003e\u003c/a\u003e\u003c/td\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/jhavmoeller\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/16593791?v=4\" width=\"70px;\" alt=\"Jonas Havmøller\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJonas Havmøller\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Novicell/Novicell-Frontend/commits?author=jhavmoeller\" title=\"Code\"\u003e\u003c/a\u003e\u003c/td\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/shp-novicell\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/19607667?v=4\" width=\"70px;\" alt=\"shp-novicell\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eshp-novicell\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Novicell/Novicell-Frontend/commits?author=shp-novicell\" title=\"Code\"\u003e\u003c/a\u003e\u003c/td\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/heense\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/8288150?v=4\" width=\"70px;\" alt=\"Henrik Madsen\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eHenrik Madsen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Novicell/Novicell-Frontend/commits?author=heense\" title=\"Code\"\u003e\u003c/a\u003e\u003c/td\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Bjornnyborg\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/5557038?v=4\" width=\"70px;\" alt=\"Bjornnyborg\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBjornnyborg\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Novicell/Novicell-Frontend/commits?author=Bjornnyborg\" title=\"Code\"\u003e\u003c/a\u003e\u003c/td\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/emilankersen\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/6448879?v=4\" width=\"70px;\" alt=\"emilankersen\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eemilankersen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Novicell/Novicell-Frontend/commits?author=emilankersen\" title=\"Code\"\u003e\u003c/a\u003e\u003c/td\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/MKAndersen\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/19702371?v=4\" width=\"70px;\" alt=\"MKAndersen\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMKAndersen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Novicell/Novicell-Frontend/commits?author=MKAndersen\" title=\"Code\"\u003e\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnovicell%2Fnovicell-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnovicell%2Fnovicell-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnovicell%2Fnovicell-frontend/lists"}