Documentation

What is Se7en?

Se7en is a fully responsive admin template. We employ stunning design, the latest technologies and industry best practices to create a one of kind administration template suitable for many needs.

Features
  • Built with Bootstrap 3
  • 100% Mobile ready & responsive layout
  • Valid HTML5 and CSS3
  • Retina ready
  • Clean and sleek design
  • Cross-browser compatible (Chrome/Safari/Firefox/IE8+)
  • SASS and Coffeescript ready
  • Clean developer friendly markup
  • Image gallery
  • Custom buttons and colors
Bootstrap 3

Se7en comes fully packed with all the awesomeness of Bootstrap 3. We've included all the latest CSS and JS for your pleasure. For all info on how to use Bootstrap 3's CSS and components, please visit the Boostrap 3 Official Documentation.

Widget Container
<div class="widget-container">
  <div class="heading">
    <i class="fa fa-question"></i>Widget Name
  </div>
  <div class="widget-content">
    <p>
      This is content for this widget
    </p>
  </div>
</div>

Icons

Custom Se7en Icons

The icons used for the main navigation have been custom created and implemented using a custom built font. Our icons can be used on any page by calling them with our pre-built syntax.

<span aria-hidden='true' class='se7en-icon-name'></span>

These are all the included se7en icons:



They can also be scaled infinitely and changed to any color directly in the css.

Font Awesome 4 Icons

We've included the latest Font Awesome 4 icons, which includes over 369 icons. To place a Font Awesome icon, simply use this class:

<span class='fa fa-'></span>

For example:

<span class='fa fa-home'></span>

For more information on how to use their icons, visit Font Awesome.

Glyphicons

We've also included 180 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost.

To use a Font Awesome icon, simply use this class:

<span class='glyphicon glyphicon-'></span>

For example:

<span class='glyphicon glyphicon-user'></span>

For more information on how to use Glyphicons, visit Bootstrap's Documentation.

Javascript Components

Basic bar chart

$('.sparkline').sparkline([160, 220, 260, 120, 320, 260, 300, 160, 240, 100], {type: 'bar', height: 50, barSpacing: 4, barWidth: 8, barColor: '#f5af50'});

Basic line graph

$('.sparkline').sparkline([160, 240, 250, 280, 300, 250, 230, 200, 280, 380], {type: 'line', width: '150', height: '50', lineColor: '#a5e1ff', fillColor: 'rgba(241, 251, 255, 0.9)', lineWidth: 2 });

Pie chart

$('.sparkline').sparkline([2, 8, 6, 10], { type: 'pie', height: '120', width: '120', sliceColors: ['#a0eeed','#81e970','#f5af50','#f46f50'] });
Easy Pie ChartFull documentation
70%
$('.easy-pie-chart').easyPieChart({ size: 120, lineWidth: 10, lineCap: 'square', barColor: '#81e970', animate: 800, scaleColor: false });

* Requires excanvas.min.js for IE8 support.

var skycons = new Skycons({'color': 'black'});

You can add a canvas by it's ID

skycons.add('icon1', Skycons.PARTLY_CLOUDY_DAY);

Or by the canvas DOM element itself

skycons.add(document.getElementById('icon1'), Skycons.RAIN);

Start animation!

skycons.play();
jQuery UI SliderFull documentation
$('.slider').slider({range: 'min', value: 50});
Ladda ButtonsFull documentation
<button class='btn ladda-button' data-style='expand-left'><span class='ladda-label'>Expand left</span></button>
<button class='btn ladda-button' data-style='expand-right'><span class='ladda-label'>Expand left</span></button>
<button class='btn ladda-button progress-demo' data-style='expand-right'><span class='ladda-label'>Progress left</span></button>
Other Javascript Components

Form Components

Select2 DropdownsFull documentation
$('.select2').select2();
Typeahead (Autocomplete)Full documentation


$('.states.typeahead').typeahead({ name: 'states', local: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']});
Toggle SwitchesFull documentation


<div class="toggle-switch switch-large">
  <input checked="" type="checkbox">
</div>
<div class="toggle-switch">
  <input checked="" type="checkbox">
</div>
<div class="toggle-switch switch-small">
  <input checked="" type="checkbox">
</div>
<div class="toggle-switch switch-mini">
  <input checked="" type="checkbox">
</div>

Switch colors



<div class="toggle-switch" data-off="info" data-on="primary">
  <input checked="" type="checkbox">
</div>
<div class="toggle-switch" data-off="success" data-on="info">
  <input checked="" type="checkbox">
</div>
<div class="toggle-switch" data-off="warning" data-on="success">
  <input checked="" type="checkbox">
</div>
<div class="toggle-switch" data-off="danger" data-on="warning">
  <input checked="" type="checkbox">
</div>
<div class="toggle-switch" data-off="default" data-on="danger">
  <input checked="" type="checkbox">
</div>
<div class="toggle-switch" data-off="primary" data-on="default">
  <input checked="" type="checkbox">
</div>

Different labels



<div class='toggle-switch text-toggle-switch' data-off-label='GOODBYE' data-on='primary' data-on-label='HELLO' style='width:200px;'><input type='checkbox' checked></div>
ValidationFull documentation
$('#validate-form').validate({ rules: {firstname: 'required'});
Date PickerFull documentation
$('.datepicker').datepicker();

To autoclose date picker

<div class='date datepicker' data-date-autoclose='true' data-date-format='dd-mm-yyyy'>

To start with the year

<div class='input-group date datepicker' data-date-autoclose='true' data-date-format='dd.mm.yyyy' data-date-start-view='2'>
Time PickerFull documentation

Default

$('#timepicker-default').timepicker();

24 Hour

$('#timepicker-default').timepicker({ minuteStep: 1, showSeconds: true, showMeridian: false });

No dropdown

$('#timepicker-default').timepicker({ template: false, showInputs: false, minuteStep: 5 });
Color PickerFull documentation

Default

$('#colorpicker1').colorpicker();

RGBA Value

$('#colorpicker2').colorpicker({ format: 'hex' });

As a component

$('#colorpicker3').colorpicker();
Input MasksFull documentation

Define your masks in your javascript

$('#date').inputmask('d/m/y');
$('#phone').inputmask('mask', {'mask': '(999) 999-9999'});
$('#tin').inputmask({'mask': '99-9999999'});

Or in your html

<div>
  <input data-inputmask="'alias': 'date'">
</div>
<div>
  <input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false">
</div>
<div>
  <input data-inputmask="'mask': '99-9999999'">
</div>

Then initialize the plugin in your javascript

$(':input').inputmask();
File UploadFull documentation
RemoveSelect fileChange
Select fileChange
Select imageChangeRemove
$('.fileupload').fileupload();

Credits