search

psu-libraries / psulib_base

Drupal Base Theme
0 stars 0 forks source link

Define layouts #13

Closed chrisdarke42 closed 7 months ago

chrisdarke42 commented 7 months ago

Defining layouts for the sites is a big task, but it needs to start somewhere! Grid vs flex, older grid systems, inheriting something from bootstrap, there are quite a few options.

Next steps

  1. Determine what are the basic layouts that most of the sites are using, including different regions
  2. Propose a layout system that will cover the main layouts in comments
  3. Discuss with team
  4. Implement the core layout for html / page level elements
schwent commented 7 months ago
  1. Regions: Above Page (for announcements and alerts) Header Left (branding) Header Right (search) Navigation Left Navigation Right (if want search here instead) Above Content Breadcrumbs Below Breadcrumbs Sidebar First Content Sidebar Second Above Footer Footer
schwent commented 7 months ago
  1. Layouts: html.html.twig header.html.twig page.html.twig region.html.twig footer.html.twig (may prefer to use a block for footer content due to frequent changes)
schwent commented 7 months ago
  1. Breakpoints:
chrisdarke42 commented 7 months ago

@schwent to review breakpoints by 6th of March, so we can compare with other sites and determine what is needed in base theme

cjwetherington commented 7 months ago

If it's at all helpful, ROAM uses old-fashioned media queries designed for full responsivity from 360 on up. Major rules are below. 768, 992, and 1200 are the most recurring.

footer.css: @media only screen and (max-width: 991px) @media only screen and (max-width: 767px)

general.css: @media only screen and (min-width: 768px) @media only screen and (min-width: 992px) @media only screen and (min-width: 1200px)

header.css: @media only screen and (max-width: 537px)

menu.css: @media only screen and (max-width: 767px)

node.css: @media only screen and (max-width: 991px) @media only screen and (max-width: 767px) @media only screen and (max-width: 567px) @media only screen and (max-width: 411px)

search.css: @media only screen and (max-width: 1199px) @media only screen and (max-width: 991px) @media only screen and (max-width: 767px) @media only screen and (max-width: 677px)

views.css: @media only screen and (max-width: 767px)

chrisdarke42 commented 7 months ago

Looks like most of those are standards from bootstrap. A few of the others look like they are resulting from not doing mobile-first.