Wetter Card HTML/CSS Template?
Moin! Ich suche nach einer reinen HTML/CSS Vorlage für eine Wetteranzeige.
Das ganze soll möglichst horizontal, also auf einer Linie angezeigt werden. Ca. so: https://weatherwidget.io
Diese Lösung ist aus Datenschutz Gründen nicht verwendbar, daher sollte das Template auch ohne Drittanbieter Dienste auskommen (CSS Datei über eigenen (!) Server bereitstellen geht natürlich).
Die Daten sollen am besten per Jinja Template (Python/Flask) eingesetzt werden, ginge aber auch per JS, wenns sein muss.
So krass responsiv wie das Beispiel muss es nicht sein, hauptsache das ding rastet nicht aus, wenn man das Fenster kleiner macht ;)
Ich freue mich auf Erfahrungswerte und Vorschläge!
PS: Das Templating mit Flask könnte ich natürlich auch selbst machen. Mir gehts nur um die Hülle des ganzen ;)
1 Antwort
Die Grundstruktur dieses Moduls kannst du dir im Webinspektor (Webentwicklungstools deines Browsers) anschauen. Suche im Inspektor via Ctrl + F nach class="currentWeather" und du wirst das Element schnell finden. Mit einem Rechtsklick auf den markierten Knoten > Edit as HTML hast du die Möglichkeit, das komplette Markup zu kopieren. Außerdem siehst du bei jedem selektierten Element auch die CSS-Styles, die auf es wirken.
Du brauchst dazu noch ein Container-Element mit der Klasse weatherInfo, in welches das Element (mitsamt all seiner Kindelemente) hineinkommt.
<div class="currentWeather">
<!-- ... -->
</div>
All die mg-/ng-Attribute (sowie ng-Klassen) kannst du rauswerfen, denn sie werden ja nicht gebraucht. Bei den Icons (derzeit eingebunden als SVG-Elemente) und Schriften müsstest du natürlich schauen, ob sie eingesetzt werden dürfen. Du könntest stattdessen auch FontAwesome nutzen.
Die einzelnen Textknoten wiederum werden durch Jinja-Templateplatzhalter ersetzt.
{{ some_variable }}
Meines Erachtens ja.
Das Markup erfüllt keinen Anspruch besonderer Individualität. Die Funktionalität (also das, was wenn nur bestreitbar wäre - was dir die zusätzlich nötigen Skripte und ng-Attribute liefern würden) fliegt eh raus. Bei den Grafiken wäre ich wie schon geschrieben etwas vorsichtiger, bei der Wahl der Schrift sehe ich Standardtypen wie Tahoma, Arial.
Das Design selbst würde ich ebenfalls nicht als sonderlich ausgefallen bezeichnen, da gibt es genügend ähnliche Fälle (siehe hier oder hier). Wenn du aber ganz ganz sicher gehen möchtest, kannst du ja auch kleine Anpassungen vornehmen (andere Abstände, Ort und Icon in eine Kachel, Temperaturen vertikal anordnen, o.ä.).
Mir ist das etwas zu heikel, da die Software 100% stimmig sein muss (Einsatz in der Schule). Daher werde ich wohl eher selber was zusammenschustern. Sieht zwar nicht schön aus, aber geht.
Trotzdem vielen vielen Dank für diese wahnsinnig ausführliche und geile Antwort ;) schleim schleim
Und den ganzen Block einfach so zu verwenden ist rechtens?