Jump to content
louisstephens

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

Recommended Posts

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.

 

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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

  • Like 2

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By stanoliver
      My aim is to output a very basic xml document which should be styled with a few css-styles.
      <?xml version = "1.0"?> <contact-info> <name>Donal Duck</name> <company>Superducks</company> <phone>(011) 123-4567</phone> </contact-info> How do I implement it with processwire?
    • By Peter Knight
      Hi guys
      I know some of you are UIKit fans like me. I built a site recently using UIKit 3 and I'm having some layout issues on IE 11 and largest breakpoints.
      You have to set quite a big resolution or have a large monitor to experience this as it only happens on largest breakpoints.
      The main column in the above URL is successfully centered in most browsers except IE11.
      On IE 11, it shifts to the right. Basically it's a DIV using the uk-width-expand selector and then I have a custom max width and a margin in there to centre the content horizontally.
      Here's a simple CodeKit and JSFiddle of the issue
      https://codepen.io/edenstudios/pen/qvWpGo
      https://jsfiddle.net/EdenSt/auekfgqt/8/
      Thanks
      P
       
       
    • By snobjorn
      I have been searching a while for pre-made UIkit 3 themes that I can download in some form and use. But I have not found much. I work with variables and compile most times, but sometimes I would prefer working with a "finished" theme as a starting point
      I have found the following resources:
      https://github.com/zzseba78/Kick-Off https://github.com/uikit/awesome-uikit Do anyone else know of UIkit 3 themes that you could list?
    • By AndZyk
      Gallery Claeys is a art gallery in Freiburg, Germany, with focus on exhibitions of female artists. Our agency designconcepts developed a website that features the latest exhibitions of the gallery as well as an archive of previous exhibitions. Every artist has its own page with an excerpt of their works and a vita of the artist.
      The website was build with help of the framework UIkit and Barba.js for smooth transitions between pages.
      www.galerie-claeys.de
       
      Features:
      Exhibitions Page transitions  
      Exhibitions
      On the homepage you can find a preview of upcoming or current exhibitions as well as an archive of previous exhibitions. Based on the date the exhibitions get automatically sorted in one of the three categories (preview, current or archive). Each category has its own deep-link with URL segment.
       
      Page transitions
      The smooth fading page transitions are made with Barba.js.
       
      Modules used:
      Front-End Page Editor Markup Sitemap XML ProCache Tracy Debugger Upgrades  
      Regards, Andreas
    • By AndZyk
      This is a website for the musical area of the protestant town church Pforzheim, Germany. Our agency designconcepts developed a website that provides informations about the choirs, ensembles and orchestras as well as dates for their rehearsals, services and concerts.
      The website was build with help of the framework UIkit.
      www.musik.stadtkirche-pforzheim.de
       
      Features:
      Events Download dates  
      Events

      The events for rehearsals, services and concerts were created in Microsoft Excel and then imported as pages from CSV. For better organization, events are cross-referenced with choirs, ensembles and orchestras. Services and concerts are displayed in a events list, but rehearsals are only displayed on the page of the choir, ensemble or orchestra, to make the events list more compact.
       
      Download dates

      It is possible to download every event date as ICS file, which will be generated on clicking the download button. You can then add this event easily to your calendar app and stay up-to-date.
       
      Modules used:
      Email Obfuscation (EMO) Front-End Page Editor Import Pages from CSV Markup Sitemap XML ProCache Tracy Debugger Upgrades Wire Mail SMTP  
      Regards, Andreas
       
×
×
  • Create New...