[Pro] Learning CSS and responsive website design.

Here’s a very basic un-styled responsive template I put together using a tutorial from several of Thomas Kimmich’s screencasts, which are excellent by the way. I also purchased a copy of Caleb’s outstanding Backdraft template and I’m reviewing how that works as well.

One thing I noticed is that Thomas tends to use IDs, whereas Caleb uses classes. I understand the difference between both, by I don’t see a lot of Caleb’s classes being reused, unless I’m missing something, which is very possible.

Is it better to use IDs or classes when setting up a responsive template or does it matter?

http://test.idealynx.com


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Two things to know about IDs vs Classes. As you know, an ID can only appear once per page, while a class may repeat. The other thing is that pound for pound, a class is less “important” than an ID. (And both are more important than a bare tag name.)

If you had this construction:

<div id="foo" class="bar">
  <p>Some text here</p>
</div>

And you had these styles in the page head:

#foo { color: red }
.bar { color: blue }
div { color: black }

The color inside the box would be red. The ID overrides the class, because it is more specific. Likewise, the class overrides the tag, for the same reason.

Now when you start combining selectors (the part of a CSS rule that is outside of the curly-braces) you can start becoming very very specific. If you had this:

div.bar p { color: yellow }

I think (but I’m not completely sure) that the text might become yellow. Two tags and a class combined in a single selector might be enough to overcome one ID in another selector.

The last thing to think about here is that with classes, you can stack up a bunch of them to get composite behavior. Let’s say you had this:

.foo { font-size: 36px }
.bar { color: green }
.baz { font-family: Verdana }

Now this HTML would come together as the combination of all three of those rules (big, green and Verdana):

<p class="foo bar baz">The Philly Phanatic</p>

The same thing can go for the other types of rules, except that you still can only have one ID per item, so you don’t get to stack more than one of those.

Walter

On Dec 19, 2013, at 4:42 PM, RavenManiac wrote:

Here’s a very basic un-styled responsive template I put together using a tutorial from several of Thomas Kimmich’s screencasts, which are excellent by the way. I also purchased a copy of Caleb’s outstanding Backdraft template and I’m reviewing how that works as well.

One thing I noticed is that Thomas tends to use IDs, whereas Caleb uses classes. I understand the difference between both, by I don’t see a lot of Caleb’s classes being reused, unless I’m missing something, which is very possible.

Is it better to use IDs or classes when setting up a responsive template or does it matter?

http://test.idealynx.com


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There have been a couple recent(ish) threads on ids and how they can be problematic when it comes to the cascade in general, not just for responsive stuff. There’s also a vocal segment of the design community that feel it’s bad practice to style elements by their id. I agree an argument can made for using them sparingly.

Todd
http://xiiro.com

Is it better to use IDs or classes when setting up a responsive template or does it matter?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

This is good information. Thanks.

Now that I’ve learned the basics of CSS, I’ll need to focus more on the CSS cascading effect, especially as it relates to classes. So within FWP, it looks like I can setup a class in a variety of ways, including:

  1. Using the Styles control panel
  2. Using the Extended control panel
  3. Using the HTML Markup control panel

Does it matter which option I use?

Also, can somebody explain what the Box Sizing action does and why that’s important?

And finally, is it better practice to start designing FWP pages as Master Pages or simply create regular pages within the Site Folder and then convert those pages to Masters when you’ve finalized the page layout? I was originally starting with Masters, but I often find myself editing a site page, when I thought I was editing a master page, probably because of all of the back and forth needed to preview a page.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, I just spent some time analyzing Caleb’s CSS code and I totally understand why he used classes instead of ID’s. I also understand why classes have to be inserted into both the HTML Markup and at the item level using the Extended control box, so no need to answer question 1. :slight_smile:


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Or rather the first batch of questions (1,2,3). Still curious out the Box Sizing action and Master or Regular Pages.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The box-sizing action applies this CSS to the element that it is applied to:

    box-sizing: border-box;

To really understand what’s going on here, I’ll refer you to this: Box Sizing | CSS-Tricks - CSS-Tricks as it’s a bit complex.

Other folks have different methods of cooking up custom CSS, but what I do is create the class hooks via the extended interface in Freeway (just like in Backdraft), then I work in an external CSS file using Coda, TextMate, or Brackets. That file lives in the “Site Folder/css/” that Freeway uses, and then get’s linked to from the pages that require it in Freeway:

<link rel="stylesheet" type="text/css" href="/css/custom-style.css">

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

One thing I noticed is that Thomas tends to use IDs

Yes - cause we talked about construction, not styling so far. And you’re probably quicker than I can produce videos.

    box-sizing: border-box;

To really understand what’s going on here, I’ll refer you to this: Box Sizing | CSS-Tricks - CSS-Tricks as it’s a bit complex.

… as I did as well in the video episode.

Other folks have different methods of cooking up custom CSS, but what I do is create the class hooks via the extended interface in Freeway (just like in Backdraft), then I work in an external CSS file using Coda, TextMate, or Brackets. That file lives in the “Site Folder/css/” that Freeway uses, and then get’s linked to from the pages that require it in Freeway:

I an ongoing screencasts series, I develop stuff step by step. I can’t create an alternative manual on how things have to be done - cause there is (as Caleb already pointed out) no fixed process.

As long as there are requests like “What is a DIV?” regularly on this board, it’s anyway nearly useless to talk about their IDs and classes.

I love using classes (and use them excessively without obsession) but (in Freeway) there is one lil downside:

We can’t “see” them in the construction view. While this is a thing I personally don’t mind - others maybe do harder or even refuse this method with:

“No coding please - I’m a Freeway user - I need actions”

Me too, btw cause I still seek for the “Un-suck this attitude-action”.

Cheers

Thomas


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Great. I was all proud of myself for building a responsive template and it doesn’t even work on my iphone 5. Instead, it just looks like a desktop page. What do I have to do to force the iPhone to render the page properly?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Set the Mobile page width (in Freeway’s Page Inspector) to device-width.

Walter

On Dec 20, 2013, at 7:20 AM, RavenManiac wrote:

Great. I was all proud of myself for building a responsive template and it doesn’t even work on my iphone 5. Instead, it just looks like a desktop page. What do I have to do to force the iPhone to render the page properly?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Feel free to copy what Backdraft settings are in ‘File > Document Setup > Mobile’. While you are at it, add this line of CSS to your custom CSS file:

body { -webkit-text-size-adjust: 100%; }

That will keep mobile Safari from zooming in when you rotate the device to landscape.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Worked perfectly. Thanks guys.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options