Theme request: Phantom/Multiverse

[pbrudny]

First - Thank You for that great work! I love the project 🥇

Is there any plan to add more themes from https://html5up.net/? I am looking for something suitable for a video gallery (https://html5up.net/multiverse or https://html5up.net/phantom) I wish I could do it myself however my frontend skills are not as good yet.

[nodox]

@pbrudny thank you so much!! ☺️ Happy to put these themes on the roadmap!

If you'd like I can walk you through all the steps it takes to recreate this theme on our platform. Its not hard. All you are doing is porting over the raw css/html into ReactJS components.

Do you want to have not-as-good frontend skills for the rest of your life? Let's make this a learning opportunity! 😄

[pbrudny]

@nodox Sounds interesting.

[nodox]

@pbrudny check out #7 and let me know if you're into making the contribution!

[pbrudny]

@nodox Sorry for delay. I had a very busy week but still I will try to contribute :)

[pbrudny]

@nodox I have started working on that #7

…

On Thu, Mar 8, 2018 at 7:21 PM, Steven Natera ***@***.***> wrote: @pbrudny <https://github.com/pbrudny> if you could get #7 <#7> done that would be awesome. As you requested I started working on multiverse 😄 Animations probably won't be as smooth but the js file will be provided so you can recreate the effects yourself. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#9 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABxfI76__28fe9n7_4S_20_1wJlYcfWks5tcXa-gaJpZM4SSQpX> .

[nodox]

@pbrudny thats perfect! I'll update the comment with your name on it over there.

As promised I started working on the Multiverse theme you requested. 😄 Many of the javascript effects will be left out as it would take extremely long to deliver the theme.

However it would be an opportunity for you to make another contribution. The work would involve translating that Javascript (which might be custom or Jquery dependent) into a React-friendly version.

Thanks again for helping make this project! 😄

[nodox]

The initial work for multiverse can be found here

$ git clone https://github.com/gatsbymanor/gatsby-theme-kit.git
$ cd gatsby-theme-kit 
$ yarn
$ git checkout theme-multiverse
$ gatsby develop

Goal

The final version of the theme on this branch should look and behave like this
live demo of the multiverse.

Initial work

The branch currently has the theme styles implemented via SASS but after debugging
a few problems this theme should use the css found in src/assets/css. A Tiles
component has been made to generate all the image squares in the themes gallery.

Remaining body of work

Most of the work is started in the src/pages/index.js files. Remove sass files and use
plain CSS. Create the modal effect for the tiles (empty functions already created).
Make it look similar to the demo theme.

Common mistakes and Pitfalls

The lead developer is constrained to work within the bounds of the css classes
already declared in the stylesheet to have the smoothest development experience.
The above hierarchy might not be possible because of the way the css classes are
interacting. Therefore create additional classes in a separate file called custom.scss
and import those additional styles to get the desired effect. Beware of Gatsby SSR.

These are just suggestions, if you have extensive experience with React please use
your judgement when creating best practices.

Acceptance Criteria (ACs):

• [Required] Create React components from HTML in src/pages/index.js
• [Required] Fix breakpoints for mobile first design
• [Required] Use plain css
• [Required] Add unit tests for each component
• [Required] Provide a README
• [Optional] Fancy animations for resizing

Contribution Guidelines

Follow the steps outline in our docs on how to Contribute a theme.

Developers to contact for help

React out to @nodox fi you need help any step of the way.

Final notes

Developers of all experience levels are welcome to tackle this development effort.
Thank you so much for contributing to our community!
❤️ 😄

[nodox]

@pbrudny here is the product specs for the multiverse theme! Thanks again for helping with these themes. 🥇

[pbrudny]

@nodox I got stuck writing e2e tests when there is GraphQL used. Do you have any example how it could be done?

[nodox]

@pbrudny sadly, I do not have an example. I think we can live without e2e tests in this use case for now as I've been wanting to deprecate nightwatch in favor of cypress.