(server-side)

wvars["usersLimit"] = i18nformat("""
    <tr>
        <td nowrap class="displayField"><b> _("Max No. of registrants"):</b></td>
        <td width="100%%" align="left">%s</td>
    </tr>
""") % regForm.getUsersLimit()

(python-embedded)

(inconsistent)

(inconsistent)

(messy)

ul.UIPeopleList li.listMessage:hover, ul.UISuggestedPeopleList li.listMessage:hover
{
    background-color: transparent !important;
}
ul.UIPeopleList li .nameLink, ul.UIAuthorList li .nameLink {
    padding: 0px 0px 4px 30px;
}

ul.UIPeopleList li .foundUserEmail, ul.UISuggestedPeopleList li .foundUserEmail {
    font-style: italic;
    font-size: 8pt;
    padding-left: 5px;
    line-height: 15px;
    display:none;
}

ul.UIPeopleList li:hover > .foundUserEmail, ul.UISuggestedPeopleList li:hover > .foundUserEmail {
    display:inline;
}

(unscoped)

<script type="text/javascript">
    var recordingSwitch = false;
    var toggleRecordingCapableRooms = function () {
        IndicoUI.Effect.toggleAppearance($E('recordingCapableRoomsDiv'));
        if (recordingSwitch) {
            $E("recordingRoomsText").dom.innerHTML = $T("See list of record-able rooms.");
        } else {
            $E("recordingRoomsText").dom.innerHTML = $T("Hide list of record-able rooms.");
        }
        recordingSwitch = !recordingSwitch;
    }
</script>

(image-based)

class UserForm(Form):
    name = StringField("First name", [DataRequired()])
    l_name = StringField("Last name", [DataRequired()])
    enabled = BooleanField("Enabled")

class PersonForm(UserForm):
    age = IntegerField("Event", [DataRequired()])

    def validate_age(form, field):
        if field.data < 13:
            raise ValidationError("You must be >13")

{% extends "layout.html" %}

{% block body %}
  <ul>
  {% for user in users %}
    <li>
      <a href="{{ user.url }}">
        {{ user.username }}
      </a>
    </li>
  {% endfor %}
  </ul>
{% endblock %}

{% macro input(name, value='', type='text', size=20) -%}
  <input type="{{ type }}" 
         name="{{ name }}" 
         value="{{ value|e }}" 
         size="{{ size }}">
{%- endmacro %}

h1 {
  font: Helvetica;
  color: #fff;
}

a {
  color: #333;
}

.button {
  font: Helvetica;
  color: #333;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

.box1 {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}

.box2 {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}

.message, .success, .error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

$('button.continue').html('Next Step...')

var hiddenBox = $('#banner-message');
$('#button-container button').on('click', function(event) {
  hiddenBox.show();
});

$.ajax({
  url: '/api/getWeather',
  data: {
    zipcode: 97201
  },
  success: function(result) {
    var html = '<strong>' + result + '</strong> degrees';
    $('#weather-temp').html(html);
  }
});

class TextListField(TextAreaField):

  def process_formdata(self, valuelist):
    lines = valuelist[0].split('\n')
    self.data = [line for line in lines]

  def _value(self):
    return '\n'.join(self.data) if self.data else ''

class EmailListField(TextListField):

  def process_formdata(self, valuelist):
    v = valuelist
    super(EmailListField, self).process_formdata(v)
    self.data = map(sanitize_email, self.data)

class IndicoPasswordField(PasswordField):
    """Password field that shows/hides the password."""

    widget = PasswordWidget()

class FeaturesForm(IndicoForm):
    payment = BooleanField("Enabled", 
                           widget=SwitchWidget())

{% for field in form %}
    <tr>
    {% if field.type == "BooleanField" %}
        <td></td>
        <td>{{ field }} {{ field.label }}</td>
    {% else %}
        <td>{{ field.label }}</td>
        <td>{{ field }}</td>
    {% end %}
    </tr>
{% endfor %}

{% macro message_box(type, message) %}
  <div class="{{ type }}-message-box">
    <div class="message-box-content">
      <span class="icon"></span>
      <div class="message-text">
        {{ message }}
      </div>
    </div>
  </div>
{% endmacro %}

$darker-blue: #005272;
$dark-blue: #007CAC;
$blue: #5D95EA;
$pastel-blue: #CDE1FF;
$light-blue: #EDF3FD;

$red: #AF0000;
$dark-red: #A76766;
$pastel-red: #A76766;
$light-red: #F2DEDE;

@mixin _semantic-outline($color) {
    @include border-all($color);
    color: $color;
}

%semantic-outline {
  &.success {
    @include _semantic-outline($green);
  }

  &.error {
    @include _semantic-outline($red);
  }

  // ...
}

.i-button