<commit_before># GUI Guidelines

Some GUI guidelines for mijn.mxi.nl application.

General guidelines:
* Use CSS for styling (instead of styling within HTML)
* Add CLASS attributes to elements to provide styling
* Use simpel descriptive CLASS names and reference them as a path (eg '.messages .message .header { ... }')
* Use DIVs as a block level element to add styling
* Use SPAN (or DIV with style 'display: inline-block') as inline element to add styling
* Do not use TABLEs, unless a (Excel-like) tabular display is required (probably not required for mijn.mxi.nl)

Make application responsive:
* Use relative sizes as much as possible (use percentages, 'em', 'vw' or 'vh' as size unit)
* Position elements using carefully constructed container/parts (DIVs in DIVs)
* Use MARGIN and PADDING to add additional whitespace (size might be expressed in 'px', 'em', 'vw' or 'vh')
* Using 'position: absolute' will remove an element from normal flow, use it wisely

Adding logic to the GUI:
* Use jQuery to select DOM elements using $ and selectors like below:
    $('.messages')            # All elements with class 'messages'
    $('.messages .message')   # All elements with class 'message' which have a parent with class 'messages'
    $('[name=something]')     # All elements with attribute 'name' equal to 'something'
* In coffeescript file add event handler like below:
    Template.myTemplate.events
      'click .control.send': (e) ->
        e.preventDefault()
        content = $('input[name=content]').val()
        Meteor.call 'sendMessage', content, (error, result) ->
          if error
            throwError error.reason<commit_msg>Add some documentation<commit_after># GUI Guidelines

Some GUI guidelines for mijn.mxi.nl application.

General guidelines:
* Use CSS for styling (instead of styling within HTML)
* Add CLASS attributes to elements to provide styling
* Use simpel descriptive CLASS names and reference them as a path (eg '.messages .message .header { ... }')
* Use DIVs as a block level element to add styling
* Use SPAN (or DIV with style 'display: inline-block') as inline element to add styling
* Do not use TABLEs, unless a (Excel-like) tabular display is required (probably not required for mijn.mxi.nl)

Make application responsive:
* Use relative sizes as much as possible (use percentages, 'em', 'vw' or 'vh' as size unit)
* Position elements using carefully constructed container/parts (DIVs in DIVs)
* Use MARGIN and PADDING to add additional whitespace (size might be expressed in 'px', 'em', 'vw' or 'vh')
* Using 'position: absolute' will remove an element from normal flow, use it wisely

Adding logic to the GUI:
* Use jQuery to select DOM elements using $ and selectors like below:
  >    $('.messages')            # All elements with class 'messages'
  >    $('.messages .message')   # All elements with class 'message' which have a parent with class 'messages'
  >    $('[name=something]')     # All elements with attribute 'name' equal to 'something'
* In coffeescript file add event handler like below:
  >    Template.myTemplate.events
  >      'click .control.send': (e) ->
  >        e.preventDefault()
  >        content = $('input[name=content]').val()
  >        Meteor.call 'sendMessage', content, (error, result) ->
  >          if error
  >            throwError error.reason
{'fraction_non_alphanumeric': 0.09480948094809481, 'fraction_numerical': 0.0, 'mean_word_length': 3.6369958275382475, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '699901', 'n_tokens_mistral': 931, 'n_tokens_neox': 876, 'n_words': 423}