Overview
The Alpha UI Framework is a premium Web Application Admin Dashboard built on top of MaterializeCSS Framework. It was created to be the most functional, clean and well designed theme for any types of backend applications. We have carefully designed all common elements.
We love when all updates are free. Once you’ve purchased Alpha, you’ll be able to download all future updates. If you like our theme don’t forget to rate us five stars. Good rating provides more and better updates in future!
If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Thanks so much!
We love when all updates are free. Once you’ve purchased Alpha, you’ll be able to download all future updates. If you like our theme don’t forget to rate us five stars. Good rating provides more and better updates in future!
If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Thanks so much!
Folder Structure
List of folders in Alpha download
Documentation/
└── assets/
├── css/
├── js/
└── plugins/
source/
└── assets/
├── css/
├── images/
├── js/
└── plugins/
HTML Structure
Page Head
<head>
<!-- Title -->
<title>Alpha | Responsive Admin Dashboard Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8">
<meta name="description" content="Responsive Admin Dashboard Template" />
<meta name="keywords" content="admin,dashboard" />
<meta name="author" content="Steelcoders" />
<!-- Styles -->
<link type="text/css" rel="stylesheet" href="assets/plugins/materialize/css/materialize.min.css"/>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="assets/plugins/material-preloader/css/materialPreloader.min.css" rel="stylesheet">
<!-- Theme Styles -->
<link href="assets/css/alpha.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/custom.css" rel="stylesheet" type="text/css"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
Page Body
<body>
<div class="loader">
<div class="preloader-wrapper big active">
<div class="spinner-layer spinner-blue">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-spinner-teal lighten-1">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-yellow">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-green">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
<div class="mn-content fixed-sidebar">
<header class="mn-header navbar-fixed">
<nav class="teal lighten-1">
<div class="nav-wrapper row">
<section class="material-design-hamburger navigation-toggle">
<a href="#" data-activates="slide-out" class="button-collapse show-on-large material-design-hamburger__icon">
<span class="material-design-hamburger__layer"></span>
</a>
</section>
<div class="header-title col s3">
<span class="chapter-title">Alpha</span>
</div>
<form class="left search col s6 hide-on-small-and-down">
<div class="input-field">
<input id="search" type="search" placeholder="Search" autocomplete="off">
<label for="search"><i class="material-icons search-icon">search</i></label>
</div>
<a href="javascript: void(0)" class="close-search"><i class="material-icons">close</i></a>
</form>
<ul class="right col s9 m3 nav-right-menu">
<li><a href="javascript:void(0)" data-activates="chat-sidebar" class="chat-button show-on-large"><i class="material-icons">more_vert</i></a></li>
<li class="hide-on-small-and-down"><a href="javascript:void(0)" data-activates="dropdown1" class="dropdown-button dropdown-right show-on-large"><i class="material-icons">notifications_none</i><span class="badge">4</span></a></li>
<li class="hide-on-med-and-up"><a href="javascript:void(0)" class="search-toggle"><i class="material-icons">search</i></a></li>
</ul>
<ul id="dropdown1" class="dropdown-content notifications-dropdown">
<li class="notificatoins-dropdown-container">
<ul>
<li class="notification-drop-title">Today</li>
<li>
<a href="#!">
<div class="notification">
<div class="notification-icon circle cyan"><i class="material-icons">done</i></div>
<div class="notification-text">
<p><b>Alan Grey</b> uploaded new theme</p>
<span>7 min ago</span>
</div>
</div>
</a>
</li>
<li>
<a href="#!">
<div class="notification">
<div class="notification-icon circle deep-purple"><i class="material-icons">cached</i></div>
<div class="notification-text">
<p><b>Tom</b> updated status</p>
<span>14 min ago</span>
</div>
</div>
</a>
</li>
<li>
<a href="#!">
<div class="notification">
<div class="notification-icon circle red"><i class="material-icons">delete</i></div>
<div class="notification-text">
<p><b>Amily Lee</b> deleted account</p>
<span>28 min ago</span>
</div>
</div>
</a>
</li>
<li>
<a href="#!">
<div class="notification">
<div class="notification-icon circle cyan"><i class="material-icons">person_add</i></div>
<div class="notification-text">
<p><b>Tom Simpson</b> registered</p>
<span>2 hrs ago</span>
</div>
</div>
</a>
</li>
<li>
<a href="#!">
<div class="notification">
<div class="notification-icon circle green"><i class="material-icons">file_upload</i></div>
<div class="notification-text">
<p>Finished uploading files</p>
<span>4 hrs ago</span>
</div>
</div>
</a>
</li>
<li class="notification-drop-title">Yestarday</li>
<li>
<a href="#!">
<div class="notification">
<div class="notification-icon circle green"><i class="material-icons">security</i></div>
<div class="notification-text">
<p>Security issues fixed</p>
<span>16 hrs ago</span>
</div>
</div>
</a>
</li>
<li>
<a href="#!">
<div class="notification">
<div class="notification-icon circle indigo"><i class="material-icons">file_download</i></div>
<div class="notification-text">
<p>Finished downloading files</p>
<span>22 hrs ago</span>
</div>
</div>
</a>
</li>
<li>
<a href="#!">
<div class="notification">
<div class="notification-icon circle cyan"><i class="material-icons">code</i></div>
<div class="notification-text">
<p>Code changes were saved</p>
<span>1 day ago</span>
</div>
</div>
</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<div class="search-results">
<div class="container search-container">
<div class="row">
<div class="col s12 search-head">
<div class="row">
<div class="col s12">
<div class="left">
<p class="search-results-title">Quick search results</p>
<p class="search-filter left">
<input type="checkbox" class="filled-in" id="filled-in-box" checked/>
<label for="filled-in-box">Google search</label>
</p>
</div>
</div>
</div>
<div class="res-not-found">No results found</div>
</div>
<div class="col s12 m4 search-result-container">
<div class="card card-transparent">
<div class="row valign-wrapper">
<div class="col s3">
<img src="assets/images/profile-image-1.png" alt="" class="circle responsive-img z-depth-1">
</div>
<div class="col s9">
<span class="search-result-text">
Search <span class="search-text search-result-highlight"></span><br><span class="secondary-search-text">Last active 2 days ago</span>
</span>
</div>
</div>
</div>
<div class="card card-transparent">
<div class="row valign-wrapper">
<div class="col s3">
<img src="assets/images/profile-image-3.jpg" alt="" class="circle responsive-img z-depth-1">
</div>
<div class="col s9">
<span class="search-result-text">
News about <span class="search-text search-result-highlight"></span><br><span class="secondary-search-text">23 Blogs</span>
</span>
</div>
</div>
</div>
<div class="card card-transparent">
<div class="row valign-wrapper">
<div class="col s3">
<img src="assets/images/profile-image.png" alt="" class="circle responsive-img z-depth-1">
</div>
<div class="col s9">
<span class="search-result-text">
Tom King (Works at <span class="search-text search-result-highlight"></span>)<br><span class="secondary-search-text">Avaible for freelance work</span>
</span>
</div>
</div>
</div>
</div>
<div class="col s12 m4 search-result-container">
<div class="card card-transparent ">
<div class="row valign-wrapper">
<div class="col s3">
<span class="z-depth-1 circle search-circle indigo lighten-1">F</span>
</div>
<div class="col s9">
<span class="search-result-text">
<span class="search-text search-result-highlight"></span> on Facebook<br><span class="secondary-search-text"><a href="#">View website</a></span>
</span>
</div>
</div>
</div>
<div class="card card-transparent">
<div class="row valign-wrapper">
<div class="col s3">
<span class="z-depth-1 circle search-circle light-blue lighten-1">T</span>
</div>
<div class="col s9">
<span class="search-result-text">
<span class="search-text search-result-highlight"></span> on Twitter<br><span class="secondary-search-text"><a href="#">View website</a></span>
</span>
</div>
</div>
</div>
<div class="card card-transparent">
<div class="row valign-wrapper">
<div class="col s3">
<span class="z-depth-1 circle search-circle red darken-1">G</span>
</div>
<div class="col s9">
<span class="search-result-text">
Google+ <span class="search-text search-result-highlight"></span><br><span class="secondary-search-text"><a href="#">View website</a></span>
</span>
</div>
</div>
</div>
</div>
<div class="col s12 m4 search-result-container">
<div class="card card-transparent">
<div class="card-content first">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sunt in culpa qui<span class="search-text search-result-highlight"></span> quis.</p>
</div>
<div class="card-action">
<span class="grey-text">Yesterday, 4:56 PM</span>
</div>
</div>
<div class="card card-transparent">
<div class="card-content">
<p>Sunt in culpa qui <span class="search-text search-result-highlight"></span> officia deserunt mollit anim id est laborum. officia deserunt mollit anim id est laborum officia deserunt mollit anim</p>
</div>
<div class="card-action">
<span class="grey-text">27 January 2016</span>
</div>
</div>
</div>
</div>
</div>
</div>
<aside id="chat-sidebar" class="side-nav white">
<div class="side-nav-wrapper">
<div class="col s12">
<ul class="tabs tab-demo" style="width: 100%;">
<li class="tab col s3"><a href="#sidebar-chat-tab" class="active">chat</a></li>
<li class="tab col s3"><a href="#sidebar-more-tab">settings</a></li>
</ul>
</div>
<div id="sidebar-chat-tab" class="col s12 sidebar-messages right-sidebar-panel">
<p class="right-sidebar-heading">CHAT LIST</p>
<div class="chat-list">
<a href="javascript:void(0)" class="chat-message">
<div class="chat-item">
<div class="chat-item-image">
<img src="assets/images/profile-image.png" class="circle" alt="">
</div>
<div class="chat-item-info">
<p class="chat-name">John Doe</p>
<span class="chat-message">Hello</span>
</div>
</div>
</a>
<a href="javascript:void(0)" class="chat-message">
<div class="chat-item">
<div class="chat-item-image">
<img src="assets/images/profile-image-1.png" class="circle" alt="">
</div>
<div class="chat-item-info">
<p class="chat-name">Tom Simpson</p>
<span class="chat-message">How are you?</span>
</div>
</div>
</a>
<a href="javascript:void(0)" class="chat-message">
<div class="chat-item">
<div class="chat-item-image">
<img src="assets/images/profile-image-3.jpg" class="circle" alt="">
</div>
<div class="chat-item-info">
<p class="chat-name">Alan Grey</p>
<span class="chat-message">Call me later</span>
</div>
</div>
</a>
<a href="javascript:void(0)" class="chat-message">
<div class="chat-item">
<div class="chat-item-image">
<img src="assets/images/profile-image.png" class="circle" alt="">
</div>
<div class="chat-item-info">
<p class="chat-name">Michael Fisher</p>
<span class="chat-message">How's it going?</span>
</div>
</div>
</a>
<a href="javascript:void(0)" class="chat-message">
<div class="chat-item">
<div class="chat-item-image">
<img src="assets/images/profile-image-1.png" class="circle" alt="">
</div>
<div class="chat-item-info">
<p class="chat-name">Amily Lee</p>
<span class="chat-message">We're good</span>
</div>
</div>
</a>
<a href="javascript:void(0)" class="chat-message">
<div class="chat-item">
<div class="chat-item-image">
<img src="assets/images/profile-image.png" class="circle" alt="">
</div>
<div class="chat-item-info">
<p class="chat-name">Sandra Smith</p>
<span class="chat-message">See you later!</span>
</div>
</div>
</a>
<a href="javascript:void(0)" class="chat-message">
<div class="chat-item">
<div class="chat-item-image">
<img src="assets/images/profile-image-3.jpg" class="circle" alt="">
</div>
<div class="chat-item-info">
<p class="chat-name">Sandra Smith</p>
<span class="chat-message">Can we meet?</span>
</div>
</div>
</a>
</div>
<div class="chat-sidebar-options">
<a href="#" class="left"><i class="material-icons">edit</i></a>
<a href="#" class="right"><i class="material-icons">settings</i></a>
</div>
</div>
<div id="sidebar-more-tab" class="col s12 sidebar-more right-sidebar-panel">
<p class="right-sidebar-heading">SYSTEM</p>
<div class="settings-list">
<div class="setting-item">
<div class="setting-text">Notifications</div>
<div class="setting-set">
<div class="switch">
<label>
<input type="checkbox" checked>
<span class="lever"></span>
</label>
</div>
</div>
</div>
<div class="setting-item">
<div class="setting-text">Quick Results</div>
<div class="setting-set">
<div class="switch">
<label>
<input type="checkbox" checked>
<span class="lever"></span>
</label>
</div>
</div>
</div>
<div class="setting-item">
<div class="setting-text">Auto Updates</div>
<div class="setting-set">
<div class="switch">
<label>
<input type="checkbox">
<span class="lever"></span>
</label>
</div>
</div>
</div>
</div>
<p class="right-sidebar-heading">ACCOUNT</p>
<div class="settings-list">
<div class="setting-item">
<div class="setting-text">Offline Mode</div>
<div class="setting-set">
<div class="switch">
<label>
<input type="checkbox">
<span class="lever"></span>
</label>
</div>
</div>
</div>
<div class="setting-item">
<div class="setting-text">Location</div>
<div class="setting-set">
<div class="switch">
<label>
<input type="checkbox">
<span class="lever"></span>
</label>
</div>
</div>
</div>
<div class="setting-item">
<div class="setting-text">Show Offline Users</div>
<div class="setting-set">
<div class="switch">
<label>
<input type="checkbox">
<span class="lever"></span>
</label>
</div>
</div>
</div>
<div class="setting-item">
<div class="setting-text">Save History</div>
<div class="setting-set">
<div class="switch">
<label>
<input type="checkbox">
<span class="lever"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</aside>
<aside id="chat-messages" class="side-nav white">
<p class="sidebar-chat-name">Tom Simpson<a href="#" data-activates="chat-messages" class="chat-message-link"><i class="material-icons">keyboard_arrow_right</i></a></p>
<div class="messages-container">
<div class="message-wrapper them">
<div class="circle-wrapper"><img src="assets/images/profile-image-1.png" class="circle" alt=""></div>
<div class="text-wrapper">Lorem Ipsum</div>
</div>
<div class="message-wrapper me">
<div class="circle-wrapper"><img src="assets/images/profile-image-3.jpg" class="circle" alt=""></div>
<div class="text-wrapper">Integer in faucibus diam?</div>
</div>
<div class="message-wrapper them">
<div class="circle-wrapper"><img src="assets/images/profile-image-1.png" class="circle" alt=""></div>
<div class="text-wrapper">Vivamus quis neque volutpat, hendrerit justo vitae, suscipit dui</div>
</div>
<div class="message-wrapper me">
<div class="circle-wrapper"><img src="assets/images/profile-image-3.jpg" class="circle" alt=""></div>
<div class="text-wrapper">Suspendisse condimentum tortor et lorem pretium</div>
</div>
<div class="message-wrapper them">
<div class="circle-wrapper"><img src="assets/images/profile-image-1.png" class="circle" alt=""></div>
<div class="text-wrapper">dolore eu fugiat nulla pariatur</div>
</div>
<div class="message-wrapper me">
<div class="circle-wrapper"><img src="assets/images/profile-image-3.jpg" class="circle" alt=""></div>
<div class="text-wrapper">Duis maximus leo eget massa porta</div>
</div>
</div>
<div class="message-compose-box">
<div class="input-field">
<input placeholder="Write message" id="message_compose" type="text">
</div>
</div>
</aside>
<aside id="slide-out" class="side-nav white fixed">
<div class="side-nav-wrapper">
<div class="sidebar-profile">
<div class="sidebar-profile-image">
<img src="assets/images/profile-image.png" class="circle" alt="">
</div>
<div class="sidebar-profile-info">
<a href="javascript:void(0);" class="account-settings-link">
<p>David Doe</p>
<span>david@gmail.com<i class="material-icons right">arrow_drop_down</i></span>
</a>
</div>
</div>
<div class="sidebar-account-settings">
<ul>
<li class="no-padding">
<a class="waves-effect waves-grey"><i class="material-icons">mail_outline</i>Inbox</a>
</li>
<li class="no-padding">
<a class="waves-effect waves-grey"><i class="material-icons">star_border</i>Starred<span class="new badge">18</span></a>
</li>
<li class="no-padding">
<a class="waves-effect waves-grey"><i class="material-icons">done</i>Sent Mail</a>
</li>
<li class="no-padding">
<a class="waves-effect waves-grey"><i class="material-icons">history</i>History<span class="new grey lighten-1 badge">3 new</span></a>
</li>
<li class="divider"></li>
<li class="no-padding">
<a class="waves-effect waves-grey"><i class="material-icons">exit_to_app</i>Sign Out</a>
</li>
</ul>
</div>
<ul class="sidebar-menu collapsible collapsible-accordion" data-collapsible="accordion">
<li class="no-padding"><a class="waves-effect waves-grey" href="index.html"><i class="material-icons">settings_input_svideo</i>Dashboard</a></li>
<li class="no-padding">
<a class="collapsible-header waves-effect waves-grey"><i class="material-icons">apps</i>Apps<i class="nav-drop-icon material-icons">keyboard_arrow_right</i></a>
<div class="collapsible-body">
<ul>
<li><a href="mailbox.html">Mailbox</a></li>
<li><a href="search.html">Search</a></li>
<li><a href="todo.html">Todo</a></li>
</ul>
</div>
</li>
<li class="no-padding">
<a class="collapsible-header waves-effect waves-grey"><i class="material-icons">code</i>Components<i class="nav-drop-icon material-icons">keyboard_arrow_right</i></a>
<div class="collapsible-body">
<ul>
<li><a href="ui-accordions.html">Accordion</a></li>
<li><a href="ui-badges.html">Badges</a></li>
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-typography.html">Typography</a></li>
<li><a href="ui-cards.html">Cards</a></li>
<li><a href="ui-chips.html">Chips</a></li>
<li><a href="ui-color.html">Color</a></li>
<li><a href="ui-collections.html">Collections</a></li>
<li><a href="ui-dropdown.html">Dropdown</a></li>
<li><a href="ui-dialogs.html">Dialogs</a></li>
<li><a href="ui-grid.html">Grid</a></li>
<li><a href="ui-helpers.html">Helpers</a></li>
<li><a href="ui-modals.html">Modals</a></li>
<li><a href="ui-media.html">Media</a></li>
<li><a href="ui-icons.html">Icons</a></li>
<li><a href="ui-preloader.html">Preloader</a></li>
<li><a href="ui-shadow.html">Shadow</a></li>
<li><a href="ui-tabs.html">Tabs</a></li>
<li><a href="ui-waves.html">Waves</a></li>
</ul>
</div>
</li>
<li class="no-padding active">
<a class="collapsible-header waves-effect waves-grey active"><i class="material-icons">desktop_windows</i>Layouts<i class="nav-drop-icon material-icons">keyboard_arrow_right</i></a>
<div class="collapsible-body">
<ul>
<li><a href="layout-blank.html" class="active-page">Blank Page</a></li>
<li><a href="layout-boxed.html">Boxed Layout</a></li>
<li><a href="layout-hidden-sidebar.html">Hidden Sidebar</a></li>
<li><a href="layout-right-sidebar.html">Right Sidebar</a></li>
</ul>
</div>
</li>
<li class="no-padding">
<a class="collapsible-header waves-effect waves-grey"><i class="material-icons">mode_edit</i>Forms<i class="nav-drop-icon material-icons">keyboard_arrow_right</i></a>
<div class="collapsible-body">
<ul>
<li><a href="form-elements.html">Form Elements</a></li>
<li><a href="form-wizard.html">Form Wizard</a></li>
<li><a href="form-upload.html">File Upload</a></li>
<li><a href="form-image-crop.html">Image Crop</a></li>
<li><a href="form-image-zoom.html">Image Zoom</a></li>
<li><a href="form-select2.html">Select2</a></li>
</ul>
</div>
</li>
<li class="no-padding">
<a class="collapsible-header waves-effect waves-grey"><i class="material-icons">grid_on</i>Tables<i class="nav-drop-icon material-icons">keyboard_arrow_right</i></a>
<div class="collapsible-body">
<ul>
<li><a href="table-static.html">Static Tables</a></li>
<li><a href="table-responsive.html">Responsive Tables</a></li>
<li><a href="table-data.html">Data Tables</a></li>
</ul>
</div>
</li>
<li class="no-padding"><a class="waves-effect waves-grey" href="charts.html"><i class="material-icons">trending_up</i>Charts</a></li>
<li class="no-padding">
<a class="collapsible-header waves-effect waves-grey"><i class="material-icons">my_location</i>Maps<i class="nav-drop-icon material-icons">keyboard_arrow_right</i></a>
<div class="collapsible-body">
<ul>
<li><a href="maps-google.html">Google Maps</a></li>
<li><a href="maps-vector.html">Vector Maps</a></li>
</ul>
</div>
</li>
<li class="no-padding">
<a class="collapsible-header waves-effect waves-grey"><i class="material-icons">tag_faces</i>Extra Pages<i class="nav-drop-icon material-icons">keyboard_arrow_right</i></a>
<div class="collapsible-body">
<ul>
<li><a href="404.html">404 Page</a></li>
<li><a href="500.html">500 Page</a></li>
<li><a href="invoice.html">Invoice</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="sign-in.html">Sign In</a></li>
<li><a href="sign-up.html">Sign Up</a></li>
<li><a href="lock-screen.html">Lock Screen</a></li>
<li><a href="pattern-lock-screen.html">Pattern Lock Screen</a></li>
<li><a href="forgot.html">Forgot Password</a></li>
<li><a href="pricing-tables.html">Pricing Tables</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="coming-soon.html">Coming Soon</a></li>
</ul>
</div>
</li>
</ul>
<div class="footer">
<p class="copyright">Steelcoders ©</p>
<a href="#!">Privacy</a> & <a href="#!">Terms</a>
</div>
</div>
</aside>
<main class="mn-inner">
<div class="row">
<div class="col s12">
<div class="page-title">Blank Page</div>
</div>
</div>
</main>
<div class="page-footer">
<div class="footer-grid container">
<div class="footer-l white"> </div>
<div class="footer-grid-l white">
<a class="footer-text" href="ui-waves.html">
<i class="material-icons arrow-l">arrow_back</i>
<span class="direction">Previous</span>
<div>
Waves
</div>
</a>
</div>
<div class="footer-r white"> </div>
<div class="footer-grid-r white">
<a class="footer-text" href="layout-boxed.html">
<i class="material-icons arrow-r">arrow_forward</i>
<span class="direction">Next</span>
<div>
Boxed Layout
</div>
</a>
</div>
</div>
</div>
</div>
<div class="left-sidebar-hover"></div>
<!-- Javascripts -->
<script src="assets/plugins/jquery/jquery-2.2.0.min.js"></script>
<script src="assets/plugins/materialize/js/materialize.min.js"></script>
<script src="assets/plugins/material-preloader/js/materialPreloader.min.js"></script>
<script src="assets/plugins/jquery-blockui/jquery.blockui.js"></script>
<script src="assets/js/alpha.min.js"></script>
</body>
Custom Code
All theme CSS files are located in
All Javascript files are located in
source/assets/css folder. For your CSS customization you can use source/assets/css/custom.css. Keep your custom CSS separate it makes more easier when updating the theme in future.All Javascript files are located in
source/assets/js/ folder. Also Page-level Javascript files are located in source/assets/js/pages/ folder and each page has its own Javascript file. For your Javascripts you can use source/assets/js/custom.js. Keep your custom Javascript separate it makes more easier when updating the theme in future.
Fonts
The standard font Material Design uses is Roboto. We have included the font files with our framework.
Font code example:
Note! Fonts must be loaded in HTML Head before theme css files.
Font code example:
<link href='http://fonts.googleapis.com/css?family=Material+Icons' rel='stylesheet' type='text/css'>Alpha also uses Material Design Icons.
Note! Fonts must be loaded in HTML Head before theme css files.
Colors
Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights. Material takes cues from contemporary architecture, road signs, pavement marking tape, and athletic courts. Color should be unexpected and vibrant.
This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other.
This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other.
CSS Utilities
| Property | Prefix | Second Prefix | Third Prefix | Suffix |
|---|---|---|---|---|
| Font Size | f | s | 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 24, 26, 28, 30, 32 | |
| Font Weight | f | thin, normal, bold | ||
| Box Shadow | bs | n, dark, light, t, r, b, l | ||
| Margin | m | t, r, b, l, n | n (only for negative values) | xxs, xs, sm, md, lg, xxl |
| Padding | p | v,h | xxs, xs, sm, md, lg, xxl |
Themes
You can change theme very easily, by replacing color class of
nav and search form. You can use any of 240+ colors from this color pallete. It's recomended using primary(without lighten/darken classes) colors for nav.
Right Sidebar
Alpha framework includes layout with right sidebar, to use it you have to add
right-sidebar-button class to .button-collapse button in nav on the line 79.
Boxed Layout
You can use boxed layout by adding
container class to .mn-inner.
Static Header
By default Alpha uses fixed header, but if you want to make it static, you have to remove
navbar-fixed class from .mn-header.
New Page
It's very easy to create new page with Alpha.
First of all you have to copy
If you will use component that needs some JS codes which are included in component demo page at the end of the HTML body tag, you can just include the same JS file. If you will use component that needs an extra plugin to work, you have to include files of this plugins as they are included in the demo page.
First of all you have to copy
layout-blank.html file and rename it as you want, then you have to choose layout and theme color and change them as explained previously. then you can start creating content of page, you can use all components that are shown in the demo of Alpha. Note, that all content should be placed in .mn-inner to fit the page correctly.If you will use component that needs some JS codes which are included in component demo page at the end of the HTML body tag, you can just include the same JS file. If you will use component that needs an extra plugin to work, you have to include files of this plugins as they are included in the demo page.
sources & Credits
Support
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.