Using Calcite to Emulate our Drupel Web Site

[Mark_Hébert]

cf www.coralgables.com and our Smart City Hub New site we're making cards to create a comparable feel to the City site cards.

Using both 3-card and 4-card classes, we've run into the card-title wrapping the text in such a way that the cards shift vertically in the upper division grid pattern.

<div class="col-xs-12 col-sm-6 col-md-4">
<div class="three-card contrast-safe-text"> can't find definitions or explanationof this class

and

<div class="grid-container">
<div class="column-22 pre-1"> can't find definitions or explanationof this class
<div class="block-group block-group-4-up">

How can this be constrained or managed? Searching for the card-[x] tools by class is not an easy lookup. Where are the card class options catalogued?

We'd also like to replace the card border with a halo-y effect or float like the drupal site. Any help on this score?

Thank you - Mark

[KlaraSchmitt]

Hi Mark,

Are you using this version of Calcite: https://developers.arcgis.com/calcite-design-system/components/card/ for your cards? Because I see some classes in your code (column-22 pre-1) that make me think you might be looking at the older calcite web framework. Hub is not built using that framework, we're still using Bootstrap 3 for our grid system (which is what generates that first div with the col-* classes you list), but we're beginning to incorporate the calcite components from the calcite design system linked above and you can use those same components in the Text Card in the HTML editor. However, you may see some differences as the components rely on slots to manage their configurations.

Edit: I'd add that the other classes you mention: three-card contrast-safe-text are formatting that Hub uses to style the calcite card component if you are using the plus icon in the Text Card to inject these. The CSS related to these classes is primarily used for formatting the thumbnail, but there is a little bit related to font-sizes.

In regards to you question about a halo effect, unfortunately, it is not possible at this time to add a drop-shadow to the calcite card itself because these components are web components. You might be able to wrap the card in a div and apply a box shadow to the div by a unique CSS class. You can use a box-shadow generator: https://www.cssmatic.com/box-shadow to generate your glow styles. You want horizontal and vertical length to be near 0 and blur to be 10-20.

[Mark_Hébert]

Thank you Klara - I found the 'older' code here: https://esri.github.io/calcite-web/examples/core/ when searching for a card layout that was more compact and provided more than 3-across cards. I jury-rigged the card code from the from the 3 into the 4. Is the information on this site current and useful?

I don't really understand how the col-* acts on the cards themselves - the online explanation I found talks about formatting to various device displays - not gridded card layout. Where can I resource coding to a 4- or 5- across card layout grid? What effective mixing of the hub and calcite methods can we perform that 1) avoids the cards shifting vertically due the card-title text, and 2) enables us to manage the number of cards across.

Also - the shadowing of the card is mostly cosmetic to better emulate the web site cards - I'll chase that butterfly later.

The new hub site is a makeover of our current site to reduce the color noise: https://cg-hubdev-cggis.opendata.arcgis.com/ - so it's important to us to build out the new quickly but effectively - I may revert to the 3-across for all section since those cards seem less volatile.

Thanks again!

[KlaraSchmitt · Accepted solution]

If you want to learn more about the grid system Hub currently uses, you can review the Bootstrap documentation here: https://bootstrapdocs.com/v3.0.3/docs/css/#grid

The bootstrap grid is dependent on a 12 column grid structure, so you'll find it easier to have four 3-column cards. If you go for five cards, you'll have to have five 2-column cards offset by 1-column. You may find my explanation over on this thread helpful: https://community.esri.com/t5/arcgis-hub-questions/how-to-get-all-cards-in-a-text-box-to-dynamically.... The columns are containers for the cards.

I am not sure why your cards are shifting vertically. If I had to guess, it's because you're using HTML that may have some CSS supplied by Hub (accidentally) due to similar classes between the old calcite-web and the newer calcite design system. It is normal that the card height might be varied if you have different length titles (1 line vs 2) or descriptions, but spacing displaying above the card isn't reflective of that problem.

You may also wish to reference this post if you need even height cards. However, this one starts to get into slightly more complicated CSS layouts that require a little familiarity with flexbox: https://community.esri.com/t5/arcgis-hub-questions/dynamically-positioning-a-card-button-based-on-th... 

[Mark_Hébert]

Yes - thank you for assisting in cracking the .col-* code! We've successfully applied a 4 column parameter to the column class division and the cards flow as desired.

Enjoy the long weekend - all the best

Mark

[Mark_Hébert]

UPDATE Questions - anyone from this thread attending the UC and want to meet up?

Also, who else is attempting to use Calcite coding in Text card to format object arrays (Calcite Cards)?

My post from a month ago is updated to say "we are using a 5-card array in our Hub site upgrade [see here: https://coral-gables-smart-city-hub-2-cggis.hub.arcgis.com/ ]. Issues we're trying to resolve is balancing card rows of less than 5 cards; managing card vertical alignments due to text length in 'card-body'.

Respond here, or if you're going to the UC let's make time to discuss experience with Calcite formatting. Thanks!!