Masha

All Social Networks Redesigned with Bootstrap

By The Masha Brand - www.themashabrand.com

View Online Demo
Version 1.0

Welcome

Welcome To Masha Template Documentation.

Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!

This document covers the installation and use of this theme and often reveals answers to common problems and issues - read this document thoroughly if you are experiencing any difficulties.
If you have any questions that are beyond the scope of this document, feel free to pose them by writing to us through our email support@themashabrand.com

Template Features

  • Built with Bootstrap 4 alpha 6
  • Fully Responsive Design
  • Elegant & Minimal Flat Design
  • Aesthetic Design
  • Simple & Easy to Customize
  • Scrolling Animations Enabled
  • HTML5 & CSS3 & Javascript
  • Retina Display Ready
  • Multiple Layouts
  • Easy to Use CSS Files
  • Powerful jQuery Plugins
  • 400+ Font Icons
  • All files are well commented
  • Crossbrowser Compatible with IE9+, Firefox, Safari, Opera, Chrome
  • Working Contact Form
  • Code Snippets for Developers
  • Extensive Documentation
  • 24 Hour Support

List of Social Networks Redesigned

Masha Social Network Redesigned

  • Built with Bootstrap 4 alpha 6
  • 12+ HTML5 + CSS3 pages
  • Fully Responsive Design
  • Elegant & Minimal Flat Design
  • Aesthetic Design

Pages List

  • Home Page 1
  • Home Page 2
  • Home Page 3
  • Home Page 4
  • Home Page 5
  • News Feed Page
  • Profile Page 1
  • Profile Page 2
  • Followers/Following Page 1
  • Followers/Following Page 2
  • Post Page 1
  • Post Page 2

Intalling Template

Installing Template.

After unzip the download pack, you'll found a Template Folder with all the files.

You can view this Theme in any web browser from your desktop computer. Because the files are written in HTML, you do not need an internet connection in order to display or edit the Theme.

Start your FTP client (I persoanlly use Filezila which is free) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.

Locate the domain folder you wish to upload your Theme files to on your server. You are going to want to click and drag every files in the template folder into your FTP client.

Once the files are done uploading go to www.yourdomainname.com/index.html

Title & Favicons

Site Title

Open file /index.html with your favorite text editor and scroll to the very top of the file.

							
  1. <!--Title -->
  2. <meta charset = "utf-8" >
  3. <title>Masha - All Social Networks Redesigned</title>
  4. <meta content = "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name = "viewport" >
  5. <meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
  6. <meta name = "description" content = "Add your business website description here" >
  7. <meta name = "keywords" content = "Add your, business, website, keywords, here" >
  8. <meta name = "author" content = "Add your business, website, author here" >

  9. <!--Favicons -->
  10. <link rel = "shortcut icon" href = "img/favicons/favicon.ico" >
  11. <link rel = "apple-touch-icon" href = "img/favicons/apple-touch-icon.png" >
  12. <link rel = "apple-touch-icon" sizes = "72x72" href = "img/favicons/apple-touch-icon-72x72.png" >
  13. <link rel = "apple-touch-icon" sizes = "114x114" href = "img/favicons/apple-touch-icon-114x114.png" >

Within the <head> tag you will find the <title> tag. Replace the text with your own Site Title.


Favicons

Right after the <title> you see the Favicons links. Normally you won't need to change the markup for these, leave it as it is and replace the coresponding images in the /img/favicons/ folder with your own images, following these rules:

File Name Type Size
1 favicon.ico ICO 16 × 16
2 apple-touch-icon.png PNG 57 × 57
3 apple-touch-icon-72x72.png PNG 72 × 72
4 apple-touch-icon-114x114.png PNG 114 × 114

Note: DO NOT alter the filenames! Just make your own with your favorite image editor and replace them with the same filename.

HTML Structure

This Template has a Responsive layout and is based on the Bootstrap Framework. For more information about this visit Bootstrap.

The resposive grid structure of Bootstrap Framework is show below.

							
  •         
  • <!--Navbar HTML Struture. -->
  •         
  • <nav class = "navbar navbar-default navbar-fixed-top">
  •         
  • <!--Navbar content goes here -->
  •         
  • </nav>
  •         
  •         
  • <!--Header HTML Struture. -->
  •         
  • <header>
  •         
  •   <div class = "container">
  •         
  •    <div class = "row">
  •         
  •     <!--Header content goes here -->
  •         
  •    </div>
  •         
  •   </div>
  •         
  • </header>
  •         
  •         
  • <!--Section HTML Struture. -->
  •         
  • <section class = "services">
  •         
  •   <div class = "container">
  •         
  •    <div class = "row">
  •         
  •     <!--Section content goes here -->
  •         
  •    </div>
  •         
  •   </div>
  •         
  • </section>
  •         
  •         
  • <!--Footer HTML Struture. -->
  •         
  • <footer>
  •         
  •   <div class = "container">
  •         
  •    <div class = "row">
  •         
  •     <!--Footer content goes here -->
  •         
  •    </div>
  •         
  •   </div>
  •         
  • </footer>
  •         

Grid Structure

Grid Structure

This Theme has a Responsive layout with a variation of column layouts depending on the page. This theme uses Bootstrap 4 Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

Grid options

more info...
Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Max container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Max column width Auto 60px 78px 95px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets N/A Yes
Column ordering N/A Yes

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.

SASS Structure

The Sass Structure of Medium Redesigned is as follows:-


							

    @import '../bower_components/font-awesome/scss/font-awesome';

    @import 'fonts';

    @import 'variables';

    @import 'mixins';

    @import 'nav';

    @import 'nav-2';

    @import 'header';

    @import 'posts';

    @import 'footer';

    @import 'index-2';

    @import 'index-3';

    @import 'index-4';

    @import 'newsfeed';

    @import 'page-post';

    @import 'page-post-2';

    @import 'profile';

    @import 'profile-2';

    @import 'followers';

    @import 'followers-2';


Javascript Section

Javascript

After unzip the Theme files you can see Medium/js folder. That js folder contains medium.js(custom javascript)

Open medium.js, From here you can modify any settings for Scroll Top.

							

   /*============================================

   Scroll To Top

   ==============================================*/

    //When distance from top = 250px fade button in/out

    $(window).scroll(function(){

     if ($(this).scrollTop() > 250) {

      $('#scrollup').fadeIn(300);

     } else {

      $('#scrollup').fadeOut(300);

     }

    });

    //On click scroll to top of page t = 1000ms

    $('#scrollup').click(function(){

     $("html, body").animate({ scrollTop: 0 }, 1000);

    return false;

    });

});


Credits

Scripts

These are the scripts used in the template with their related link for documentation.

Images

Fonts

THE END!

Once again thank you for purchasing this template.
If you have any questions that are beyond the scope of this documentation feel free to contact us via email:
support@themashabrand.com.


Go to top.