Formula x

Formula X

wearepropeople.com

About usWe are a Full Service Digital Agency

We work with Stanford University, Infoblox, Maersk, UNICEF, Amnesty International, Samsung, Badgeville, Apigee, etc.

We are on the market since 2000

We Activate in 8 countries with over 170 professionals

70 % of our projects are on the MIGHTY Drupal.

WE ARE PROPEOPLE!

➢ Frontend development

○ No base theme

○ Responsive design

○ Diamond grid

➢ Backend development

○ Panels everywhere

○ Social media

○ Search

○ Google analytics, events tracker

Agenda

ResponsiveFrontend

ResponsiveFrontend

Say No! for base theme

Frontend

theme.info

name = Formulaxdescription = Formulax custom themepackage = Coreversion = VERSIONcore = 7.x

stylesheets[all][] = css/styles.cssstylesheets[print][] = css/print.css

breakpoints[mobile] = (min-width: 0px)breakpoints[desktop] = (min-width: 768px)

scripts[] = js/response.min.js

; Panels layoutsplugins[panels][layouts] = plugins/layouts

version = "1.0"project = 'Formula X'

Say No! for base theme

Frontend

● No CSS and JS overriding

● No loading of unused CSS and JS files

Panels everywhere

Layouts

Panels everywhere

<div class="two-col">

<div class="container">

<div class="panel-col-first panel-panel">

<div class="panel-col-first-inner">

<?php print $content['left']; ?>

<div class="panel-first-bottom panel-panel">

<?php print $content['left-bottom']; ?>

</div>

</div>

</div>

<div class="panel-col-last panel-panel">

<div class="panel-col-top panel-panel">

<?php print $content['top']; ?>

</div>

<?php print $content['right']; ?>

</div>

</div>

</div>

Grid logic

Grid logic

CSS Logic

.product-grid .views-row a {

display: inline-block;

position: relative;

overflow: hidden;

width: 170px;

height: 170px;

border: 8px solid white;

}

.product-grid .views-row img {

width: 240px;

height: auto;

}

Step 1

CSS Logic

.product-grid .views-row a {

display: inline-block;

position: relative;

overflow: hidden;

width: 170px;

height: 170px;

border: 8px solid white;

transform: rotate(45deg);

-ms-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform-origin: left top;

-ms-transform-origin: left top;

-webkit-transform-origin: left top;

}

.product-grid .views-row img {

width: 240px;

height: auto;

}

Step 2

CSS Logic

.product-grid .views-row a {

...

}

.product-grid .views-row img {

width: 240px;

height: auto;

position: absolute;

top: 85px;

left: -85px;

transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform-origin: left top;

-ms-transform-origin: left top;

-webkit-transform-origin: left top;

}

Step 3

CSS Logic

.product-grid .views-row a {

...

}

.product-grid .views-row img {

width: 240px;

height: auto;

position: absolute;

top: 85px;

left: -85px;

transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform-origin: left top;

-ms-transform-origin: left top;

-webkit-transform-origin: left top;

}

Step 4

CSS Logic

.product-grid .views-row a {

margin-left: 124px;

//for even rows with js

}

Step 5

Backend development

➢ Backend development

○ Panels everywhere

○ Social media

○ Search

○ Google analytics

Search

Search by keyword

Search

Modules

● search_api

○ search_api_views

● search_api_solr

● search_api_acquia

Search

Search API

Search

Search logic

Search views

Apache Solr

Search page

Render nodes

Build query

Displayresults

get parameters

● node--frmx_product--search-result.tpl.php● node--manicure_img--search-result.tpl.php● node--palette_img--search-result.tpl.php● node--social_content--search-result.tpl.php

SearchSearch by keyword results

Search

Search by color

Search

Search by color results

Social Media

Social MediaSing into popup

Social Media

Module HybridAuth

PanelsModal + minipanels

Panels

Modal + minipanels<?php

/**

* A modal login callback.

*/

function frmx_nm_page_callback($js = NULL, $node = NULL) {

// Fall back if $js is not set.

if (!$js) {

drupal_goto('node/' . $node->nid);

}

ctools_include('modal');

ctools_include('ajax');

ctools_include('context');

$context = ctools_context_create('node', $node);

$context->identifier = t('This node');

$context->keyword = 'node';

$contexts = array('panel-node' => $context);

$output[] = ctools_modal_command_display('Content', frmx_nm_panel_mini($node,

'node_modal', $contexts));

print ajax_render($output);

exit;

}

Google, Events Tracker

Google, Events Tracker

Google, Events Tracker

Google, Events Tracker

Google, Events Tracker

Thank You !!