{"id":13397277,"url":"https://github.com/engageinteractive/core","last_synced_at":"2025-10-03T01:30:46.621Z","repository":{"id":41087630,"uuid":"14955212","full_name":"engageinteractive/core","owner":"engageinteractive","description":"Our Front-end baseplate, from mobile to desktop","archived":true,"fork":false,"pushed_at":"2018-09-04T11:56:17.000Z","size":1857,"stargazers_count":310,"open_issues_count":0,"forks_count":70,"subscribers_count":31,"default_branch":"master","last_synced_at":"2024-09-28T06:41:49.787Z","etag":null,"topics":["baseplate","bem-methodology","browsersync","framework","gulp","javascript","scss","tinypng-api"],"latest_commit_sha":null,"homepage":"","language":"CSS","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/engageinteractive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-12-05T14:09:19.000Z","updated_at":"2024-05-20T14:07:22.000Z","dependencies_parsed_at":"2022-07-30T20:07:59.633Z","dependency_job_id":null,"html_url":"https://github.com/engageinteractive/core","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/engageinteractive%2Fcore","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/engageinteractive%2Fcore/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/engageinteractive%2Fcore/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/engageinteractive%2Fcore/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/engageinteractive","download_url":"https://codeload.github.com/engageinteractive/core/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235059234,"owners_count":18929279,"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":["baseplate","bem-methodology","browsersync","framework","gulp","javascript","scss","tinypng-api"],"created_at":"2024-07-30T18:01:14.748Z","updated_at":"2025-10-03T01:30:41.280Z","avatar_url":"https://github.com/engageinteractive.png","language":"CSS","readme":"Core\n===========================\n\n**This project has now been deprecated in favour of the [Engage Laravel Baseplate](https://github.com/engageinteractive/laravel)**\n\n---\n\nThe [Engage Interactive](http://www.engageinteractive.co.uk/) website baseplate.\n\n### Features\n\n- Auto-prefixed CSS compiled from Sass, written using the [BEM methodology](http://getbem.com/)\n- [ESLint](https://github.com/eslint/eslint)-ed JavaScript with source map support and native error notifications\n- Image compression using the [TinyPNG API](https://tinypng.com/developers)\n- SVG sprite generator\n- [Browsersync](https://www.browsersync.io/)-based watch script\n\n### Another?\n\nWe've all played with the latest baseplate/boilerplate/bootstrap but were never truly happy with them. We've produced somewhat of a halfway house between the [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate) and something like [Foundation](https://github.com/zurb/foundation-sites). It contains the usual basics, plus some really useful core files and project settings.\n\n## Setup\n\n### Prerequisites\n\n- [Node.js](https://nodejs.org/en/download/)\n  - Long-term Support (LTS) build is fine\n  - Check your [npm permissions](https://docs.npmjs.com/getting-started/fixing-npm-permissions#option-1-change-the-permission-to-npms-default-directory) (typically option 1)\n- [Gulp](http://gulpjs.com/)\n  - Installed globally by running `npm install --global gulp-cli` in Terminal\n- [TinyPNG Developer API](https://tinypng.com/developers) Key\n  - Setup as an environment variable with key `TINYPNG_KEY`\n  - Run `echo \"export TINYPNG_KEY=YOUR_KEY_HERE\" \u003e\u003e ~/.bash_profile \u0026\u0026 source ~/.bash_profile` in Terminal (replacing `YOUR_KEY_HERE` with your key)\n\n### Initial Project Setup\n\n1. Navigate to your project's root directory in Terminal([?!?](#termnial))\n2. `npm install`\n  - installs the dependencies for this project\n  - can take several minutes\n  - will output a lot of debugging information (including occasional deprecation warnings) that can be ignored\n3. Open `gulpfile.js` and check/update the `config` object\n  - **note** - non-static projects (i.e. PHP) still require setting up in Apache/NGINX\n\n### Typical Development Process\n\n- `gulp` - recompiles everything (optional)\n- `gulp watch` - starts [Browsersync](https://www.browsersync.io/) and watches for file changes\n  - you can `⌘` + double-click the local address shown in Terminal to open the link\n  - you can alternatively use your machine's network name, e.g. `joe.local:5757`\n  - keep an eye on Terminal if it seems like changes aren't showing up in your browser\n  - stop the process using `ctrl + c`\n- `gulp clean` - deletes all compiled assets\n\n## Source Files\n\n### Sass\n\n`main.scss` is the top-level Sass file, which typically just imports the `_variables` and `_import` partials. This split allows for the [fixed width](#fixed-width) functionality.\n\n#### _import.scss\n\nReferences all of the Sass partials to be included in the project.\n\n#### _variables.scss\n\nEverything from font sizes, to colours, to easing function timings.\n\n#### Utility\n\n##### Functions\n\nThe functions file is new. We will be using this more in the future, for now it just contains a copy of the foundation rem-calc function.\n\n##### Mixins, extenders \u0026 animations\n\nThese are some really generic mixins and extenders that we use on nearly every website we create. The animations file is empty as animations tend to be very specific, but we usually end up adding them, so the file exists simply for convenience.\n\n##### Grids\n\nInitially based off the Foundation grid, we've produced a stripped down version of our own.\n\n##### Resets - Normalise \u0026 Formalise\n\nOur English spelling version of the Normalize.css file with a few very slight modifications.\n\n##### Helper Classes\n\nUseful, commonly-used classes that can be used throughout the project. If the element will never change, use a class. If you're using a helper after a certain breakpoints, it would be better to call the relevant mixin.\n\n##### Fonts\n\nThis file should contain any `@font-face` rules or remote file URL's. By default we include Open Sans.\n\n#### Core\n\nThese files contain the very basic building blocks to the project. They contain really low-specificity elements and/or classes. Examples includes form inputs, basic image styling, and base typographic styles.\n\n#### Modules\n\nThe modules category should be used to style up site-wide self-contained elements. For example, forms, modal overlays, login forms, lists, pagination, twitter includes.\n\n#### Layout\n\nThe layout category should contains files that affect the structure of the site, for example the navigation, site header and footer. Essentially, any distinguishable section of a design that isn't re-used elsewhere.\n\n#### Pages\n\nFinally, the pages category is used to style up page-unique content/layout. When you include the project into a framework, a kind developer will add a class to the body of the site. You can use this to namespace your styles so that you don't affect any other content.\n\n### Javascript\n\nWe've included the usual here, jQuery and Modernizr, along with some in-house plugins:\n\n- fitvids.js\n- loadImg.js\n- preload.js\n- simpleSelect.js\n\n##### Site.js\n\nThis contains a basic JavaScript file structure with a few bits of functionality and plugins we always use. The noteable parts are:\n- Window scroll and resize listeners which keep a global object storing site metric information up-to-date.\n- External and internal link handling\n- Simple select plugin which allows you a large amount of control over the visuals of a select dropdown.\n- Buffered window resize callback.\n\nIf you don't need something, just remove it.\n\n### HTML\n\nIncluded in the baseplate is a very, very, very simple example of the grid and site structure we like to start with in a lot of cases. This is by no means what we always use though, so feel free to delete it all and start again!\n\n## Other\n\n### \u003ca name=\"fixed-width\"\u003e\u003c/a\u003eIE8 Support\n\nThe optional `fixed-width.scss` Sass file outputs CSS with all the media queries removed. Set `fixed-width-limit` to adjust the max-width used.\n\n### \u003ca name=\"termnial\"\u003e\u003c/a\u003eTermnial Shortcut\n\nCheck you've enabled `System Preferences \u003e Keyboard \u003e Shortcuts \u003e Services \u003e New Terminal at Folder`, then you can right-click the project folder, choose services (at the bottom) and just click `New Terminal at Folder`.\n","funding_links":[],"categories":["CSS"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fengageinteractive%2Fcore","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fengageinteractive%2Fcore","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fengageinteractive%2Fcore/lists"}