www.archive-de-2014.com » DE » M » MADDESIGNS

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".

    Archived pages: 254 . Archive date: 2014-10.

  • Title: Allgemein | maddesigns
    Descriptive info: Kategorie-Archiv: Allgemein.. Tweet.. Um die Begriffsklärung „Mobile First“ soll es heute nicht gehen.. Das ist teils eine philosophische Frage und viele behaupten zurecht, bevor man sich über Design und die Umsetzung Gedanken macht, sollte der Content, für den man gestaltet, vorliegen — also quasi „Content First“.. Für viele hat aber „Coffee First“ am Morgen eines Arbeitstages die höchste Priorität.. In dem Artikel geht es um die technischen Möglichkeiten für den Internet Explorer 8 automatisiert eine.. optimierte.. ähnlich gute.. Ansicht der Responsive Website zu generieren.. IE-Debugging via VirtualBox mit modern.. ie.. 12.. 8 Kommentare.. Alltag für Webentwickler dürfte das Testen der Webseiten im Internet Explorer sein.. Wo hingegen bei Firefox oder Chrome es einen kürzeren Releasezyklus gibt, wurde der IE in den letzten Jahren sehr selten erneuert.. Das Problem ist (wie beim Safari) dass das Browser-Upgrade ans Betriebssystem geknüpft ist.. Hinderlich ist es auch, das man nicht mehrere IE-Versionen parallel installieren kann.. Früher™ hatte man sich mit.. IETester.. beholfen um gleichzeitig mehrere IEs zu testen.. Bereits seit IE8 kann man das Rendering in den IE-Developer-Tools umstellen und die Seite in einer älteren IE-Version gerendert betrachten.. Das reicht auch oft für den ersten Eindruck, ist aber nicht so verlässlich wie eine isolierte Version von Browser und Betriebssystem.. Zudem kann man am Mac keinen IE installieren.. Im Netz gibt es zwar einige Tools wie.. IE NetRenderer.. , die Screenshots von IE-Versionen generieren.. Das hilft aber nicht weiter wenn man einen Darstellungsfehler entdeckt, Debugging ist natürlich nicht möglich.. debugging.. testing.. virtualbox.. Lange nix gehört von dir.. 22.. August 2013.. Es war lange ruhig gewesen hier im Blog und ich kann auch nicht versprechen, dass sich das jetzt wieder ändern wird.. Themen über die man bloggen könnte gibt es genug, so ist es nicht, aber mir hat in den letzten Monaten absolut die Zeit gefehlt (sadpanda).. Erschwerend kam noch hinzu, dass ich der Seite auch längst einen neuen responsiven Anstrich verleihen wollte.. Dazu bin  ...   von mir über den Responsive Workflow zu lesen.. Im Wesentlichen ist das inhaltlich der Vortrag.. Responsive Webdesign Process.. Also, danke fürs dran bleiben und stay tuned!.. The Responsive Webdesign Process.. 11.. Oktober 2012.. Bei der TYPO3 Conference (T3CON12DE) in Stuttgart hatte ich die Gelegenheit einen Vortrag über den neuen Prozess in Responsive Webdesign Projekten zu sprechen.. Meiner Meinung nach muss sich bei RWD Projekten der Workflow vom üblichen Waterfall Prinzip zu einem iterativen Prozess ändern.. Einen Großteil der Arbeit in Responsive Webdesign Projekten sehe ich eher in konzeptionellem Bereich, als in der Programmierung selbst.. Vielleicht ist auch mal ein ausführlicher Artikel zum Thema notwendig, hier aber erstmal die Slides:.. http://maddesigns.. de/rwd-process/.. Livereload ein Browser Refresh Tool.. März 2012.. 13 Kommentare.. Wer kennt es nicht… man entwickelt in der IDE oder noch besser geeignet für Frontend-Entwicklung im Texteditor.. Sublime Text 2.. und switcht dann zum Browser um die Änderungen anschließend zu überprüfen.. Dazu muss man im Browser ein Reload durchführen.. Livereload.. ist ein kleines aber sehr hilfreiches Tool für Mac (Windows in Beta-Status) was diesen Prozess beschleunigt.. erkennt Änderungen im Projektordner beim Speichern einer Datei.. Ein Browser-Plugin für Chrome (oder Firefox, Safari, Mobile Safari) führt dann umgehend im Hintergrund den Refresh/Reload durch.. Das erspart natürlich einige Tastenanschläge/Mausklicks.. Auf größeren Bildschirmen ist es praktisch, wenn man die beiden Fenster parallel positioniert und dann die Änderung am HTML oder CSS direkt im Blick hat.. browser.. livereload.. mac.. refresh.. reload.. tool.. HTML E-Mail Newsletter cross-client-konform erstellen.. November 2011.. 14 Kommentare.. Mein Artikel aus dem.. Webstandards-Magazin Ausgabe 9.. zum Thema HTML E-Mail Newsletter:.. Schöner mailen.. HTML-Newsletter sind und bleiben ein beliebtes Kommunikationsmittel, um Informationen zu transportieren.. Das Marketing liebt sie, weil sich Produktbilder oder visuelle Grafiken in die Werbebotschaft einbinden lassen.. Standardkonforme Newsletter-Vorlagen für alle Mailprogramme zu generieren, ist allerdings nicht die einfachste Aufgabe.. Wir haben einige Tipps und Tricks zusammengefasst und zeigen Lösungswege auf.. email.. gmail.. mail.. newsletter.. outlook.. thunderbird.. 3.. Werk 83.. Pepo..

    Original link path: /category/allgemein
    Open archive

  • Title: Sass | maddesigns
    Descriptive info: Kategorie-Archiv: Sass.. Individuelle responsive Gridsysteme mit Sass.. November 2013.. Für Responsive Webdesign ist ein Gridsystem der Grundstock um den Inhalt auf vielen verschiedenen Ausgabegeräten flexibel auszugeben.. Gridsysteme sind mittlerweile unbedingt notwendig um ein Design zielgenau (nicht pixelgenau) umzusetzen.. Um genau zu sein, sollte das Design bereits einem Raster folgen, das dann in der Entwicklung so umgesetzt wird.. Grids.. Sass Compass Introduction.. 30.. April 2012.. 3 Kommentare.. Meine Workshop-Slides.. Modern  ...   ich bei den.. TYPO3 Developer Days.. in München gegeben habe, habe ich am letzten Samstag auch nochmal beim.. TYPO3camp Stuttgart.. wiederholt.. Im Workshop ging es um die ersten Schritte mit Sass Compass, sowie die hilfreichsten Features vorzustellen und einen Ausblick auf die neue Sass Version 3.. 2 zu geben.. Bei Fragen, pingt mich gern auf.. Twitter.. dazu an, kommentiert hier im Blog oder schreibt mir eine.. E-Mail.. intro.. slides.. tutorial..

    Original link path: /category/sass-2
    Open archive

  • Title: Fixed Ratio | maddesigns
    Descriptive info: Schlagwort-Archiv: fixed ratio..

    Original link path: /tag/fixed-ratio
    Open archive

  • Title: Lazy Loading | maddesigns
    Descriptive info: Schlagwort-Archiv: lazy loading..

    Original link path: /tag/lazy-loading
    Open archive

  • Title: Static Site Generators | maddesigns
    Descriptive info: Hammer for Mac.. Als erstes habe ich mir „.. “ angeschaut.. Hammer ist meiner Meinung nach ein einfaches Tool, um ein paar statische HTML-Seiten zusammen zu schrauben.. Beim ersten Testlauf stellte ich aber schnell fest, dass Hammer nicht das machen konnte, was ich damit machen wollte.. Problem: Hammer konnte (damals?) keine HTML-Dateien in Unterverzeichnisse kompilieren — das ist doof.. Zudem unterstützt Hammer Compass nicht.. Das war auch suboptimal, autoprefixer Co.. gab es noch nicht.. Für Hammer gibt es ein kleines (eigenständiges) Zusatztool, das die statischen Seiten über einen kleinen (Ruby-) Server ausliefert –.. Anvil Server.. Man kann so ganz easy virtualle Hosts wie http://project.. dev anlegen.. Das fand ich ganz gut.. Wie aber schon erwähnt, reichte Hammer für meine Anforderungen nicht aus.. Codekit.. ist eine beliebte Software, die viele Sachen vereint, sämtliche CSS-Präprozessoren sind integriert, zudem JS-Hint/-Lint, Bildkompremierung u.. v.. m.. Ich hatte mir sofort die Beta-Version angesehen und fand es soweit ganz gut.. Mit Verlassen der Beta-Phase wurde Codekit kostenpflichtig, kurz danach wurde eine neue Template-Engine in Codekit integriert.. Zu dem Zeitpunkt hatte ich mich schon mit Middleman beschäftigt, aber dazu später mehr.. Die Template-Language „Kit“ ist meiner Meinung nach nicht ausreichend für etwas komplexere Templates, man kann lediglich einfache „Includes“, sowas wie SSI Variablen verwenden.. Es fehlen aber Schleifen oder If-Else-Bedingungen.. Beim Anlegen einer mehr-oder-weniger dynamischen Navigation (beispielsweise mit class= active für die aktuelle Seite) scheitert man bereits.. Sonst ist Codekit aber ein feines Tool, mit Browser-Reload und allem was man normal braucht.. Prepos.. ist ein Tool, welches ich mal ausprobiert hatte, als ich gezwungen war, vier Wochen in einer Agentur auf einem Windows-Rechner zu coden.. Ein Vorteil von Prepos: es ist Windows fokussiert (gibt es aber auch für Mac) und funktioniert wohl ganz gut, soweit ich gehört habe.. Mein Problem war, dass ich die Compass-Struktur, die wir in dem Projekt hatten nicht abbilden konnte.. So war das Experiement schnell erledigt.. Mixture.. io.. hatte ich mir ebenfalls in einer frühen Alpha-Version angesehen und ich war vom Featureset sofort begeistert.. Mit Mixture ist es möglich komplexere Templates (mit Partials, etc.. ) umzusetzen.. Die benutzte Template-Language ist.. Liquid.. Zudem kann man mit Mixture neue Projekte mit Vorlagen wie Foundation oder Bootstrap starten.. Mixture unterstützt eine Daten-Anbindung über JSON, so dass man auf Grund von echten Daten statische Templates erstellen könnte.. Das ist toll!.. Mixture habe ich mittlerweile schon mehreren Kollegen empfohlen und würde es sofort wieder empfehlen, wenn man sich nicht gern auf der Konsole bewegt.. Aber dazu sind ja die Tools da, sie nehmen einen die Arbeit mit der Konsole ab, kosten dafür aber Geld.. Middleman.. Im Kontext „Static Site Generators” taucht auch schnell.. Wie der Name schon sagt, ist das die Software „dazwischen“.. Middleman ist Ruby-basiert und unterstützt demzufolge die Ruby Template-Sprachen ERB, HAML, Slim, etc.. , aber auch Markdown (Kramdown) oder Jade.. Mit Middleman würde auch gleichzeitig Sass und Compass installiert werden, falls man es nicht bereits installiert hat.. Middleman hat einen Server-Task, in dem ein kleiner Ruby-Server für Dateiänderungen gestartet wird.. Zudem gibt es natürlich einen Build-Task.. Auch für Middleman gibt es.. Vorlagen.. , mit denen man neue Projekte starten kann.. Da das aber Open-Source und Community-getrieben ist, werden hier nicht so oft Updates oder neue Versionen veröffentlicht.. Anders bei Mixture.. io, dort sorgt die Firma dafür, dass Updates oder neue Template-Vorlagen-Versionen schnell zur Verfügung gestellt werden.. Ein USP von mixture.. Aber zurück zu Middleman: Weiterhin gibt es für Middleman auch viele Plugins wie.. middleman-autoprefixer.. oder.. middleman-livereload.. In der Middleman-Dokumentation werden ERB-Template-Beispiele verwendet.. ERB ist für den Einstieg in die Ruby-Template-Engines auch ganz gut, da diese nicht so abstrakt ist wie z.. HAML.. Es sind einige Template-Helper  ...   die gleiche Template-Engine nutzen könnte.. Bei der Suche nach einer Template-Engine, die das unterstützt, bin ich auf.. gestoßen.. Assemble nutzt.. Handlebars.. als Template-Engine und unterstützt zusätzlich eine Vielzahl an.. Template-Helpern.. Zudem ist die Community recht groß (obwohl das Projekt noch recht neu ist) und es werden für Assemble bereits viele Plugins angeboten.. Ich muss das aber erstmal produktiv ausprobieren, Assemble sieht aber sehr vielversprechend aus.. Fazit:.. Es fällt mir schwer eine Empfehlung auszusprechen.. Ich habe im letzten Jahr mehrere Projekte mit Middleman umgesetzt und werde es sicherlich weiterhin benutzen.. Hätte ich mich nicht so sehr mit Middleman angefreundet, gleichzeitig auch mit der Konsole, würde ich aktuell zu Mixture tendieren.. Wer viel mit Grunt arbeitet, sollte sich vielleicht Assemble anschauen, das macht für mich aktuell den besten Eindruck als Static Site Generator mit Grunt.. Unter.. http://staticsitegenerators.. net/.. findet man eine laaaaaange Liste von aktuell 220 Tools.. Eine lusttigen Tweet zum Thema hab ich heute auch entdeckt.. the net award for best static site generator goes to Dreamweaver.. jennmoneydollars (@jennschiffer).. Beitragsnavigation.. Vorheriger Beitrag.. Nächster Beitrag.. 6 Gedanken zu Static Site Generators.. Jens Grochtdreis.. sagt:.. Januar 2014 um 08:40.. Vielen Dank für diesen umfangreichen Überblick.. Ich hatte letztes Jahr.. einen ähnlichen Test.. gemacht, weil ich mein Kochblog auf Markdown umstellen wollte.. An Prototyping hatte ich damals noch gar nicht gedacht.. Meine Arbeit sieht ähnlich aus, wie Deine.. Mittlerweile kam ich auch schon auf die Idee, einen solchen Generator zu nutzen bzw.. zu testen.. Aber ich habe einen anderen Weg gefunden.. Ich entwickele meine Seiten immer mit PHP-Includes.. Ich nutze keine Template-Engine, weil so jeder Entwickler, der meine Dateien bekommt, einfach kleine HTML-Schnipsel hat, die er in seine eigene Template-Engine integrieren kann.. Und das verwendete PHP ist so minimal, dass es auch Java- und APS-Entwickler nutzen können.. So kann ich manuell alles abbilden, auch Verzeichnisse und muss keine Templatesprache erlernen.. Sollte dann jemand staische Seiten haben wollen, nutze ich neuerdings.. das Grunt-Plugin PHP2HTML.. , das prima funktioniert.. Bei Assemble u.. ä.. würde mich fürs Protoyping abschrecken, dass das einfach Systeme sind, die dafür nicht vorgesehen sind und eventuell Sachen machen, die ich ihnen erst abgewöhnen muss.. Middleman sollte ich endlich mal ausprobieren.. Vielleicht macht das die Arbeit noch ein wenig leichter.. Obwohl ich ja dank Grunt und Bowser mittlerweile schon effektiver arbeiten kann, als zuvor.. Ich sollte es auch mal aufschreiben.. Nico Hagenburger.. Januar 2014 um 09:07.. Yeoman.. ist sicher eines der aktivsten Projekte Open-Source-Projekte zurzeit.. Traditionell und da Ruby-basierend verwende ich meist Middleman.. Januar 2014 um 09:40.. @Jens Assemble hast du noch nicht verstanden und der Vorteil dieser Tools, liegt daran, dass ich Partials und Layouts nutzen kann.. Diese Partials können dann auch die Software-Entwickler weiter verarbeiten, die müssen nicht das generierte HTML auseinander schneiden.. 31.. Januar 2014 um 15:24.. @Sven: Ich denke schon, dass ich Assemble verstanden habe.. Ich habe damit auch ein paar Stunden herumgespielt.. Du hobst auf die statischen Seiten ab.. Ich schreibe schon seit JAhren meine Klickdummys nur in PHP-Includes und gebe die so an meine Kunden.. Die Entwickler nehmen sich dann nur die Includes, die sie dann zu einem Template wandeln.. Da gehe ich also nicht viel anders vor, als Du.. Allerdings mache ich es nicht komplizierter dadurch, dass ich eine Templatesprache nutze, die dann mein Kunde meist nicht nutzt und die die Arbeit dann am Ende nicht wirklich vereinfacht.. Aber wahrscheinlich ist ein Kommentar eh der falsche Weg, um meinen Ansatz zu skizzieren.. Ich finde Deinen gut und spannend und werde sicherlich irgendwann herausfinden, ob er mir mehr brächte.. Pingback:.. Revision 157: Komplexes Markup, Styles Inlinen und HTTP/2 | Working Draft.. WordPress-Beiträge in Frontmatter-Beiträge konvertieren.. Kommentare sind geschlossen..

    Original link path: /static-site-generators-2138.html
    Open archive

  • Title: Styleguide generieren mit Sass & Grunt | maddesigns
    Descriptive info: Die „gedruckten“ Styleguides sind natürlich nicht mehr zeitgemäß.. Im Responsive Webdesign können Webseiten-Elemente in unterschiedlichen Ausgabegrößen unterschiedlich dargestellt werden.. Zudem werden im agilen.. Responsive Workflow.. Designelemente auch geändert und sehen u.. U.. nicht mehr so aus, wie es der Designer geplant hatte.. (Anekdote am Rande: Im aktuellen Projekt wurde das Aussehen bei ca.. ¾ der Elemente/Module während des agilen Entwicklungsprozess nach Rücksprache mit dem Designer geändert).. Ein „Living Styleguide“, der das Projekt widerspiegelt (also vielleicht responsive ist) und bei Veränderungen ohne großen Aufwand neu generiert wird, brauchte man.. Gibt es! Grunt zu Hülf!.. Grunt – The JavaScript Task Runner.. ist ein Kommandozeilen „Task Runner“, mit dem man automatisiert Aufgaben erledigen lassen kann.. Zum Beispiel kann man.. JavaScript.. auf Validität oder sauberer Schreibweise mit „jslint/jshint“ überprüfen oder Sass kompilieren und eine Vielzahl weiterer Tasks erledigen lassen.. Tiefer will ich nicht auf Grunt(d)lagen eingehen, gute Einsteigerartikel findet ihr unter:.. Webkrauts-Artikel.. von Frederic Hemberger (@fhemberger) und.. Grunt-Einführung (en).. von Chris Coyier.. Grunt-Styleguide.. Automatisierung von Webentwicklungsaufgaben ist super.. Da liegt es natürlich nahe, auch Styleguides automatisiert erstellen zu lassen.. gibt es ein Grunt-Modul, das das für uns erledigen kann.. Installation von Grunt-Styleguide:.. npm install grunt-styleguide --save-dev.. Die Grunt-Modul-Konfiguration lässt zwei „Styleguide-Frameworks“ zu.. Per Default ist.. Styledocco.. aktiv.. Styledocco lässt allerdings keine eigenen Styleguide-Vorlagen zu.. Das andere Framework, das mit Grunt-Styleguide verwendet werden kann, ist.. KSS-node.. und ist ebenfalls bereits im Modul enthalten.. Der Node.. js-Port von.. KSS.. , das für die Styleguide-Generierung des.. Github.. com Styleguide.. verwendet wird, eignet sich meiner Meinung nach besser um individuelle Styleguides zu generieren.. Styleguide-Konfiguration in gruntfile.. js:.. // only the styleguide part of the gruntfile.. js styleguide: { options: { template: { src: styleguide/template/ }, framework: { name: kss } }, all: { files: [{ dist/styleguide : css/sass/**/*.. scss }] } } grunt.. registerTask( build , [], function () { grunt.. loadNpmTasks( grunt-styleguide ); grunt.. task.. run( styleguide ); });.. Styleguide-Vorlage.. Mit KSS-node ist es möglich, ein eigenes Styleguide-Template zu verwenden und somit den Styleguide an das Look and Feel des Projektes anzupassen.. Im Grunt-Modul ist unter.. templates/kss/index.. html.. eine Beispiel-Datei hinterlegt.. Diese Vorlage kann man in ein anderes Verzeichnis kopieren und nach belieben anpassen.. Das Template ist mit.. Helpern ausgestattet, um eine flexible Ausgabe der Daten zu ermöglichen.. Styleguide-Navigation in der Styleguide-Vorlage:.. ul class= styleguide-navigation {{#eachRoot}} li a href= section-{{reference}}.. html {{reference}}.. 0: {{header}} /a /li {{/eachRoot}} /ul.. Soweit, so gut.. Das Styleguide-Template liegt vor und der Grunt-Task ist konfiguriert, jetzt nur noch den Sass-Code kommentieren und der Styleguide kann erstellt werden.. Sass Kommentare in Styleguide umwandeln.. Die einzelnen Styleguide-Abschnitte werden anhand von  ...   Bei Pseudo-Klassen wie.. :hover.. wird das Styling dann per JavaScript (kss.. js) on-the-fly eingesetzt.. Die freie Gestaltung des Markups lässt natürlich auch zu, dass man ganze Seitenmodule im Styleguide abbilden kann.. Beispiel Suchfeld:.. // Search // // Below are global search field and search result list styles // // Styleguide 4 // global search field // // Markup: // form action= class= global-search // fieldset // label for= search_field Search /label // input type= search id= search_field // name= search_field // placeholder= enter search term // button type= submit class= btn-submit Search /button // /fieldset // /form // // Styleguide 4.. 1.. Ich habe in den Styleguide noch den.. Prism-Syntax-Highlighter.. von.. Lea Verou.. integriert, et voilà, der Living-Styleguide nimmt Formen an.. Screenshots.. (leider aktuell nur Screenshots vom Styleguide bis der veröffentlicht wird).. 5 Gedanken zu Styleguide generieren mit Sass Grunt.. Michael.. Januar 2014 um 16:47.. Das sieht wirklich sehr gut aus.. Kann man einen solchen Styleguide mit.. Pattern Lab.. von Brad Frost vergleichen?.. Beide scheinen einen leicht unterschiedlichen Ansatz zu verfolgen.. Der Grunt-Styleguide (am Beispiel KSS) scheint eher einen beschreibenden Styleguide zu liefern, welcher Kommentare direkt aus den Stylesheets (oder Sass) generiert, während Pattern Lab eher die Visualisierung des Atomic Design widerspiegelt.. Daher die Frage: Sollte man beide nutzen oder sich doch für eine Lösung entscheiden?.. Mir persönlich gefällt ein Styleguide mit lesbaren Kommentaren (KSS) besser.. Allerdings hat Pattern Lab bei der Responsive Darstellung und der Kombination von Elementen zu Modulen bis hin zu Templates und ganzen Seiten Vorteile.. Januar 2014 um 18:53.. Ich sehe Brads PatternLab eher als Baukasten um mit Elementen und Modulen dann Templates zu bauen.. Ein Styleguide hat für mich, wie du schon sagst, auch was beschreibenes, vor allem der ausgegebene Quellcode ist für die Backend-Entwickler sehr hilfreich.. Tom.. Februar 2014 um 15:00.. Hi Sven,.. auf der github seite des Projekts steht zu den frameworks, dass kss-node nur less versteht, oder aber ich verstehe da was falsch.. Du schreibst ja, dass Du/es mit sass funzt?.. will ich auf jeden fall auch ausprobieren, danke für den hint.. gruss.. März 2014 um 14:31.. kannst du vielleicht etwas mehr dazu schreiben, wie du prism in das kss Template eingebunden hast? Würde mich sehr interessieren.. Gruß.. 4.. März 2014 um 18:12.. Hallo Michael,.. das ist nicht so kompliziert, im KSS-Template im HEAD die CSS-Datei einbinden:.. link rel= stylesheet href= public/prism.. css >.. Im Body den Code mit der Klasse language-markup (und line-numbers ) auszeichnen:.. pre class= line-numbers language-markup > code>{{markup}} /code> /pre>.. und vorm schließenden BODY-Tag die prism.. js einbinden:.. script src= public/prism.. js > /script>..

    Original link path: /styleguide-mit-grunt-2093.html
    Open archive

  • Title: Grunt | maddesigns
    Descriptive info: Kategorie-Archiv: Grunt..

    Original link path: /category/grunt
    Open archive

  • Title: Grunt | maddesigns
    Descriptive info: Schlagwort-Archiv: grunt..

    Original link path: /tag/grunt-2
    Open archive

  • Title: Sass | maddesigns
    Descriptive info: Schlagwort-Archiv: sass.. Compass SASS – CSS3 Adventskalender Tag 17.. Dezember 2011.. 18 Kommentare.. Natürlich beschäftigt sich der diesjährige CSS3 Adventskalender auch mit dem Thema SASS Compass.. Was SASS Compass so effizient macht beim Schreiben von CSS hat.. Mathias Schäfer.. (.. molily.. ) bereits sehr umfassend im.. Webkrauts-Adventskalender.. -Artikel  ...   2.. ) gezeigt.. Neue Techniken bringen natürlicherweise auch viel.. Diskussion.. mit sich.. Und nur weil man einen Pre-Processor wie SASS verwendet, schreibt man nicht automatisch.. besseres.. Es muss schon ein gewisses Verständnis von CSS vorhanden sein, damit.. SASS.. LESS.. Stylus.. Closure.. und MyNewCssPreProcessor auch effizient eingesetzt werden kann..

    Original link path: /tag/sass
    Open archive

  • Title: Styleguide | maddesigns
    Descriptive info: Schlagwort-Archiv: styleguide..

    Original link path: /tag/styleguide
    Open archive

  • Title: Mobile First & IE8 Fallback mit Sass (Teil2) | maddesigns
    Descriptive info: Breakpoint Compass plugin.. Breakpoint.. ist ein Compass Plugin, das IMO die universellste Lösung für das Schreiben von Media Querys in Sass ist.. Breakpoint funktioniert grundsätzlich wie Sass-IE, wenn man ein Media Query schreiben möchte, ruft man ein Mixin auf.. Ein einfaches Beispiel:.. $basic-value: 543px; $pair-value: 456px 794px;.. foo { content: 'No Media Queries'; @include breakpoint($basic-value) { content: 'Basic Media Query'; } @include breakpoint($pair-value) { content: 'Paired Media Query'; } }.. Der Default-Wert für Media Querys ist.. min-width.. Werden zwei Variablen übergeben wird eine UND-Verknüpfung von min- und max-width generiert.. foo { content: 'No Media Queries'; } @media (min-width: 543px) {.. foo { content: 'Basic Media Query'; } } @media (min-width: 456px) and (max-width: 794px) {.. foo { content: 'Paired Media Query'; } }.. Breakpoint kann auch automatisch EM-Media-Querys generieren.. Dazu einfach die globale Variable.. $breakpoint-to-ems.. auf.. true.. setzen.. $breakpoint-to-ems: true; $media: 'screen' 700px; #foo { @include breakpoint($media) { content: 'Media'; } }.. @media screen and (min-width: 43.. 75em) { #foo { content: 'Media'; } }.. Das Beispiel oben zeigt, dass man in Breakpoint das Medium (.. screen.. ) für den der Media Query zutrifft optional angeben kann.. Denkbar wäre auch eine Variable wie.. $forprint: 'print';.. für ein Druckstylsheet.. IE8 Fallback in separate Dateien generieren.. Wie beim Mixin von Jake kann man in Breakpoint auch ein.. für IE8 in eine gesonderte generieren Datei lassen.. // _layout.. scss // global breakpoints $small: 24em; $middle: 34em; $large: 65em, 'no-query' true;.. component { color: red; @include breakpoint($middle) {color: blue} @include breakpoint($large) {color: green;} }.. In der Sass-Hauptdatei wird die _layout.. scss importiert und die globalen Variablen aus Breakpoint.. $breakpoint-no-queries.. $breakpoint-no-query-fallbacks.. false.. gesetzt.. // styles.. scss $breakpoint-no-queries: false; $breakpoint-no-query-fallbacks: false; @import 'layout';.. Für den IE8-Fallback wird eine eigene Datei angelegt, die ebenfalls.. // fallback-ie8.. scss $breakpoint-no-queries: true; @import 'layout';.. styles.. css.. component { color: red; } @media (min-width: 34em) {..  ...   man.. component { color: red; @include breakpoint($large) { color: green; } @include breakpoint(1200px,'.. no-mq') { color: yellow; } }.. Das würde folgendes CSS als Fallback generieren:.. component { color: red; }.. component { color: green; }.. no-mq.. component { color: yellow; }.. Man kann separate Dateien generieren oder den Fallback direkt in die Datei einfügen, und und und.. Das macht es für mich so flexibel und ich bin noch nicht an die Grenzen gestoßen.. Habt ihr weitere Tipps zum Thema „Mobile First und IE8-Fallback“?.. 4 Gedanken zu Mobile First IE8 Fallback mit Sass (Teil2).. Dezember 2013 um 17:11.. Ich habe meinen grundsätzlichen Ansatz.. im Webkrauts-Adventskalender.. beschrieben.. Es läuft alles auf eine separate Variable hinaus.. Zusätzlich grenze ich den alten IE komplett aus und gebe ihm ein eigenes CSS.. Dabei kann ich natürlich dafür sorgen wenn ich mobile first machen wollte dass er immer nur die Vollversion bekommt.. Ich nutze diese ganzen Media-Query-Mixins die Du hier vorgestellt hast nicht.. Ich habe nie den richtigen Nutzen erkennen können.. Es gibt handliche kleine Mixins, die einfach nur eine Variable übernehmen, fertig.. Am Ende produzieren sie das gleiche Ergebnis.. Dezember 2013 um 17:22.. Wenn du beide Artikel gelesen hast, solltest du gelesen haben, wo die einfachen Mixins Ihre Schwächen haben und wo universelle Mixin-Libraries wie Breakpoint ihren nutzen haben.. Es gilt wie immer der Grundsatz, keiner ist gezwungen das zu verwenden, aber für den ein oder anderen ist das hilfreich.. Für mich ist es hilfreich.. Christoph Zillgens.. 23.. Dezember 2013 um 11:12.. Ich nutze das Script von Jake Archibald in leicht abgewandelter Form (mit Variablen).. Wenn du damit min- und max-width kombinieren möchtest, geht das auf folgende Weise, nämlich einfach die mixins verschachteln:.. @include respond-min($bp3) {.. @include respond-max($bp4) {.. klassen {}.. }.. Das hat mir bisher genügt.. Dezember 2013 um 17:24.. Cool! An verschachteln hab ich noch nicht gedacht..

    Original link path: /mobile-first-ie8-fallback-mit-sass-teil2-2047.html
    Open archive





  • Archived pages: 254