Esimerkkisivu
Keräsin tälle sivulle huomioita tältä erää. Jatketaan keskiviikkoaamuna!
Tehdäänkö Tammi teemassa variablet vai käytetäänkö staattisia määrityksiä?
Esim näin (malli napattu valmisteemasta):
:root {
--global-palette1: #dfc3b8;
--global-palette2: #c6c2bb;
--global-palette3: #032343;
--global-palette4: #032343;
--global-palette5: #032343;
--global-palette6: #f3f2f1;
--global-palette7: #efe1db;
--global-palette8: #e2e0dd;
--global-palette9: #ffffff;
--global-palette9rgb: 255, 255, 255;
--global-palette-highlight: var(--global-palette1);
--global-palette-highlight-alt: var(--global-palette2);
--global-palette-highlight-alt2: var(--global-palette9);
--global-palette-btn-bg: var(--global-palette9);
--global-palette-btn-bg-hover: var(--global-palette1);
--global-palette-btn: var(--global-palette4);
--global-palette-btn-hover: var(--global-palette5);
--global-body-font-family: Muli, var(--global-fallback-font);
--global-heading-font-family: inherit;
--global-primary-nav-font-family: inherit;
--global-fallback-font: sans-serif;
--global-display-fallback-font: sans-serif;
--global-content-width: 1200px;
--global-content-narrow-width: 842px;
--global-content-edge-padding: 1.5rem;
--global-calc-content-width: calc(1200px - var(--global-content-edge-padding) - var(--global-content-edge-padding) );Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis felis quis tellus vestibulum, eget vestibulum quam aliquet. Morbi vitae nisi eu tellus tincidunt porttitor. Donec rutrum vitae augue quis ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis felis quis tellus vestibulum, eget vestibulum quam aliquet. Morbi vitae nisi eu tellus tincidunt porttitor. Donec rutrum vitae augue quis ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis felis quis tellus vestibulum, eget vestibulum quam aliquet. Morbi vitae nisi eu tellus tincidunt porttitor. Donec rutrum vitae augue quis ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis felis quis tellus vestibulum, eget vestibulum quam aliquet. Morbi vitae nisi eu tellus tincidunt porttitor. Donec rutrum vitae augue quis ornare.
| Laitetaan | testiksi | myös | table | header |
|---|---|---|---|---|
| Onko | tämä | natiivitaulukko | responsiivinen | ? |
| Vai | sekoittaako | laytoutin | mobiilissa | ehkä |
| Tämä | on | muuten | Stripes | tyyli |
Voisiko natiivi table napata värit teeman tyyleistä?
| Laitetaan | Tännekin | Header | Row |
|---|---|---|---|
| Nyt | tulee | värit | teemasta! |
| Tämä | on | Default | tyyli |
Tämä on Tammi Container
Tuleeko containerilla on default top ja bottom padding VAI käytetäänkö välikkeitä (spacer)? Niiden kanssa riski ulkoasun rikkoutumiseen voi kasvaa.
Noissa sinisissä alla ei näy asetetut kuvat :O
Nämä tulisi pysyä rinnakkaisina yhtä korkeina, täydemmän mukaisesti riippumatta tekstin määrästä. Tasaus alas.
Otsikko
Näiden kuvien maksimikorkeus ja -leveys tulee määrittää, jos käyttäjä uppaa isoja kuvia.
Lorem ipsumOtsikko
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae nisi eu tellus tincidunt porttitor. Donec rutrum vitae augue quis ornare.
Lorem ipsumCourses
Tässä on kappale ilman Tammi containeria ja tässä alla tekstiblokkeja + natiivi kuvablokki
Lauran testailut
H2 title tulee pakottaa tyyleissä näkymään CAPSEILLA.
Voisiko sisältösivuilla olla backuppina container suoraan pohjassa, joka sitten ohitetaan tarvittaessa lohkokohtaisesti?
Tuleeko tässä riski, että käyttäjä lisää sisältöä ilman Tammi containeria?
Tämä on Kadence row layout, jossa mahdollista ohittaa default container-leveys blokin asetuksissa ja Structure settareissa määritetään sisällön leveydeksi Content Max Width Inherit from Theme
Voisiko tätä ajatusta viedä myös Tammi teemassa + blokeissa?
Tämä on hyvä ja toimiva!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fermentum pellentesque congue. Nulla eu dui a dolor aliquet aliquet. Ut sollicitudin fringilla urna id sagittis. In congue sagittis pellentesque.
Sed finibus sapien sed vestibulum pretium. In hac habitasse platea dictumst. Quisque tincidunt at dui id gravida. Proin convallis mollis arcu non porta. Sed finibus sapien sed vestibulum pretium. In hac habitasse platea dictumst. Quisque tincidunt at dui id gravida. Proin convallis mollis arcu non porta. Saako linkin ikonin piiloon, jos linkkiä ei aseteta?..
Sed finibus sapien sed vestibulum pretium. In hac habitasse platea dictumst. Quisque tincidunt at dui id gravida. Proin convallis mollis arcu non porta.
Tämä on hyvä ja toimiva!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fermentum pellentesque congue. Nulla eu dui a dolor aliquet aliquet. Ut sollicitudin fringilla urna id sagittis. In congue sagittis pellentesque.
Sed finibus sapien sed vestibulum pretium. In hac habitasse platea dictumst. Quisque tincidunt at dui id gravida. Proin convallis mollis arcu non porta. Sed finibus sapien sed vestibulum pretium. In hac habitasse platea dictumst. Quisque tincidunt at dui id gravida. Proin convallis mollis arcu non porta. Saako linkin ikonin piiloon, jos linkkiä ei aseteta?..
Sed finibus sapien sed vestibulum pretium. In hac habitasse platea dictumst. Quisque tincidunt at dui id gravida. Proin convallis mollis arcu non porta.
Tämä on Tammi sisältö
Tällä voisi olla ylä- ja ala-padding 50px deskarissa (25px mobiili)
Sisältöjen tasaus vertical align center, eli kuvaan nähden keskellä.
Kuvan sijoitus pitää olla mobiilissa niin, että se on aina tekstin alapuolella (jälkeen siis).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis felis quis tellus vestibulum, eget vestibulum quam aliquet. Morbi vitae nisi eu tellus tincidunt porttitor. Donec rutrum vitae augue quis ornare. Phasellus ac tempus ligula. Nullam id nunc ipsum.
Lorem ipsumTämä on contact us
Tämä alue on sellainen, jonka voisi tallentaa reusable blockseihin tai sitten teeman yleisiin lohkoihin (vrt. Kadence teeman Elements).
Sama sisältö toistuu monessa paikassa eikä muutoksia haluta copy-pasteta.
Jos taustakuvaa ei laiteta, saako matalammaksi eli vähemmän tyhjää ylös? En tiedä tuleeko tällaista tilannetta, mutta ajatuksen tasolla.