malarkey / 320andup Goto Github PK

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]

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.

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); ?

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!

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!

The alert-info class together with the style attributes for the class is missing in the generated css files in the css folder.

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.

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.

Double negative:

      <p>Sorry, but the page you&#8217;re looking for doesn&#8217;t not exist.</p>

would read better as either

      <p>Sorry, but the page you&#8217;re looking for doesn&#8217;t exist.</p>

or

      <p>Sorry, but the page you&#8217;re looking for does not exist.</p>

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!]

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!

Within the IE conditional comments the lines

and

result in duplicate declaration of the HTML start tag for non-IE browsers

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

On the 320 and up page it says it uses imgsizer.js but I can't find any reference to it in the source.

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.

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;
    }
}

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?

I still have clients using FF 3 and it does not support @media, so I added at the end:

and now working with FF 3 (didn't check below)

not sure if it's the best way to deal with it...

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";
}

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.

Radio buttons and Checkboxes are a wee bit small (and thus hard to tap). Is it possible to make them bigger?

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.

Just spotted a missing $ on line 201
should read:
vertical-align : $base-lineheight;

Hey, maintainer(s) of malarkey/320andup!

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!

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 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

I'd be happy to if you like!

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! :-)

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.

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?

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'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.

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?