CSS
Global CSS settings, including grid system, typography, code, tables, forms, buttons, images, helper classes, responsive utilities.
Global CSS settings, including grid system, typography, code, tables, forms, buttons, images, helper classes, responsive utilities.
Tron is totally based on Bootstrap which includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. For more information please visit Bootstrap Grid Documentation.
All HTML headings, <h1> through <h6>, are available. Create smaller, secondary text in any heading with a generic <small> tag or the .small class.
h1. Tron heading Secondary text |
h2. Tron heading Secondary text |
h3. Tron heading Secondary text |
h4. Tron heading Secondary text |
h5. Tron heading Secondary text |
h6. Tron heading Secondary text |
<h1>h1. Tron heading <small>Secondary text</small></h1>
<h2>h2. Tron heading <small>Secondary text</small></h2>
<h3>h3. Tron heading <small>Secondary text</small></h3>
<h4>h4. Tron heading <small>Secondary text</small></h4>
<h5>h5. Tron heading <small>Secondary text</small></h5>
<h6>h6. Tron heading <small>Secondary text</small></h6>
Tron global default font-size is 16px, with a line-heightof 1.5. This is applied to the <body>and all paragraphs. Paragraphs <p> also have a bottom margin of half their computed line-height (24px by default).
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>
Make a paragraph stand out by adding .lead class to it.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>
The typographic scale is based on two Less variables in variables.less: @font-size-baseand @line-height-base.
You have two options: use HTML tag <small> or an inline element with class .small.
This is an example of smaller font-size.
<small>This is an example of smaller font-size.</small>
<p class="samll">This is an example of smaller font-size.</p>
For emphasizing a snippet of text with a heavier font-weight.
The following snippet of text is rendered as bold text.
<strong>rendered as bold text</strong>
For emphasizing a snippet of text with italics.
The following snippet of text is rendered as italicized text.
<em>rendered as italicized text</em>
Easily align text with text alignment classes.
Left aligned text.
Center aligned text.
Right aligned text.
Justified text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex molestiae ab maxime, necessitatibus, nobis, aliquid similique natus odit commodi doloremque culpa omnis laudantium tempora autem voluptates quas aspernatur temporibus quam!
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
We did not change anything here. Please read official Bootstrap Documentation for Abbreviations and for Addresses.
For quoting blocks of content from another source within your document.
Wrap <blockquote> around <p> element.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid libero, sit dignissimos exercitationem nisi explicabo fuga!
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in Source Title</footer>
</blockquote>
We extended the default functionality of Bootstrap blockquotes and added social media share option on hover. Check it yourself just hover over blockquote below. Add .shareable class to <blockquote>.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid libero, sit dignissimos exercitationem nisi explicabo fuga!
<blockquote class="shareable">
<a href="#" class="share-btn"><i class="fa fa-twitter"></i></a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in Source Title</footer>
</blockquote>
Add .blockquote-reverse for a blockquote with right-aligned content.
<blockquote class="blockquote-reverse">
...
</blockquote>
Make sure you wrapped text inside <li> with <span> or with <a> if it is a link. Otherwise the text will be same color as bullets.
<ul>
<li><span>...</span></li>
</ul>
<ol>
<li>...</li>
</ol>
Remove the default list-style and left margin on list items.
<ul class="list-unstyled">
<li>...</li>
</ul>
Place all list items on a single line.
<ul class="list-inline">
<li>...</li>
</ul>
A list of terms with their associated descriptions.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
We did not change anything here. Please read official Bootstrap Documentation for Code styling.
For basic styling with and only horizontal dividers—add the base class .table to any <table>.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | |
| 2 | Jacob | Thornton | |
| 3 | Larry | the Bird |
<table class="table">
...
</table>
Use .table-striped to add zebra-striping to any table row within the <tbody>.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | |
| 2 | Jacob | Thornton | |
| 3 | Larry | the Bird |
<table class="table table-striped">
...
</table>
Add .table-bordered for borders on all sides of the table and cells.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | |
| Mark | Otto | ||
| 2 | Jacob | Thornton | |
| 3 | Larry the Bird | ||
<table class="table table-bordered">
...
</table>
Add .table-hover to enable a hover state on table rows within a <tbody>.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | |
| 2 | Jacob | Thornton | |
| 3 | Larry | the Bird |
<table class="table table-hover">
...
</table>
Add .table-condensed to make tables more compact by cutting cell padding in half.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | |
| 2 | Jacob | Thornton | |
| 3 | Larry the Bird | ||
<table class="table table-condensed">
...
</table>
Use contextual classes: .active, .primary, .success, .info, .warning, .danger to color table rows or individual cells.
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Active row | Column content | Column content |
| 2 | Normal row | Column content | Column content |
| 3 | Primary row | Column content | Column content |
| 4 | Success row | Column content | Column content |
| 5 | Info row | Column content | Column content |
| 6 | Warning row | Column content | Column content |
| 7 | Danger row | Column content | Column content |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="primary">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="primary">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally up to small devices (under 768px).
| # | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| # | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div><
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile" class="custom-file-input btn-default btn-sm">
<input type="file" id="exampleInputFile">
Choose file
</label>
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox">Check me out
</label>
</div>
</div>
<div class="form-group"><button type="submit" class="btn btn-primary">Submit</button></div>
</form>
Add .form-inline to your <form> for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.
Requires custom widths.Inputs, selects, and textareas are 100% wide by default in Tron. To use the inline form, you'll have to set a width on the form controls used within.
Always add labels. Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-onlyclass.
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox">Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
<input type="text" class="form-control" placeholder="Text input">
Change rows attribute to control the height of textarea.
<textarea class="form-control" rows="5"></textarea>
<div class="checkbox">
<label>
<input type="checkbox" value="">Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Option two can be something else and selecting it will deselect option one
</label>
</div>
Use the .checkbox-inline or .radio-inline classes for controls that appear on the same line.
<form role="form">
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1" checked>1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2">2
</label>
<label class="checkbox-inline" style="margin-right: 20px;">
<input type="checkbox" id="inlineCheckbox3" value="option3">3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadio" id="inlineRadio1" value="option1" checked>1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadio" id="inlineRadio2" value="option2">2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadio" id="inlineRadio3" value="option3">3
</label>
</form>
<form role="form">
<select class="form-select">
<option>Australia</option>
<option>Brasil</option>
<option>Canada</option>
<option>......</option>
</select>
</form>
Add data-live-search="true" attribute to <select>.
<form role="form">
<select class="form-select" data-live-search="true">
<option>Australia</option>
<option>Brasil</option>
<option>Canada</option>
<option>......</option>
</select>
</form>
Using the title attribute on a multiple select will show the default prompt text when nothing is selected
<form role="form">
<select class="form-select" multiple title='Choose your countries...'>
<option>Australia</option>
<option>Brasil</option>
<option>Canada</option>
<option>......</option>
</select>
</form>
Insert custom HTML into the option with the data-content attribute
<form role="form">
<select class="form-select">
<option data-content="<span class='label label-primary'>Primary</span>">Primary</option>
<option data-content="<span class='label label-success'>Success</span>">Success</option>
<option data-content="<span class='label label-info'>Info</span>">Info</option>
<option data-content="<span class='label label-warning'>Warning</span>">Warning</option>
<option data-content="<span class='label label-danger'>Danger</span>">Danger</option>
</select>
</form>
When you need to place plain text next to a form label within a horizontal form, use the .form-control-static class on a <p>.
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static"></p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
Add the disabled attribute on an input to prevent user input and generate a different look.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here" disabled>
<textarea class="form-control" id="disabledTextarea" placeholder="Disabled textarea here" disabled></textarea>
<textarea class="form-control" id="disabledTextarea" placeholder="Disabled textarea here" disabled></textarea>
Make sure you add .disabled class to .checkbox and disabled attribute to input.
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>Disabled checkbox
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" checked disabled>Checked disabled checkbox
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" value="" disabled>Disabled radio
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" value="" checked disabled>Checked disabled radio
</label>
</div>
Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-successto the parent element. Any .control-label, .form-control, and .help-blockwithin that element will receive the validation styles.
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="form-group has-success">
<label class="control-label" for="selectSuccess">Select with success</label>
<select class="form-select" id="selectSuccess">
<option value="">Select with success</option>
</select>
</div>
<div class="form-group has-warning">
<label class="control-label" for="selectWarning">Select with warning</label>
<select class="form-select" id="selectWarning">
<option value="">Select with warning</option>
</select>
</div>
<div class="form-group has-error">
<label class="control-label" for="selectError">Select with error</label>
<select class="form-select" id="selectError">
<option value="">Select with error</option>
</select>
</div>
You can also add optional feedback icons with the addition of an extra class and the right icon.
<div class="form-group has-success">
<label class="control-label" for="inputSuccess2">Input with success</label>
<div class="has-feedback">
<input type="text" class="form-control" id="inputSuccess2">
<span class="fa fa-check-circle form-control-feedback"></span>
</div>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning2">Input with warning</label>
<div class="has-feedback">
<input type="text" class="form-control" id="inputWarning2">
<span class="fa fa-exclamation-circle form-control-feedback"></span>
</div>
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError2">Input with error</label>
<div class="has-feedback">
<input type="text" class="form-control" id="inputError2">
<span class="fa fa-minus-circle form-control-feedback"></span>
</div>
</div>
Optional icons also work on horizontal and inline forms.
<div class="form-group has-success">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9 has-feedback">
<input type="text" class="form-control" id="inputSuccess3">
<span class="fa fa-check-circle form-control-feedback"></span>
</div>
</div>
Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.
Create taller or shorter form controls that match button sizes.
<!-- Large input -->
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<!-- Large input -->
<input type="text" class="form-control" placeholder="Default input">
<!-- Small input -->
<input class="form-control input-sm" type="text" placeholder=".input-sm">
Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>
<!-- Default button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Primary button -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Success button -->
<button type="button" class="btn btn-success">Success</button>
<!-- Info Button -->
<button type="button" class="btn btn-info">Info</button>
<!-- Warning button -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Danger button -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Link button -->
<button type="button" class="btn btn-link">Link</button>
<!-- Outlined Default button -->
<button type="button" class="btn-outlined btn-default">Default</button>
<!-- Outlined Primary button -->
<button type="button" class="btn-outlined btn-primary">Primary</button>
<!-- Outlined Success button -->
<button type="button" class="btn-outlined btn-success">Success</button>
<!-- Outlined Info Button -->
<button type="button" class="btn-outlined btn-info">Info</button>
<!-- Outlined Warning button -->
<button type="button" class="btn-outlined btn-warning">Warning</button>
<!-- Outlined Danger button -->
<button type="button" class="btn-outlined btn-danger">Danger</button>
Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn-outlined btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn-outlined btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn-outlined btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn-outlined btn-default btn-xs">Extra small button</button>
</p>
Create block level buttons—those that span the full width of a parent— by adding .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn-outlined btn-default btn-lg btn-block">Block level button</button>
Make buttons look unclickable by making them 50% transparent.
Add the disabled attribute to <button> or .disabled class to <a> buttons.
<button type="button" class="btn btn-primary btn-lg" disabled="disabled">Primary button</button>
<button type="button" class="btn-outlined btn-default btn-lg disabled">Anchor Button</button>
Use the button classes on an <a>, <button>, or <input> element.
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
Like in Bootstrap in Tron images can be made responsive via the addition of the .img-responsive class. Images become scaling nicely to the parent element.
<img src="..." class="img-responsive" alt="Responsive image">
Add classes to an <img> element to style images.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
Emphasize meaning through color with different color classes. These may also be applied to links and will lighten on hover.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
Similar to the contextual text color classes. Links will darken on hover.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
Use the generic close icon for dismissing content like modals and alerts.
<button type="button" class="close" aria-hidden="true">×</button>
<button type="button" class="close primary" aria-hidden="true">×</button>
<button type="button" class="close success" aria-hidden="true">×</button>
<button type="button" class="close info" aria-hidden="true">×</button>
<button type="button" class="close warning" aria-hidden="true">×</button>
<button type="button" class="close danger" aria-hidden="true">×</button>
<button type="button" class="close circle default" aria-hidden="true">×</button>
<button type="button" class="close circle primary" aria-hidden="true">×</button>
<button type="button" class="close circle success" aria-hidden="true">×</button>
<button type="button" class="close circle info" aria-hidden="true">×</button>
<button type="button" class="close circle warning" aria-hidden="true">×</button>
<button type="button" class="close circle danger" aria-hidden="true">×</button>
There is no need to repeat what has been already said. We did not change other classes. So please see additional Boostrap helper classes by following the links below:
As you already know Tron totally based on Bootstrap framework. So it inherits all responsive utility classes from it. For more info regarding responsive utilities please visit relevant section of Bootstrap Documentation.
Tron's CSS is built on Less. Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.
For more information visit LESS official website.
For compiling LESS file into CSS we used software called "Prepros". Visit it's website at http://alphapixels.com/prepros/. Basic version is completely free and available for Mac and Windows.
As seen in the screenshot above your final step will be compiling tron-ui.less file since it includes all other .less files by means of @import.
Tron inherits the file organization and structure from Bootstrap. So please feel free to check official Bootstrap documentation regarding using Less. When you get familiar with it you'll find it easy to customize Tron files as well.
Tron is mainly based on Bootstrap variables plus it has own variables. They are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or sizes. All variables are gathered in variable.less file.
: #333;
@gray-dark: #4c4c4c;
@gray: #666;
@gray-light: #999;
@gray-lighter: #f5f5f5;
@brand-primary: #abbdd1;
@brand-success: #44c456;
@brand-info: #626d83;
@brand-warning: #c2c444;
@brand-danger: #db6e79;
Variables for quickly customizing key elements of your site's skeleton.
// Scaffolding
@body-bg: #fff;
@text-color: @gray-dark;
// Variables
@link-color: darken(@brand-primary, 5%);
@link-hover-color: lighten(@brand-primary, 5%);
//Usage
a {
color: @link-color;
font-weight: bold;
text-decoration: none;
border-bottom: 1px solid transparent;
.transition(color, 0.3s);
&:hover,
&:focus {
color: @link-hover-color;
text-decoration: none;
outline: none;
}
}
For setting typefase, font size, line height, etc.
@font-family-sans-serif: "Open Sans", Helvetica, Arial, sans-serif;
@font-family-base: @font-family-sans-serif;
@font-size-base: 16px;
@font-size-large: ceil((@font-size-base * 1.125)); // 18px
@font-size-small: ceil((@font-size-base * 0.875)); // 14px
@font-size-h1: floor((@font-size-base * 2.25)); // 36px
@font-size-h2: floor((@font-size-base * 1.875)); // 30px
@font-size-h3: ceil((@font-size-base * 1.5)); // 24px
@font-size-h4: ceil((@font-size-base * 1.125)); // 18px
@font-size-h5: @font-size-base; // 16px
@font-size-h6: ceil((@font-size-base * 0.875)); // 14px
@headings-line-height: 1.1;
@headings-color: @text-color;
@line-height-base: 1.5; // 24/16
@line-height-computed: floor((@font-size-base * @line-height-base)); // 24px
@list-style-color: @brand-danger;
Tron supports all modern browser. We intentionally decided to drop IE8 support and instead included plugin that detects old IE (<IE9) and inform useers that they have outdated browser and link to update it. Try it yourself. Load Tron using IE8 or older.
Tron fully supports IE9 (exept for some CSS3 features like transitions and transforms) but here comes another limitation. As you can check the compiled CSS file is quite big because Tron includes all Bootstrap features and also extra components. And IE9 has following limitations:
So if your stylesheet has more than 4095 rules IE9 simply ignore the excess rules and your layout will be broken. Below are simple steps to avoid the problem:
Update your browser to view this website correctly. Update my browser now