Bootstrap Alerts (cloned) in Tachyons

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:

bootstrap alerts

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:

alerts in tachyons

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: https://github.com/dwyl/learn-tachyons/issues/9 🌈

dwyl / learn-tachyons

Bootstrap Alerts (cloned) in Tachyons #8