Anonymous user
Front-end style guide: Difference between revisions
no edit summary
imported>Eeshangarg |
imported>Eeshangarg No edit summary |
||
| (5 intermediate revisions by 2 users not shown) | |||
Line 7:
This document contains links to high-quality style suggestions from others, and also names some common problems that have occurred in the OpenHatch code in the past.
'''NOTE:''' Most of the HTML/CSS advice applies to the upcoming site redesign, so it may not cross-apply well to the live site for the moment.
'''NOTE:''' Apart from this wiki, the Front-end style guide is now also a part of the official OpenHatch documentation at readthedocs and can be found [http://openhatch.readthedocs.org/en/latest/internals/front_end_style_guide.html/ here].
== HTML/CSS ==
Line 27 ⟶ 29:
Try to avoid font-weight: bold; if possible; differentiate headers and so forth by size, or maybe color, instead.
Try to store styles in our CSS files or LESS files, rather than inline in the element.
=== Cartoons ===
Line 90 ⟶ 94:
Name IDs and classes using hyphens, not underscores or camelcase. (e.g. "#front-page", not "#front_page" or "#frontPage"). CSS file names should use the same convention. (Not all of them do, but hopefully that can eventually be corrected.)
== Usage instructions for the code, pre and tt tags ==
If you're interested in modifying the 'Hints' sections of the training missions, here are some guidelines regarding the usage variations of the code, pre and tt tags to keep in mind.
Line 125 ⟶ 129:
If you are on Linux, type: man diff at the command line.
</pre>
== Editing the training mission hints ==
While working on Issue 958 <https://openhatch.org/bugs/issue958>, it was found that in the hints for training missions, the "low" hint sometimes had trouble laying out its child elements properly due to the CSS properties of its parent div and this caused the "low" hints to display weirdly. To fix this issue, a new CSS property for '#low' was added to mysite/static/css/missions/base.css. However, here are some guidelines for how to phrase things when editing the training mission hints:
The first sentence of a training mission hint should be a paragraph (p tag).
The first sentence of a training mission hint should be a full sentence.
Full sentences start with capital letters and end with periods.
== JavaScript ==
| |||