verekia / initializr-template Goto Github PK
View Code? Open in Web Editor NEWInitializr's generated page
Home Page: http://www.initializr.com
Initializr's generated page
Home Page: http://www.initializr.com
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/
even when tested on http://www.initializr.com/try. is this modernizr issue?
The
area doesn't display correctly on an iPad. All other devices that I've tested work beautifully. I am bringing the nav area and more in via a .js file (effectively a #include for HTML), but that shouldn't affect the css controlling the page.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?
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.
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 a
and 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)
...which makes it quite confusing when trying to copy text from there
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?
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 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:
CSS properties are duplicated when @importing multiple times (nested @import).
less/less.js#49
less/less.js#71
less/less.js#324
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.
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.
The third navigation link drop onto 2 lines in IE7/8 and breaks the nav.
"When I checked the demo in landscape mode on my iPhone it had horizontal scroll."
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
index.html line 24:
Class 'chromeframe' declaration requires quotes?
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/
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.
could be solved with e.g., http://www.cssstickyfooter.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?
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.