custom web development guide

Since Violet Rails uses ComfortableMexicanSofa as a CMS, This guide is based on: https://github.com/comfy/comfortable-mexican-sofa/

CSS and styling

Bootstrap 4 and jQuery are included out of the box. To override Bootstrap styles, use the default layout. To write custom CSS you can use <style> tags on pages where you need custom styling. So for example, you can set a custom CSS class like this below:

<style>
.bg-img{
	  background: url('{{ cms:file_link 30 }}');
	  background-repeat: no-repeat;
  	  background-position: center;
	  background-size: cover;
        }
</style>

This will set the background to a file that is in the CMS (notice the single quotes wrapping the snippet {{ cms:file_link 30 }}

linking assets

To safely link assets, without redactor -- well, redacting your code. Follow this pattern in your HTML:

<div class="container">
  {{ cms:file_link 5, as: image, class:"img-fluid img1" }}
</div>

This will generate the following HTML:

<div class="container">
  <img src="https://dynamically-generated-url-here.com" class="img-fluid img1" alt="filename.file-extension"  />
</div>

Video backgrounds

These are always cool, as seen here. Credits go to Pralish Kayastha and his original gist.

General setup

• Using the poster attribute causes the video to show up instantly after it finishes downloading.

• Use both webm and mp4 format to support different browsers and devices

• Convert your video to webm format. It reduces the size significantly

• Wrap the video element with a container

    <div id="video-container">
	<video id="video" muted autoplay playsinline>
        	<source src=" {{ cms:file_link 38 }}" type="video/webm">
        	<source src="{{ cms:file_link 4 }}" type="video/mp4">
	</video>
    </div>

• Add background image to the container

#video-container {
  background-image: url("{{ cms:file_link 34}}");
  background-size: cover;
}	

• Set the video's opacity to 0 and add your desired transition ;

#video {
  opacity: 0;               
  transition: opacity 2s ease;    
}

• Add an event listener for the play event (that is triggered automatically because of autoplay and playsinline). Change the opacity when the event is triggered.

$("#video").bind('play', function (e) {
   $("#video").css('opacity', 1.0);
});

making it work on Safari (desktop & mobile)

• Safari might not autoplay the video. One of the workarounds would be to use the tag.

• Note: No other browsers support video url in img tag.

• Add an img tag with the video url as it's src inside the video container.

    <div id="video-container">
	      <video id="video" muted autoplay playsinline>
        	  <source src=" {{ cms:file_link 38 }}" type="video/webm">
        	  <source src="{{ cms:file_link 4 }}" type="video/mp4">
	      </video>
        <img id="img-tag" class="h-100 w-100" style="object-fit: cover;" src="{{ cms:file_link 4 }}">  
    </div>

• Create a function to toggle between video and img based on the browser.

function browserDetection() {
    if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
        document.getElementById('video').style.display= "none";
    } else {
        document.getElementById('img-tag').style.display= "none";
    }     
}  
   
  browserDetection();

Call to Actions

These are built in templated form helpers with recapcha protection. See example here. In your HTML, you can render one of these forms by their ID (check the table under call to actions to copy the snippet specific to your application)

{{ cms:helper render_call_to_action, 1 }}