dandevri / minor-cssttr Goto Github PK

Dit probleem is complexer: Het plaatje moet altijd helemaal zichtbaar zijn in elke viewport. Dus maximaal 100vh, en maximaal 100vw. Bovendien moet je ook altijd kunnen zien dat er een onderschrift is. En dit moet werken met een landscape en een portrait plaatje …
En kan je je nog herinneren hoeveel em breed een paragraaf maximaal mag zijn?
En hier is er iets mis met de aangeleverde HTML. Hier moet je dus wel iets aanpassen (-:

De focus- en hover-states zijn niet (overal) vormgegeven. Hierdoor lijkt de pagina nogal onactief als je er doorheen tabt of er over beweegt met je muis. Die states zijn juist superbelangrijk. Geef ze vorm. Hier kan je ook transities voor gebruiken.
Let er bij die states ook op dat ze wel zichtbaar zijn, bijvoorbeeld op het formulier: is het wel zichtbaar op de achtergrond?

With changing the font size on the html element to lets say 145%, you'll immediately fix some long-text-line issues and make everything a little more clearer to read for the end user.

Kan misschien op klein scherm beter netjes onder elkaar, want hij breekt rechts uit beeld.

Stel dat de tweede persoon twee berichtjes achter elkaar had getypt. Dat zou dat met deze CSS niet zichtbaar zijn …

• Je hebt nu maar een visuele variant gemaakt van het media-element. Maar er zijn flink wat verschillende manieren te bedenken waarop je dit kunt laten zien. Zie bijvoorbeeld de homepage van The Guardian of de linkerkolom van de Volkskrant. Kijk eens of je net zo'n lijst kan maken waarbij de eerste er anders uit ziet dan de rest.

Wie stuurde welk bericht, dat kan nog wat duidelijker, wellicht met kleur of locatie chat ballon. Voor inspiratie, zoek eens op Dribbble https://dribbble.com/search?q=chat

Door de kleur van het text invoer veld is de focus stijl op OSX bijna onzichtbaar geworden.

Let op je specificiteit (https://specificity.keegan.st) minder specifiek is beter (dan is later overriden makkelijker). Gebruik geen #id voor styling, dat weegt veel te zwaar (zie link).

Denk ook aan de maximale breedte, als een component groter wordt betekend dat niet automatisch dat het nog bruikbaar is.

Tip, haal voorgrond en achtergrond kleur even door http://contrastchecker.com/ om te kijken of ze contrasterend genoeg zijn voor bijvoorbeeld mensen met kleurenblindheid of slechtzienden.

De button in het chat form is anders gestyled dan die in het login form.

Je hebt nog wel wat te doen, zo te zien.
Kijk ook eens of je hier een echte site van kan maken. Lukt het je om alle elementen op een logische manier te tonen? Het mag op één pagina, maar ook op meerdere pagina's. Het onderwerp mag je natuurlijk zelf weten.

Add some hover states to stuff like the login button and rating emojis to make interacting with the components more interesting and fun

De rating widget is nog niet interactief. En dat kan wel. Misschien moet je de volgorde van de HTML wel een beetje aanpassen.

Probeer structureel dezelfde marges en paddings te gebruiken, dat maakt de interface een stuk rustiger om naar te kijken. Nu verschilt het nogal per component en per element. Laat elementen de parent uitvullen en gebruik padding en marges ipv width + percentages om breedtes te bepalen.

F.e. this

:root {
  --margin-none: 0;
  --margin-small: 1em;
  --margin-medium: 2em;
  --margin-big: 3em;
}

el {
  margin: --margin-medium;
}

could be rewritten as

:root {
  --scale: 1;
}

el {
  margin: calc(2em * --scale);
}

That way, when editing the scale, you don't have to edit each version of the variable

• De navigatie heeft geen :focus en :hover states
• het submenu is niet te bereiken
• Het is niet te zien dat er ergens een submenu zit

Kijk eens of je de techniek uit dit form kunt gebruiken.

Things that won't or most likely don't change ever, like the full viewport width, are useless to put in variables. This will only make maintaining your code harder.

Een lijst met media items is nog prettiger te navigeren als heel het item klikbaar is. Kan zonder de HTML aan te passen...

Je zou de :checked selector in combinatie met de sibling selector kunnen gebruiken om de checkbox van een andere stijl te voorzien (het label kan hierbij helpen).