Use these custom CSS best practices to make your site beautifully branded and responsive.
Put CSS in the control panel
There are a two (2) reasons why your custom CSS should be in the control panel (Site tools > Control panel):
(1) You CANNOT use Less code in page templates. Less code must be entered into the control panel's Custom Site CSS to render correctly
(2) The custom header and footer templates are not rendered in mobile views. This means that any CSS you added to these templates will not render.
Don't use CSS hacks
In MindTouch, there are several custom classes injected into the
<body> tag that allow you to customize your CSS by browser and platform. For more information about the
<body> classes in MindTouch, read our article on branding with custom <body> classes.
Recommended media queries
In MindTouch, the responsive breakpoints have already been calculated for you based on the general sizes of popular phones, tablets, laptops, and desktops. When creating your custom styles, sticking to the pre-existing media queries allows for a more consistent user experience since all the breakpoints will match up. MindTouch provides a full list of media queries that can be used. If need to create a new media query, be sure to use a responsive measurement (
%) instead of pixels.
Use responsive measurements instead of pixels
Pixels are fixed units of measure and do not change size in different screen dimensions or when the font size increases. This makes them a poor choice for responsive designs. Use a responsive measurement unit such as
rem that will scale to the screen size no matter the device.
Don't forget about your pseudo-classes
A pseudo-class is a special state of an element. The most recognizable pseudo-classes are those used for links such as
:focus. There are Less variables and mixins that will generate these pseudo-classes for you with regard to primary, secondary and tertiary link colors. If you make changes to any link styling in the control panel, make sure you also update the styles for the pseudo-classes. Forgetting about how
:hover should look can cause difficulty for users who navigate by keyboard only and for those on touchscreen devices.
If the user's platform is not touch-based, then an additional class name of
.no-touch should be added. This class name is responsible for all
:hover effects on devices without touchscreens and should be prefixed onto all CSS selectors referencing this pseudo-class. The
.no-touch class is required because of an issue with
:hover and iOS. For more information about this technical issue please read the article Solving the Double Tap Issue on iOS Devices.
When implementing a custom header, footer or login message it is best to remember these guidelines.
Put your scripts in the control panel
Because the custom header and footer are not loaded on mobile devices, custom scripts will need to be added into the control panel's Custom HTML so they will work on all devices. Custom HTML can be used to include third-party widgets, links to additional CSS files, and unique meta tags. Additional information can be found in our article about branding with HTML.
MindTouch comes with a few reusable components such as horizontal navigation, drop-down links and several container styles. Making use of these components will save you time when creating custom headers, footers and content.
A horizontal navigation menu is as easy as adding the proper HTML structure and class names. All responsive resizing is calculated in the product CSS.
<nav class="elm-nav my-custom-class"> <div class="elm-nav-container"> <ol> <li><a href="#">Link one</a></li> <li><a href="#">Link two</a></li> <li><a href="#">Link three</a></li> <li><a href="#">Link four</a></li> </ol> </div> </nav>
To create a new drop-down link, use the correct HTML structure: an
<a> followed by a
<ul> and the class names
<a class="mt-dropdown-link" href="#" title="Drop-down link">Drop-down link</a> <ol class="mt-dropdown"> <li> <a href="#" title="Link one">Link one</a> </li> <li> <a href="#" title="Link two">Link two</a> </li> <li> <a href="#" title="Link three">Link three</a> </li> </ol>
For a full listing of reusable components and how to use them, please read our article on reusable components.
Use on-click instead of hover in drop-down menus
The hover technique for displaying sub-menus in content navigation does not work well on a touchscreen or for users with disabilities who use a keyboard to navigate. If you decide to build your own drop-down menus, keep this in mind when you are creating the scripting for it.
Use flexbox for responsive containers in your content
MindTouch makes use of the CSS3 module Flexbox for much of it's dynamically generated page listings. These containers adapt to the space available to them rather than needing extensive CSS to control how they look at every possible size. If you don't already know how to use Flexbox, try out this interactive tutorial called Flexbox in 5 minutes.
Use an approved sign-in link
A lot of customers like to create their own header with custom links while hiding the login links from the user navigation. The correct way to create a sign-in link is by using the following code sample inside your header template. By using this code for your sign in links, you can be assured that your users will be directed to the correct sign in page whether they use the default login or single sign-on (SS0). This link will also redirect your users back to the page they were currently viewing before they signed in.
var signInUrl = '/@app/login/redirect?return=' .. Uri.Encode(page.uri); <a href=(signInUrl) title="Sign in">"Sign in"</>
The MindTouch editor adds inline height and width CSS to
<img> tags to help out with formatting. In a responsive skin, this isn't helpful since the images need to resize based on the screen resolution. To make your images truly responsive, you'll need to remove these inline styles manually for images in your content to avoid image distortion.
To remove the inline CSS from images, open the editor and click the View button. Select Source and scroll down until you see an image tag, then look for the style attribute. Delete the entire inline style, then save your changes. You image dimensions will now be controlled by responsive styles.
Proper content structuring allows MindTouch to self-organize your content, influence search results, and create proper article relationships. When creating your hierarchy, you may start out at the top with a category. The correct nesting structure for MindTouchis: home page (category) > category > guide, then articles. If your content has numerous segmentations and you feel this structure is too limiting, you can nest categories under categories for additional levels. It is important that you do not nest guides under guides for MindTouch to function correctly.
Another important note about structuring your content is that all pages must have an article type set to ensure that they are visible in the MindTouch structure. Only categories and guides appear in a category's subpage listings and only articles appear in a guide's subpage listings. Articles that don't have an article type set, do not appear on guide pages. These restrictions were created to make MindTouch self-organizing and to decrease page loading times.