verekia / initializr-template Goto Github PK

by @SpaceCookies

There seems to be an issue in the Responsive template, where if one adds multiple asides and there isn't much main content, the asides will float into the main content area.

It's pretty straightforward to reproduce, but I made a minimal working example anyway:
http://pastebin.com/xuPj7XZa

The LessCSS bug has been around for literally years. It's easy to replicate and easy to work around. Many people have reported it to the LessCSS project, but the official LessCSS project seems largely uninterested in community development. Issues go ignored and pull requests aren't accepted. Anyway, here's the issue:

Short description:

CSS properties are duplicated when @importing multiple times (nested @import).

Issues on LessCSS repo (all the same issue):

less/less.js#49
less/less.js#71
less/less.js#324

The pull request that would fix the issue for LessCSS:

less/less.js#431

How it effects Initializr when using responsive.less:

The workaround:

Basically, completely avoid using an import of an import. For me, it meant essentially getting rid of bootstrap.less and responsive.less (and removing the includes of variables.less and mixins.less from responsive.less) and putting all includes in my main style.less file. Not the prettiest solution, but it works.

Conclusion:

Some people have reported their CSS files ballooning up to > 3mb mb because of all the duplicate rules generated. If I new enough ruby I'd just try and reorganize the includes a bit better in the Initializr builder so that there's no nested includes. But alas, I don't. So, I'm contributing this instead.

Thanks for putting together this great template

I hacked togeather an almost sticker footer via the bootstrap example
live @ http://dl.dropbox.com/u/33379439/website/post.html

How can the padding and margins be handled in a way to make a static sticky footer possible?

index.html line 24:

Class 'chromeframe' declaration requires quotes?

If I have 4 or more menu items in the navigations, the menu items can wrap onto the next line. I take width off nav and nav aand it makes no difference. Would be more useful if the menu was more scalable (at least half a dozen menu items should be able to show without wrapping)

Main menu could also turn into default OS dropdown list menu when in narrowest mode. Default OS menus tend to be compact and extremely usable, as they are native elements – fast and optimized. Current solution will turn ugly if 5 or 7 main menu items are present.

even when tested on http://www.initializr.com/try. is this modernizr issue?

I am sure it's a little thing I am missing. But I have tried to put an image behind the piece of the template which has the article tag, that is white, to no avail.
Please tell me where to put the background css tag, in the body css, the css for the main class? I've tried it everywhere.
Here is how I am using Initialzr.
http://nicodonationpage.site44.com/

The full Response Bootstrap 2.0.4 build contains a default icon set. I'm totally a n00b so I was just wondering why the mobile responsive build doesn't contain the icon set?

...which makes it quite confusing when trying to copy text from there

Hi,

links in an aside and footer have default(ish) styling and therefore appear blue on orange. This also applies to the main h1 if it's made into a link.

It'd be more consistent if any links which are on an orange background were styled the same. My naïve suggestion in terms of code is that something like this would be a useful addition:

#header-container a,
#header-container a:visited,
aside a,
aside a:visited,
footer-container a,
footer-container a:visited {
    color: white;
    text-decoration: none;
}
#header-container a:hover,
aside a:hover,
footer a:hover {
    text-decoration: underline;
}

Though perhaps there's a simpler way of doing it.

Thanks for publishing this great template.

could be solved with e.g., http://www.cssstickyfooter.com

When I built a site based on this template and tested it in IE9 and IE8 they both triggered quirks mode and made the site look a mess.

I checked my X-UA-Compatible which was set to <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> but this didn't resolve it.

It turns out that the conditional comments on the <html> tag confuses the dreamweaver template system into putting its template mapping comments above the doctype which threw it into quirks mode.

It was a tricky one to debug as well because that tag isn't shown in the view source of the template.

Here is the offending code:

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

Here is the thread that made me realise what had happened:
http://stackoverflow.com/questions/6294301/dreamweaver-causing-quirks-mode-in-internet-explorer

I don't know if this is something that could be hung off the body tag instead? If not this information should at least be added to the documentation wiki.

The

Hi, I'm newbie in programming. I have a problem with this page dokuchaeva.com/example.html . There's white background when you open it from Opera Mobile. As far as I understand there's something in modernizr-2.6.1-respond-1.1.0.min.js

Modernizr taken from Responsive HTML5 template @ http://www.initializr.com/

I visited http://www.initializr.com/try in Firefox 12 and the media queries at 768px seemed to work (the nav went from the right of the title to underneath it). However, for some reason Firefox is not paying attention to the smaller mobile styles.

For example, I noticed on IE9 and Chrome that when I resize to below 480px the nav stacks vertically, but in Firefox it does not.

The third navigation link drop onto 2 lines in IE7/8 and breaks the nav.

when i give float:left; to any element, it stops behave like a relative positioned element, going out of his container div, except for <p> <a> <span> elements containing text.
here is some code example:
HTML

<body>
<div class="hero-unit" id="blabla">
<img src="blabla.jpg"/>
<p>Richard Benson</p>
</div>
</body>

CSS

#blabla img {
float:left;
/* ... */
}
#blabla p {
float:left;
/* ... */
}

In this case "float:left" works on <p> doesn't works on <img>
here some screen:

With float:left;
http://i.imgur.com/Cj148.jpg

Without float:left;
http://i.imgur.com/FQBJa.jpg

is this an issue or just my ignorance about something?

"When I checked the demo in landscape mode on my iPhone it had horizontal scroll."