====== m1 Template ======
---- template ----
description : Responsive, mobile-first template
author : EricH
email : ehowey@gmail.com
lastupdate : 2014-05-29
compatible : 2013-12-08,2014-05-05
depends :
conflicts : # prefix templates by template:
similar :
tags : responsive, mobile, fixedheader, flat, clean, minimal
downloadurl : https://github.com/ehowey/m1/archive/master.zip
bugtracker : https://github.com/ehowey/m1/issues
sourcerepo : https://github.com/ehowey/m1/
donationurl : # eg. https://www.paypal.com/...
screenshot_img: https://raw.githubusercontent.com/alexwenzel/m1/master/m1-ss.png
----
This is a responsive and mobile-first template built with a fixed header and flexible content. This template is still in development but is functional at this point. It is built off of the starter template and incorporates the [[http://www.berriart.com/sidr/|SIDR JQuery plugin]] and [[http://fontawesome.io/|Font Awesome Icons]]. In this release version it is setup for one main content panel and a sidebar on the right that appears at screen sizes greater than 900px. The breakpoints I am using for the content are: 480px, 768px, and 900px. I know the CSS code isn't perfect at this point, this is my first attempt at a template. Many thanks to all of the help files on this site and the dedicated developers for Dokuwiki.
===== Download and Install ======
Use the following URL to download this template:
* https://github.com/ehowey/m1/archive/master.zip
Refer to [[:template]] on how to install and use templates in DokuWiki.
===== Customizing the Template =====
I am writing this assuming you have some basic CSS/HTML knowledge. There are two main css files you will need to pay attention to; **m1-screen.css** is the main css file and has all of the style changes I made to the starter template, **m1-mobile.css** is the responsive css changes as the screen size increases. There is also another file called **sidr.css** which has all of the css for the side panels that display below 900px/768px.
Within the template itself there are a few main .php files to pay attention to:\\
**main.php:** Which has all of the basic php and html and includes the other necessary files in it. This is the framework for the template\\
==Google Analytics==
There is a Google-Analytics-Script in main.php. If you don't want it: You can remove it by deleting the script under the comment-line completely:
Content here
**m1-header.php:** This contains the html for the fixed header and for the tablet/desktop menus\\
**m1-mobilemenu.php:** This file contains the left and right slide panel menus that display when viewed on smaller screen sizes\\
**m1-sidebar-one.php:** This file contains the sidebar html that displays above 900px, by using an html file you have some more flexibility for what you display in the sidebar. It is still possible to just have the sidebar in a dokuwiki page which you can setup in the configuration settings for the template.\\
**m1-footer.php:** Footer information.\\
==== Sidebars ====
This template behaves a bit differently than your typical Dokuwiki template with respect to the sidebar and how it is setup. If you are using this template you will may need to tweak your sidebar setup. For examples of adding content to your sidebar see the file **m1-sidebar-one.php**. This .php file is automatically used to build the sidebar. The code in main.php for the sidebars looks like this:
Notice the order of the file inclusions and the default dokuwiki hooks. In the site configuration you can set a dokuwiki page to include BEFORE m1-sidebar-one.php. If you want to change the order just switch the order of the includes in the main.php file.
Currently the sidebar is set to have a minimum content width of 300px which is a typical sidebar width for any advertising, etc. You can adjust this easily in the CSS.
Note that the sidebar is designed with content blocks. Any content you add in should be wrapped in the following class "m1-sidebox". You can see this in action when you look at m1-sidebar-one.php.
==== Font Awesome ====
For information on using Font Awesome in the html/php environment see [[http://www.fontawesome.io]]. For using Font Awesome within the Dokuwiki syntax please see the [[plugin:fontawesome|fontawesome Plugin]]. Font Awesome is included in this template using this line of code:
Sidebar Title
==== Sidr/Mobile Menus ====
For the mobile menu I use a JQuery plugin called [[http://www.berriart.com/sidr/|Sidr]] which provides sliding panel menus reliant on JQuery. There is a fair amount of help information available on the Sidr website. I chose this plugin over others as it was simple, straightforward and well maintained. I am not convinced it is the best implementation of sliding panel menus but it is certainly one of the better ones. To setup or change your mobile menus you will need to adjust the file **m1-mobilemenu.php**. It should be fairly self explanatory. The menu on the left provides actual navigation items and the menu on the right provides the site tools such as login etc. This menu is ONLY displayed when using the sliding tabs.
==== Desktop/Tablet Menu ====
You can configure this via **m1-header.php**. Notice that there is a class "m1-desktop" assigned to one of the