search

Esri / calcite-web

Authoritative front-end development resources for Calcite design initiative. Includes extendable base components and styles, as well as a modular and efficient framework for ArcGIS properties.
http://esri.github.io/calcite-web/
Apache License 2.0
109 stars 58 forks source link

Calcite Web is now full width? (See attached) #183

Closed CassidyB closed 9 years ago

CassidyB commented 9 years ago

Fix width: screen shot 2015-05-26 at 5 51 21 pm Full Screen: screen shot 2015-05-26 at 5 51 28 pm

paulcpederson commented 9 years ago

Yeah. 3.0.0 adds a breakpoint for large columns. https://github.com/Esri/calcite-web/releases/tag/v0.3.0

There are several reasons for this:

  1. Having the site float in the center is not a grid. The space on either side is meaningless.
  2. If there is a max-width then there is no way to accomplish fullscreen interfaces with columns
  3. Having a constrained top nav and a full screen interface below it is visually awkward (think map viewer, map tools in developers, etc)
  4. Quite a bit of screen real estate goes wasted in situations where users have large screens.

The only thing that constraining the container does for you is to keep line length from getting too long so content stays readable. In the new grid, we handle this much the same as we handle columns for tablet and phone sizes where at the extra-large size we just increase the number of columns in the grid. We could also add a set of classes that constrain a column of text to a certain max-width fairly easily.

paulcpederson commented 9 years ago

To accomplish the centered layout, you can just add a large-pre-X class to center it.

CassidyB commented 9 years ago

@paulcpederson Thank you sir!

longebane commented 9 years ago

@paulcpederson Are you saying setting container width is an arbitrary practice and you suggest to ditch constraining the container and let it take full width?

paulcpederson commented 9 years ago

@longebane yes. Not arbitrary, per se, but the main goal of having a constraining container is so that line-length doesn't get too long (bad for readability).

The grid used to work with a container, so that there was only ever a fixed number of columns per breakpoint and after the max, the container was just centered:

grid-diagram-02

Now, we just give you more columns after a certain screen size:

grid-diagram-01

If you want to center, adding large-pre-x will enable you to still center the column of text if that is the design you want:

grid-diagram-03

This fixes problems we have with a constrained nav and a fullscreen interface, like the geotrigger editor inside of the developers site:

screen shot 2015-05-27 at 2 31 45 pm

longebane commented 9 years ago

Ok, makes sense. I'll leave it uncentered then, unless @CassidyB has something to say about that.

paulcpederson commented 9 years ago

Yeah, I think moving to a more fullscreen, left-aligned layout is very modern and works well with our typography and brand, but it's very subjective. We mostly changed the grid so we would be able to handle both types of layout (centered vs full).