alienlebarge

Patternlab + GruntJS + TYPO3

Following a few queries, I wrote this gist who quickly explain how we use GruntJS to build Patternlab and generate HTML for TYPO3 TemplaVoilà templates.

We use

• TYPO3 CMS 4.7.17
• TemplaVoilà! 1.7.0

If you have any question, leave a comment.
The entire Gruntfile.js.

alienlebarge

bl.ocks.org test

This is a basic rendering test with CSS. I've tried to render a basic HTML page with some sass styling. Since there is no online sass to css converter or JavaScript (like LESS), I have to convert your sass manually and then add the css file in your gist.

• bl.ocks.org
• Gist

Some ideas

alienlebarge

Weird resizing for thumbnails images with height and weight attributes in IE

This gist refers to the issue #13251 for twbs/bootstrap

To reproduce the bug, open this link in IE8 and resize the browser window.

• The problem: img has width and height attributes
• The quickfix (in this case): add .thumbnails > img {width: inherit;} (or even better add this to the .img-responsive mixin)

alienlebarge

Install ruby gem from behind a proxy

Command to use with Squideman.

SET HTTP_PROXY=http://localhost:3128 $gem_name

or

gem install --http-proxy http://localhost:3128 $gem_name

alienlebarge

{% if paginator %}
<!-- Prerender pagination page -->
  {% if paginator.previous_page %}
    {% if paginator.previous_page == 1 %}
<link rel="prerender" href="http://blog.alienlebarge.ch">
    {% else %}
<link rel="prerender" href="http://blog.alienlebarge.ch/page{{ paginator.previous_page }}">
    {% endif %}
  {% endif %}
  {% if paginator.next_page %}

alienlebarge

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    shell: {
      patternlab: {
        command: "gulp"
      }

alienlebarge

Playlist for Before 2015 mix

Work in progress

😕 = need verification

1. Maya intro
2. Krikor – G-Add
3. PJ Pooterhoots – Can't Go For That
4. 😕

alienlebarge

Agences web

• Antistatique, Lausanne
• Cobweb, Lausanne
• Cross Systems, Genève/Morges
• Netinfluence, Vufflens-la-Ville
• Trio, Lausanne
• WnG Solutions, Lausanne

alienlebarge

# lib.banner = TEXT
# lib.banner.value = <img class="img-responsive" src="typo3conf/ext/vdtmplportailmusees/src/public/assets/img/header-moose.jpg" alt="cover image">

lib.banner = IMAGE
lib.banner {
  file {
    import.data = levelmedia: -1,slide
    import = uploads/media/
    # La première image liée dans les propriétés de la page
    import.listNum = 0

alienlebarge

@import url(http://fonts.googleapis.com/css?family=Roboto);
@import url(http://fonts.googleapis.com/css?family=Merriweather);
@import url(http://fonts.googleapis.com/css?family=Inconsolata);

body {
  /* Improve legibility */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}