I’ve been working more with the Mockup-to-CSS project, and I’m certainly closer.
For one thing, the progress bars are divs, which don’t really like going into tables nicely. However, with much investigation (and playing with the code using CodePen), I found an explanation of the problem. Took me a little while to figure out how to adjust the code appropriately, but I did succeed on that point.
The next bit of complication was deciding the best way to handle the “view all team badges” link, in terms of placement. I ended up deciding to have blank space for the first half of the space, and the view link in the second half of the space. In other words:
<p class=”viewall”><span class=”callout”><a href=#”>View All Team Badges></a></span>
And yes, the links are all invisible. I’m ignoring that for now, because it was true for the stuff that Mo did, as well.
<figure></figure><figure><figcaption>Left, Mockup. Right, web screenshot. Closer!</figcaption></figure>
I need lines between some, but not all of the rows in the table. I was already starting to think that I should just drop tables and do it all in divs, because it got messy. Mo confirms this need, so that’s next to play with.
I also still need to figure out the excessive space between the badge images and the text, make the badges in the design mission area smaller so they fit on a row, make the trophy icon larger, and make “of 15 team members” stay where it belongs.
But! This is much closer than my last attempt. Codepen helped a _lot_ with being overwhelmed, since I could see immediate changes. Not all the relevant CSS was there, but it was good enough for investigation purposes.
Source From: fedoraplanet.org.
Original article title: Suzanne Hillman (Outreachy): The CSS is getting closer..
This full article can be read at: Suzanne Hillman (Outreachy): The CSS is getting closer..