New Article on FLXbox for Flexbox

Hey everyone, I just finished writing an article about a small CSS library I made, I call it FLXbox, training wheels for flexbox. Trying to document projects I work on, and finish my portfolio site.

Just implemented Vertical Rhythm which has really helped readability. I am also working on layout and design elements, such as a new header.

I would love to hear your thoughts on the article, content, page layout, etc.

Hi @emgo. Did you mean to post a link to that library? :slight_smile:

Oops, yes I did, well I meant to share the article, but it has a link to the library in it.

Here it is: http://www.emgodev.com/?k=ah&n=FLXbox&kl=w

Not an expert but the font-size is rather small and it makes the measure/line-length “uncomfortable”, so to speak.

1 Like

Thank you @yhubee for your input! I’ve also heard from another that the font-size was too small. It was suggested I go with 1.4em my current size, or 16px. I think that works well with the page, though I normally project my designs around 720p displays. Perhaps I just need to include font-size in my display breakpoints.

As others have said, the font size is too small, and does not respect the user’s chosen default size.

There is also a problem with colour contrast. There is insufficient contrast between the white background and orange links, the turquoise backgrounds with white text, and the two shades of grey used in the footer. See http://webaim.org/resources/contrastchecker/

1 Like

Another thing that strikes me is the page is not responsive, which seems odd for a page about flex. It’s not that complex, so would not take much to fix.

1 Like

Input is much appreciated. You’ve opened a whole new world for me with that contrast checker, I am convicted.

1 Like

The page is responsive to a degree, but I understand. There is no mobile sheet. By the way, you ever notice how few websites use print stylesheets? Really bums me out when I want to print a page and it all breaks.

It should not need another sheet, it just needs to become fluid. The main thing would be removing the min-width on the body-page container. Make the images responsive, standard issue img {max-width: 100%; height: auto;}. Then do something with the top nav. It’s only three items wide, so could probably be made fluid enough to squeeze up using flex (of all things :slight_smile:).

Thank you for providing such information, let L will try one.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.