Skip to content

Standardize on "tablet" layout breakpoint #334

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aduth merged 1 commit into from
Apr 3, 2023
Merged

Standardize on "tablet" layout breakpoint #334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
- NPM package is renamed from `identity-style-guide` to `@18f/identity-design-system`. ([#331](https://github.com/18F/identity-design-system/pull/331))
- Sass artifacts now require Dart Sass. The Ruby Sass and LibSass (C) compilers are no longer supported.
- To improve performance of the default CSS bundle, responsive utility breakpoints other than `tablet:` have been disabled by default. Previously, `mobile-lg:` and `desktop:` utilities were also enabled. You can restore the original settings by overriding [the `$theme-utility-breakpoints` Sass variable](https://designsystem.digital.gov/documentation/settings/#utilities-settings).
- Component styling which previously responded to now-disabled breakpoints have been updated to standardize on the `tablet` breakpoint. This affects `usa-button--wide`, `usa-search--big`, and `usa-intro` CSS classes.
- Image URLs in stylesheets are no longer processed by `asset-path-if-exists`. For Rails integrations, consider using [the `$theme-image-path` Sass variable](https://designsystem.digital.gov/documentation/settings/#general-settings) in combination with [Sprockets `resolve_assets_in_css_urls` option](https://github.com/rails/sprockets-rails#initializer-options).
- The deprecated `$image-path` Sass variable setting has been removed. Use `$theme-image-path` instead.
- The deprecated `alerts/success-badge.svg` image has been removed. Use `alerts/success.svg` instead.
Expand Down
4 changes: 2 additions & 2 deletions docs/_components/cards.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ Cards provide a way to separate data in a feed.
{% capture example %}
<div class='lg-card'>
<div class='grid-row flex-row flex-align-end'>
<div class='mobile-lg:grid-col-10'>
<div class='tablet:grid-col-10'>
<h1 class='margin-bottom-05'>A card header!</h1>
<p class='margin-top-05'>Some content for this card!</p>
</div>
<div class='mobile-lg:grid-col-2 text-right'>
<div class='tablet:grid-col-2 text-right'>
<a href='#' class='usa-button usa-button--outline'>Action</a>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion docs/_includes/helpers/unstyled-button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
the purpose of aligning button previews amongst other variants.
{% endcomment %}

<span class="display-block mobile-lg:display-inline-flex position-relative">
<span class="display-block tablet:display-inline-flex position-relative">
<button
class="usa-button {{ include.extra_classes }}"
disabled
Expand Down
21 changes: 17 additions & 4 deletions docs/_layouts/main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@

{% assign sidenav = site.data.nav[page.sidenav] | default: page.sidenav %}

<main class="usa-layout-docs usa-section" id="main-content">
<main class="usa-section" id="main-content">
<div class="grid-container">
{% if sidenav %}
<div class="grid-row grid-gap">
<aside class="usa-layout-docs__sidenav desktop:grid-col-3">
<aside class="display-none tablet:display-block tablet:grid-col-3">
Copy link
Copy Markdown
Contributor Author

@aduth aduth Apr 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These changes move away from the internal-ish usa-layout-docs styles, which should have an accessibility benefit by avoiding issues concerning order styles. Instead, the markup is duplicated so that it still appears below content as expected at small screens, but reflecting that in the markup as well.

Copy link
Copy Markdown
Contributor

@zachmargolis zachmargolis Apr 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's our timeline for spinning down this site? Should we just start removing content from it so we don't have to maintain it?

Copy link
Copy Markdown
Contributor Author

@aduth aduth Apr 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's our timeline for spinning down this site? Should we just start removing content from it so we don't have to maintain it?

Still nailing down specifics on this. #333 will prep the production site to 404. Once that's in place, I was going to remove many of the non-component content pages, but may want to continue keeping around some of the rest of the documentation for internal development reference, pull request preview links, and visual regression specs. So it'd continue to be useful to have this working, at least for the short term.

<nav>
<ul class="usa-sidenav">
{%
Expand All @@ -25,7 +25,7 @@
</nav>
</aside>

<div class="usa-layout-docs__main desktop:grid-col-9 usa-prose">
<div class="tablet:grid-col-9 usa-prose">
<h1>{{ page.title }}</h1>

{% if page.lead %}
Expand All @@ -34,9 +34,22 @@ <h1>{{ page.title }}</h1>

{{ content }}
</div>

<aside class="grid-col-3 tablet:display-none padding-top-4">
<nav>
<ul class="usa-sidenav">
{%
include nav/list.html
links = sidenav
li_class = 'usa-sidenav__item'
ul_class = 'usa-sidenav__sublist'
%}
</ul>
</nav>
</aside>
</div>
{% else %}
<div class="usa-layout-docs__main usa-prose">
<div class="usa-prose">
<h1 class="usa-display">{{ page.title }}</h1>

{% if page.lead %}
Expand Down
2 changes: 1 addition & 1 deletion src/scss/components/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ $button-stroke-big: inset 0 0 0 units($theme-button-stroke-width * 2);
}

.usa-button--wide {
@include at-media('mobile-lg') {
@include at-media('tablet') {
min-width: 14rem;
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/scss/components/_search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

.usa-search--big [type='submit'],
.usa-search--big .usa-search__submit {
@include at-media('mobile-lg') {
@include at-media('tablet') {
@include u-padding-x(4);
font-size: font-size($theme-search-font-family, 'lg');
}
Expand Down
2 changes: 1 addition & 1 deletion src/scss/components/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
.usa-intro {
@include u-font-size('sans', 'md');

@include at-media('mobile-lg') {
@include at-media('tablet') {
@include u-font-size('sans', $theme-lead-font-size);
}
}
Expand Down