Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Sample migration from v1.1 to v1.2 #85

Closed
khawkins98 opened this issue Apr 20, 2017 · 11 comments
Closed

Sample migration from v1.1 to v1.2 #85

khawkins98 opened this issue Apr 20, 2017 · 11 comments
Milestone
1.2

Comments

@khawkins98
Copy link
Contributor

khawkins98 commented Apr 20, 2017 •
edited
Loading

This issue will do a series of step-by-step diffs to migrate https://ebiwd.github.io/EBI-Pattern-library/sample-site/

Background on changes

Not all of these structural changes are necessary for the look and feel of the site, but they provide a better html architecture that separates the areas of EMBL-EBI's content and your site/service's content -- which will now all be inside of div#content.
These changes increase the code size and speed, and — most importantly — make it easier to develop apps for modern JS frameworks, like Angular and React.

Here's how it looks as v1.1:
image
@khawkins98 khawkins98 added this to the 1.2 milestone Apr 20, 2017
khawkins98 added a commit to ebiwd/EBI-Pattern-library that referenced this issue Apr 20, 2017
@khawkins98
Migrating to v1.2: Swap references
0961f2a 
Find and replace `v1.1` to `v1.2`

For ebiwd/EBI-Framework#85
@khawkins98
Copy link
Contributor Author

khawkins98 commented Apr 20, 2017 •
edited
Loading

Step 1

Swap the CSS and JS URL references from v1.1 to v1.2

-  <link rel="icon" type="image/x-icon" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/images/logos/EMBL-EBI/favicons/favicon.ico" />
-  <link rel="icon" type="image/png" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/images/logos/EMBL-EBI/favicons/favicon-32x32.png" />
-  <link rel="icon" type="image/png" sizes="192×192" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/images/logos/EMBL-EBI/favicons/android-chrome-192x192.png" /> <!-- Android (192px) -->
-  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/images/logos/EMBL-EBI/favicons/apple-icon-114x114.png" /> <!-- For iPhone 4 Retina display (114px) -->
-  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/images/logos/EMBL-EBI/favicons/apple-icon-72x72.png" /> <!-- For iPad (72px) -->
-  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/images/logos/EMBL-EBI/favicons/apple-icon-144x144.png" /> <!-- For iPad retinat (144px) -->
-  <link rel="apple-touch-icon-precomposed" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/images/logos/EMBL-EBI/favicons/apple-icon-57x57.png" /> <!-- For iPhone (57px) -->
-  <link rel="mask-icon" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/images/logos/EMBL-EBI/favicons/safari-pinned-tab.svg" color="#ffffff" /> <!-- Safari icon for pinned tab -->
+  <link rel="icon" type="image/x-icon" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/favicon.ico" />
+  <link rel="icon" type="image/png" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/favicon-32x32.png" />
+  <link rel="icon" type="image/png" sizes="192×192" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/android-chrome-192x192.png" /> <!-- Android (192px) -->
+  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/apple-icon-114x114.png" /> <!-- For iPhone 4 Retina display (114px) -->
+  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/apple-icon-72x72.png" /> <!-- For iPad (72px) -->
+  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/apple-icon-144x144.png" /> <!-- For iPad retinat (144px) -->
+  <link rel="apple-touch-icon-precomposed" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/apple-icon-57x57.png" /> <!-- For iPhone (57px) -->
+  <link rel="mask-icon" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/safari-pinned-tab.svg" color="#ffffff" /> <!-- Safari icon for pinned tab -->
-  <meta name="msapplication-TileImage" content="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/images/logos/EMBL-EBI/favicons/mstile-144x144.png" />
+  <meta name="msapplication-TileImage" content="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/mstile-144x144.png" />
-  <link rel="stylesheet" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/libraries/foundation-6/css/foundation.css" type="text/css" media="all" />
-  <link rel="stylesheet" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/css/ebi-global.css" type="text/css" media="all" />
-  <link rel="stylesheet" href="https://www.ebi.ac.uk/web_guidelines/EBI-Icon-fonts/v1.1/fonts.css" type="text/css" media="all" />
+  <link rel="stylesheet" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/libraries/foundation-6/css/foundation.css" type="text/css" media="all" />
+  <link rel="stylesheet" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/css/ebi-global.css" type="text/css" media="all" />
+  <link rel="stylesheet" href="https://www.ebi.ac.uk/web_guidelines/EBI-Icon-fonts/v1.2/fonts.css" type="text/css" media="all" />
-  <link rel="stylesheet" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/css/theme-embl-petrol.css" type="text/css" media="all" />
+  <link rel="stylesheet" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/css/theme-embl-petrol.css" type="text/css" media="all" />
-  <script defer="defer" src="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/js/script.js"></script>
+  <script defer="defer" src="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/js/script.js"></script>
-  <script src="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/libraries/foundation-6/js/foundation.js"></script>
-  <script src="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/js/foundationExtendEBI.js"></script>
+  <script src="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/libraries/foundation-6/js/foundation.js"></script>
+  <script src="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/js/foundationExtendEBI.js"></script>

image

Details: ebiwd/EBI-Pattern-library@0961f2a

khawkins98 added a commit to ebiwd/EBI-Pattern-library that referenced this issue Apr 20, 2017
@khawkins98
Migrating to v1.2: Fewer JS files
6b0451f 
For ebiwd/EBI-Framework#85
@khawkins98
Copy link
Contributor Author

khawkins98 commented Apr 20, 2017 •
edited
Loading

Step 2

Remove references to these JS files:

  • foot.js
  • cookiebanner.js
  • modernizr.custom.49274.js
-  <!-- All JavaScript at the bottom, except for Modernizr -->
-  <script src="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/libraries/modernizr/modernizr.custom.49274.js"></script>
-  <script defer="defer" src="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/js/cookiebanner.js"></script>
-  <script defer="defer" src="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/js/foot.js"></script>

Details: ebiwd/EBI-Pattern-library@6b0451f

@khawkins98
Copy link
Contributor Author

khawkins98 commented Apr 20, 2017 •
edited
Loading

Step 3

Move the .row class from div#content and place it on the child section.

So what was:

  <div id="content" role="main" class="row">
      <!-- Suggested layout containers -->
      <section>

becomes

  <div id="content">
      <!-- Suggested layout containers -->
      <section id="main-content-area" class="row" role="main">

As a diff:

-  <div id="content" role="main" class="row">
+  <div id="content">
-      <section>
+      <section id="main-content-area" class="row" role="main">

For now, this won't have any visible changes.

Details: ebiwd/EBI-Pattern-library@97cc791

khawkins98 added a commit to ebiwd/EBI-Pattern-library that referenced this issue Apr 20, 2017
@khawkins98
Migrating to v1.2: Nested section.row
97cc791 
For
ebiwd/EBI-Framework#85 (comment)
@khawkins98
Copy link
Contributor Author

khawkins98 commented Apr 20, 2017 •
edited
Loading

Step 4

  1. Delete your exisisting header open and close tags
  2. Swap the div#global-masthead for:
  <header id="masthead-black-bar" class="clearfix masthead-black-bar">
    <nav class="row">
      <ul id="global-nav" class="menu">
        <!-- set active class as appropriate -->
        <li class="home-mobile"><a href="//www.ebi.ac.uk"></a></li>
        <li class="home active"><a href="//www.ebi.ac.uk">EMBL-EBI</a></li>
        <li class="services"><a href="//www.ebi.ac.uk/services">Services</a></li>
        <li class="research"><a href="//www.ebi.ac.uk/research">Research</a></li>
        <li class="training"><a href="//www.ebi.ac.uk/training">Training</a></li>
        <li class="about"><a href="//www.ebi.ac.uk/about">About us</a></li>
        <li class="search">
          <a href="#" data-toggle="search-global-dropdown"><span class="show-for-small-only">Search</span></a>
          <div id="search-global-dropdown" class="dropdown-pane" data-dropdown data-options="closeOnClick:true;">
          <!-- The dropdown menu will be programatically added by script.js -->
          </div>
        </li>
        <li class="float-right show-for-medium embl-selector">
          <button class="button float-right" type="button" data-toggle="embl-dropdown">Hinxton</button>
          <!-- The dropdown menu will be programatically added by script.js -->
        </li>
      </ul>
    </nav>
  </header>

Don't forget to set your .active <li> tab; in this example it's the li.home.

Your page should now begin to look more normal:
image

Details: ebiwd/EBI-Pattern-library@94214a4

khawkins98 added a commit to ebiwd/EBI-Pattern-library that referenced this issue Apr 20, 2017
@khawkins98
Migrating to v1.2: Update global header
94214a4 
for:
ebiwd/EBI-Framework#85 (comment)
@khawkins98
Copy link
Contributor Author

khawkins98 commented Apr 20, 2017 •
edited
Loading

Step 5

If you use the meta tags:

  • ebi:localmasthead-color or ebi:localmasthead-image

update them to

  • ebi:masthead-image and ebi:masthead-image

This won't have a visible effect yet.

Details: ebiwd/EBI-Pattern-library@7e05742

khawkins98 added a commit to ebiwd/EBI-Pattern-library that referenced this issue Apr 20, 2017
@khawkins98
Migrating to v1.2: Update meta tag styling
7e05742 
For
ebiwd/EBI-Framework#85 (comment)
@khawkins98
Copy link
Contributor Author

khawkins98 commented Apr 21, 2017 •
edited
Loading

Step 6

Move div.masthead.row inside div#content

Details: ebiwd/EBI-Pattern-library@e264002

khawkins98 added a commit to ebiwd/EBI-Pattern-library that referenced this issue Apr 21, 2017
@khawkins98
Migrating to v1.2: Move div.mashead
e264002 
For:
ebiwd/EBI-Framework#85 (comment)
@khawkins98
Copy link
Contributor Author

khawkins98 commented Apr 21, 2017 •
edited
Loading

Step 7

We now need to make the masthead 'sticky' (if you use the stick container) and wrap and add a div.masthead-inner.

So what is currently:

    <div class="masthead row">

Becomes:

    <div data-sticky-container>
      <div id="masthead" class="masthead" data-sticky data-sticky-on="large" data-top-anchor="main-content-area:top" data-btm-anchor="main-content-area:bottom">
        <div class="masthead-inner row">

Don't forget to add the two new </div> closing tags.

Your masthead should now span the full screen width and stick to the top properly, like so:
image

Details: ebiwd/EBI-Pattern-library@fa3a711

khawkins98 added a commit to ebiwd/EBI-Pattern-library that referenced this issue Apr 21, 2017
@khawkins98
Migrating to v1.2: Sticky .masthead-inner
fa3a711 
For:
ebiwd/EBI-Framework#85 (comment)
@khawkins98
Copy link
Contributor Author

khawkins98 commented Apr 21, 2017 •
edited
Loading

Step 8

Remove your old data-sticky-container and div#masthead, this bit (and don't forget the closing divs).

-  <div data-sticky-container>
-    <div id="masthead" data-sticky data-sticky-on="large" data-top-anchor="180" data-btm-anchor="300000">
         <header id="masthead-black-bar" class="clearfix masthead-black-bar">
           <nav class="row">
...
           </nav>
         </header>
-      </div>
-  </div>

If you're setting your masthead background image or colour through the meta tags, it will now show — otherwise this won't have any visible effect.
image

Details: ebiwd/EBI-Pattern-library@c917a85

khawkins98 added a commit to ebiwd/EBI-Pattern-library that referenced this issue Apr 21, 2017
@khawkins98
Upgrading to v1.2: Remove old div#masthead
c917a85 
For:
ebiwd/EBI-Framework#85 (comment)
@khawkins98
Copy link
Contributor Author

khawkins98 commented Apr 21, 2017 •
edited
Loading

Step 9

You may have noticed we've been adding class names to our divs that previously only had IDs, that is the div#masthead now also has the class .masthead. This helps ensure that CSS styling is properly inherited.

We also need to do this to the <footer>.

-      <div id="local-footer">
+      <footer id="local-footer" class="local-footer">
-      <div id="global-footer">
+      <div id="global-footer" class="global-footer">
-        <nav id="global-nav-expanded" class="row">
+        <nav id="global-nav-expanded" class="row global-nav-expanded">
-        <section id="ebi-footer-meta" class="row">
+        <section id="ebi-footer-meta" class="row ebi-footer-meta">

Your footer should now be styled properly.

Details: ebiwd/EBI-Pattern-library@4684d0d

khawkins98 added a commit to ebiwd/EBI-Pattern-library that referenced this issue Apr 21, 2017
@khawkins98
Migrating to v1.2: add class names to divs with ids
4684d0d 
For:
ebiwd/EBI-Framework#85 (comment)
@khawkins98
Copy link
Contributor Author

khawkins98 commented Apr 21, 2017 •
edited
Loading

Step 10

If you have a div.local-footer, move it inside div#content just before the closing </div>

This won't have a visible impact.

Details: ebiwd/EBI-Pattern-library@b2cdef5

khawkins98 added a commit to ebiwd/EBI-Pattern-library that referenced this issue Apr 21, 2017
@khawkins98
Migrating to v1.2: Move location of .local-footer
b2cdef5 
For:
ebiwd/EBI-Framework#85 (comment)
@khawkins98
Copy link
Contributor Author

khawkins98 commented Apr 21, 2017 •
edited
Loading

That's it, you should be finished now.

Again, not all of these structural changes are necessary for the look and feel of the site, but they provide a better html architecture that separates the areas of EMBL-EBI's content and your site/service's content -- which will now all be inside of div#content.

The structure now follows:

<body>
  <header id="masthead-black-bar" class="clearfix masthead-black-bar">
    <nav class="row">
      <ul id="global-nav" class="menu">
      EBI CONTROLLED STUFF
      </ul>
    </nav>
  </header>

  <div id="content">
    <div data-sticky-container>
      <header id="masthead" class="masthead" data-sticky>
        <div class="masthead-inner row">
          YOUR MENU AND PAGE TITLE
        </div>
      </header>
    </div>

    <footer id="main-content-area" class="row" role="main">
      YOUR PAGE CONTENT
    </footer>
  </div>

  <footer>
    <div id="global-footer" class="global-footer">
    EBI CONTROLLED STUFF
    </div>
  </footer>
</body>

And here's a visualisation of the improved structure between v1.1 and v1.2:
structure
View it bigger here

If you have questions, post them below or, if it's a question specific to your site's migration, open a new ticket.

@khawkins98 khawkins98 changed the title Create a sample migration from v1.1 to v1.2 Sample migration from v1.1 to v1.2 Apr 21, 2017
This was referenced Apr 21, 2017
Closed
Closed
@khawkins98 khawkins98 mentioned this issue May 17, 2017
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
1.2
Development

No branches or pull requests
1 participant
@khawkins98