Skip to content
This repository has been archived by the owner on May 7, 2021. It is now read-only.

Commit

Permalink
fix(guide): update code guidelines
Browse files Browse the repository at this point in the history
update the code guidelines to note the Field CSS Manual and HTML character limit
  • Loading branch information
Adam Jolicoeur authored and dgutride committed Jun 27, 2017
1 parent 280b12f commit e839963
Showing 1 changed file with 27 additions and 13 deletions.
40 changes: 27 additions & 13 deletions code-guidelines.md
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,8 @@ Whenever possible, avoid superfluous parent elements when writing HTML. Take the
<img class="avatar" src="...">
```

Preferably, we want to keep our lines of HTML to 120 characters or less. This is enforced in our Less Hint configuration.

<!-- ============================================================ -->

# CSS
Expand Down Expand Up @@ -186,43 +188,55 @@ Related property declarations should be grouped together following a logical ord

1. Positioning
1. Box model
1. Typographic
1. Visual
1. Typography

Positioning comes first because it can remove an element from the normal flow of the document and override box model related styles. The box model comes next as it dictates a component's dimensions and placement.

Everything else takes place inside the component or without impacting the previous two sections, and thus they come last.

For our complete list of properties and their order, please see [CSS Property Orders](https://github.com/fabric8io/fabric8-ux/blob/master/src/docs/CSS_Property_Order.md).
For a complete list of properties and their order, please see [Field CSS Manuals](http://manuals.gravitydept.com/code/css/properties).

Example:
```less
.declaration-order {
// Positioning
position: absolute;

top: 0;
right: 0;
bottom: 0;
left: 0;

z-index: 100;

// Box-model
display: block;
float: right;
// Box
width: 100px;
height: 100px;

margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;

padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;

// Visual Box
background-color: #f5f5f5;
border: 1px solid #f7f7f7;

// Typography
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;

// Visual
background-color: #f5f5f5;
border: 1px solid;
border-color: #e5e5e5;
border-radius: 3px;
font-family: "Helvetica Neue", sans-serif;
font-size: 13px;

line-height: 1.5;

text-align: center;

// Misc
opacity: 1;
Expand Down

0 comments on commit e839963

Please sign in to comment.