Formula X

wearepropeople.com
About us
We are a Full Service Digital Agency
We are on the market since 2000
We Activate in 8 countries with over 170 pro...
Agenda
➢ Frontend development
○ No base theme
○ Responsive design
○ Diamond grid
➢ Backend development
○ Panels everywhere...
Frontend

Responsive
Frontend

Responsive
Frontend

Say No! for base theme
theme.info
name = Formulax
description = Formulax custom theme
package = Core
version = V...
Frontend

Say No! for base theme
● 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="pan...
Grid logic
Grid logic
CSS Logic

Step 1
.product-grid .views-row a {
display: inline-block;
position: relative;
overflow: hidden;
width: 170px;
...
CSS Logic

Step 2
.product-grid .views-row a {
display: inline-block;
position: relative;
overflow: hidden;
width: 170px;
...
CSS Logic

Step 3
.product-grid .views-row a {
...
}
.product-grid .views-row img {
width: 240px;
height: auto;
position: ...
CSS Logic

Step 4
.product-grid .views-row a {
...
}
.product-grid .views-row img {
width: 240px;
height: auto;
position: ...
CSS Logic

Step 5

.product-grid .views-row a {
margin-left: 124px;
//for even rows with js
}
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
Render nodes
Display
results

Search page

●
●
●
●

node--frmx_product--search-result.tpl.php
node--m...
Search

Search by keyword results
Search

Search by color
Search

Search by color results
Social Media
Social Media

Sing into popup
Social Media

Module HybridAuth
Panels

Modal + minipanels
Panels

Modal + minipanels
<?php
/**
* A modal login callback.
*/
function frmx_nm_page_callback($js = NULL, $node = NULL)...
Google, Events Tracker
Google, Events Tracker
Google, Events Tracker
Google, Events Tracker
Google, Events Tracker
Thank You !!
Upcoming SlideShare
Loading in...5
×

Formula x

872

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
872
On Slideshare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Formula x

  1. 1. Formula X wearepropeople.com
  2. 2. About us We are a Full Service Digital Agency We are on the market since 2000 We Activate in 8 countries with over 170 professionals We work with Stanford University, Infoblox, Maersk, UNICEF, Amnesty International, Samsung, Badgeville, Apigee, etc. 70 % of our projects are on the MIGHTY Drupal. WE ARE PROPEOPLE!
  3. 3. Agenda ➢ Frontend development ○ No base theme ○ Responsive design ○ Diamond grid ➢ Backend development ○ Panels everywhere ○ Social media ○ Search ○ Google analytics, events tracker
  4. 4. Frontend Responsive
  5. 5. Frontend Responsive
  6. 6. Frontend Say No! for base theme theme.info name = Formulax description = Formulax custom theme package = Core version = VERSION core = 7.x stylesheets[all][] = css/styles.css stylesheets[print][] = css/print.css breakpoints[mobile] = (min-width: 0px) breakpoints[desktop] = (min-width: 768px) scripts[] = js/response.min.js ; Panels layouts plugins[panels][layouts] = plugins/layouts version = "1.0" project = 'Formula X'
  7. 7. Frontend Say No! for base theme ● No CSS and JS overriding ● No loading of unused CSS and JS files
  8. 8. Panels everywhere Layouts
  9. 9. 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>
  10. 10. Grid logic
  11. 11. Grid logic
  12. 12. CSS Logic Step 1 .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; }
  13. 13. CSS Logic Step 2 .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; }
  14. 14. CSS Logic Step 3 .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; }
  15. 15. CSS Logic Step 4 .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; }
  16. 16. CSS Logic Step 5 .product-grid .views-row a { margin-left: 124px; //for even rows with js }
  17. 17. Backend development ➢ Backend development ○ Panels everywhere ○ Social media ○ Search ○ Google analytics
  18. 18. Search Search by keyword
  19. 19. Search Modules ● search_api ○ search_api_views ● search_api_solr ● search_api_acquia
  20. 20. Search Search API
  21. 21. Search Search logic Render nodes Display results Search page ● ● ● ● 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 Search views get parameters Build query Apache Solr
  22. 22. Search Search by keyword results
  23. 23. Search Search by color
  24. 24. Search Search by color results
  25. 25. Social Media
  26. 26. Social Media Sing into popup
  27. 27. Social Media Module HybridAuth
  28. 28. Panels Modal + minipanels
  29. 29. 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; }
  30. 30. Google, Events Tracker
  31. 31. Google, Events Tracker
  32. 32. Google, Events Tracker
  33. 33. Google, Events Tracker
  34. 34. Google, Events Tracker
  35. 35. Thank You !!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×