0

This is the first time I build a frontend application, I prefer coding the backend. I tried to do this in a Lightning Component.

I added the below picture as a reference. Can I build that with standard Lightning slds Styles? enter image description here My question: 1. Correct me if I wrong. I should use below grid:

<div class="slds-grid slds-wrap slds-grid--pull-padded">
  <div class="slds-p-horizontal--small slds-size--1-of-2 slds-medium-size--1-of-2 slds-large-size--1-of-2">1</div>
  <div class="slds-p-horizontal--small slds-size--1-of-2 slds-medium-size--1-of-2 slds-large-size--1-of-2">2</div>
  <div class="slds-p-horizontal--small slds-size--1-of-2 slds-medium-size--1-of-2 slds-large-size--1-of-2">3</div>
  <div class="slds-p-horizontal--small slds-size--1-of-2 slds-medium-size--1-of-2 slds-large-size--1-of-2">4</div>
  <div class="slds-p-horizontal--small slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-2">5</div>
  <div class="slds-p-horizontal--small slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-2">4</div>
</div>
  1. In section 1,2,3,4,6 I use images. Can I design this pictures as responsive? This same center place at grid and this same percent size? If yes - how?

  2. In section 5 - place should be at center of section and text on it should align left, so please correct me If I'm wrong:

     <div class="slds-p-horizontal--small slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-2">
    <div class="slds-align--absolute--center">
        <ui:outputText class="slds-text-align--left" value="text1" />
        <ui:outputText class="slds-text-align--left" value="text2" />
    </div>
    

0

Interesting, I was trying this out and I cant get the 5th section to work. I thought it would be easy, but apparently SLDS doesnt seem to include any attributes to put text over images easily.

question - 1, you are correct.

question - 2, SLDS is fully responsive, no need to add extra css to do so (unless you want a different behavior from the one the SLDS offers)

question - 3, I wasn't able to add the text on top of the image, I tried adding a card in order to set the image as a background, but this adds complications as you must set height and width to the image, the output text was not being centered in the card. Maybe someone can provide further insight on to achieving this part, if possible using only the SLDS framework...

    <div class="slds-grid slds-wrap slds-grid--pull-padded">
      <div class="slds-p-horizontal--small slds-size--1-of-2 slds-medium-size--1-of-2 slds-large-size--1-of-2">1
            <img src="{!$Resource.images + '/misc/animal1.jpg'}" />
        </div>

      <div class="slds-p-horizontal--small slds-size--1-of-2 slds-medium-size--1-of-2 slds-large-size--1-of-2">2
            <img src="{!$Resource.images + '/misc/animal1.jpg'}" />
        </div>

      <div class="slds-p-horizontal--small slds-size--1-of-2 slds-medium-size--1-of-2 slds-large-size--1-of-2">3
        <img src="{!$Resource.images + '/misc/animal1.jpg'}" />
        </div>
      <div class="slds-p-horizontal--small slds-size--1-of-2 slds-medium-size--1-of-2 slds-large-size--1-of-2">4
        <img src="{!$Resource.images + '/misc/animal1.jpg'}" />
        </div>

        <div class="slds-p-horizontal--small slds-size--1-of-2 slds-medium-size--1-of-2 slds-large-size--1-of-2" >5

                    <img src="{!$Resource.images + '/misc/animal1.jpg'}" style="z-index:0"/>
                <div class="slds-align--absolute--center slds-media__body">
                    <span class="slds-text-body--small" style="border:1px solid red; z-index:10;">asdasdasdasd</span>
                    <span class="slds-text-body--small" style="position:absolute;border:1px solid red; z-index:10;">asdasdasdasd</span>
                </div>

            </div>
  <div class="slds-p-horizontal--small slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-2">6
        <img src="{!$Resource.images + '/misc/animal1.jpg'}" />
        </div>

</div>

enter image description here

  • With question 3 we misunderstood. I try explain it: I have container in grid with number 5. In this container have 2 output fields. So, container should be at center of grid but text should align to left of this contener and separate lines. <div id="containerCenterOfGrid"> <ui:outputtext value="text1AlignToLeftInContainer" /> <br/> <ui:outputtext value="text2AlignToLeftInContainer" /> <br/> </div> – JJanek Apr 14 '17 at 22:02
  • I understood, I just cant make it work with the SLDS without having to add extra css. – glls Apr 15 '17 at 0:32
  • Ok. So, I used to this external CSS. I really thanks. I have last question. How can I add image in center on grid and on this image add button that button should stay center of image always? – JJanek Apr 15 '17 at 20:36
0

I think you just have to figure this out by playing with it. Here's a fiddle to help you get started. However, I don't think the css I linked to has the absolute-center class within it.

https://jsfiddle.net/fbvducwh/1/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.