Hallo,bisher habe ich jede Idee und jedes Projekt von Null an selbst programmiert und CSS geschrieben.Um mich zukünftig mehr auf JS und React konzentrieren zu können und auch Ideen schneller umsetzen zu können, möchte ich vorgefertigte HTML/CSS Komponenten verwenden.Zudem möchte ich dieses Framework auch in Figma nutzen können, um die Idee besser planen zu können.Welches CSS Framework würdet ihr empfehlen und warum? Es sollte ein modernes Design haben (Bootstrap fällt daher für mich raus). Eine große Auswahl an Komponenten haben, welche man einfach kombinieren und anpassen kann. Die Lizenz sollte auch für kommerzielle Projekte gelten und möglichst kostenlos sein. Tailwind ist kostenpflichtig oder?Welches Tool könnt ihr noch empfehlen, um eine App/PWA zu skizzieren und zu planen?Gruß ebody

Welches CSS Framework und welches Planungstool sollte ich nutzen?

Hallo,

bisher habe ich jede Idee und jedes Projekt von Null an selbst programmiert und CSS geschrieben.

Um mich zukünftig mehr auf JS und React konzentrieren zu können und auch Ideen schneller umsetzen zu können, möchte ich vorgefertigte HTML/CSS Komponenten verwenden.

Zudem möchte ich dieses Framework auch in Figma nutzen können, um die Idee besser planen zu können.

Welches CSS Framework würdet ihr empfehlen und warum? Es sollte ein modernes Design haben (Bootstrap fällt daher für mich raus). Eine große Auswahl an Komponenten haben, welche man einfach kombinieren und anpassen kann. Die Lizenz sollte auch für kommerzielle Projekte gelten und möglichst kostenlos sein. Tailwind ist kostenpflichtig oder?
Welches Tool könnt ihr noch empfehlen, um eine App/PWA zu skizzieren und zu planen?

Gruß ebody

1 Antwort

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, CSS, JavaScript

24.07.2023, 21:54

(...) möchte ich vorgefertigte HTML/CSS Komponenten verwenden.

Demzufolge wäre es ratsam, sich auf komponenten-/modulbasierte Frameworks zu konzentrieren, wie bspw. Bulma, Tachyons oder Uikit.

Es gibt in dieser Gruppe auch speziell solche, die ein bestimmtes CI (z.B. Ant Design, Flat Remix, grommet, Materialize, Primer) implementieren. Sie liefern dir daher mehr Bausteine, sind dafür aber nicht unbedingt auf individuelle Ausreißer ausgelegt.

Zudem möchte ich dieses Framework auch in Figma nutzen können, um die Idee besser planen zu können.

Zumindest für Ant Design, Bulma, Material UI und Primer kann ich ein Designsystem finden (designsystemsforfigma.com, Figma Community). Für andere Frameworks findet man via Internetsuchmaschine sicherlich auch etwas.

Tailwind ist kostenpflichtig oder?

Nein, das Framework ist kostenlos und steht unter einer MIT-Lizenz. Deinen Anforderungen würde es allerdings nicht entsprechen, da es seinen Fokus darauf legt, Utility-Klassen zu liefern, anstatt vordefinierter Komponenten.

Welches Tool könnt ihr noch empfehlen, um eine App/PWA zu skizzieren und zu planen?

Wenn es keine Kollaborationsplattform sein muss, würden sich Zeichenprogramme wie Adobe Illustrator, Affinity Designer oder Inkscape gut eignen.

Ähnliche Fragen

Nächste Schritte für Full Stack dev?

Hallo,

Ich bin auf der Suche nach einem genauen Weg oder Schritte die ich gehen kann nachdem ich mein ersten Full Stack Projekt mit Python Flask ( Backend) und Frontend ( plain HTML, CSS und JS) und Database mit MySQL fertig gecodet habe.

Was genau kann ich jetzt machen um weiter zu kommen. Mein Ziel ist es fähig zu sein komplette professionelle Websiten erstellen zu können die Industrie fähig sind, d.h. Für Firmen, restaurants etc. Oder halt einen job als Full Stack dev zu bekommen.

sollte ich anfangen ein CSS framework lernen, wie bootstrap oder tailwind, oder ist das nur für designer , pur Frontend devs wichtig.
Oder lieber Backend frameworks wie Node.js, oder frontend JS frameworks wir zb react.

Ich weiß einfach nicht genau wo ich weiter machen soll nachdem ich alle Grundlagen berherrsche.

...zur Frage

Warum benutzt man Tailwind CSS?

Wenn man mitten in den HTML Code , sowas schreibt wie

<p class="bold-900"> test </p>

Dann ergibt das für mich noch keinen sinn aus drei Gründen.

Man kann zwar bei wenig Code schnell im Code sehen was passiert aber schnell wird das doch komplett unordentlich, als würde wenn man <p style="color:red;"> benutzen.
Es ist doch Dumm sich die ganzen Tailwind Klassen auswendig zu lernen anstatt gleich die CSS Eigenschaften. Es macht doch kaum einen unterschied, ob font-size : 50px oder class="fontsize-50".
Tailwind hat auch keine fertige Komponenten wie Bulma oder Bootstrap falls man keine lust hat mal irgendwas selber zu machen.

Oder wie seht ihr das ?

Lerne zurzeit React und in vielen React Tutorials wird Tailwind genutzt.

Lohnt sich das so viel mehr als normales Css/Scss zu benutzen ?

...zur Frage

Welches CSS Framework bevorzugt ihr?

Bootstrap, Tailwind, Bulma etc...

2 Frage Und weiter verbreitet in der Jobwelt

...zur Frage

Muss man intelligent sein, um als Webdeveloper zu arbeiten?

Also mehr als Abitur-Niveau? Mindestens IQ 110?

• Web Technologies:

ASP.NET MVC, .NET Core and Web Services

• Desktop Technologies:

Windows Forms Application, WPF, UWP, and Windows Services,

• Client Side Web Technologies and Frameworks:

HTML, CSS, Bootstrap, JavaScript, jQuery and AJAX

• Mobile Application Development Framework:

Xamarin

• Database and ORM:

MS SQL Server, Entity Framework and LINQ

• Third party library integration:

Google API, Social Media API Integration

...zur Frage

Frontend: was nach JS/welches Framework?

ist jetzt weit hergeholt aber, ich wollte neben Java (was ich in der Schule Lerne und auch weiter Lernen will) mich was mit HTML, CSS und JS beschäftigen, da ich es überall sehe bspl Youtube, instagram etc und ich Interesse bekommen habe. Jedoch gibt es einige Frameworks aber welche soll ich denn Lernen? Gibt halt react etc aber kenn mich da nicht so aus..

wie gesagt, es ist weit hergeholt weil ich noch die basics lernen muss aber das ist jetzt grob meine Interesse :)

...zur Frage

Warum funktioniert das Materialize-Framework nicht?

Hallo zusammen

In einigen meiner Projekte habe ich Bootstrap angewendet. Nun wollte ich aber mal was Neues ausprobieren. Auch, weil mir das Design von Bootstrap nicht so gut gefällt. Darum habe ich das Materialize-Framework entdeckt, welches mir wirklich sehr gut gefällt. Ich würds gerne anwenden. Doch immer da, wo Javascript ins Spiel kommt, funktioniert gar nichts mehr.

Als Einstieg wollte ich einfach nur eine Navbar einrichten. Dazu habe ich 1:1 alles kopiert, wies in der Dokumentation steht. Zuerst habe ich von dieser Seite das HTML-Setup übernommen und Materialize heruntergeladen.

Dann habe ich von dieser Seite die "Extended Navbar with Tabs" kopiert. So sollte sie aussehen:

Mein Quellcode sieht dann am Ende so aus:

Meine Seite sieht aber so aus:

Die Test-Div's 1-4 sollten ja nur angezeigt werden, wenn sie in der Navbar angeklickt werden. Es ist ja klar, dass sie angezeigt werden, weil sie nicht durch CSS versteckt werden. Das bedeutet wohl, dass die Dokumentation von Materialize nicht vollständig ist. Wenn ich nicht alle Infos in der Dokumentation finde, muss ich das Framework in Frage stellen und ggf. darauf verzichten.

...zur Frage

Ist es noch sinnvoll, NextJS zu lernen?

SEO ist kein Punkt, wenn ich ehrlich bin. Heutzutage können auch Crawler normales React crawlen.

Als Zweites kommt das Server Side Rendering doch nur beim ersten Aufruf der Seite wirklich etwas bringt.

Danach ist es stinknormales React, das nicht mehr im Server für mich ausgeführt wurde und als HTML geschickt wird.

Natürlich sind 0.5-1 Sekunden wichtig, um den Nutzer ein gutes Gefühl zu geben und alles.

Aber warum sollte man sich den Stress mit NextJS antun? So wichtig wie mir diese 0.5 Sekunden auch sind. Man kann auch an anderen Ecken leichter optimieren und komprimieren.

React ist eine leichtgewichtige Bibliothek für ein bisschen Rendering und Next ein richtiges Framework.

Vielleicht ist da noch der Vorteil, das Leute ohne JavaScript wenigstens irgendwas sehen, aber wenn ich ehrlich bin, können einem Menschen mit JavaScript aus egal sein. Das sind fast alle Aluhutträger und die will man nicht in irgendeiner Art ansprechen als Kunde.

Auch keine Menschen die noch Internet Explorer und veraltete Smartphones nutzen. Da nehme ich lieber Rücksicht auf Sehbehinderte.

Was sagt ihr? Macht es noch Sinn, NextJS zu lernen? Warum nutzt ihr das?

...zur Frage

React Fullstack mit welchem Backend?

Ich wollte NextJS lernen Fullstack React Framework aber ich stelle mir die Frage, mit was genau man das Ganze verwendet. In fast jedem YouTube-Video wird "Prisma" (davor noch nie gehört) mit einer anderen Datenbank genutzt, was das alles noch schwieriger macht.

Es gibt PostgreSQL, MongoDB, SQLite, usw..

Ich kenne normales SQL in Kombination mit PHP, aber die neuen modernen Sachen kenne ich nicht.

React und PHP harmonieren nicht so gut, es gibt auch wenig Online-Ressourcen und ich sehe da keine Zukunft für Stellenausschreibungen, weshalb ich diese Kombination gar nicht mehr nutzen will und backendseitig lieber von neu anfangen möchte. NextJS wäre bequem, da ich keine Router brauche, SSR habe, TS + Tailwind-Support.

Kann mir ein Fullstack-Entwickler von euch eine Roadmap empfehlen?

NextJS mit was als Datenbank, MERN-Stack vielleicht oder irgendwas anderes?

Ich bin bereit in Zukunft mehr zu lernen, aber erstmal einen Allrounder, in dem ich mein Wissen vertiefen kann.

...zur Frage

NavBar auf jeder Unterseite einbauen (Webdevelopment)?

Hallo, es gibt auf so ziemlich jeder Website Elemente, die auf fast jeder Unterseite vorkommen. Ein Beispiel dafür wäre die NavBar. Diese ist bei den meisten Websites überall. Wie bringt man aber dieses Element auf jede Unterseite? Bei jeder Unterseite den ganzen HTML, CSS und JavaScript Code reinzukopieren wäre ja sehr mühsam.

Diese Aufgabe kann man mit Framworks lösen, wie z.B. VueJS wo man Komponenten verwendet. Welche Methoden gibt es sonst noch, vielleicht sogar ganz ohne Framework?

...zur Frage

Bootstrap: CSS Styling nur mit!important möglich?

Hallo,

warum kann ich Eigenschaften am CSS Framework nur mit !important verändern?

Dieser Code funktioniert ohne !important nicht. Warum ist das so?

Auf !important sollte doch weitestgehend vermieden werden.

<h2>Badges</h2>
  <a class="btn badges" href="#">Kommentare <span class="badge badge-secondary">20</span></a>

.btn{ border: 2px solid #CCC !important; border-radius: 5px !important; color:#CCC !important; }

...zur Frage

Bootstrap erlaubt?

Darf man Bootstrap einfach so benutzen? Oder muss man irgendwas zum Thema Urheberrecht beachten? Muss man Bootstrap/ den Urheber irgendwie angeben? Darf man bootstrap auch einfach so kommerziell nutzen?

...zur Frage

Grid mit Tailwind CSS und 1fr?

Seit längerem beschäftige ich mich mal wieder mit Tailwind CSS und stoße gleich am Anfang auf ein eigentlich simples Problem, für was ich aber keine einfach Lösung finde.

Ich versuche ein einfaches Layout zu erstellen, welches als Grundgerüst ein Grid hat, bei dem der Header und Footer eine explizite Höhe haben und der Main-Bereich flexibel ist. Das Layout sollte auch bei wenig Inhalt immer 100vh haben, so dass der Footer immer unten ist.

Mit reinem CSS wäre das einfach so lösbar:

CSS

.grid {
 min-height: 100vh;
 display: grid;
 grid-template-columns: 1fr; 
 grid-template-rows: 5rem 1fr 7rem;
}

HTML

<div class="grid">
 <header>Header</header>
 <main>Main</main>
 <footer>Footer</footer>
</div>

Mit TailwindCSS bekomme ich das irgendwie nicht hin – zumindest nicht ohne Custom-CSS. Ich kann mir aber kaum vorstellen, dass sich dies nicht auch mit dem vorhandenen Set realisieren lässt.

Hat hier jemand eine Idee, wie ich das mit TailwindCSS am einfachsten umsetze?

...zur Frage

React Js App Deployen auf Webserver?

Ich habe jetzt mit

 npm run build

einen Ordner namens "build", wenn ich den über den FTP Zugang hochlade und die URL aufrufe erscheint nur eine Leere Weiße Seite.

Jedoch wenn ich es über andere Anbieter Deploye die das für mich übernehmen dann funktioniert alles einwandfrei.

Wie genau kriege ich das auch hin ?
Nutze All Inkl.

...zur Frage

CSS den Text über blur effekt?

Also der body soll verschwommen sein aber nicht der div

(oder nur der div Text).

Hab es schon mit z-index versucht

 <style>
        body{
            filter: blur(5px);
            position: relative;
            z-index: -10;
        }
        div{
            font-size: xx-large;
            filter: blur(0px);
            position: relative;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div>
        Hallo
    </div>
</body>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen