Rubik Presentation Page
Icon html
Icon bootstrap

😍 Case Study: "How we built from scratch Light Bootstrap Dashboard" on one of the biggest publications on Medium: FreeCodeCamp.

Rubik Presentation Page

Premium One Page Template
· 5.00/5 (33 Reviews)

License

518 Downloads
39 Comments
Premium Support
Lifetime Updates
Release: 2 years ago
Update: 1 month ago
Icon html
Icon bootstrap

47 Handcrafted Components

5 Customized Plugins

4 Example Pages

Bootstrap Based

Documentation

Fully Responsive

Product certified by: Creative Tim

We are here to help you!

39 Web Developers commented on this product

Report issue Video Tutorial

chompusudarat
  • downloaded
10 months ago

@axelut thank you for your reply. I change the javascript to this one "https://maps.googleapis.com/maps/api/js" already same like it not work fine. in the beginning it was working but after load page complete then it doesn't work again. and also if I just push F12 on my laptop to run it. same like it work fine but if I upload and run them on server it not working :(

axelut
  • owner

@chompusudarat sorry to hear that you still have the issue. That is very weird, it is working on the local computer but not on the server. Our website's presentation page is built with Rubik and is hosted on Heroku: http://presentation.creative-tim.com/ and we have a map in the page and everything is working fine there. Maybe on your server they require and explicit key... can you please follow Google's Steps on how to get a key and add in in your google.maps link like in this tutorial: https://developers.google.com/maps/documentation/javascript/get-api-key Please let us know your progress. Best, Alex!
10 months ago

juliyvchirkov
  • downloaded

@chompusudarat @axelut sorry for bothering, but maybe my advice will help somehow as far as I remember, google is cancelling free uncontrolled use of gapi related services bit by bit, the new way of dealing w/ gapi has been officially announced by google 2+ years ago thus nowadays the one & only way to get google api related services working for your projects (sites) w/o failures is to use google developers console to create & manage personal workspace for each project, 'cause you gotta request & setup own personal key (or keys if needed, that's for you to decide) to get gapi working properly I guess the fountainhead of your troubles w/ google.maps api can be key mismatch — if you're using the code of «rubik» as is w/o modifications, you're using gapi related stuff w/ the key which belongs to creative-tim team, & thus a hundred to one this key is limited to the bunch of creative-tim team projects (sites, domains) so to get rid of failures w/ gapi you gotta register / login at https://console.developers.google.com/apis/, create new project for your site where you're going to place the map, choose from the list & connect to your project apis which you're planning to use (screenshot https://goo.gl/SLBtEk), request / generate one or a couple of keys for your needs, & replace the key of creative-tim team w/ your own in the code of rubik «a couple» since you can use gapi inside your project in many ways w/ different keys: first can be for use w/ javascript api, i.e. key visible to every visitor in code of your pages in public, next for use only inside php scripts on server-side, i.e. unreachable for everyone but you, third can have limited use only within android or ios mobile apps, et cetera & since these keys are smth like your ID for gapi services, for sure you'll want to protect your «public» keys by limiting the possible points of their use w/ list of your domains for security reasons (for example, to be sure nobody uses your key to connect gapi on some fishing site, or just to know nobody spends your traffic et cetera) — 'cause since google treats your key as your ID, any requests & operations made from any server on internet w/ your «public» unprotected key will be logged to your history & your responsibility despite my review of the flow may seem a bit bulky, in fact in google developers console everything is extremely simple & it takes no time to setup that shit for example, I'm using gmaps js api, roads api, static maps api, street view api, street view image api, embed api, geocoding api, places api, directions api & distance matrix api w/ client-side javascript & server-side php requests for one of our projects just to supply the customers w/ a couple of maps to direct them to offline shops & showrooms (despite that galore gapi stuff may seem excessive indeed it's used to make the routine sheen & accessible on any device w/ any hardware & os, both mobile & desktop, light & static on low bandwidth, powerful & interactive otherwise, et cetera) — but syne google for developers provides nice & clear detailed man w/ live examples for every gapi, it almost took for me no time to integrate the whole bunch hope this helps, & you'll also setup your own gapi instance quickly and easily yup, the whole gapi service is still free of charge w/ really great terms — if your project is not geostartup like 4square you'll never need to pay no cent since you'll never get over the limits
10 months ago

juliyvchirkov
  • downloaded

@chompusudarat @axelut sorry for bothering, but hope my advice will help somehow. as far as I remember, google is cancelling free uncontrolled use of gapi related services bit by bit; the new way of dealing w/ gapi has been officially announced by google 2+ years ago, thus nowadays the one & only way to get google api related services working for your projects (sites) w/o failures is to use google developers console to create & manage personal workspace for each project, 'cause you gotta request & setup own personal key (or keys if needed, that's for you to decide) to get gapi working properly. I guess the fountainhead of your troubles w/ google.maps api can be key mismatch — if you're using the code of «rubik» as is w/o modifications, you're using gapi related stuff w/ the key which belongs to creative-tim team, & thus a hundred to one this key is limited to the bunch of creative-tim team projects (sites, domains). so to get rid of failures w/ gapi you gotta register / login at https://console.developers.google.com/apis/, create new project for your site where you're going to place the map, choose from the list & connect to your project apis which you're planning to use (screenshot https://goo.gl/SLBtEk), request / generate one or a couple of keys for your needs, & replace the key of creative-tim team w/ your own in the code of «rubik». I say «a couple» since you can use gapi inside your project in many ways w/ different keys: first can be used w/ javascript api, i.e. this key will visible to every visitor in code of your pages in public, next — for use only inside php scripts on server-side, i.e. unreachable for everyone but you, third can have limited use only within android or ios mobile apps, et cetera. & since these keys are smth like your ID for gapi services, for sure you'll want to protect your «public» keys by limiting the possible points of their use w/ list of your domains for security reasons (for example, to be sure nobody uses your key to connect gapi w/ some fishing site, or just to know nobody spends your traffic et cetera) — 'cause syne google treats your key as your ID, any requests & operations made from any server on internet w/ your «public» unprotected key will be logged to your history & improper use will be your responsibility. despite my review of the flow may seem a bit bulky, in fact in google developers console everything is extremely simple & it takes no time to setup that shit. for example, I'm using gmaps javascript api, roads api, static maps api, street view api, street view image api, embed api, geocoding api, places api, directions api & distance matrix api w/ 2 different keys for client-side javascript & server-side php requests for one of our projects just to supply the customers w/ a couple of maps to direct them to offline shops & showrooms (despite that galore gapi stuff may seem excessive indeed it's used to make the routine sheen & accessible on any device w/ any hardware & os, both mobile & desktop, light & static on low bandwidth, powerful & interactive otherwise, et cetera) — but syne google for developers provides nice & clear detailed man w/ live examples for every gapi, it almost took for me no time to integrate the whole bunch. hope this helps, & you'll also setup your own gapi instance quickly and easily. yup, the whole gapi service is still free of charge w/ really great terms — if your project is not geostartup like 4square you'll never need to pay no cent since you'll never get over the limits ———————————————————————— small postscriptum for Alex: have been forced to repost this comment anew 'cause all line breaks have been gone after posting, turning my comment into hard-to-read-sheet. smth like comment.replace(/\n/g, '<br>') w/ js before submitting the form or comment.gsub(/\n/, '<br>') w/ ruby on server-side after submit could make the things look much better. lack of line breaks turns phrases into the swamp. drain the swamp! 😸
10 months ago

axelut
  • owner

@juliyvchirkov thank you very much for the detailed explanation. It makes sense that Google want to remove the access from not controlled sources. We will get the API keys to use inside our products and for the users who are downloading the product we will add something like "?key=[your-generated-api-key]" and a tutorial with the steps that they need to take to generate the key as you described. For our comment system, yes it is very basic... we will add something that will get Markdown as input so everything will be formatted right + having working links, code blocks etc. If you know anything for Rails, which also works with our current username attribute "@somebody", we would be very happy to check it. Best, Alex!
10 months ago

chompusudarat
  • downloaded
10 months ago

@axelut Thank again for your reply, I got it now. I follow Google's Steps and then it work Thank you for your help :)

axelut
  • owner

@chompusudarat that's great! Please let us know if we can help you with anything else. Best, Alex!
10 months ago

chompusudarat
  • downloaded
10 months ago

@axelut Yeah, But can you pls give me an advice about how do I can get my location on map. Which API that you generate? Do I need to change some link for add my location instead location now that is already on the theme. I try to change it by change the link for google maps but it so many link even I change them all it still show the theme location :( Thank again :)

axelut
  • owner

@chompusudarat glad that it was working. To add your own coordinates please go to assets/js/rubick.js around line 387 you will see this function: initGoogleMaps and there you can set the Lat Long for your location. Best, Alex!
10 months ago

lpfy 9 months ago

Small glitch when using video as background, the responsive-src attr should place in video tag rather than in source tag. The responsive image background won't show up when screen resized <992px, everything become fine once I moved responsive-src attr from source tag to video tag.

axelut
  • owner

@lpfy thank you for using our product and for the information. You're right, there is an issue with responsive-src, we added this on our updates list, we will test the solution that you proposed on multiple devices, and if it is working fine we will add it in the official archive. Please let us know if we can help you with anything else. Best, Alex!
9 months ago

jgregmcverry
  • downloaded
6 months ago

@axelut. Great theme. I used your hover cards for another project and then saw you article on Medium and nknew this was a team I must support. I am using a rubik theme here: productsandservices.revisiononlinelearning.com And I am having a few issues with the header: images and buttons: Specifically I can not get them to display consistently well on mobile. For the buttons I created my own class as I could not style them otherwise. I could not even get inline styling to work. The buttons are pushing to the right of mobile display I have tried numerous small and extra small column contributions and can't get them to behave as I would expect in bootstrap. For the image I would like to display the logo centered in the header. Any tips you or the community could provide will be great.

axelut
  • owner

@jgregmcverry thank you for using our products. Glad that you like the article from Medium :D I've checked the page that you've send. Unfortunately I don't see any buttons in the header. Did you change something in the meantime? Also, which logo are you looking to make centered? Best, Alex!
5 months ago

jgregmcverry
  • downloaded
5 months ago

Read through the CSS. Solved most of my own issues. Wish I could delete comments I posted bc things work great. Thanks for your help. @alexlut

axelut
  • owner

@jgregmcverry got it. Glad that it is working fine. I will do that for you :D Best, Alex!
5 months ago

matrfb 4 months ago

I would like to embed two separate maps in my Rubik page (with details of two different locations). How do I do this?

axelut
  • owner

@matrfb thank you for your interest in our product. You just duplicate the code that is for 1 map. If you search in startup.html the id "contactUsMap" you will find the area with the map and the Javascript for that is on rubick.js line 83 and line 387 where is called the method: initGoogleMaps. Please let us know if this was helping you. Best, Alex!
4 months ago

matrfb 4 months ago

Also, can you send me the plugin that makes the contact form work? Thank you!

axelut
  • owner

@matrfb please check this tutorial: https://bootstrapbay.com/blog/working-bootstrap-contact-form/ and let us know how it was working. Best, Alex!
4 months ago

ikkyh_blu 2 months ago

Hello! This is the first time I think of getting a paid template. Rubik just left me in love! What most caught my attention was the part of "Our Projects." It looks unique and is perfect for the website style I plan to put together! I have some doubts to take, both because I have been searching for templates on your and other websites for quite some time and also 'cause I'm a little newbie on this subject (it will also be the first time I will pay for a hosting service; before I just used Blogger/Wordpress and bought the domain). I hope you do not mind answering. (: > Does Rubik works for Wordpress? I need this information to be able to buy my hosting service (there is the customized hosting for WP). > Does the language change plugin works/exists for Rubik? It is crucial to my site! > If it does not exist, what templates have it? > Other templates have the "Projects" component I pointed out, in the way it works for Rubik? Or is it Rubik's exclusive? To be honest, it is my main reason to choose it (besides the price; I'm Brazilian, and the dollar here is quite expensive). > I watched the video and was able to understand how the Builder works, but despite having a little knowledge on coding (years editing HTML on blogger), things seem a bit hazy for me yet. How exactly would you edit the template, applying images and changing the text? If it accepts WP, would it be through it? By the cPainel? Is it only through the generated code itself? Do I need to download something? Bootstrap? RVsitebuilder? (If it's just the code, fine, I think I can do it). Thank you for your attention :D

axelut
  • owner

@ikkyh_blu thank you for your interest in our product. Unfortunately, Rubik is not working on Wordpress. If you want to make it compatible with Wordpress you need to manually move all the elements, html, css, js on a Wordpress template. Rubik is just a regular simple HTML template, with CSS and JS. If you want to change images/text you have to go into the actual code and manually change that. You need knowledge of HTML/CSS and Bootstrap in order to work with our products. The projects section was built just for Rubik, if you want to move that to other products or from other products that we have, you need to manually dig into the code and move those parts. Hope this information helps you. I've added the product to your account just to check it and see if you can work with it. If you can work and it's easy for you to change things then you can purchase a license, otherwise, if it is hard to work just let us know and we will remove the license. We want to know if this is good for you or maybe a Wordpress theme from a different provider would fit better. Best, Alex!
2 months ago

You have to be logged in to post a comment. Login here.

Why our customers appreciate us

Feature Availability

Very practical. You can build your landing page in seconds. Great!

Design Quality

Code Quality

The html generator is great and allows you to make your site very quickly!