Skip to content
This repository has been archived by the owner on Nov 19, 2018. It is now read-only.

Install ElaoStrap (optional)

Jump to bottom
Benjamin Lévêque edited this page Mar 30, 2015 · 3 revisions

Install the ElaoStrap theme bundle for Symfony: ElaoStrap

Update your /package.json. Here's an example:

{
    "name": "project-name",
    "author": {
        "name": "author-name",
        "email": "[email protected]"
    },
    "private": true,
    "napa": {},
    "dependencies": {
        "bootstrap-sass": "3.3.1",
        "elao-form.js": "git://github.com/elao/form.js",
        "elaostrap": "0.1.12",
        "dropify": "0.0.6",
        "fastclick": "1.0.3",
        "jquery": "2.1.1",
        "select2": "3.5.2-browserify",
        "font-awesome": "4.3.0"
    },
    "browser": {
        "bootstrap.transition": "./node_modules/bootstrap-sass/assets/javascripts/bootstrap/transition.js",
        "bootstrap.collapse": "./node_modules/bootstrap-sass/assets/javascripts/bootstrap/collapse.js",
        "bootstrap.tab": "./node_modules/bootstrap-sass/assets/javascripts/bootstrap/tab.js",
        "bootstrap.tooltip": "./node_modules/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js",
        "bootstrap.popover": "./node_modules/bootstrap-sass/assets/javascripts/bootstrap/popover.js",
        "bootstrap.dropdown": "./node_modules/bootstrap-sass/assets/javascripts/bootstrap/dropdown.js",
        "select2.fr": "./node_modules/select2/select2_locale_fr.js",
        "dropify": "./node_modules/dropify/dist/js/dropify.js",
        "elaostrap.datepicker": "./node_modules/elaostrap/assets/js/vendors/datepicker.js",
        "elaostrap.simpleSelector": "./node_modules/elaostrap/assets/js/vendors/jquery.simple-selector.js",
        "elaostrap.fancybox": "./node_modules/elaostrap/assets/js/vendors/jquery.fancybox.pack.js",
        "elaostrap.easing": "./node_modules/elaostrap/assets/js/vendors/jquery.easing.js",
        "elaostrap.mobileNav": "./node_modules/elaostrap/assets/js/vendors/mobile-nav.js"
    },
    "browserify-shim": {
        "bootstrap.transition": {
            "depends": "jquery:jQuery"
        },
        "bootstrap.collapse": {
            "depends": [
                "jquery:jQuery",
                "bootstrap.transition"
            ]
        },
        "bootstrap.tab": {
            "depends": "jquery:jQuery"
        },
        "bootstrap.tooltip": {
            "depends": "jquery:jQuery"
        },
        "bootstrap.popover": {
            "depends": "jquery:jQuery"
        },
        "bootstrap.dropdown": {
            "depends": "jquery:jQuery"
        },
        "dropify": {
            "depends": "jquery:jQuery"
        }
    },
    "scripts": {
        "install": "napa"
    },
    "browserify": {
        "transform": ["browserify-shim"]
    },
    "devDependencies": {
        "gulp": "3.8.*",
        "del": "1.1.*",
        "elao-assets-gulp": "~0.1.16",
        "napa": "1.1.*",
        "browserify-shim": "3.8.*"
    }
}

Update your /gulpfile.js, here's an example:

assets.config({
    (...),

    assets: {
        fonts: {
            groups: {
                'elaostrap': {src: 'elaostrap/assets/fonts/**'},
                'font-awesome': {src: 'font-awesome/fonts/**', dest: 'font-awesome'},
                'dropify': {src: 'dropify/src/fonts/**', dest: 'dropify'},
            }
        }
    }
});

Then do in your Vagrant VM:

⇒ npm install

An example showing how to call the assets in your app/Resources/views/base.html.twig:

<!DOCTYPE html>
<html>
    <head>
        <title>{% block title %}My title{% endblock %}</title>
        <meta name="description" content="">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <meta name="format-detection" content="telephone=no">
        {% block stylesheets %}
            <link rel="stylesheet" href="{{ asset('assets/css/main.css') }}">
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}

        {% block javascripts %}
            <script src="{{ asset('assets/js/main.js') }}"></script>
        {% endblock %}
    </body>
</html>

Here is an example of files structure and code, considering the bundle where you store your assets is called AppBundle:

Create the file AppBundle/Resources/assets/sass/main.scss:

/* fonts paths */
$fonts-folder-path: "../../fonts";
$fa-font-path: "../../fonts/font-awesome";
$dropify-font-path: "../../fonts/dropify";

/* import elaostrap css */
@import "elaostrap/assets/sass/style";

/* import elaostrap admin css */
@import "elaostrap/assets/sass/admin";

/* import font-awesome css */
@import "font-awesome/scss/font-awesome";

/* import your own css */
@import "something/amazing";

Create the file AppBundle/Resources/assets/js/main.js:

var $              = require('jquery'),
    FastClick      = require('fastclick'),
    tab            = require('bootstrap.tab'),
    collapse       = require('bootstrap.collapse'),
    tooltip        = require('bootstrap.tooltip'),
    popover        = require('bootstrap.popover'),
    dropdown       = require('bootstrap.dropdown'),
    dropify        = require('dropify'),
    simpleSelector = require('elaostrap.simpleSelector'),
    fancybox       = require('elaostrap.fancybox'),
    easing         = require('elaostrap.easing'),
    datepicker     = require('elaostrap.datepicker'),
    select2        = require('select2');

require('select2.fr');

$(document).ready(function(){
    // your own code
});

If you want to use the ElaoStrap Admin layout, here some extra code:

    $(document).ready(function(){
        $(".selector").simpleSelector();

        $('input[type="file"]').dropify();

        $('.nav-tabs li:not(.disabled) a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });

        $('.collapse').collapse();

        $('.has-tooltip, [data-toggle="tooltip"]').tooltip({ container: 'body' });
        $('.has-popover, [data-toggle="popover"]').popover({ trigger: 'hover' });

        $('.dropdown-toggle, [data-toggle="dropdown"]').dropdown();

        $(".fancybox").fancybox({
            padding: 0,
            nextEffect: 'fade',
            prevEffect: 'fade',
            tpl: {
                closeBtn: '<a title="Fermer" class="fancybox-item fancybox-close" href="javascript:;">&times;</a>',
                prev: '<a title="Précédent" class="fancybox-nav fancybox-prev" href="javascript:;"><span>&larr;</span></a>',
                next: '<a title="Suivant" class="fancybox-nav fancybox-next" href="javascript:;"><span>&rarr;</span></a>'
            },
            helpers: {
                title: { type: 'over' }
            }
        });

        // Scroll top button
        var scrollTopLimit = 150;
        $(window).scroll(function(){
            s = $(window).scrollTop();

            if (s > scrollTopLimit) {
                $('.scroll-to-top').addClass('visible');
            } else {
                $('.scroll-to-top').removeClass('visible');
            }
        });

        if($(window).scrollTop() > scrollTopLimit) {
            $('.scroll-to-top').addClass('visible');
        } else {
            $('.scroll-to-top').removeClass('visible');
        }

        $('.scroll-to-top').on('click', function(){
            $('html, body').animate({scrollTop : 0}, 800, 'easeInOutExpo');
            return false;
        });

        $('.filters-button').on('click', function(e) {
            e.preventDefault();
            $('html, body').animate({scrollTop : 0}, 300, 'easeInOutExpo');
        });

        $('[datepicker], .input-group.date').datepicker({
            language: "fr",
            todayHighlight: true
        });

        $(".select2").select2();

        $('.sidebar nav').find('a').on('click', function(e){
            if ($(this).siblings('ul').length > 0) {
                e.preventDefault();
                $(this).parent().toggleClass('opened');
            }
        });

        $('.sidebar nav').find('li.active').parents('li').each(function(){
            $(this).addClass('opened');
        });

        $('.sidebar nav').find('li').each(function(){
            if ($(this).children('ul').length > 0) {
                $(this).children('a').append('<span class="submenu-icon"></span>');
            }
        });

        if($('.page-title').length > 0) {
            if ($('.page-title').find('.breadcrumb').length > 0) {
                $('.page-title').addClass('has-breadcrumb hover');
            }
            $('.page-title-mobile').html($('.page-title').html());
            $('.page-title-mobile').find('.breadcrumb').remove();
        }

        $('.mobile-nav-toggle').on('click', function(e){
            e.preventDefault();
            $(this).toggleClass('active');
            $('.sidebar').toggleClass('active');
            $('body').toggleClass('nav-opened');
        });

        if($('.navbar').find('.list-actions').length > 0 && $('.list-actions-mobile').length > 0) {
            $('.list-actions-mobile').html($('.navbar').find('.list-actions').html());
        }

    });

    $(window).load(function(){
        setTimeout(function() {
            $('.page-title').removeClass('hover');
        }, 1500);

        if($('#loading').length > 0) {
            $('#loading').delay(200).fadeOut(400);
            $('body').removeClass('loading');
        }
    });

Then do in your Vagrant VM:

⇒ gulp install
Clone this wiki locally