SDK Boilerplate CSS

SDK's boilerplate CSS is independent from any CSS frameworks.

Even though demo examples are preconfigured with Tailwind CSS, developers are free to remove tailwind and import any framework or write their own CSS.

We have added minimal CSS classes to support interface features. Developers are free to overwrite them all.

Basic share implementation

<div class="share-button-container">
<div class="share-button">{ $cf.ui.icon('share) }</div>
<ul class="share-site-list bottom">
  <!-- loop $cf.ui.sharesites() -->
  <li class="share-site-item"><a class="share-site facebook' onclick="{$cf.ui.share('facebook', event)}">{ $cf.ui.icon('facebook)}</a></li>    
  <li class="share-site-item"><a class="share-site twitter' onclick="{$cf.ui.share('twitter', event)}">{ $cf.ui.icon('twitter)}</a></li>    
</ul>
</div>

We represent each post with card and card-custom has default variables added to it.

Read SDK's scss file to see class definitions.

.card-custom { ... }

Image with ratio and play icon implementation

<div class="img-ratio">
  <span class="ratio"></span>
  <img onclick="{$cf.ui.click(broadcast, 'image', event)}" src={broadcast.image} />
  <!-- if $cf.ui.canShow('play_icon') && broadcast.can_play !-->
  <span class="play_icon">{ $cf.ui.icon('play) }</span>
</div>

can_play is a computed broadcast property.