SweetDate files and structure

Theme folder structure

We have built this theme with WordPress best practices in mind so it can be easily customized.

activity - Buddypress custom templates for activity pages
album - Buddypress custom templates for album pages
assets - contais stylesheeet, javascript, image files used by the theme

font - Font Awesome files

images
scripts - javascript files used by the theme
styles

/app.css - file contains all of the specific styling for the landing page template. Each section of this file is commented for better understanding.

foundation-nonresponsive.min.css - these are generic styles, resets & normalization
responsive.css - styles needed to enable responsive layout
font-awesome.min.css - Font Awesome by Dave Gandy is “the iconic font”
bbpress - bbPress templates used for customization
blogs - Buddypress custom templates for blog pages
custom_buddypress - functions, javscript and css files used for Buddypress customizations
forums - Buddypress forum pages templates
framework - the heart of this theme.
Buddypress groups pages templates
languages - .po and .mo files used for translations
members - Buddypress members pages templates
page-parts - reusable code snippets used in templates like before and after content wrappers
page-templates - contains page templates like front-page or full-width
registration - Buddypress registration pages templates
woocommerce

HTML structure

We have build this landing page on top of Zurb Foundation Framework (Foundation 3). and see it’s awesome features in action.

The grid is built around two key elements: rows and columns. Rows create a max-width and contain the columns; columns create the actual structure. For layouts to work properly, always put your page content inside a row and a column.

A basic layout of the grids look like:

CSS files

We’re using several CSS files in this theme:

assets/styles/foundation-nonresponsive.css - these are generic styles, resets & normalization.
assets/styles/responsive.css - styles only for responsive design
assets/styles/font-awesome.min.css - Font Awesome by Dave Gandy is “the iconic font” and has a great numaber of icons, 249 at this moment and are continuously growing. Font Awesome icons are vectors, which mean they’re gorgeous on high-resolution displays.
assets/styles/app.css - file contains all of the specific styling for the landing page template. Each section of this file is commented for better understanding.

RESPONSIVE

Responsive means that the content will adjust to every screen width and you can control how appearance will be through media queries.

You can find the responsive media queries in app.css at the end of the stylesheets.

JavaScript files

This template imports several JS files.

Most of JS (scripts) are loaded at the end because it will increase speed and rendering.

The JS files in this template are:

jQuery Library
Modernizr Foundation
Template custom scripts - assets/scripts/app.js - All custom functions are written and initialized in this JS file. Each section of this file is commented for better understanding.
Other JS plugins (check them out in the Source & Credits section)

Responsive guidelines

What is Responsive design?

Responsive means that the content will adjust to every screen width and you can control how appearance will be through media queries.

You can find the responsive media queries in responsive.css

CAUTION: Do not change main theme files. If you want to add your own css, please enable the Child Theme and put your custom css in style.css.

If you want to modify any other php template, just copy it to your Child theme and modify it as you need.

Included PSD files

All PSD source files are located in PSD folder

logo.psd - Logo for themplate
layout_homepage.psd - Homepage
layout_profilepage - Profile page
modal_forms - Login/Register modal forms
patterns - Patterns isolated from layout.psd
status_icons - Icons for “Call To Actions” section
btnGoUp - Button “Go to top”