Frontend 1/2

HTML: the modern way

Laurynas Veržukauskas

@Im0rtality

need
quick
prototype

static pages

don't play with design!

Estimate for static page?

CSS Frameworks

Saves time

Experienced authors

Features

  • Browser support
  • Responsive
  • Mobile first
  • The Grid
  • print.css
  • ...

what is grid?

Lattice that divides space in consistent units where text, headlines, images, and advertising can be placed

getbootstrap.com

"TWBS" in short

WHY?

http://goo.gl/zqsKgw

Quickstart template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>

    <div class="container">
        <div class="row">
            <div class="col-xs-12">

                <h1>Hello, world!</h1>
                ...

            </div>
        </div>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  </body>
</html>

need
functional
prototype

dynamic pages

mock data

dynamic pages

templating

  • something generates HTML
    • backend
    • frontend*

Templating x Symfony

Twig

included by default

twig.sensiolabs.org/documentation

TWBS x Twig

same twbs base template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}{% endblock %}</title>

    {% block stylesheets %}{% stylesheets %}
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    {% endstylesheets %}{% block stylesheets %}

  </head>
  <body>
    <div class="container">

       {% block content %}{% endblock %}

    </div>
    
    {% block javascripts %}{% javascripts %}
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    {% endjavascripts %}{% endblock %}

  </body>
</html>

TWBS x Twig

boring base template usage

{% extends "::base.html.twig" %}

{% block title %}Hello world page{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-xs-12">
            <h1>Hello world!</h1>
        </div>
    </div>
{% endblock %}
{
    "users": [
        {
            "name":"John",
            "lastname":"Doe", 
            "username":"john.doe",
            "email":"john.doe@example.com", 
            "image":"8676587.jpg"
        },
        {
            "name":"Jane",
            "lastname":"Doe", 
            "username":"jane.doe",
            "email":"jane.dow@example.com", 
            "image":"7865907.jpg"
        },
    ],
    "comments": [
        ...
    ]
}

mock data

TWBS x Twig

how about this?

{% extends "::base.html.twig" %}

{% block title %}Users{% endblock %}

{% block content %}
    <div class="row">
        {% for user in users %}
        <div class="col-xs-2">
            <img src="{{ user.image | make_full_url }}" 
                 alt="Avatar for {{ user.username }}" 
                 class="img-circle">

            <p>{{ user.name }} {{ user.lastname }}</p>
        </div>
        {% endfor %}
    </div>
{% endblock %}

still no design

wait as long as possible*

next?
real
data

questions

thank you for attention

Frontend 1/2

By Laurynas Veržukauskas

Made with Slides.com

Frontend 1/2

Frontend 1/2 (HTML: the modern way)

  • 482

More from Laurynas Veržukauskas