An experiment in cleaning up CSS by just avoiding dis-features and focusing on flexbox and CSS grids.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
fsckcss/public/code/Twitter.notes.html

8 lines
1.4 KiB

<p>Twitter's UI is easily the weirdest and most gross one to implement. They're fond of the card. Cards everywhere, in all different shapes, for all manner of things. You have cards for the login and cards for the related news and cards for each tweet. They also utilize some kind of CSS/HTML generator that <b>loves</b> divs. Figuring out how they do most of this was an exercise in spelunking the div.
</p>
<p>The most difficult part of this is definitely overlaying the profile image on the header image in a reliable way. My version most likely doesn't really match the pixels of Twitter's but mine definitely is simpler. Looking at the code it seems this one header graphic makes up most of the CSS layout.
</p>
<p>This is the first one where I started to realize we have some weird aversion to directional and positional names on tags. I first tried to avoid words like "left", "middle", and "right" because...that's just what we were always told. You'd hear people rant about how naming visual elements with their position is bad form because you may move them, and then those same people never moved them. I'm now thinking using names that match positions is far easier because I can easily mentally map "right" with the things on the actual right of the screen. If I later need to rename it for some arbitrary stylistic irrationality then I can after I get it working.
</p>