https://github.com/statikbe/frontend-test
https://github.com/statikbe/frontend-test
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/statikbe/frontend-test
- Owner: statikbe
- Created: 2014-05-14T05:56:22.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2017-10-11T13:55:24.000Z (over 8 years ago)
- Last Synced: 2025-02-02T22:29:46.154Z (over 1 year ago)
- Language: CSS
- Size: 555 KB
- Stars: 0
- Watchers: 10
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Test
[Sketchfile en assets](https://drive.google.com/open?id=0B_nR_3Un0WdjNlhtcUtNci1BUGs)
## Setup
1. Open Terminal.
2. Clone/download deze repository: `git clone https://github.com/statikbe/frontend-test`
3. 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 && grunt`. Alles wordt nu automatisch gecompileerd telkens wanneer je een aanpassing maakt.
4. Open daarna de taak in je editor (wij raden Sublime Text aan).
## De taak
Als je dit allemaal gedaan hebt, kan je `index.html` openen in je browser.
Wij zullen je een design geven, aan jou om dit nu zo goed mogelijk om te zetten naar een functionele webpagina.
Onze aandachtspunten:
- Scalable, herbruikbare css (lees zeker eens over BEM en OOCSS)
- Logische, leesbare en semantische HTML
- Responsive, mobile first
Mocht je sneller klaar zijn kan je de pagina wat opvrolijken met animaties en dergelijke.
Minder belangrijk:
- Cross-browser compatibility (we gaan je taak écht niet op IE testen, beloofd).
- Image optimalisatie hoeft niet.
## Tips
- Bekijk de map `components` en `core` eens.
- Je begint best met `sass/core/_variables.scss` aan te passen naargelang het design.
- Voorbeeldjes van hoe ons grid werkt:
```
...
```
Je bent niet verplicht ons grid te gebruiken, doe gerust je eigen ding!