{"id":21890917,"url":"https://github.com/statikbe/frontend-test","last_synced_at":"2026-04-13T17:04:49.083Z","repository":{"id":17004902,"uuid":"19768143","full_name":"statikbe/frontend-test","owner":"statikbe","description":null,"archived":false,"fork":false,"pushed_at":"2017-10-11T13:55:24.000Z","size":568,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-02-02T22:29:46.154Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/statikbe.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":"2014-05-14T05:56:22.000Z","updated_at":"2017-10-11T10:31:23.000Z","dependencies_parsed_at":"2022-09-06T09:50:47.741Z","dependency_job_id":null,"html_url":"https://github.com/statikbe/frontend-test","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/statikbe%2Ffrontend-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/statikbe%2Ffrontend-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/statikbe%2Ffrontend-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/statikbe%2Ffrontend-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/statikbe","download_url":"https://codeload.github.com/statikbe/frontend-test/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244898458,"owners_count":20528341,"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":[],"created_at":"2024-11-28T12:18:17.223Z","updated_at":"2026-04-13T17:04:49.034Z","avatar_url":"https://github.com/statikbe.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Test\n\n[Sketchfile en assets](https://drive.google.com/open?id=0B_nR_3Un0WdjNlhtcUtNci1BUGs)\n\n## Setup\n\n1. Open Terminal.\n2. Clone/download deze repository: `git clone https://github.com/statikbe/frontend-test`\n3. In de `sass` map zitten al wat Sass-bestanden waarvan je mag vertrekken. Wij gebruiken meestal Grunt om hiervan een css-file te compileren. Installeer hiervoor NPM dependencies en start Grunt: `npm install \u0026\u0026 grunt`. Alles wordt nu automatisch gecompileerd telkens wanneer je een aanpassing maakt.\n4. Open daarna de taak in je editor (wij raden Sublime Text aan).\n\n## De taak\n\nAls je dit allemaal gedaan hebt, kan je `index.html` openen in je browser.\nWij zullen je een design geven, aan jou om dit nu zo goed mogelijk om te zetten naar een functionele webpagina.\n\nOnze aandachtspunten:\n- Scalable, herbruikbare css (lees zeker eens over BEM en OOCSS)\n- Logische, leesbare en semantische HTML\n- Responsive, mobile first\n\nMocht je sneller klaar zijn kan je de pagina wat opvrolijken met animaties en dergelijke.\n\nMinder belangrijk:\n- Cross-browser compatibility (we gaan je taak écht niet op IE testen, beloofd).\n- Image optimalisatie hoeft niet.\n\n## Tips\n\n- Bekijk de map `components` en `core` eens.\n- Je begint best met `sass/core/_variables.scss` aan te passen naargelang het design.\n- Voorbeeldjes van hoe ons grid werkt:\n\n```\n\u003c!-- Responsive (repeating) grid van 1/2/3 kolommen adhv. schermgrootte --\u003e\n\u003cdiv class=\"grid grid--bp-med-2-col grid--bp-lrg-3-col\"\u003e\n    \u003cdiv class=\"grid__item\"\u003e\u003c/div\u003e\n    ...\n    \u003cdiv class=\"grid__item\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- Responsive (layout) grid met variabele breedtes adhv. schermgrootte --\u003e\n\u003c!-- (Dit voorbeeld zorgt voor een 66/33 layout op grote schermen) --\u003e\n\u003cdiv class=\"grid\"\u003e\n    \u003cdiv class=\"grid__12 grid--bp-med__8\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"grid__12 grid--bp-med__4\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\nJe bent niet verplicht ons grid te gebruiken, doe gerust je eigen ding!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstatikbe%2Ffrontend-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstatikbe%2Ffrontend-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstatikbe%2Ffrontend-test/lists"}