Bootstrap Alerts (cloned) in Tachyons

[nelsonic]

The default UI Theme/Framework in Phoenix (Web Framework) is Twitter Bootstrap.

There is a reason for using Bootstrap: (most) "developers" are (way) too lazy to learn CSS
so giving them a "style guide" they can copy-paste from means they can make their apps look nice with minimal effort. So, we @dwyl need to help make it easy for "busy" people to use Tachyons by copy-pasting. For example: ...

In Phoenix the get_flash view helper is used to display an :info or :error messages using Bootstrap's alert UI:

Notice the "Copy" button right there next to the code example? #CopyPasteDrivenDevelopment

Implementing Alerts in Tachyons

Unpack the CSS in Bootstrap to Understand it

Inspect the element to see how it's constructed:

Read the CSS on the Bootstrap Component Guide so that it can be replicated in Tachyons. 🔍

Tachyons + HTML Code:

<p class="w-90 ba br2 pa3 ma2 green bg-washed-green" role="alert">
  <strong>Well done!</strong> You successfully read this important alert message.
</p>
<p class="w-90 ba br2 pa3 ma2 blue bg-washed-blue" role="alert">
  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</p>
<p class="w-90 ba br2 pa3 ma2 gold bg-washed-yellow" role="alert">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</p>
<p class="w-90 ba br2 pa3 ma2 red bg-washed-red" role="alert">
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</p>

Result:

Note: I am deliberately limiting myself to using only the default Colors for Text, Border and Background to keep it simple because if we keep the Colors consistent all other components will match. We will be building a way of doing "Dynamic Components with Tachyons" soon, but for now we just want to get our "cloned" components as close as possible. Also, I prefer the colors that @mrmrs has chosen as they are brighter and thus more legible and friendly! 😉

Explanation of Tachyons Styles/Code

• w-90 width 90% see: http://tachyons.io/docs/layout/widths
• ba border on all sides. see: http://tachyons.io/docs/themes/borders
• br2 border radius 2 (.25rem) http://tachyons.io/docs/themes/border-radius
• pa3 padding all sides 3 (1rem) see: http://tachyons.io/docs/layout/spacing
• ma2 margin all sides 2 (0.5rem) see: http://tachyons.io/docs/layout/spacing (didn't think we need too much margin this feels like "just enough"...)
• green font color green (also used for the border by default if the border color is not defined. in our case that's fine cause it keeps the colors consistent) see: http://tachyons.io/docs/skins/
• bg-washed-green baground colour washed (light) green. see: http://tachyons.io/docs/themes/skins/

Usage in Context of a Phoenix Project

<% # Alerts for Info/Errors using Tachyons see: https://git.io/vSMY7
  info = get_flash(@conn, :info)
  error = get_flash(@conn, :error)
%>
<%= if info do %>
  <p class="w-90 ba br2 pa3 ma2 green bg-washed-green" role="alert">
    <%= info %>
  </p>
<% end %>
<%= if error do %>
<p class="w-90 ba br2 pa3 ma2 red bg-washed-red" role="alert">
  <%= error %>
</p>
<% end %>

Practical Example in a @dwyl Client Project?

Where is this used? see: https://github.com/healthlocker/healthlocker/search?utf8=%E2%9C%93&q=b--hl-yellow where a custom border color is used for the alert.

Can We Divide and Conquer This...?

Can we build a Complete Component Guide for @dwyl's Projects? see: #9 🌈

[nogainbar]

Interesting! I know its down to a matter of taste and 'spirit of times' but I cannot help but say that even by just translating the Bootstrap elements to Tachyon's world, is making those immediately look better ;-D