responsive tables pure CSS… well SASS

here the code, it’s sass, but very simple.

/* tables responsive for smartphones */
@media only screen and (max-width: $screen-xs-max) {

  //Force table to not be like tables anymore
  table.table-responsive,
  table.table-responsive-labels {
    display: block;
    thead, tbody, th, td {
      display: block;
      border: none !important;
      vertical-align: top !important;
    }

    //Hide table headers (but not display: none;, for accessibility)
    thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
    }

    //Tr become blocks
    tr {
      display: block;
      border-top: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
      border-bottom: $grid-gutter-width/2 solid #fff !important;
      padding: $grid-gutter-width/2 !important;
    }

    //td become lines
    td {
      display: inline;
      padding: 0 !important;
    }
  }

  //tables with labels passed as data-label attribute in html code
  table.table-responsive-labels {
    td {
      //Behave like a "row"
      display: block;
      position: relative;
      padding-left: 50% !important;
    }
    td:before {
      // add data-label as label
      content: attr(data-label);
      position: absolute;
      top: 0;
      left: 0;
      width: 45%;
      white-space: nowrap;
      overflow-x: hidden;
    }
  }
}

Sass mixin to generate a full set of classes with mediaqueries variants

Here we are, we need a full set of some specific classes, why don’t write a sass mixin for that?

do more with less code!

The need classes are like:

.margin-top-small { margin-top: $gutter-grid-width / 2; }
.margin-top-normal { margin-top: $gutter-grid-width; }
.margin-top-large { margin-top: $gutter-grid-width * 2; }
.margin-top-xlarge { margin-top: $gutter-grid-width * 3; }

.margin-bottom-small { margin-bottom: $gutter-grid-width / 2; }
.margin-bottom-normal { margin-bottom: $gutter-grid-width; }
.margin-bottom-large { margin-bottom: $gutter-grid-width * 2; }
.margin-bottom-xlarge { margin-bottom: $gutter-grid-width * 3; }

and then we need some classes for specific mediaqueries

.margin-top-md-small, .margin-top-md-normal, .margin-top-md-large
.margin-top-sm-small, ...
.margin-top-xs-small, ...

and so on, if you ask why, the answer is: we like to use those classes here and there in several projects to have a solid and common understanding of margins, especially used for separate content elements in a complex CMS like TYPO3 in a middle company with several developers.

<div class="margin-top-large margin-bottom-small"> 

since the set is growing and i need also specific mediaquery classes I create a sass mixin to generate the whole set:

@mixin class-property-scale($classname, $property) {

	$list: none, xsmall, small, large, xlarge, xxlarge;
	$scale: 0, 1/3, 1/2, 1, 2, 3;

	@for $i from 1 through length($list) {
	   .#{$classname}-#{nth($list, $i)} {
		   #{$property}: $grid-gutter-width * nth($scale, $i)
	   }
	}

}

and the usage is

// create a full set of margin padding for varius mediaqueries

// all devices
@include class-property-scale(mt, margin-top);
@include class-property-scale(mb, margin-bottom);
@include class-property-scale(pt, padding-top);
@include class-property-scale(pb, padding-bottom);

// only small screen
@media (max-width: $screen-sm-max) {
	@include class-property-scale(mt-xs, margin-top);
	@include class-property-scale(mb-xs, margin-bottom);
	@include class-property-scale(pt-xs, padding-top);
	@include class-property-scale(pb-xs, padding-bottom);
}

// tablets
@media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
	@include class-property-scale(mt-sm, margin-top);
	@include class-property-scale(mb-sm, margin-bottom);
	@include class-property-scale(pt-sm, padding-top);
	@include class-property-scale(pb-sm, padding-bottom);
}

// desktop
@media (min-width: $screen-md-min) {
	@include class-property-scale(pr-md, padding-right);
	@include class-property-scale(mt-md, margin-top);
	@include class-property-scale(mb-md, margin-bottom);
	@include class-property-scale(pt-md, padding-top);
	@include class-property-scale(pb-md, padding-bottom);
}

(instead of margin-top-large i used mt-large and mb-large)
and the result in my final css is :


.mt-none {
    margin-top: 0
}

.mt-xsmall {
    margin-top: 10px
}

.mt-small {
    margin-top: 15px
}

.mt-large {
    margin-top: 30px
}

.mt-xlarge {
    margin-top: 60px
}

.mt-xxlarge {
    margin-top: 90px
}

.mb-none {
    margin-bottom: 0
}

.mb-xsmall {
    margin-bottom: 10px
}

.mb-small {
    margin-bottom: 15px
}

.mb-large {
    margin-bottom: 30px
}

.mb-xlarge {
    margin-bottom: 60px
}

.mb-xxlarge {
    margin-bottom: 90px
}

.pt-none {
    padding-top: 0
}

.pt-xsmall {
    padding-top: 10px
}

.pt-small {
    padding-top: 15px
}

.pt-large {
    padding-top: 30px
}

.pt-xlarge {
    padding-top: 60px
}

.pt-xxlarge {
    padding-top: 90px
}

.pb-none {
    padding-bottom: 0
}

.pb-xsmall {
    padding-bottom: 10px
}

.pb-small {
    padding-bottom: 15px
}

.pb-large {
    padding-bottom: 30px
}

.pb-xlarge {
    padding-bottom: 60px
}

.pb-xxlarge {
    padding-bottom: 90px
}

@media (max-width: 1023px) {
    .mt-xs-none {
        margin-top:0
    }

    .mt-xs-xsmall {
        margin-top: 10px
    }

    .mt-xs-small {
        margin-top: 15px
    }

    .mt-xs-large {
        margin-top: 30px
    }

    .mt-xs-xlarge {
        margin-top: 60px
    }

    .mt-xs-xxlarge {
        margin-top: 90px
    }

    .mb-xs-none {
        margin-bottom: 0
    }

    .mb-xs-xsmall {
        margin-bottom: 10px
    }

    .mb-xs-small {
        margin-bottom: 15px
    }

    .mb-xs-large {
        margin-bottom: 30px
    }

    .mb-xs-xlarge {
        margin-bottom: 60px
    }

    .mb-xs-xxlarge {
        margin-bottom: 90px
    }

    .pt-xs-none {
        padding-top: 0
    }

    .pt-xs-xsmall {
        padding-top: 10px
    }

    .pt-xs-small {
        padding-top: 15px
    }

    .pt-xs-large {
        padding-top: 30px
    }

    .pt-xs-xlarge {
        padding-top: 60px
    }

    .pt-xs-xxlarge {
        padding-top: 90px
    }

    .pb-xs-none {
        padding-bottom: 0
    }

    .pb-xs-xsmall {
        padding-bottom: 10px
    }

    .pb-xs-small {
        padding-bottom: 15px
    }

    .pb-xs-large {
        padding-bottom: 30px
    }

    .pb-xs-xlarge {
        padding-bottom: 60px
    }

    .pb-xs-xxlarge {
        padding-bottom: 90px
    }
}

@media (min-width: 768px) and (max-width:1399px) {
    .mt-sm-none {
        margin-top:0
    }

    .mt-sm-xsmall {
        margin-top: 10px
    }

    .mt-sm-small {
        margin-top: 15px
    }

    .mt-sm-large {
        margin-top: 30px
    }

    .mt-sm-xlarge {
        margin-top: 60px
    }

    .mt-sm-xxlarge {
        margin-top: 90px
    }

    .mb-sm-none {
        margin-bottom: 0
    }

    .mb-sm-xsmall {
        margin-bottom: 10px
    }

    .mb-sm-small {
        margin-bottom: 15px
    }

    .mb-sm-large {
        margin-bottom: 30px
    }

    .mb-sm-xlarge {
        margin-bottom: 60px
    }

    .mb-sm-xxlarge {
        margin-bottom: 90px
    }

    .pt-sm-none {
        padding-top: 0
    }

    .pt-sm-xsmall {
        padding-top: 10px
    }

    .pt-sm-small {
        padding-top: 15px
    }

    .pt-sm-large {
        padding-top: 30px
    }

    .pt-sm-xlarge {
        padding-top: 60px
    }

    .pt-sm-xxlarge {
        padding-top: 90px
    }

    .pb-sm-none {
        padding-bottom: 0
    }

    .pb-sm-xsmall {
        padding-bottom: 10px
    }

    .pb-sm-small {
        padding-bottom: 15px
    }

    .pb-sm-large {
        padding-bottom: 30px
    }

    .pb-sm-xlarge {
        padding-bottom: 60px
    }

    .pb-sm-xxlarge {
        padding-bottom: 90px
    }
}

@media (min-width: 1024px) {
    .pr-md-none {
        padding-right:0
    }

    .pr-md-xsmall {
        padding-right: 10px
    }

    .pr-md-small {
        padding-right: 15px
    }

    .pr-md-large {
        padding-right: 30px
    }

    .pr-md-xlarge {
        padding-right: 60px
    }

    .pr-md-xxlarge {
        padding-right: 90px
    }

    .mt-md-none {
        margin-top: 0
    }

    .mt-md-xsmall {
        margin-top: 10px
    }

    .mt-md-small {
        margin-top: 15px
    }

    .mt-md-large {
        margin-top: 30px
    }

    .mt-md-xlarge {
        margin-top: 60px
    }

    .mt-md-xxlarge {
        margin-top: 90px
    }

    .mb-md-none {
        margin-bottom: 0
    }

    .mb-md-xsmall {
        margin-bottom: 10px
    }

    .mb-md-small {
        margin-bottom: 15px
    }

    .mb-md-large {
        margin-bottom: 30px
    }

    .mb-md-xlarge {
        margin-bottom: 60px
    }

    .mb-md-xxlarge {
        margin-bottom: 90px
    }

    .pt-md-none {
        padding-top: 0
    }

    .pt-md-xsmall {
        padding-top: 10px
    }

    .pt-md-small {
        padding-top: 15px
    }

    .pt-md-large {
        padding-top: 30px
    }

    .pt-md-xlarge {
        padding-top: 60px
    }

    .pt-md-xxlarge {
        padding-top: 90px
    }

    .pb-md-none {
        padding-bottom: 0
    }

    .pb-md-xsmall {
        padding-bottom: 10px
    }

    .pb-md-small {
        padding-bottom: 15px
    }

    .pb-md-large {
        padding-bottom: 30px
    }

    .pb-md-xlarge {
        padding-bottom: 60px
    }

    .pb-md-xxlarge {
        padding-bottom: 90px
    }
}

don’t worry the css is minified and gzipped via gulp at the end 😉

bootstrap equal-height columns with flexbox ultimate solution for mobile safari and IE11

I’ve struggled a lot trying to use flexbox to create equal-height boxes.

As we know flexbox is not really well implemented expecially on mobile safari and IE11

The situation is the classical bootstrap with some columns with bootstrap classes

<div class="row eq-height">
	<div class="col-sm-6 col-md-4">bla bla bla</div>
	<div class="col-sm-6 col-md-4">bla bla bla</div>
	<div class="col-sm-6 col-md-4">bla bla blabla bla</div>
	<div class="col-sm-6 col-md-4">bla bla blabla bla blabla bla blabla bla bla</div>
	<div class="col-sm-6 col-md-4">bla<br /><br /> bla<br /> bla</div>
	<div class="col-sm-6 col-md-4">bla bla bla</div>
	<div class="col-sm-6 col-md-4">bla bla<br /> bla</div>
	<div class="col-sm-6 col-md-4">bla bla bla</div>
	<div class="col-sm-6 col-md-4">bla bla bla</div>
</div>

the sass css that solve my issues is:

.eq-height {
	@media (min-width:$screen-sm-min) {
		display: flex;
		flex-wrap: wrap;
	}


	& > [class*='col-'] {
		background-clip: content-box;
		@media (min-width:$screen-sm-min) {
			display: flex;
			flex-wrap: wrap;
			flex-direction: column; // FF 47-
			-webkit-flex-direction: row; // iOS safari
			-ms-flex-direction: column; // IE11
		}
	}

	&:before,
	&:after {
		@media (min-width:$screen-sm-min) {
			content: normal; // IE doesn't support `initial`
		}
	}
}

gulp + sass generate all browser prefixes but I added different flex-direction for different browsers on col-* classes. That’s my solution that do the magic on safari, chrome, firefox and IE11.

	flex-direction: column; // FF 47-
	-webkit-flex-direction: row; // iOS safari
	-ms-flex-direction: column; // IE11

Fluid Styled Content – uploads element with translated file title

write your own uploads.html partial and substitute this

<f:if condition="{file.name}">
	<a href="{file.publicUrl}">
		<span class="ce-uploads-fileName">
			{file.name}
		</span>
	</a>
</f:if>

with this

<f:if condition="{file.title}">
	<f:then>
		<a href="{file.publicUrl}">
			<span class="ce-uploads-fileName">
				{file.title}
			</span>
		</a>
	</f:then>
	<f:else>
		<f:if condition="{file.name}">
			<a href="{file.publicUrl}">
				<span class="ce-uploads-fileName">
					{file.name}
				</span>
			</a>
		</f:if>
	</f:else>
</f:if>

enjoy

How to quickly handle file extensions icons, only via CSS no JS no PHP

This is the quickest way to put different icons for downloadable files, via CSS, no JS or PHP needed.


  a.download-link:before{
    content: url('default.gif');
    margin-right: 6px;
    vertical-align: middle;
  }

  a.download-link[href$='.pdf']:before{
    content: url('pdf.gif');
  }

  a.download-link[href$='.doc']:before,
  a.download-link[href$='.rtf']:before,
  a.download-link[href$='.txt']:before  {
    content: url('doc.gif');
  }

  a.download-link[href$='.docx']:before {
    content: url('docx.gif');
  }

  a.download-link[href$='.xls']:before {
    content: url('xls.gif');
  }

  a.download-link[href$='.xlsx']:before  {
    content: url('xlsx.gif');
  }

TYPO3 CMS in italiano istruzioni per i traduttori

col vostro utente di TYPO3.org – andare sulla sezione italiana del server di traduzione http://translation.typo3.org/it/ 

Aggiungo queste indicazioni, se volete e potete contribuire, usate il buon senso e pensate che TYPO3 viene usato sia da noi sviluppatori ma soprattutto dagli utilizzatori finali:

1) rispettate maiuscole e minuscole: le parole sono estratte dal contesto ma vengono utilizzate in varie situazioni, pertanto a volte è possibile trovare prima “sort” e poi “Sort”, vanno tradotte con “ordinare” e “Ordinare” (senza le virgolette).

2) usate il buon senso: purtroppo le parole fuori dal contesto sono difficili da identificare correttamente “sort” può significare sia “ordine” che “ordinare” che “ordina” che “tipologia”, difficile sapere a priori dove verra’ usata, datele il significato piu’ generico (ordinare) poi eventualmente si migliorera’ in seguito.

3) attenzione ai termini: “pack” non è “back”

4) parole singole tradotte con parole multiple: capita che termini molto specifici come “oupdated” siano tradotti con “non piu’ attuale”, se proprio non trovate una parola singola meglio una traduzione corretta di tre parole che una inutile di una. Magari un altro utente troverà una parola migliore.

5) a volte puo’ essere impossibile tradurre una parola inglese, per esempio “Scheduler” oppure “File Abstraction Layer” usate il termine inglese. Magari un altro utente troverà una parola migliore.

6) per frasi lunghe, come nell’help, cercate di essere coerenti col testo, ma non è necessario fare una traduzione parola per parola, in questi casi meglio un testo chiaro che uno tradotto pedissequamente.

Se il vostro utente non vi da la possibilità di scrivere o suggerire traduzioni comunicatelo qui in lista, oppure a Roberto Torresani oppure se avete il mio contatto email,twitter,fb.

Io e altri con i permessi da coordinatore verifichiamo e accettiamo le traduzioni inviate

Grazie a tutti per la collaborazione.

tips and trick, news, TYPO3, web development, CSS, SASS, HTML