Newbie – Responsive themes and relative sizing how do you edit without loss?

Tagged: , , ,

Author Posts

katw May 14, 2015 at 1:41 pm

Apologies for what may have been answered a million times before and for such a newbie question BUT…

I am modifying a responsive theme. One that was prepared by another party.

Under the hood I have looked at the theme CSS and see it has within it seven media queries which to varying degrees resize text, shuffle objects and so on as window viewport sizes change.

If I look at the theme stylesheet code they are using font-size: PX and Font-size: REM, defining padding and margins in % and EMS, width in PX and %… and so on. They are really mixing the measures and methods up but doing their best to SCALE rather than lock in an absolute number.

Two examples:

	blockquote {
		font-size: 18px;
		font-size: 1.8rem;
		line-height: 1.6667;
		margin-bottom: 1.6667em;
		margin-left: -1.3333em;
		padding-left: 1.1111em;
	}

and

	.widecolumn {
		margin: 8.3333%;
		padding: 8.3333%;
	}

Using relative sizing to enable the design to ‘flex’ when the viewport changes is nothing new but in such circumstances I don’t know if I am doing more harm than good by using MicroThemer.

How do I keep it flexing when I appear to be working in absolutes if I edit any selectors via the MicroThemer (MT) front end?

It doesn’t show me the numbers are defined as EM or %, it shows me the calculated output/result for the viewport I am using when I edit using MT.

So I am seeing the PX calculated result of a % based padding in the microthemer interface.

If I edit the ’93px’ will it write out CSS selector mods with the size in absolute PX? OR will it follow their style and lead and write it out using the same techniques PX and % (if that was their definitions for padding for example.)?

I don’t want to loose the flexing… I just want to fine-tune the numbers they used.

BTW the theme I am playing with is Twenty Fifteen, nothing tricky so I thought.

Second question: Media entries

MicroThemer doesn’t pickup or “load” the media entries set in the theme being edited does it?

So how do you target specific classes/selectors applicable for the media entries/definitions set in the theme.css?

Sebastian May 15, 2015 at 2:32 am

Hi Kat,

You raise some good questions here that highlight two Microthemer shortcomings:

  1. Microthemer doesn’t automatically pull in the media queries used by the theme. You can enter your own via the ‘Edit media queries’ popup window after looking at the media queries used by the theme but this isn’t very convenient or helpful for non-technical users.
  2. The computed CSS Microthemer reports is always in pixels. It doesn’t get the original unit from the stylesheet.

We’re trying to address both of these issues.

We’re working on an additional ‘Import’ feature that pulls in both media queries and CSS selectors from a user specified stylesheet. This feature is half done, but the general improvements to the interface are going to take priority this month so it might be a little while before this feature is finished. It will definitely get done at some point though as it will be extremely useful.

I’ve done some research that suggests it might be possible to pull in the original units used in the stylesheet instead of just showing the computed values in pixels. I will only know for sure if this is possible once I’ve tried to do it.

In terms of your question about not introducing unwanted rigidity, as long as you define % and em units in the Microthemer interface instead of px (or specifying no unit which defaults to pixels) you will be OK. It may be off putting that Microthemer reports computed values in pixels but if you specify a % unit for instance it will be a % unit in the stylesheet. So you won’t be harming the flexibility of the theme.

Another feature we’re going to add fairly soon is the ability to set default units for each property that can receive numeric values via the preferences window. So you could set padding and margin to default to em units for instance.

I’ve just looked at the 2015 stylesheet. I was going to create a design pack of nothing but media queries that you could import. But I see that they have defined the media queries in ems. 

@media screen and (min-width: 87.6875em)
@media screen and (min-width: 46.25em)
@media screen and (min-width: 55em)
@media screen and (min-width: 59.6875em)
@media screen and (min-width: 68.75em)
@media screen and (min-width: 77.5em)
@media screen and (min-width: 87.6875em)

You can still copy these into Microthemer. But the Microthemer preview screen won’t automatically adjust. This is yet another enhancement we need to add. We have lots of work to do!

I’m sorry I haven’t given you lots of quick fixes in this reply. I hope that you can get by for now until we add the features that will make your life easier.

If you need further explanation on anything please let me know.

Cheers,
Sebastian

You must login or register to reply to this topic.