Series for React Architecture
React Örnek Proje Mimarisi — 12 (Title, Text, Paragraph, Link, List)
Bu yazıda React Proje Mimarisi konusuna devam ediyoruz. Renk paletlerinden sonra proje içerisindeki metinlerin ve farklı durumlarını inceliyor olacağız.
React Örnek Projesinde bu blog yazısında Metinleri inceliyor olacağız.
- Metinler nerelerde kullanılır ?
- Metin türleri ve özellikleri Nelerdir ?
- Metinler ekrana sığmaz ise nasıl gösterilebilir ?
- Metinler üzerinde ne tür işlemler yapabilirsiniz ?
Tipografi, yazı dilini okunaklı, okunabilir ve görüntülendiğinde çekici kılmak için yazı düzenleme sanatı ve tekniğidir. Yazının düzenlenmesi, yazı karakterlerinin, punto boyutlarının, satır uzunluklarının, satır aralıklarının (satır başı) ve harf aralıklarının (izleme) seçilmesinin yanı sıra harf çiftleri arasındaki boşluğun ayarlanmasını (karakter aralığı[1]) içerir. Tipografi terimi aynı zamanda süreç tarafından oluşturulan harflerin, sayıların ve sembollerin stiline, düzenlenmesine ve görünümüne de uygulanır. Tip tasarımı, bazen tipografinin bir parçası olarak kabul edilen, yakından ilişkili bir zanaattır; çoğu tipograf yazı karakteri tasarlamaz ve bazı tip tasarımcıları kendilerini tipograf olarak görmez.[2][3] Tipografi, bilgi iletişimiyle ilgisi olmayan süs ve dekoratif bir araç olarak da kullanılabilir. (Wikipedia)
Aşağıdaki konulara geçmeden önce aşağıdaki blog yazılarını okumanızı öneririm;
- Kuş Bakışı CSS (4ncü bölüm Metinler üzerinde CSS işlemleri)
- Fontları React Projesine Nasıl Dahil Ederiz ?
Bunun dışında mevcut Typography/Text durumu benim düşüncelerime benzer olabilecek şekilde ayrı ele alan React Bileşen Kütüphanelerini aşağıda çıkardım..
- Adobe Spectrum Typography
- Ant Typography
- Evergreen Typography
- Blueprint Typography
- Chakra Typography
- Evergreen Typography
- Geist Text
- MUI Typography
React’da Kullanabileceğiniz CSS Utility Kütüpheneleri bulunuyor.
React için bazı kullanabileceğiniz React Kütüphane Araçlarıda bulunuyor.
Şimdi gelin benim önceden React Mimari Yapısı olarak çizdiğim yapılarda Design System içerisindeki Foundations kısmında farklı farklı konulardan değinmiştik. Foundations (Temel Yapıtaşları: Design Tokens, Platform Scale, Theming, Color, Typography, Object Styles, Motion, States, Iconography, Illustration, Inclusive Design, International Design, Bi-directionality, Data Visualization, Layout)
Biz React Mimari Projelerimizde Tasarım Sistemi(Design System) oluşturmaya çalışmıyoruz. Sadece bu mekaniklerden faydalanarka kendi projemizde limitli olarak bu yapıları nasıl kullanabileceğimiz konusunda çıkarımlar yapmaya çalışıyoruz .
Özellikle bileşen yapısı üzerinden yapıları tutan birisi olarak ne tür metin türleri olacağını önceden anlamak önemli buna göre gruplama yapılabilir çünkü.
1. Evergreen
Aşağıda Evergreen kullanımında örnekleri görebilirsiniz. , Metin bileşenleri ve List Bileşenleri olarak ayırmış. Ve bunlar için ayrı ayrı React Bileşenleri oluşturmuş
Heading
<Heading is=”h3">Heading h3</Heading>
<Heading size={100} marginTop={16}> 100: the lazy dog</Heading>Text
<Text size={300}>The quick brown fox jumps over the lazy dog</Text>
<Text color="muted">The quick brown fox jumps over the lazy dog</Text>Paragraph
<Paragraph size={300} marginTop={12}>
Size 300. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</Paragraph>Link
<Link href="#" marginRight={12}>
Default
</Link>Strong / Small Component
Burada weight yani ağırlıklarını değiştirrek bileşenler oluşturmuş
<Strong size={300}>The quick brown fox jumps over the lazy dog</Strong>Code / Pre Component
<Code size={300} appearance="minimal">
The quick brown fox jumps over the lazy dog
</CodeList Yapıları
<UnorderedList>
<ListItem icon={TickCircleIcon} iconColor="success">
Lorem ipsum dolar set amet
</ListItem>
<ListItem icon={TickCircleIcon} iconColor="success">
Lorem ipsum dolar set amet
</ListItem>
<ListItem icon={BanCircleIcon} iconColor="danger">
Lorem ipsum dolar set amet
</ListItem>
<ListItem icon={BanCircleIcon} iconColor="danger">
Lorem ipsum dolar set amet
</ListItem>
</UnorderedList>Evergreen Hakkında Düşüncem: Evergreen bileşenlerinin Frontend Uygulamasındaki bir çok bileşen ihtiyacını karşılamasa bile kendi declerative yapılarınızı oluştururken size nasıl yapılar kurabileceğiniz konusunda güzel örnekler veriyor.
2. Geist
Geist’tede Evergreen benzer bir mantık var ama tüm metin ile ilgili kavramları tek bir bileşende toplamışlar.
Header
<Text h1>Start our Geist journey.</Text>Paragraph & bold
<Text p b>
A brief description of the changes between the early versions of HTTP, to the modern HTTP/2, the emergent HTTP/3 and beyond.
</Text>Small
<Text small>
HTTP response codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirections, client errors, and servers errors.
</Text>Blockquote
<Text blockquote my={0}>
Send cookies from the server to the user-agent.
</Text>Types & Colors
<Text b i style={{ letterSpacing: '0.6px' }}>
<Text span type="success">G</Text>
<Text span type="warning">e</Text>
<Text span type="secondary">i</Text>
<Text span type="error">s</Text>
<Text span style={{ color: '#ccc' }}>t</Text>
<Text span type="success" ml="5px">UI</Text>
</Text>Size
<Text font="12px" mt={0}>Font Size: 12px;</Text>Compose
<Text mb={0}>
<Text small del>Indicates if the resource transmitted should be displayed inline (default behavior without the header),</Text>
<Text small b>or if it should be handled like a download and the browser should present a “Save As” dialog.</Text>
</Text>Geist Hakkında Düşüncem: Evergreen benzer ama tüm yapıları Text bileşeni içerisinde toplamış bir uygulama yaparken Evergreen’den daha zengin bir bileşen içeriğine sahip olmak örneğin Page.Title Card.Title gibi… Geist bunun tam zıttını yapmış. Tek bir bileşen üzerinden yönetmeye çalışmış ki bu da okunabilirliği oldukça zorlaştırır.
Geist farklı gördüğüm Text içerisinde Text bileşeni kullanarak kompleks text bileşenleri oluşturabiliyor olmaları..
3. Chakra
Evergreen ile benzer yapıya sahip fakat size yerine bazı kavramlar kullanmışlar. Yoksa tanımlama açısından farklar yok.
Heading
<Heading as='h2' size='2xl'>
(2xl) In love with React & Next
</Heading>Truncate heading
Bu kısım biraz farklı isterseniz bileşenlerin …. (ellipses) isterseniz aşağıda doğru uzamasına izin veriyorsunuz. bunuda söylerken gözükmesini istediğiniz line sayısını veriyorsunuz.
<Heading noOfLines={2}>
Basic text writing, including headings, body text, lists, and more.adsadasdsadasdasdasdsasa
</Heading> Bu bileşen geliştirirken çok kullanılabilecek bir özellik.
Metinler (Text)
<Text fontSize='50px' color='tomato'>
I'm using a custom font-size value for this text
</Text>Metinlerde bazı as özellikleri ile Metinleri farklı şekillerde gösterebiliyorsunuz.
Highlight
<Highlight query='spotlight' styles={{ px: '1', py: '1', bg: 'orange.100' }}>
With the Highlight component, you can spotlight words.
</Highlight>
Chakra Hakkındaki Düşüncem: Chakra Evergreen ile çok benzer ama bazı özellikleri var ki benim Enterprise uygulamalar da oldukça ihtiyacım olan yetenekleri geliştirip bileşenlerin parçası haline getirmişler
- Truncate Heading
- Highlight ve, Mark
Adobe Spectrum
Adobe Spectrum Typography konusunu 4 parçada ele almış; Heading, Body, Detail ve Code…
Bunları 2 yapıda da kullanabiliyorsunuz SpectrumCSS veya React Spectrum olarak yani HTML elemanlarına stil tanımlaması veya React bileşenleri üzerinden
Spectrum CSS
React Spectrum
<Heading level={4}>Edit</Heading>Bu durumda bu bileşenin bir sürü özelliği oluyor
Adobe Spectrum Hakkındaki Düşüncem: Genele hitap etmek için oldukça basit tutarak bileşen veya stil özelliklerini değiştirebilir hale getirmişler. Adobe yapısının üzerine kendi bileşen yapılarınızı inşaa etmeniz gerekiyor
4. Ant Design
Baktığınızda Evergreen, Chackra ile çok benzer bir yapıda, Typography API üzerinden tanımlanmış bazı yetenekler var ve bunun üzerinden sistemdeki metinler kullanılabiliyor.
import React from 'react';
import './index.css';
import { Typography } from 'antd';
const { Title } = Typography;
const App: React.FC = () => (
<>
<Title>h1. Ant Design</Title>
<Title level={2}>h2. Ant Design</Title>
<Title level={3}>h3. Ant Design</Title>
<Title level={4}>h4. Ant Design</Title>
<Title level={5}>h5. Ant Design</Title>
</>
);
export default App;- Typography.Title
- Typography.Text
- Typography.Paragraph
- Typography.Link
Bu API’lerin üzerinde ekstra bazı property yetenekler varki bu bileşenlerin diğerlerinde tanımlanan bileşenlerden daha kompleks yapıları desteklemesini sağlıyor.
copyable: Whether to be copyable, customize it via setting an object
ellipsis: Display ellipsis when text overflows，can’t configure expandable、rows and onExpand by using object. Diff with Typography.Paragraph, Text do not have 100% width style which means it will fix width on the first ellipsis. If you want to have responsive ellipsis, please set width manually
editable If editable. Can control edit state when is object
Bu konular bileşenlerin aralarda ihtiyaç duyduğu yapılar olabiliyor;
Ant Design Hakkında Düşüncem: Typography API üzerinden bir yapı tasarlamışlar ve içerisine metinlerin sıkça ihtiyaç duyulan
- Editable
- Copyable
- Ellipsis
özelliklerini eklemişler. Bu metinleri diğer bileşen kütüphanelerinden daha güçlü yeteneklere sahip bir bileşen kütüphanesi haline getirmiş. Ant ile Chakra’ da benzer özellikler var Truncate heading mesela burada Ellipsis ile benzer ama Tooltip özelliği Ant Design içerisinde geliyor. Burada Ant Design daha güçlü bir API olarak tasarlandığını görebiliriz.
Ben uygulama kısmında farklı yapıları daha anlaşılır şekilde isimlendirip bunların yeteneklerine göre içerisinde bu özelliklerden faydalandırmayı düşünürdüm.
Page.Title --> Ellipses
Widget.Title. --> Ellipses, Editable ,
Code.Text --> Ellipses, Copyable 5. BluePrint
Blueprint mevcut HTML yapıları üzerinden sınıflar tanımlayarak heading üzerinde stilllendirme çalışmaları yapılır.
<div>
<h1 class="bp4-heading">H1 heading</h1>
<h2 class="bp4-heading">H2 heading</h2>
<h3 class="bp4-heading">H3 heading</h3>
<h4 class="bp4-heading">H4 heading</h4>
<h5 class="bp4-heading">H5 heading</h5>
<h6 class="bp4-heading">H6 heading</h6>
</div>Diğer bir konuda metinler üzerinde html tag üzerinden sınıflar tanımlayarak blueprint bu işleri ö
<div>
<p>Use the <code class="bp4-code"><code></code> tag for snippets of code.</p>
<pre class="bp4-code-block">Use the <pre> tag for blocks of code.</pre>
<pre class="bp4-code-block"><code>// code sample
export function hasModifier(
modifiers: ts.ModifiersArray,
...modifierKinds: ts.SyntaxKind[],
) {
if (modifiers == null || modifierKinds == null) {
return false;
}
return modifiers.some(m => modifierKinds.some(k => m.kind === k));
}</code></pre>
</div>Blueprint Düşüncem: Şu ana kadar ki projelerde genelde bu şekilde gittik, bu tarz sınıf tanımlarını bileşen seviyesi limitlemediğiniz zaman figma’dan kopyala yapıştır bir çok farklı sınıf türü çıkıyor ve bu sonradan çok fazla karmaşıklığa neden oluyor.
6. MUI
Metarial UI içerisinde Typograpgy bileşeni üzerinden işlemler yapmanıza olanak sağlıyor. Geist içerisindeki Text gibi…
export default function Types() {
return (
<Box sx={{ width: '100%', maxWidth: 500 }}>
<Typography variant="h1" gutterBottom>
h1. Heading
</Typography>
<Typography variant="h2" gutterBottom>
h2. Heading
</Typography>
<Typography variant="h3" gutterBottom>
h3. Heading
</Typography>
<Typography variant="h4" gutterBottom>
h4. Heading
</Typography>
<Typography variant="h5" gutterBottom>
h5. Heading
</Typography>
<Typography variant="h6" gutterBottom>
h6. Heading
</Typography>
<Typography variant="subtitle1" gutterBottom>
subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
blanditiis tenetur
</Typography>
<Typography variant="subtitle2" gutterBottom>
subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
blanditiis tenetur
</Typography>
<Typography variant="body1" gutterBottom>
body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur,
neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum
quasi quidem quibusdam.
</Typography>
<Typography variant="body2" gutterBottom>
body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur,
neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum
quasi quidem quibusdam.
</Typography>
<Typography variant="button" display="block" gutterBottom>
button text
</Typography>
<Typography variant="caption" display="block" gutterBottom>
caption text
</Typography>
<Typography variant="overline" display="block" gutterBottom>
overline text
</Typography>
</Box>
);
}MUI Düşüncem: Typograpgy bileşeni oldukça basit şekilde tutulmuş.
7. PrimeFlex / Tailwind
Bu utility sınıflar atomic sınıflar ile metinlerin farklı stillerde gösterilmesini sağlarlar.
PrimeFlex / Tailwind ile ilgili Düşüncelerim: Temel olarak zaten bir tasarımcınız var ise bunu Style Figmadan direk alarak bileşen içerisine taşıyabilirsiniz. Eğer bir tasarımcınız yok ise Tailwind ve Primeflex üzerinde bir çok hazır şablon hayat kurtarıcı olacaktır.
8. CapSize
CSS ile Typography tanımlama şeklinde değişik bir yapı sunuyor. Cap Height ve Line Height üzerinden metin tanımlamaları yapmanıza olanak sağlıyor.
9. React Wrap Balancer
Bir diğer kütüphanede React Wrap Balancer, bu yapının içerisinde tanımlanmış bir metin ekranda küçülüp büyüsede buna göre dengeli bir şekilde alt satırlara kaymasını sağlıyor.
function Title() {
return(
<h1>
<Balancer>My readability is improved by React Wrap Balancer!</Balancer>
</h1>
)
}Örnek bir demo bu linkte bulunuyor
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki(react-mimarisi) diğer yazılara erişmek için bu linke tıklayabilirsiniz.
