Free PHPFree PHP scripts classes and info

Finally! CSS Triangles Without Ugly Hacks

CSS Grid VS Flexbox: A Practical Comparison

Not too long ago, the layout for all HTML pages was done via tables, floats, and other CSS properties that were not well suited for styling complex web pages.

Then came flexbox – a layout mode that was specifically designed for creating robust responsive pages. Flexbox made it easy to properly align elements and their content, and is now the preferred CSS system of most web developers.

Now we have a new contender for the best-system-to-build-html-layouts trophy (trophy title is a work in progress). It is the mighty CSS Grid, and by the end of this month, it will be available natively in Firefox 52 and Chrome 57, with other browsers (hopefully) following soon.

A Basic Layout Test

To get a sense of what it’s like to build layouts with each system, we’ve build the same HTML page twice – once with flexbox, and another time with the CSS grid. You can download both projects from the Download button near the top of the article, or inspect them in this online demo:

A Stripped-down Static Page Layout

The design is pretty basic – it consists of a centered container, inside of which we have a header, main section, sidebar, and a footer. Here are the main “challenges” that we’ll have to solve, while keeping CSS and HTML as clean as possible:

1. Position the four major sections of the layout.
2. Make the page responsive (the sidebar goes below the main content on smaller screens).
3. Align the contents of the header – navigation to the left, button to the right.

As you can see, for the sake of the comparison we’ve kept everything very simple. Let’s start with problem number one.

Challenge 1: Position The Page Sections

Flexbox Solution

We’ll start off with the flexbox solution. We add display: flex to the container and direction its children vertically. This will position all the sections one under another.

.container {
    display: flex;
    flex-direction: column;
}

Now we need to make the main section and the sidebar stand next to each other. Since flex containers are generally one-directional, we will need to add a wrapper element.

<header></header>
<div class="main-and-sidebar-wrapper">
    <section class="main"></section>
    <aside class="sidebar"></aside>
</div>
<footer></footer>

We then make the wrapper display:flex and flex-direction it in the opposite direction.

.main-and-sidebar-wrapper {
    display: flex;
    flex-direction: row;
}

The last step is to set the size of the main section and the sidebar. We want the main content to be three times the size of the sidebar, which isn’t hard to do with flex or percentages.

.main {
    flex: 3;
    margin-right: 60px;
}
.sidebar {
   flex: 1;
}

As you can see flexbox did pretty well, but we still needed quite a lot of CSS properties + an additional HTML element. Let’s see how the CSS grid will do.

CSS Grid Solution

There are a couple of different ways to use the CSS grid, but we will go with the grid-template-areas syntax, as it seems most suitable for what we are trying to accomplish.

First we will define four grid-area-s, one for each page section:

<header></header>
<!-- Notice there isn't a wrapper this time -->
<section class="main"></section>
<aside class="sidebar"></aside>
<footer></footer>

header {
    grid-area: header;
}
.main {
    grid-area: main;
}
.sidebar {
    grid-area: sidebar;
}
footer {
    grid-area: footer;
}

Then we can set up our grid and assign the placement of each area. The code below may seem quite complicated at first, but once you get to know the grid system it becomes really easy to grasp.

.container {
    display: grid;

    /* 	Define the size and number of columns in our grid. 
	The fr unit works similar to flex:
	fr columns will share the free space in the row in proportion to their value.
	We will have 2 columns - the first will be 3x the size of the second.  */
    grid-template-columns: 3fr 1fr;

    /* 	Assign the grid areas we did earlier to specific places on the grid. 
    	First row is all header.
    	Second row is shared between main and sidebar.
    	Last row is all footer.  */
    grid-template-areas: 
        "header header"
        "main sidebar"
        "footer footer";

    /*  The gutters between each grid cell will be 60 pixels. */
    grid-gap: 60px;
}

And that’s it! Our layout will now follow the above structure, and because of the way we’ve set it up we don’t even have to deal with any margins or paddings.

Challenge 2: Make Page Responsive

Flexbox Solution

The execution of this step is strongly connected to the previous one. For the flexbox solution we will have to change the flex-direction of the wrapper, and adjust some margins.

@media (max-width: 600px) {
    .main-and-sidebar-wrapper {
        flex-direction: column;
    }

    .main {
        margin-right: 0;
        margin-bottom: 60px;
    }
}

Our page is really simple so there isn’t much to rework in the media query, but in a more complex layout there will be lots and lots of stuff to redefine.

CSS Grid Solution

Since we already have the grid-areas defined, we just need to reorder them in a media-query. We can use the same column setup.

@media (max-width: 600px) {
    .container {
	/*  Realign the grid areas for a mobile layout. */
        grid-template-areas: 
            "header header"
            "main main"
            "sidebar sidebar"
            "footer footer";
    }
}

Or, we can redefine the entire layout from scratch if we think that’s a cleaner solution.

@media (max-width: 600px) {
    .container {
    	/*  Redefine the grid into a single column layout. */
        grid-template-columns: 1fr;
        grid-template-areas: 
            "header"
            "main"
            "sidebar"
            "footer";
    }
}

Challenge 3: Align Header Components

Flexbox Solution

Our header includes some links for navigation and a button. We want the nav to be on the left and the button on the right. The links inside the nav have to be aligned properly next to each other.

<header>
    <nav>
        <li><a href="#"><h1>Logo</h1></a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </nav>
    <button>Button</button>
</header>

We’ve already done a similar layout with flexbox in one of our older articles – The Easiest Way To Make Responsive Headers. The technique is really simple:

header {
    display: flex;
    justify-content: space-between;
}

Now the navigation list and the button are properly aligned. All that is left is to make the items inside the <nav> go horizontally. It’s easiest to use display: inline-block here, but since we are going full flexbox, let’s apply a flexbox-only solution:

header nav {
    display: flex;
    align-items: baseline;
}

Only two lines! Not bad at all. Let’s see how CSS grid handles it.

CSS Grid Solution

To split the nav and the button we will have to make the header display: grid and set up a 2-column grid. We will also need two extra lines of CSS to position them at the respective borders.

header{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
header nav {
    justify-self: start;
}
header button {
    justify-self: end;
}

As for the inline links inside the navigation – we couldn’t get it quite right with CSS grid. Here is how our best try looks:

The links are inline but they can’t be properly aligned, since there isn’t a baseline option like in flexbox’s align-items. We also had to define yet another subgrid.

header nav {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    align-items: end; 
}

It’s clear that the CSS grid struggled with this part of the layout, but that isn’t too surprising – it’s focus is on aligning containers, not so much the content inside them. It just isn’t meant for doing finishing touches.

Conclusion

If you’ve made it through the whole article (in which case great job!), the conclusion shouldn’t come as a surprise to you. The truth is, there isn’t a better system – both flexbox and the CSS grid are good at different things and should be used together, not as alternatives to one another.

For those of you who skip directly to the conclusion of articles (no worries, we do it too), here is a summary of the comparison:

• CSS grids are great for building the bigger picture. They makes it really easy to manage the layout of the page, and can even handle more unorthodox and asymmetrical designs.
• Flexbox is great at aligning the content inside elements. Use flex to position the smaller details of a design.
• Use CSS grids for 2D layouts (rows AND columns).
• Flexbox works better in one dimension only (rows OR columns).
• There is no reason to use only CSS grids or only flexbox. Learn both and use them together.

CSS Grid VS Flexbox: A Practical Comparison

15 Interesting JavaScript and CSS Libraries for March 2017

Our mission at Tutorialzine is to keep you up to date with the latest and coolest trends in web development. That’s why every month we release a handpicked collection of some of the best resources that we’ve stumbled upon and deemed worthy of your attention.

Propeller

Propeller is a CSS components framework based on Bootstrap and Google’s Material Design language. It includes 25 components made with responsiveness in mind and featuring the typical Material Design animations. The project can be downloaded as a theme for Bootstrap, a full framework, or as stand alone components.

BaguetteBox

BaguetteBox is a pure JavaScript library for creating responsive lightbox galleries. It is very lightweight, mobile-ready, easy to use and customize, and utilizes CSS3 transitions for buttery-smooth image transitions.

We recently used this library in the making of our freebie pack of 4 Bootstrap Gallery Templates, and we can say we enjoyed working with BaguetteBox a lot.

Whitestorm

Framework for developing 3D web apps and games using the Three.js engine. It provides straightforward wrappers for many common Three.js tasks, making it easier to set up an environment, create objects, add physics, and more. There is an official boilerplate project to get you started, as well as a tool for integration with React.

Animatelo

Animatelo is a port of the extremely popular Animate.css library that replaces the CSS transitions with Web Animations API clones. All of the original Animate.css effects are recreated, but the API is now based on JavaScript methods instead of CSS classes. The library is lightweight and jQuery independent, but may require a polyfill on older browsers.

FuseBox

FuseBox is a bundle loader for JavaScript and CSS with optional add-ons for TypeScript, Sass, and more. It is created with simplicity and performance in mind, providing a viable alternative to webpack. To get you started there are quick boilerplate projects for Angular 2 + TypeScript, React + Babel, Vue.js, Electron, and others.

Yargs

Yargs is a framework for building full-featured command line applications with Node.js. It allows you to easily configure commands, parse multiple –arguments, and setup shortcuts. It even generates help menus automatically.

WebGradients

A large collection of beautiful color gradients that can be easily applied to any HTML page. The project’s website allows you to quickly glance over the available gradients, see them in full screen, and one-click copy them as a CSS property.

Sticky-Kit

Sticky-kit is a jQuery plugin that allows you to attach elements to a certain area on the page, making them stick to it’s boundaries. This way you can have a sidebar that is always visible and scrolls with the rest of the page, but can be contained within its parent container.

ScrollDir

Super-lightweight, no-dependencies JavaScript library for monitoring scroll direction and movements. ScrollDir watches the movement of the scrollbar and toggles an up/down data-attribute on an element of your choice. It ignores small scroll movements, creating a smooth, non-jittery experience.

Svgo

Node.js tool for optimizing SVG files, stripping them from various unnecessary information such as editor metadata, comments, hidden elements, and other attributes that don’t affect the rendered vector. SVGO has a plugin-based architecture, so you can freely choose what to remove and what to leave in.

Store.js

Store.js is a cross-browser solution for advanced local storage. Recently, a version 2 was released, refreshing many of the features and adding extra functionality, such as array/object operations and improved expiration options.

In the previous issue of our monthly web dev resources list, we featured a similar library called localForage. It provides many of the same features as Store.js, but has a more localStorage-like syntax. Make sure to check it out as well.

Snarkdown

Snarkdown is a super simple Markdown parser written in JavaScript. Admittedly, it’s not the most complicated or full-featured parser, but it’s probably the easiest to implement. Snarkdown is only 1kb in size and has only a single method, making it perfect for quick projects where a full parser would be overkill.

Unfetch

The Fetch API is a modern rework of the XMLHttpRequest interface, giving developers a much better way to handle asynchronous requests. Although it’s support now covers most modern browsers, the fetch() method is still unavailable in IE.

This brings us to Unfetch – a reliable polyfill in under 500 bytes.

Scrollanim

Vanilla JavaScript library for on-scroll animations. Scrollanim offers lots of customization options, separate HTML and JavaScript APIs, and over 50 smooth animation effects thanks to the built-in Animate.css dependency.

Neurojs

JavaScript framework for experimenting with deep learning in the browser, featuring a full-stack neural network that can be trained via reinforcement-learning. The project showcases a cool Demo app where self-driving cars learn to navigate in a 2D environment.

15 Interesting JavaScript and CSS Libraries for March 2017

Freebie: 4 Bootstrap Gallery Templates

In this post we would like to share with you 4 awesome image gallery templates for Bootstrap 3. Just like all our freebies, these templates are completely free to use (no attribution required), fully responsive, and super easy to implement – just copy and paste!

The Templates

The four templates use the Bootstrap 3 grid for their layouts. The HTML is fully compliant with the framework and follows the recommended practices. For styling we’ve used good ol’ CSS, while making sure to keep it self contained so it won’t mess up the rest of your styles.

Each template has unique CSS-only hover effects, as well as Lightbox functionality thanks to the baguetteBox.js plugin. There are many other Lightbox libraries out there but we chose that one because of the cool name (although it having no dependencies and being super easy to use were taking into account as well).

The BaguetteBox Plugin In Action

How to use

To use any of the templates from the demo, follow these simple steps:

1. Grab the zip archive from the Download button near the top of the page and extract it.
2. There are separate folders for each template + a folder of placeholder images (courtesy to Unsplash). Decide which template you want and grab it’s HTML from the .tz-gallery element in the index.html file.
3. Paste the HTML into your project. Make sure you have Bootstrap 3 on that page.
4. The styles are located in separate CSS files for each design. Link to the CSS file or copy its contents and add them to your styles.
5. For the Lightbox effect add the baguetteBox CSS and JS, and initialize it in a script tag – baguetteBox.run('.tz-gallery');.

Gallery Template With Fluid Layout

Free for Commercial Use

You have all rights to customize and use these templates in both personal and commercial projects. All our freebies are 100% royalty free, no attribution required (our license page). Enjoy!

Freebie: 4 Bootstrap Gallery Templates

Building Responsive Emails With MJML

Building Responsive Emails With MJML

Making HTML emails is just like building websites. The only difference is that layouts have to be constructed using <table>, CSS styles have to be written inline, and you have to support clients so out of date, they use Microsoft Word for rendering. So yeah, just like making websites, only infinitely worse.

One way to make email development easier is to use a framework which will take care of most of the above-mention issues. In this tutorial we will show you how to use the excellent MJML framework to make your own unique email templates.

Disclaimer: This tutorial contains images of delicious food. Read at your own risk!

1. What is MJML?

MJML provides a simple XML-like language that can be compiled to email-ready HTML. This way we don’t have to manually code entire layouts out of tables and legacy in-line styles.

MJML on the left, Email-ready HTML on the right

The framework offers a rich set of standardized components with various customization options. By constructing our template out of MJML components, we make sure that we won’t use any non-email-proof CSS properties or HTML tags.

2. The Design

For a tasty example we will be making a simple pizza-themed newsletter. The finished MJML template, as well as a compiled HTML version can be downloaded from the Download button near the top of the page.

Our Pizza Newsletter

The layout consists of four major sections:

1. Header
2. Introduction
3. Responsive list of popular products
4. Footer with social buttons

For the sake of this tutorial we will fill the email with static dummy data. In real scenarios you want to have a template and some sort of system to generate newsletters every time you want to send one.

3. Installation

The easiest way to get started with MJML is using the framework’s CLI. To install it you will need to have Node.js on your machine, preferably v6.6.0 and above (we are using v6.9.5).

node -v
v6.9.5

Once you have that covered, open up a terminal window and install MJML globally, providing access to the mjml command.

npm install -g mjml
mjml --version
3.2.0

If you are using Atom or Sublime Text, there are also various helpful plugins that you can install if you want.

4. Working with MJML Documents

MJML is written in .mjml files. Create a new directory and add a template.mjml file. This is the only file we will be working on. It will contain all our markup and styles. Since we are making an email template, any external dependencies (mainly images) have to be included via CDN.

To compile .mjml files to .html, you need to open a terminal in the working directory and run one of the following commands:

# Compile template.mjml into output.html
mjml template.mjml -o output.html

# Watch template.mjml and auto-compile on every change.
mjml -w template.mjml -o index.html

Just like in HTML, our MJML document needs a head and a body

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-all font-family="sans-serif" font-size="16px" color="#626262" />
      <mj-button background-color="#F45E43" color="#fff" font-size="14px" />
    </mj-attributes>
    <mj-style>
      .heading {
        padding-top: 15px;
        text-align: center;
        font-style: italic;
        font-size: 18px;
        font-family: "serif";
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-container background-color="#eee">

    <!-- Content goes here. -->

    </mj-container>
  </mj-body>
</mjml>

In the mj-head we’ve defined some default font styles to all MJML components, as well as styles for all our buttons. We’ve also added regular CSS, which on compilation will be in-lined by the framework. If you’ve never worked with HTML emails before try to avoid writing custom CSS styles, as many properties do not work correctly.

The mj-body will hold all our visible content. We’ve started with a container and given it a background color.

5. Header

MJML layouts are made out of sections (rows) and columns. For out header we will need two sections (two rows), each with one column in them. The first will have the newlsetter title, the other one will show a big pizza image.

The Header, Gmail Desktop (left) and Gmail Android App (right)

<!-- Header Text -->
<mj-section background-color="#fff">
  <mj-column>

    <mj-text  
      align="center"
      font-style="italic"
      font-size="32px"
      font-family="serif"
      padding-top="40px"
      padding-bottom="40px">The Pizza Times</mj-text>

  </mj-column>
</mj-section>
<!-- Pizza Image -->
<mj-section 
  background-url="http://demo.tutorialzine.com/2017/02/images/header-image.jpg"
  background-size="cover"
  background-repeat="no-repeat">

  <mj-column>

    <!-- Spacer component, used to give height to the background image. -->
    <mj-spacer height="300px" />

  </mj-column>
</mj-section>

As you can see, styles in MJML are described via specific attributes which are very similar to regular CSS. To see what properties are supported by each component go to the MJML documentation.

6. Intro Section

The second part of out template holds a heading, couple of paragraphs, an image link, and a call-to-action button.

The Intro Section, Gmail Desktop (left) and Gmail Android App (right)

<mj-section background-color="#fff">
  <mj-column width="450">

    <mj-text>
      <p class="heading">Hello Friends!<p></mj-text>

    <mj-text>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat.</mj-text>

    <!-- The Href attributes turns our image into a link. -->
    <mj-image 
     src="http://demo.tutorialzine.com/2017/02/images/map.jpg" 
     border-radius="3" 
     href="#"/>

    <mj-text>
     Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat.</mj-text>

    <mj-button 
     padding-bottom="25" 
     href="#">Make Reservation</mj-button>

  </mj-column>
</mj-section>

Mj-text components can contain any HTML text tags. We’ve used this to create the “Hello Friends” heading, by applying the .heading class we defined earlier in the <mj-head>.

Also in the <mj-head>, we defined default styles for our buttons, and as you can see, our call-to-action is now colored, even though it doesn’t have the background-color attribute.

7. Popular Products

This section contains a responsive layout of images and text. Clients that support responsiveness (e.g Gmail), will have a stacked layout on small screens, and a 2-column layout on bigger screens.

The Popular Products Section, Gmail Desktop

MJML is mobile-first, so any email client that does not support media-queries, will always show the stacked layout.

The Popular Products Section, Gmail Android App

<mj-section 
  background-color="#fafafa" 
  padding="0 10px 10px">
  <mj-column>

    <mj-image 
      src="http://demo.tutorialzine.com/2017/02/images/pizza.jpg" 
      padding-left="10px" 
      padding-right="10px"/>

    <mj-image 
      src="http://demo.tutorialzine.com/2017/02/images/salad.jpg" 
      padding-left="10px" 
      padding-right="10px"/>

  </mj-column>   
  <mj-column>

    <mj-image 
      src="http://demo.tutorialzine.com/2017/02/images/cake.jpg" 
      padding-left="10px" 
      padding-right="10px"/>

    <mj-text 
      align="center" 
      font-size="14"
      padding-top="15px"
      padding-bottom="10px">
      <p style="max-width: 400px">Try our selection of Oven-baked Pizza, Fresh Salads, and Homemade Cake.<p></mj-text>

    <mj-button  
      padding-top="0"
      padding-bottom="15"
      href="#">Order Now</mj-button>

  </mj-column>  
</mj-section>

Responsiveness in MJML is done by placing multiple columns in the same section. On big screens the columns will share the available space, and on mobile will move under each other.

8. Footer

In the footer we will implement the very useful <mj-social> component. It allows us to effortlessly set-up buttons for sharing in social networks.

The Footer, Gmail Desktop (top) and Gmail Android App (bottom)

<mj-section background-color="#fff">
  <mj-column>

    <mj-text 
      align="center"
      font-size="11">The Pizza Times</mj-text>

    <mj-social 
      display="facebook instagram twitter"
      font-size="0"
      icon-size="16px"
      padding="0"
      facebook-href="#"
      instagram-href="#"
      twitter-href="#"/>

  </mj-column>
</mj-section>

You can choose from a range of social networks, and then add redirection URLs to your respective accounts. There are many customization options available, which you can check out in the docs.

With this our newsletter template is complete!

Further reading

In this tutorial we tried to cover all the basics of building responsive emails with MJML. If you want to get more advanced with your HTML email templates, here are some links and resources we recommend:

• The official MJML docs and starting guide – here
• Live editor where you can experiment and try out different ideas – here
• Example templates – here
• Litmus PutsMail, a free tool for sending test emails – here
• Foundation for Emails, another popular framework for HTML emails – here

15 Interesting JavaScript and CSS Libraries for February 2017