---
layout: default
title: CSS
slug: css
lead: "HTML elements styled and enhanced with extensible classes."
---


<!-- fueluxicons
================================================== -->
<div class="fu-docs-section">
  <h1 id="fueluxicons" class="page-header">Icons</h1>
    <h2>Available glyphs</h2>
    <p>Checkbox, radio, and loader</p>

    <h2 id="glyphicons-how-to-use">How to use</h2>
    <div class="bs-callout bs-callout-danger">
      <h4>Don't mix with other components</h4>
      <p>Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <code>&lt;span&gt;</code> and apply the icon classes to the <code>&lt;span&gt;</code>.</p>
    </div>
  {% highlight html %}
  <span class="fueluxicon fueluxicon-checkbox-1"></span>
  {% endhighlight %}
</div>


<!-- responsiveness
================================================== -->
<div class="fu-docs-section">
  <h1 id="fueluxrepsonsiveness" class="page-header">Responsiveness</h1>

  <h2>Small screen devices</h2>
  <p>Fuel UX does not contain any layout grids or page layout controls. Fuel UX controls with the exception of repeater (formerly Datagrid) will function and display correctly on 320px-wide devices. Depending on the number of columns, repeater will generally display correctly on devices with resolutions greater than 480px.</p>
</div>