Skip to content
Kezdőlap » Alkalmazás dizájn CSS használatával – ReactJS gyorstalpaló 6.

Alkalmazás dizájn CSS használatával – ReactJS gyorstalpaló 6.

Az alkalmazás dizájn, a logika mellett a másik fontos része a webalkalmazás elkészítésének. Nem mindegy, hogy mit adunk ki a kezeink közül, milyen a megjelenése az alkalmazásunknak. Amit most használni fogunk az a CSS.

Háttér beállítása

Az egész alkalmazásra érvényes stílust az src könyvtárban levő index.css-ben adhatunk meg. Ami van benne jelenleg azt mindet törölhetjük és valamilyen egyszerűbb igazítást és térközt adjunk csak meg neki. Nem kell túlbonyolítani a dolgot. Létrehozok egy body szelektort és megadom az alap formázásokat:

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

Aztán jöhet valami jó kis színátmenetes háttér. Én erre egy online gradiens, azaz színátmenet generáló eszközt szoktam használni, amin vizuálisan be tudom állítani a nekem tetsző színeket, aztán a kapott CSS kódot fogom, kimásolom és beillesztem.

Az oldal a https://cssgradient.io/

A csúszkákkal, mint egy igazi piktor, kikeverek valamilyen színt:

jsclub-react-gyorstalpalo6-kep1

Aztán, ha tetszik, akkor az oldalról kimásolom a generált CSS-t:

jsclub-react-gyorstalpalo6-kep2

És beillesztem, ahová kell:

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: linear-gradient(90deg, rgba(85,76,233,1) 0%, rgba(43,42,5,1) 27%, rgba(0,212,255,1) 100%);
}

Megnézem a weboldalt, hogy megfelel-e kényes ízlésemnek, amit látok:

jsclub-react-gyorstalpalo6-kep3

Ha tetszik, akkor maradok ennél, ha nem, akkor változtatom tovább. Nem szép, viszont csúnya, úgyhogy én most maradok ennél :).

Cím csinosítása

Egy szabadon választott Google betűtípust fogok használni, aminek a neve Ruslan Display. Hogy ne mindent az index.css-ben helyezzünk el, létrehozok az App-nak is egy css-t, találó módon App.css néven :).

Az src mappában hozom létre az App.js-el azonos szinten.

Aztán ebbe az App.css-be fogom importálni azt a stílust, amit a Google Fonts oldalán találtam a Ruslan Display betűtípushoz:

@import url('https://fonts.googleapis.com/css2?family=Ruslan+Display&display=swap');

Az App-ban a cím egy h1 címsorban van. Ehhez létrehozom a h1-nek a szelektort, beállítom a betűtípust és mondjuk egy fehér színt, ami jól látszik a háttéren:

h1 {
    font-family: 'Ruslan Display', cursive;
    color: white;
}

Végül a stíluslapot be is importálom az App.js-be, ügyelve a helyes elérésre:

import './App.css';

Megnézem a böngészőben és, ha tetszik, akkor hagyom, ha nem, akkor még finomítom:

jsclub-react-gyorstalpalo6-kep4

Nekem ez most megfelel, mert nem dizájn versenyre készülünk most.

Esetleg talán a cím betűméretén lehetne növelni. Ehhez az App.js-ben a címsorhoz adok egy className attribútumot és mondjuk adok neki egy tachyons osztálynevet. Legyen ez most f1:

<h1 className="f1">Terminator modellek</h1>

Összegzés

Nos ebben az igazán rövid leckében betekintést nyertünk abba, hogy a CSS egyáltalán idegen a React-től.

A React Native-al ellentétben ugyanis simán tudunk itt css fájlokat használni, akárcsak a weboldalak esetében. És indulásnak nekünk ez most tökéletesen elegendő. Ugyanakkor gondolatébresztőnek szeretném elmondani, hogy a CSS ilyen egyszerű használatával még koránt sem merült ki a dizájn lehetőségek tárháza, amit React-es projektjeinkben alkalmazhatunk. Talán egy későbbi bejegyzésben visszatérek még a dizájn kérdésére, ugyanis sok értékes információt lehet még átadni ebben a témában is.

Github

Ahol most tartunk az alábbi Github linkről is letölthető.

YouTube

Aki pedig szeretné videón végignézni / hallgatni, amit ebben a leckében csináltunk, annak íme:

Címkék: