Machen wir doch mal Laravel - Teil 4 - Nochmal ein wenig Styling

In diesem Teil der Serie „Machen wir doch mal Laravel“ gehen wir nun auf Filewatcher ein und machen unser Template ein wenig hübscher. Dieser Teil ist relativ kurz gehalten, weil ich hier jetzt nur mal kurz zeigen will, wie einfach man das eigene Design ein wenig stylisher gestalten kann. Ich stehe ja auf diese Dark-Themes, daher machen wir hier mal ein wenig dunkles Zeug. Außerdem befassen wir uns mit unserem ersten Filewatcher, der automatisch unsere CSS-Dateien bei Änderungen parsed und als fertiges CSS ablegt.

Aus DEM hier:

Ohne besonderes Styling

Machen wir das hier:

Ein wenig Styling

Ich finde das schon mal ein wenig sexier. Ausserdem zeigt es, wie wir unsere eigenen Styles einbinden und Laravel uns hier Freiheiten lässt. Das Design ist natürlich noch lange nicht perfekt, aber es geht ja auch erst einmal nur darum, ein wenig mit Laravel herum zu spielen.

Laravel Mix

Zu einem der Highlights gehört ganz sicher Laravel Mix. Wer schon mal mit optimierten Stylesheets oder Javascripts gehört hat, kam sicherlich an Webpack nicht vorbei. Webpack ist ein Node-Modul, dass automatisiert CSS, Javascripts und diverse andere Daten optimieren kann. Webpack ist ziemlich genial, aber auch ziemlich schwierig zu konfigurieren. Laravel hat bereits ein vorkonfiguriertes Webpack und für unsere Zwecke reicht das auch erst mal aus. Im 3. Teil dieses Tutorial haben wir ja schon unsere app.scss angepasst und Skeleton geladen. Skeleton ist super schlank, aber eben auch eher langweilig. Wir öffnen nun also noch einmal unsere app.scss und passen diese Datei ein wenig an.

@import '~skeleton-scss/scss/skeleton.scss';
@import 'custom.scss';

Wir haben einfach nur eine weitere scss-Datei geladen, unsere Custom.scss-Datei. In dieser legen wir nun fest, wie unsere Seite - abweichend vom Standard-Laravel-Theme aussehen soll. Die custom.scss-Datei befindet sich im gleichen Verzeichnis, wie die app.scss.

@import url('https://fonts.googleapis.com/css?family=Work+Sans');
 
body {
background: #10171e;
color: #8899a6;
font-family: 'Work Sans', sans-serif
}
a {
color: #FF691F;
text-decoration: none;
}
a:hover {
color: #FF712F;
border-bottom: yellowgreen 1px solid;
}
 
.container {
max-width: 1200px;
}

Reichlich unspektakulär haben wir nun festgelegt, dass unser Hintergrund relativ dunkel gehalten wurde, unsere Schriftfarbe ein wenig gräulich daher kommt und unser Container maximal 1200 Pixel breit sein soll. Doch unsere Seite hat sich gar nicht verändert. Sie sieht noch immer so langweilig aus. Wir müssen also etwas tun, nur was?

Wir können Laravel Mix sagen, dass er die Stylesheets erneut kompilieren soll. Dazu gehen wir in unsere Konsole und geben folgendes ein:

yarn run dev

Laravel kompiliert nun die Styles und danach sieht unsere Seite tatsächlich schon ein wenig anders aus. Wir wollen aber nicht jedes Mal händisch einkompilieren, also gehen wir wieder in die Konsole und schreiben

yarn watch

Jedes Mal, wenn wir nun die Stylesheets überarbeiten, werden diese CSS-Dateien automatisch neu kompiliert.

Den Quellcode von  Larablog findest du auf Github. https://github.com/marcshake/larablog

Magst du, was du liest? Dann lass mir doch eine Spende da.


Machen wir doch mal Laravel Machen wir doch mal Laravel - Teil 2 - die Datenbank Machen wir doch mal Laravel - Teil 3 Machen wir doch mal Laravel - Teil 4 - Nochmal ein wenig Styling
Lesezeit: 02:47 Minuten
1  

Diese Website nutzt Cookies. Inder Datenschutzerklärung steht, was mit deinen Daten hier passiert… Hab ich verstanden