Neuer BOOSTER für euere Responsive oder Fluid Layouts mit CSS Clamp() Function! [TUTORIAL]

[@MrJura911]

Das ist mal wieder ein Super Video. Danke dafür. Das hab ich gerade gebraucht.

[@UnleashedDesign]

Danke freut mich wenn es dir gefällt :)

[@StixxLetsPlay]

Nice, komme Grade beim Studium zum responsive Design. Da kommt das wie gerufen.

[@toxeeque]

Top Channel für mich. Danke für deine Vids!!

[@UnleashedDesign]

Danke freut mich wenn dir die Videos gefallen :)

[@bennybensen3442]

Genial erläutert, danke!!!

[@UnleashedDesign]

Danke freut mich wenn dir das Video geholfen hat :)

[@ignisAnimus]

Kenne niemand der wirklich mit Fluid Designs arbeitet, weil es in Tools wie Figma und co schwer abzubilden ist. Trotzdem klingt das Feature sehr cool und ich werde es ausprobieren. Danke fürs Video.

[@niner8275]

Vielen Designern sind die Möglichkeiten von CSS gar nicht bekannt und so wird teilweise noch oft an starren Pixelwerten und somit insgesamt eher unflexiblen Layouts festgehalten. Das ist jedes Mal schade, wenn man überlegt, was eigentlich möglich wäre.

[@ignisAnimus]

@@niner8275 Stimmt ja. Aber gute Designer sind kooperativ und lassen die Dynamisierung ihrer Designs zu. Ich arbeite gerade mit so einer.

[@niner8275]

@@ignisAnimus Da hast du echt Glück! Die Designer mit denen ich arbeite kennen da leider wenig anderes und ich rede mir immer den Mund fusselig, warum rein Pixel basierte Designs jede Menge Schwierigkeiten mit sich bringen.

[@ignisAnimus]

@@niner8275 Um ehrlich zu sein ich habe keine Probleme mit Pixel-basiert. Zumindest bei Schriftgrößen und Abständen.

[@rabbit_van]

Wie immer sehr gut erklärt, ich könnt's nicht besser. Einfach wirklich eine gute Erleichterung im CSS. 👍

[@UnleashedDesign]

Danke, freut mich wenn es dir gefallen hat :)

[@lananegro6251]

Schon sehr cool - die Funktion 👍🏻 macht Spaß bei dir zu lernen, vielen Dank 😊

[@UnleashedDesign]

Danke freut mich wenn dir das Video gefällt :)

[@MosDev__]

sehr geiles feature !! vielen dank für die beispiele und erklärung !

[@UnleashedDesign]

Gerne freut mich wenn es helfen konnte :)

[@christophermatt5925]

Mega gut erklärt - vielen Dank :-)

[@peterkecks5521]

Geiler Typ! Danke, dass du dein Wissen mit uns teilst!

[@UnleashedDesign]

Danke ;) freut mich wenn es dir gefällt :)

[@johannschneider6796]

Hierdie is die beste video ooit

[@michaelblechinger2240]

Super Feature!!

[@jodotodesign]

sehr coole Funktion 👍🏻

[@UnleashedDesign]

Absolut :)

[@michaelreuter7577]

Toll erklärt

[@UnleashedDesign]

Danke freut mich wenn es dir helfen konnte :)

[@FlorianBinder]

Sehr gut erklärt! 👍

[@UnleashedDesign]

Danke :)

[@jugibur2117]

Danke für dein Video! Ich hatte zuvor immer wieder "Justierungsprobleme", da man ja alle 3 Werte im Blick haben muss. Nutze jetzt erstmal immer nur den Wert mit vw ohne clamp() und die Basis festzulegen. PS: Wer z.B. noch das alte iPad Air unterstützen möchte, das nur bis iOS 12 kommt, kann min / max als Ersatz für clamp() nutzen.

[@UnleashedDesign]

Guter Tipp :)

[@Pho_Phoenix]

Genial!

[@UnleashedDesign]

Absolut :)

[@TutmeistensnixDe]

Gutes Video, danke dafür. Aber eine Frage hätte ich noch. Was ist wenn der Browser clamp() nicht unterstützt, welchen Wert nimmt er dann, den mittleren?

[@tobiasschreib3r]

Servus Johannes, danke erstmal für das Video. Wie immer erste Sahne von Dir: locker, zügig und auf den Punkt gebracht. Was ich dich schon länger mal fragen wollte, welche IDE verwendest du?

[@UnleashedDesign]

Danke freut mich wenn es helfen kann, ich nutze VSC

[@stefanfrei6199]

Danke :)

[@MrPietsch]

Hi Johannes. Wie immer ein informatives und gut gemachtes Video. Welches Build-Tool verwendest du für die Umwandlung von SASS zu CSS? Ist das rechte Fenster ein Teil von VSC, oder hast du nur den Browser daneben geschoben?

[@UnleashedDesign]

Das ist einfach nur Chrome was ich klein gezogen habe ;) ich nutze Gulp, gibt aber viele viele Tools dafür. In der Beschreibung findest du ein Repo mit allem was du brauchst für das Setup.

[@saimamomand7418]

netter trend jacking titel ;D aber sonst gutes video, werde clamp bestimmt mal iwann verwenden ^^

[@frankiberlin]

👍 Danke 🙂

[@UnleashedDesign]

Dieses mal nich tzu schnell ? :D

[@frankiberlin]

​@@UnleashedDesign Besser, Du hast Dich ja auch sehr bemüht :D - zum Ende wirst Du wieder etwas schneller - aber besser, viel besser, ich danke Dir. :) LG (ツ)

[@nordmannskraulbart]

Geile Scheiße! ❤️

[@beckyb9215]

Cooles Theme hast du? Welches verwendest du? Ganz tolles Video, neuer Sub :)

[@UnleashedDesign]

Das ist meines, ist in der Beschreibung verlinkt.

[@CrazyCodingChannel]

Like this video, good job man

[@UnleashedDesign]

Thx :) even when its in german?

[@CrazyCodingChannel]

@@UnleashedDesign I taught him at school, everything is fine

[@gregermax]

Coole Sache! Bei der Sidebar sehe ich den Vorteil zwar nicht ganz, weil es neben "width" ja auch noch "max-width" und "min-width" gibt, aber ansonsten nette Funktion!

[@dankefurnichts]

was ist eine sass datei?

[@sabiplaypuzzles7332]

DU hast eine sehr wichtige Sache beim lesen der Prozentzahn bei "Can i use" vergessen. Man muss sich immer fragen was passiert, wenn das jeweilige Feature nicht unterstützt wird. Wenn es nur eine leicht kosmetische Veränderung hat, dann sind 90% völlig ausreichend, zumal man bedenken muss, dass die Inkompatibilität nach der Zeit abnimmt. Wenn ein Feature zB das ganze Layout zerhaut oder (noch schlimmer) bestimmte Menupunkte oder Informationen nicht zugänglich macht, dann sind 90% wahrscheinlich zu wenig.

[@UnleashedDesign]

Generell ja, allerdings wenn man ein Layout mit clamp aufbaut incl. Schriften wird es vermutlich passieren das diese nicht Lesbar ist was in vielen Fällen mehr als nur ein Kosmetischer Bug ist weil die Bedingung im Worst Cast, die Benutzung beeinträchtigt wird.

[@sabiplaypuzzles7332]

@@UnleashedDesign Habe auch nicht von der Clamp()-Funktion gesprochen, sondern allgemein. Speziell für clamp() kommt es allerdings auch auf den einzelnen Anwendungsfall an. Da hast du allerdings recht, clamp() wird bei nicht-unterstützung in den meisten Fällen zu untragbaren Ergebnissen führen.

[@mlanczyk]

Hi, welchen Code Editor benutzt du?

[@UnleashedDesign]

Hallo Visual Studio Code mit einem Custom Theme

[@mlanczyk]

@@UnleashedDesign Vielen Dank für die Rückmeldung. Durch die weiteren Videos hab ich's auch verstanden. Du machst eine super Arbeit, weiter so und danke auch dafür!

[@klauspommerening4977]

Für das Coden an sich wunderbar weil man wieder viel Code und auch viel zeit sparen kann. ich hab das jetzt schon mal gesehen und denke das ich es mal probiere weil bin gerade daran eine Neue Seite zu machen und es nervt doch wenn jemand mit dem Handy auf die Seite geht und auf einmal ist alles komplett überlappt. Gerade bei Drucker Apps sehe ich das sehr Häufig das die Seiten nicht so dargestellt werden wie man sie braucht oder zu sehen sein soll. Diese Funktion würde uns das Mediascreenen auch vergessen lassen weil ich denke absolut wäre es an der zeit das man weniger Coden muss und dadurch auch viel Zeit und aufwand ersparen kann.

[@UnleashedDesign]

Also glaube nicht das sich Media Querys damit "verhindern" lassen weil ja nicht jede Responsive Regel nur auf Größen basiert sondern auch auf Farben usw. aber es wird sehr sehr viel Code sparen :)

[@klauspommerening4977]

@@UnleashedDesign Also ganz wegfallen lassen kann man das nicht, sollte auch am besten nicht wegfallen. Aber zu mindest mal für Schrift und die Container "DIV" wäre es eine gute Verwendung wenn dann mal alle Browser mit spielen.

[@Linuxdirk]

Endlich nie mehr Media Querys! 🤗

[@UnleashedDesign]

Naja die wirst du leider nicht ganz los werden damit :D

[@hdmikel]

Wäre es auch möglich Bilder mit Clamp responsiv darzustellen?

[@UnleashedDesign]

Theoretisch praktisch kannst du das auch via % machen :)

[@hdmikel]

Ja danke, haste auch wieder recht. Hatte mir nur gedacht wenn man durch clamp responsive Schrift darstellen kann, müsste das ja auch mit Bildern möglich sein. Ich probiere es demnächst einfach mal.

[@maskoram1506]

Sehr gutes Video! Die Einteilungen in die Kapitel im Video sind auch immer sehr sehr praktisch. Der Mozilla Link funktioniert jedoch nicht. Da fehlt die Klammer zu. Beste Grüße

[@UnleashedDesign]

Danke für den Hinweis habe ich korrigiert :)

[@bambindien3327]

Hi, hast Du noch einen zusätzlichen Tipp, wie ich den mittleren Wert (in vw) kalkuliere oder wähle? Ansonsten, sehr gutes Video, vielen Dank für alles!

[@simonklein2335]

Den mittleren Wert kannst du so betrachten, als würdest du "font-size: 24px" schreiben. So gesehen der Standardwert. An sich ist es egal, ob es px, ch, vw oder % sind. Allerdings hat sich halt vw bewehrt gemacht und es macht am meisten Sinn, weil vw sich relativ zur Bildschirmgröße verhält. vw = view width. 1vw = 1% der display größe des aktuellen Gerätes. Auf einem 1080p Bildschirm wäre 1vw = 10,8px. Aber die Rechnung ist an sich total egal. Probier es einfach aus und schau wie es aussieht.

[@TarajiYaDawla]

Vielen Dank für das sehr informative Video👍 kurze Frage zum Titel. Soll es fluit heißen und nicht eher fluid? Übrigens ist meine Frage ernst gemeint.

[@UnleashedDesign]

Absolut, danke für den Hinweis habe ich ausgetauscht :)

[@longingbydesign]

Leider fehlt eine präzise Erklärung, welche Funktion der mittlere Wert genau hat.

[@UnleashedDesign]

Das ist eine dynamische Referenzgröße zwischen den beiden Grenzen. Also z.B. 20% oder 20vw der Weite des Viewports des Browser Fensters.

[@healreadyleft]

Not really 'New" but great video tho!

[@Andreas-gh6is]

Gibt's da nicht auch was von Polyfill? Nein, anscheinend nicht.

[@olitworkowski]

Sehr gutes video aber das thumbnail ist bullshit. Clamp ist keine „neue“ css Funktion. Was definierst du als neu?

[@MinneMedia]

Clamp() fetzt - löst viele Probleme bzw. entrümpelt Einiges an CSS.

[@lemoniahoffmann8401]

Ich kann das Wort Booster nicht mehr hören !!!

[@UnleashedDesign]

True, aber in dem Zusammenhang find ich es nicht verkehrt ;) weil es den eigenen CSS Code schon verbessert :P

[@MrSwingbop]

imagine how many more subscribers if you were doing it in English ... pitty.

[@UnleashedDesign]

Absolutly, but my eng is realy bad so this would be not nice to listen to :D

[@KtsjingTUBE]

why in the blue hell is this in German WHYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY

[@UnleashedDesign]

because my english is realy bad xD

[@KtsjingTUBE]

@@UnleashedDesign and he responds in English... Pure mindfuck on a Sunday

[@UnleashedDesign]

@@KtsjingTUBE xD i can write and read in eng but you dont to hear me talk in english

[@arty_trading]

Toll erklärt

[@UnleashedDesign]

Danke freut mich wenn es dir gefällt :)