malarkey / 320andup Goto Github PK
View Code? Open in Web Editor NEWThis is the new 320 and Up
Home Page: http://stuffandnonsense.co.uk/projects/320andup/
This is the new 320 and Up
Home Page: http://stuffandnonsense.co.uk/projects/320andup/
On the 320 and up page it says it uses imgsizer.js but I can't find any reference to it in the source.
By doesn't work under IE 7 I mean that the page (see for example: http://stuffandnonsense.co.uk/projects/320andup/) loads in a 320 mode. Despite using respond.js media queries are not triggered. However seems to be ok under IE 8 and 9.
There is a missing .clearfix { @include clearfix; }
in the following files.
SCSS: https://github.com/malarkey/320andup/blob/master/scss/_mixins.scss#L213
SASS: https://github.com/malarkey/320andup/blob/master/sass/_mixins.sass#L230
LESS: https://github.com/malarkey/320andup/blob/master/less/mixins.less#L214
I would have done a pull request but I've changed the rest of files quite significantly so it would all end up quite messy. I also can't fork a repo more than once. So I'm saying it here!
Is there a reason why the less files are not using any indentation? Sometimes it's quite difficult to see where the body of the declaration begins.
[Great job with this framework!]
Double negative:
<p>Sorry, but the page you’re looking for doesn’t not exist.</p>
would read better as either
<p>Sorry, but the page you’re looking for doesn’t exist.</p>
or
<p>Sorry, but the page you’re looking for does not exist.</p>
320andup-scss-compass.scss
// Layout option using display:table for navigation positioning
// @import "upstarts/320andup-display-table/upstart.less";
Shouldn't it be:
// Layout option using display:table for navigation positioning
// @import "upstarts/320andup-display-table/upstart";
The same as the 320andup-scss.scss file.
When viewing the file "320andup.html" (from "malarkey-320andup-f6c4315") in Firefox, the following closing bracket for HTML comment appears in the top left corner of the browser window - like so:
-->
I viewed the source with FF and a closing comment " -->" (ignore quotes) appears after the body class = "clearfix" --> .
See example below.
< / head >
< body class=" clearfix " > -->
I checked the "320andup.html" file and could not find this particular " --> "
In IE8 (my workplace/clients still use IE8 or less) a blank screen appears in the browser window.
So, I pasted the original demo url "http://stuffandnonsense.co.uk/projects/320andup/320andup.html" into IE8 and again a blank page.
Please let me know if I am missing something.
Thanks!
I'd be happy to if you like!
just a code-style-question:
is there any reason, why the code in the scss and less-files is not indented or structured in any way? it is sometimes really hard to see the structure and the nesting.
it would be nice if it were more readable.
thanks!
Radio buttons and Checkboxes are a wee bit small (and thus hard to tap). Is it possible to make them bigger?
Hi !
I do not found information into the README.md file.
If you want i will add the content of your project link into the README.md to inform users about the state of this project.
The very last query in the single stylesheet folder keeps throwing an error on line 680, the one that defines the styles for 2x screens.
I've noticed that 320andup places the meta tags after the stylesheets. If you open this up in IE, it gives you an HTML1115
message, which will basically mean that IE can roam free with its choice of compatibility settings.
This can be fixed by placing the X-UA-Compatible meta tag before the stylesheets.
Not sure if this is an oversight, but it's recommended to place non-vendor-prefixed CSS3 properties after those with vendor prefixes, as if a vendor's implemented the property without a prefix then it's assumed it's to spec.
Looking over the contents of 320 and Up, it seems it's advocated to place vendor-prefixed properties near the bottom of the style sheet, which would override any non-vendor-prefixed declarations above in the document.
Is it possible to move vendor-prefixed selectors up the style sheet, or are we supposed to place all CSS3 selectors in that group?
OK, I know this falls under the heading of "Obsession" or "Overkill," yet, the sign on the door does say, "320 and Up." So, JFYI, I've recently begun limiting the line width of my own humans.txt files to 40 chars or less.
I do this as a sort of tip of the hat to all you've got going here. Plus, it helps me stay completely grounded in the whole "Mobile First!" mood thing. Yay, team! :-)
In IE7, using roles to style elements in the HTML (e.g. header[role=banner] ) are not working. Has anyone else had this issue?
Have set up a simple test to target "banner[role="banner"] p { color: #fff; }", and IE7 is not picking it up.
Have I to add additional script for this?
We at VersionEye are working hard to keep up the quality of the bower's registry.
We just finished our initial analysis of the quality of the Bower.io registry:
7530 - registered packages, 224 of them doesnt exists anymore;
We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).
Sadly, your library malarkey/320andup
is one of them.
Can you spare 15 minutes to help us to make Bower better?
Just add a new file bower.json
and change attributes.
{
"name": "malarkey/320andup",
"version": "1.0.0",
"main": "path/to/main.css",
"description": "please add it",
"license": "Eclipse",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<dependency_name>": "<semantic_version>",
"<dependency_name>": "<Local_folder>",
"<dependency_name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.
NB! Please validate your bower.json with jsonlint before commiting your updates.
Thank you!
Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!
in the Multiple linked stylesheets/ version, the style.css contains the following declaration on line 126:
.serif {
font-family: "Cambria, Georgia, Times, " Times New Roman;
}
The font names are incorrectly surrounded by quotation marks. Thus this declaration is ignored (at least in firefox).
I suppose it should be:
.serif {
font-family: Cambria, Georgia, Times, "Times New Roman";
}
On line 172 in helper.js when adding the click handler for ghostClickHandler
document.addEventListener('click', MBP.ghostClickHandler, true);
this halts all clicks being actioned within BBOS 6.
Only workaround I have as of yet is comment the line out.
The alert-info class together with the style attributes for the class is missing in the generated css files in the css folder.
Again, I can't do a pull request because of my edits but in the SASS and SCSS and possibly some other flavours border-radius
has been used where it should be rounded
.
Namely any use of border-radius
that has a single value in the brackets.
There is a problem with SASS version.
Sometimes is used border-radius mixins with only 1 value ( @include border-radius(4px); in _buttons.scss ) and the output is with only 1 rounded border:
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
Would'nt be better to use @include rounded(4px); ?
Starting on line 219 of 320andup.css:
.header .a-rss, .header .a-rss:hover { float: left; width: 16px; height: 16px; padding: 0; background: transparent url(../img/a-rss.png) no-repeat 0 0; text-indent: 100%; white-space: nowrap; overflow: hidden; }
I noticed that a-rss.png does not exist in the img folder.
I'm currently working on a site that defines the background to the body tag, and I don't believe that it's best to define the width to the body, seeing as how that will clip the background. Now, I could define it to html, but I'm curious what you're reasoning is for defining it to the body instead of a wrapper like .container.
Just spotted a missing $ on line 201
should read:
vertical-align : $base-lineheight;
I may be missing it, but I don't see the standard column widths specified in the CSS file like they are in the Less framework. I think it'd be handy. I've added them to my own stylesheets for the sizes I'll be using. It may be helpful to add them to the standard core.
Mobile Layout: 320px.
Gutters: 24px.
Outer margins: 34px.
cols 1 2 3
px 68 160 252
% 26.98 63.49 100
Wide Mobile Layout: 480px.
Gutters: 24px.
Outer margins: 22px.
cols 1 2 3 4 5
px 68 160 252 344 436
% 15.6 36.7 57.8 78.9 100
Tablet Layout: 768px.
Gutters: 24px.
Outer margins: 28px.
cols 1 2 3 4 5 6 7 8
px 68 160 252 344 436 528 620 712
% 9.55 22.47 35.39 48.31 61.23 74.16 87.08 100
Desktop Layout: 992px.
Gutters: 24px.
Outer margins: 48px.
Leftover space for scrollbars @1024PX: 32px.
cols 1 2 3 4 5 6 7 8 9 10
px 68 160 252 344 436 528 620 712 804 896
% 7.59 17.86 28.13 38.39 48.66 58.93 69.2 79.46 89.73 100
Within the IE conditional comments the lines
and
result in duplicate declaration of the HTML start tag for non-IE browsers
Hi I just downloaded this and ran it through the winless compiler and I get about 15 errors mostly around mixins or variables being undefined. I haven’t changed anything (I haven’t even opened any of the less files yet) I think this many be something to do with utf8 bom but I don’t know how to fix it. Could someone please recommend a fix?
Index.html and 320andup.html refer to the modernizr script as .min on line 41:
<script src="js/modernizr-2.5.3.min.js"></script>
Whereas the file name in the bundle is -min: js/modernizr-2.5.3-min.js
This leads, of course, to a failed GET when loading those pages.
[for the records, this is my first issue opened in github... likely I'll mess something up even in this simple process. Also, I checked the current and resolved issues for the project and this one didn't seem to be there - apologies ahead of time if I missed it - and yes, one day I might set up to help and submit a pull request instead, but that's not today, sorry]
With the stock 320andup download, when you rotate an iOS device to landscape the viewport snaps out much larger than needed, rendering the output larger than the screen. Even when you load the page in landscape, rotate portrait, then landscape it still snaps larger. Is this the expected behavior? Confirmed with the 320andup site.
I still have clients using FF 3 and it does not support @media, so I added at the end:
<script> // Respond.js for FF<3.5 if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ var ffversion=new Number(RegExp.$1); if (ffversion<=3.5){ var headID = document.getElementsByTagName("head")[0]; var respondNode = document.createElement('script'); respondNode.type = 'text/javascript'; respondNode.src = 'js/libs/respond.min.js'; headID.appendChild(respondNode); } } </script>and now working with FF 3 (didn't check below)
not sure if it's the best way to deal with it...
Hi,
maybe there is something wrong with the latest version of 320 and up? The style.css file now has no more comment structure, it's totally compressed (not minimized) with all the media queries on one line. It's a choice? Maybe it's Less.
Also, imgsizer.js is included both in libs and mylibs. I think its proper location is libs?
Bye,
Giuliano
I've written a post explaining that it doesn't work here: http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html
You need to use this instead:
@media (max-width: 400px) { /* or 25em to be "responsibly responsive" */
@-ms-viewport {
width: 320px;
}
}
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.