[solved] Uikit 3 Grid Not Working as expected (or is it)

[louisstephens]

Perhaps someone can help me on this. I recently started poking around at uikit (I have used bootstrap and foundation previously) as I liked the admin theme and a few of the components. However, their documentation is a bit confusing and I can never get the desired results. I am sure I am doing something wrong, but I did not want to digg into v2, if things will be changing (for better or worse).

 

I have the following:

<div class="uk-section">
	<div class="uk-container uk-container-large">
		<div class="uk-child-width-1-1@s uk-grid-small uk-grid-match" uk-grid>
			<div class="uk-width-1-2">
				<img src="images/logo.png" alt="" width="1183" height="167" />
			</div>
		</div>

	</div>
</div>


<div class="uk-section">
	<div class="uk-container uk-container-large">
		<h3>Section</h3>
		
		<div class="uk-child-width-1-4@m uk-grid-small uk-grid-match" uk-grid>
			<div class="item">
				<div class="uk-card uk-card-default uk-card-body">
					<h3 class="uk-card-title">Default</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
				</div>
			</div>
			
			<div class="item">
				<div class="uk-card uk-card-default uk-card-body">
					<h3 class="uk-card-title">Primary</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
				</div>
			</div>
			
			<div class="item">
				<div class="uk-card uk-card-default uk-card-body">
					<h3 class="uk-card-title">Secondary</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
				</div>
			</div>

			<div class="item">
				<div class="uk-card uk-card-default uk-card-body">
					<h3 class="uk-card-title">Secondary</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
				</div>
			</div>

		</div>

	</div>
</div>

The cards at the bottom stack on mobile which is the desired effect. However, the logo at the top is squished and on mobile does not seem to be resizing to take on the .uk-child-width-1-1@s. Is there a way to prevent the logo from squishing, and for it to resize with the browser? 

I have noticed when I do 

<div class="uk-section">
	<div class="uk-container uk-container-large">
		<div class="uk-child-width-1-1@s uk-grid-small uk-grid-match" uk-grid>
			<div class="uk-width-1-2">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
			</div>

			<div class="uk-width-1-2">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
			</div>

		</div>

	</div>
</div>

that the grid also does not collapse to full width either. I am positive I have just missed something in the documentation, or how uikit is supposed to work. However, for the life of me I can not find it.

 

[pwired]

My last download was uikit 3.0.0-beta.22 I am happy to see that they made it to beta.30

Not sure what you are after but with this code you can see the logo adapts to small screen:

<div class="uk-section">
        <div class="uk-grid-match uk-grid-small uk-text-center" uk-grid>
        <div class="uk-width-1-2@s">
        <img src="images/logo.png" alt="" width="1183" height="167" />
        </div>
        <div class="uk-width-1-2@s">
          <div class="uk-card uk-card-default uk-card-body">1-2@s</div>
        </div>
	</div>
</div>

 

Have a look at http://www.uikit3.freehostia.com/ and resize your browser window all the way to small

 

and with this code the logo simply is responsive all the way:

<div class="uk-section">
        <div class="uk-grid-match uk-grid-small uk-text-center" uk-grid>
        <div class="uk-width-1-1@s">
        <img src="images/logo.png" alt="" width="1183" height="167" />
        </div>
	</div>
</div>

 

[AndZyk]

Hello @louisstephens,

first of all great that you are giving UIkit a chance. I am coming from Bootstrap as well but UIkit is now my favorite framework so far. 

Here are a few points you mixed up:

1. If you only have one item in a container you don't need a grid and instead can just use the uk-width-* classes.
2. The class uk-grid-match is used for cards and makes your image stretched. Also it is not necessary if you only have one item. You should remove it.
3. If you have a grid you should either define uk-child-width-* classes or assign uk-width-* classes to the items. Doing both is not very clean.
4. If you care about validation, you should use data-uk-grid instead of uk-grid. Without the data attribute you get an error in the validation. 

Considering your logo: Even resized it will be very small on mobile devices. You should either think about a more compact logo or work with the picture element to show optimized versions.

Regards, Andreas

[louisstephens]

Thanks @AndZyk! That indeed solved the image issues. On your point regarding the logo, serving a compact logo for mobile is what I hope to accomplish in the long road. I also noticed that changing the column to  uk-width-1-1@m helped with the resizing on mobile as well (in terms of the column). I appreciate all the help.

[SamC]

I've been using bootstrap for the last three sites. However, I'm not getting on with the lack of mixins so I thought I'd give uikit 3 another go with the many hooks available. Thanks for the tips @AndZyk