Code a Front-end style guide for BRL-CADBRL-CAD
Status: ClosedTime to complete: 100 hrs Mentors: Sean, Gauravjeet Singh, IshwerdasTags: HTML, CSS

BRL-CAD is working on it's new website. The original design is at cpp-tricks.com/brlcad and beta.brlcad.org/wp/.

Your task is to generate a Front-end pattern library for new website. A pattern library is kind of a style guide where all the styles that are to be used in website are depicted on one page. I contains all the possible markups that we may use, how will images be styled and so on. You can look at sample libraries here https://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides.

References:
  • https://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides
  • http://patterns.alistapart.com/
Uploaded Work
File name/URLFile sizeDate submitted
BRL-CAD Front-End Pattern.zip9.5 KBDecember 09 2014 17:17 UTC
hopethisoneuploads.zip9.8 KBDecember 10 2014 13:04 UTC
Comments
Marc Tannouson December 9 2014 16:07 UTCTask Claimed

I would like to work on this task.

Jacob B on December 9 2014 16:14 UTCTask Assigned

This task has been assigned to Marc Tannous. You have 100 hours to complete this task, good luck!

Marc Tannouson December 9 2014 17:17 UTCThis was a great experience

This might not seem like much, but this took CSS-writing to a whole new level for me, as it was just like writing my own coding language, for other's use and it was great.


Came up with a few categories, spent a while researching the new website and divided my tasks accordingly, and then jumped straight to coding. It might seem small in comparison to the links you have provided, mainly because BRL-CAD's website is still in a beta phase and does not have much content. But I have implemented more than meets the eye, figuring out a way to how I can color my buttons,text everything else by only adding one more class, and added the whole color-palette as that. So, for example, if I wanted a pink paragraph, I could have it, if I wanted a light gray or white big text header, I could also have it.


This was awesome, waiting for your feedback.

Marc Tannouson December 9 2014 17:17 UTCReady for review

The work on this task is ready to be reviewed.

Sean on December 10 2014 04:58 UTCnice work

Marc, this indeed really nice, so I'll just right to the things I notice.  Don't let that minimize the appreciation of your effort -- this is awesome.


So what I notice right away is that the left menu seems to violate this style guide, no? :)  The menu color is not on the approved color list.  That said, the pink used in your write-up doesn't look quite right either.  Not entirely relevant to the guide as we can just plug in different number values, but it's interesting to see this pinkish color evolve from different designers.  The colors here are a little closer to truth/desire: http://www.stickermule.com/marketplace/2692-brl-cad-gear-logo


Also (and probably the only area to improve), there seems to be no guidance on how to put this information to use, i.e., that you created css classes to stylize content or what the design requirements are (you say for colors, but not what kinds of typography/fonts are okay, for example).  Basically a brief intro or explanation is in order.

Sean on December 10 2014 04:58 UTCTask Needs More Work

One of the mentors has sent this task back for more work. Talk to the mentor(s) assigned to this task to satisfy the requirements needed to complete this task, submit your work again and mark the task as complete once you re-submit your work.

Marc Tannouson December 10 2014 05:24 UTCReady for review

The work on this task is ready to be reviewed.

Marc Tannouson December 10 2014 05:26 UTCFixed

Color changed to the one in the link you provided, now it should be consistent across the page. Added a brief introduction called "Usage", not going into too much detail but specifying all that needed to be specified. I want to have typography left like this to be honest, not mentioning a specific font as all of these have Open Sans implemented in them.


Regards,


Marc

Sean on December 10 2014 05:59 UTCTask Needs More Work

One of the mentors has sent this task back for more work. Talk to the mentor(s) assigned to this task to satisfy the requirements needed to complete this task, submit your work again and mark the task as complete once you re-submit your work.

Sean on December 10 2014 05:59 UTCupload

You didn't upload anything. ;)


 

Sean on December 10 2014 06:01 UTCtypography

Also, with regards to the typography, it could be as simple as saying Open Sans (nothing wrong with standardizing on it) or specifying a preference towards sans serif fonts.  That's certainly not a given with a broad enough audience.

Marc Tannouson December 10 2014 06:09 UTCoh damn I'm dumb

I was in a hurry to upload and mark it done before leaving for school, must have missed the upload button. I will add the specifications under typography and hopefully be able to upload this time, when I get home in abou 6 hours.

Marc Tannouson December 10 2014 13:04 UTCReady for review

The work on this task is ready to be reviewed.

Popescu Andrei on December 10 2014 13:11 UTC

Looks nice and polished, you did apply Sean's feedback, also consistent with other guides you have done.


Thank you for your effort! Task closed!

Popescu Andrei on December 10 2014 13:11 UTCTask Closed

Congratulations, this task has been completed successfully.