B r u t a l

is loading

The Documentation

Hello,

My name is Michael. Thanks for buying Brutal. I hope you like it, and if you need any help or need to ask a question just fire me an email at hello[at]michaelpalmerwebdesign.com.

If you like Brutal then please head on over to ThemeForest and leave a review.

Table of Contents:

  1. The Templates
  2. Day / Nightmode
  3. The Preloader
  4. Font Styles
  5. Products
  6. Prices
  7. The Video
  8. The Gallery
  9. The Popups
  10. The Team
  11. The Contact Form
  12. The Subscribe Form
  13. Background Images
  14. The Countdown Timer

The Templates

Brutal comes with 3 main templates, each with a "quite brutal" and a "not so brutal" design.

Coming Soon
  • Add a Brutalist Coming Soon page to your site while you are setting up your main template.
  • Includes working contact form.
  • Working subscription form for collecting email addresses.
Countdown
  • Add a Brutalist Coming Soon page with a live countdown to your launch date.
  • Perfect for crowdfunding your start up.
  • Working subscription form for collecting email addresses.
Brutal Design 1 & 2
  • Go for a really brutal (design 1) or not so brutal (design 2) landing page.
  • Both templates include features, video, gallery, products, pricing, team and contact form sections.
  • Working contact form, popup modals and more.

Template Options & Customization.

Brutal can be easily customized, even if you are not familiar with coding. The code is clearly commented with instructions on how to edit the content, add your own images and videos as well as restructuring the layout.

There are a few simple options you can use to give your version of Brutal a unique look without any coding. Read on to see how you can customize Brutal to your liking.

Day / Nightmode

Brutal comes with a built in automatic day / night mode. This detects the location of visitors on your site and sets the mode depending on the time of day. If set to auto, nightmode will be active from 7pm - 7am. Nightmode switches the templates color scheme around, which will make it easier on your visitors eyes. Nightmode sets a black background with white text, day mode will have a white background with black text.

Nightmode Options

Edit this line on any template you want to change the nightmode setting for: <html class="nightmode-off" lang="en">.

  1. nightmode-off - turn off nightmode completely
  2. nightmode-on - nightmode is on 24 / 7
  3. nightmode-auto - nightmode will automatically turn on at 7pm
The Preloader

Each template has the preloader activated by default. We use this to make sure the page is fully loaded before showing the content.

Preloader Options

Edit this line on any template you want to change the preloader setting for: <div class="preloader">.

  1. preloader preloader-off - do not show the preloader
  2. preloader preloader-lg - large font size
  3. preloader preloader-xl - extra large font size
Font Styles

Brutal comes with 6 hand picked brutalist fonts for you to use in your templates.

Font Style Options

Edit this line on any template you want to change font style for: <!--<link rel="stylesheet" href="./css/font-styles/font-style-1.css">-->. Each font style is in it's own css file named font-style-1.css, font-style-2.css and so on. To enable a font style simply uncomment the desired font file like so: <link rel="stylesheet" href="./css/font-styles/font-style-1.css">.

Font Families
  1. Default font family - Titillium Web
  2. Inconsolata - font-style-1.css
  3. Overpass Mono - font-style-2.css
  4. Spinnaker - font-style-3.css
  5. Nanum Gothic Coding - font-style-4.css
  6. IBM Plex Mono - font-style-5.css
Products

You can add product thumbnails, a product description and main product image in the products section. You can show up to 8 product thumbnails and add as many products to the slider as you like.

Products settings

Add a product thumbnail by editing the image path and adding a product-id. The product-id will link the thumbnail to the products slider: data-product-id="1". Next you will need to add the main product image, a link to the product and description to the products slider:

  1. Add the product id that matches the thumbnail id: <div id="product-1">.
  2. Add the product title: <h5>Product Title</h5>.
  3. Add the product description: <p>Product Description</p>.
  4. Add the product link: <href="/link/to/product" class="product-link">.

Prices

The pricing section allows you to add 3 different pricing tiers. Add a price and a brief description and then add the details of the pricing plan.

Edit the price and the title inside this block of code: <div class="prices-wrap">.

  1. Add the price: <h4>$10</h4>.
  2. Add the title: <p>Really very basic</p>.
Edit the pricing plan details in this block of code: <div class="prices-details">
  1. Add the title: <h5>The Basic Package</h5>.
  2. Add the description: <p>The basic version, perfect if you're just starting out.</p>.
  3. Add the plan features:
    Included in price plan: <li>- Single License</li>.
    Not included in price plan: <li><del>- Free Support</del></li>

The Video

To change the YouTube video simply copy and paste the video ID into this line of code: <a class="owl-video" href="https://www.youtube.com/watch?v=VIDEO_ID">. To change the video cover image edit this line of code: <img class="placeholder-image" src="./img/img1.jpg" alt="">.

To add your images into gallery move them into the /img/ folder in the template directory. Then edit the image paths in the HTML file: <img src="./img/my-image.jpg"/>.

The Popups

Brutal comes with two different popups: a generic popup, easy for you to add your own content into and a contact form popup.

Popup Settings
  1. Template Popup: This is included in the brutal-design-1.html and brutal-design-2.html files.
    Add your own content inside this block of code: <div class="modal fade template-modal" tabindex="-1" role="dialog">.
    To open this popup add this piece of code to a <button> or <a> tag: <a href="#" data-toggle="modal" data-target=".template-modal">

    Note: The data-target must match the class name of the popup. In this example it is data-target=".template-modal".

    If you would like to have more than one popup then simply copy and paste all the code from <!--Modal--> to <!--end modal--> and give it a new class name, i.e. my-custom-popup. Now all you need to do to open this popup is add the code to a <button> or <a> tag: <a href="#" data-toggle="modal" data-target=".my-custom-popup">.

  2. Contact form Popup: This is included in the brutal-coming-soon and brutal-coming-soon-countdown.html files.
    You can edit the contact form title: <h5 class="modal-title text-center">Contact</h5>.
    Change the sending and sent messages: <span class="sending">We're Sending Your Message</span>.
    And the labels for the form fields: <label for="contact-name">Your name</label>.
The Team

You can add as many team members to the team slider. Add their profile pics, job role, name and email. Edit the details for each team member inside this block of code: <div class="team-member">.

  1. Add the job role: <p><span>Job Role</span></p>.
  2. Their profile pic: <img src="./img/team-member-1.jpg">.
  3. Their name and email link: <a class="btl-anchor" href="teammember-email@company.com">Samantha Fox</a>
The Contact Form

Brutal uses a contact form in each template file. The contact form is fully functional, you just need to add your own details so you get your messages. In the template directory go to /php/contact.php to add your details.

  1. Add your business name: $email_name = 'Business name';.
  2. The email subject for the auto responder: $email_subject = 'Thanks for getting in touch.';.
  3. The email message for the auto responder: $email_message = "Hi there!\n\nThanks for contacting us. We'll be in touch real soon!";.
  4. Set your reply-to email address: $reply_to = 'noreply@company.design';.
  5. Add your email address to recieve contact form messages: : $notification_email = 'info@company.com';.
The Subscribe Form

The subscribe form is used on the coming soon pages to collect email addresses. Names and emails are saved to a text file located in /php/subscribers/subscribers.txt. This makes it a piece of cake to import your list into MailChimp or similar services. In the template directory go to /php/subscribe.php to add your details.

  1. Add your business name: $email_name = 'Business name';.
  2. The email subject for the auto responder: $email_subject = 'Thanks for subscribing!';.
  3. The email message for the auto responder: $email_message = "Hi there!\n\nThanks for subscribing. Keep an eye on your inbox, we'll be in touch real soon!";.
  4. Set your reply-to email address: $reply_to = 'noreply@company.design';.
  5. Add your email address to recieve contact form messages: : $notification_email = 'info@company.com';.
Background Images

Background images are used in the "not so brutal" templates. Changing the background is a simple as editing one line of code.

  1. For Brutal-Design-2.html edit this line to change the background image: <section id="fullscreen" style="background-image:url(/img/gallery6.jpg);">. Make sure you have added your image into the /img/ directory.
  2. The images for the coming soon templates are pulled directly from the Unsplash API. If you would like to continue using Unsplash then you might want to change the image category to fit with the tone of your site. Edit this line of code in the coming soon template: style="background-image: url(https://source.unsplash.com/1600x900/?architecture);". Simply change architecture to any category you like. You can read more about this here: Unsplash API.
  3. If you would prefer to use your own image then simply upload it to the /img/ directory and edit this line of code: <section id="fullscreen" class="fs-coming-soon coming-soon-background" style="background-image: url(/img/Your-Image.jpg);">.
The Countdown Timer

The countdown timer is used in the coming soon templates. You can set the countdown time by editing the following lines of code:

  1. Set the date and time to count down to: data-start-time="2018/12/31 12:00:01"
  2. Change the wording for days, hours etc: data-lng-days="DAYS", data-lng-hours="HOURS".

Support.

For help setting up the theme, customizing it or any general queries you can email me at hello[at]michaelpalmerwebdesign.com. I aim to respond to all queries within 48 hours. If you have any questions it is always helpful if you can provide as much detail as possible. This will help me help you faster. Let me know what device you are using (Mac, PC, phone, tablet?) and what browser you are using too. If you want extra brownie points then send me a screenshot as well.

Credits.