What is HEML?

Small introduction to a new open source markup language for building responsive email
30 October 2017   337

What is HEML?

HEML is an open source markup language for building responsive email. It gives you the native power of HTML without having to deal with all of the email quirks. HEML makes building emails as easy as building websites.

HEML is built on 3 core principles. Each decision about the architecture and element design is made with these in mind.

  • Native Feel
    If you know HTML and CSS, you will get started with this programming language fast
     
  • Forward Thinking
    HEML is designed to take advantage of all that email can do while still providing a solid experience for all clients
     
  • Extendable
    You can create your own powerful elements and style rules. Share them with the world, or keep 'em to yourself

Code example 

<heml>
  <head>
    <subject>Email Rox!</subject>
    <style>
      body { background: SkyBlue; }
      h1 { color: DarkViolet; }
    </style>
  </head>
  <body>
    <container>
      <marquee><h1>Hello world </h1></marquee>
    </container>
  </body>
</heml>

Links

If you are interested, visit:

  • GitHub
  • Website
  • Docs
  • Online editor

How to add border to header title?

Two code examples that will help you to add border to a h1 title in HTML
26 October 2017   234

In order to add a border to a header title, you can a pseudo element positioned over the border-bottom:

h1 {
  font-size: 30px;
  color: #000;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}

h1::after {
  content: "";
  display: block;
  border-bottom: 1px solid orange;
  width: 25%;
  position: relative;
  bottom: -6px; /* your padding + border-width */
}
<h1>Navigation</h1>

Also, you can use a gradient and background-size

h1 {
  font-size:30px;
  color:#000;
  background:linear-gradient(to right, gold 8em, #ccc 8em) bottom left no-repeat;/* here start/stop color is et at 8em, use your own value and colors */
  background-size:100% 3px;/* here set thickness */
  padding-bottom:5px;
}