Grain New Age Theme

New Age is a fully responsive landing page theme for showcasing web and mobile applications. It includes sections for displaying application mockups, outlining major features, and providing links for contacting developers and downloading the application.

DOWNLOAD
Fork on GitHub

How to

Customize Page Content

Any content on the page can be customized by editing the values in the /content/index.html file. For example, to change the text for the header section of the page, you should set a new value for the header.text property:

1
2
header:
  text: Your custom text goes here

Also, you can add custom sections to the page by creating a markup for a section in the /theme/includes folder and including it in the /theme/layouts/default.html layout. An auto-scroll link to a new section can be created in the sections block of the /content/index.html file. You can find more details on Grain layouts and includes in the Grain Documentation.

Set Application Download Links

To add or update download links, you need to change a link info in the download.links block:

1
2
3
4
5
6
7
8
download:
  section_heading: Discover what all the buzz is ...
  outline: Our app is available on any mobile device
  links:
     - link: https://play.google.com/store/...
       image: google-play-badge.svg
     - link: https://itunes.apple.com/us/app/...
       image: app-store-badge.svg

Every download link entry contains the link property with a download url, and the image property with a path to the link image. This path is relative to the /theme/image folder.

Edit Copyright Info

You can add copyright information to the "Footer" section by modifying the footer.copyright property value, which is a plain string. Also, you may want to add links to the footer by editing the footer.links:

1
2
3
4
5
6
7
8
9
footer:
    copyright: Copyright © 2016 Start Bootstrap.
    links:
        - link: https://urltoprivacy.com
          title: Privacy
        - link: https://urltoterms.com
          title: Terms
        - link: https://urltofaq.com
          title: FAQ

Every link entry consists of the link property with a url the link points to, and the title property which provides a text label for the link.

List Application Features

Application features can be easily added to the "Features" page section by specifying information about every feature in the features.features block of the /content/index.html.

1
2
3
4
5
6
7
features:
  - title: Device Mockups
    description: Ready to use HTML/CSS ...
    icon: icon-screen-smartphone
  - title: Flexible Use
    description: Put an image, video, ...
    icon: icon-camera

Please note that the icon should be a class from simplelineicons. For example, to render the bulb image, you need to set the icon property to icon-bulb.

Specify Links For Social Networks

New Age allows you to customize links to social profiles displayed on the "Contact" section by editing social entries in the contact.social block:

1
2
3
4
5
6
7
8
9
contact:
  heading: We <i class="fa fa-heart"></i> new friends!
  social:
    - link: https://twitter.com/sysgears
      css_class: social-twitter
      fontawesome_icon_class: fa-twitter
    - link: https://www.facebook.com/sysgears/
      css_class: social-facebook
      fontawesome_icon_class: fa-facebook

You can use any icon from the fontawesome.io/icons. Also, you can apply custom styles to the buttons by setting the css class name for the css_class property.

Customize a Mockup View

A demo screenshot and a picture of a device mockup can be customized by editing the mockup block in the header and features sections in /content/index.html.

1
2
3
4
5
6
 mockup:
  image: demo-screen-1.jpg
  device:
    type: iphone6_plus
    color: black
    orientation: portrait

The image property contains a path to the demo screenshot, this path is relative to the /theme/images folder. And the device block contains information about the device picture where the screenshot is shown. The color and the orientation values are self-describing — it is a color and an orientation of the device. The type key defines the actual device: iPhone, MacBook, iPad, etc.

For a complete list of available devices and its options, please, refer to the /theme/device-mockups/device-mockups.css.

To find out how to open, preview and deploy the theme please read the documentation.