Anyone use 320andUp?

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
User avatar
Don Chambers
Regular
Posts: 3633
Joined: Mon Feb 13, 2006 3:40 am
Location: Chicago, IL, USA
Contact:

Anyone use 320andUp?

Post by Don Chambers » Fri Jan 23, 2015 6:39 pm

As s9y 2.0 evolves, I need to get my arms around html5, css3, and newer themes like 2k11.

Has anyone used 320 and Up? More detail in the author's blog post. I like the author's approach of starting with small screens and working up to larger, desktops.

Would be curious to hear some input on this, boilerplates/frameworks like html5, bootstrap, etc, as well as YL's boilerplate compilation.

User avatar
yellowled
Regular
Posts: 7056
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: Anyone use 320andUp?

Post by yellowled » Fri Jan 23, 2015 6:57 pm

Don Chambers wrote:Has anyone used 320 and Up?
Please don't. I admit I haven't looked at it in a really long time and don't have time to check out the current code, but last time I checked, it was using device-specific media queries (meaning they target specific devices, not screen resolutions). That's not a good idea.
Don Chambers wrote:I like the author's approach of starting with small screens and working up to larger, desktops.
That's called “mobile-first” these days, and it's the only thing that makes sense. It's a bit harder if you need to support IE8, though (because that doesn't do media queries at all, so it gets the “mobile” layout).
Don Chambers wrote:Would be curious to hear some input on this, boilerplates/frameworks like html5, bootstrap, etc, as well as YL's boilerplate compilation.
Huge difference between boilerplates and frameworks. What you most likely want to use (I do) is just a boilerplate as a starting point, which is basically what yl-bp is – it's h5bp (which is highly recommended) together with a build script and some (S)CSS files as a starting point for any web project I do.

Frameworks, or better, most of them these days, come with a whole UI kit including Javascript and CSS for all kinds of UI elements that you may or may not need. And while some of them offer some kind of mechanism to customize that on a get-only-what-you-need basis, they still tend to carry over a lot of bloat.

If you absolutely must or want to check out a responsive HTML5 framework, I suggest Zurb Foundation. But even that still has this “all sites built with it kind of look the same” vibe.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
yellowled
Regular
Posts: 7056
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: Anyone use 320andUp?

Post by yellowled » Fri Jan 23, 2015 6:59 pm

yellowled wrote:I admit I haven't looked at it in a really long time and don't have time to check out the current code, but last time I checked, it was using device-specific media queries (meaning they target specific devices, not screen resolutions).
Took a quick peek anyway, it doesn't seem to use those any longer. (Still would recommend starting from scratch with H5BP and rolling your own CSS base kit, though.)

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
Don Chambers
Regular
Posts: 3633
Joined: Mon Feb 13, 2006 3:40 am
Location: Chicago, IL, USA
Contact:

Re: Anyone use 320andUp?

Post by Don Chambers » Fri Jan 23, 2015 7:35 pm

Thanks for your input. Exactly what role does Grunt and Bower play in your bp?

User avatar
yellowled
Regular
Posts: 7056
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: Anyone use 320andUp?

Post by yellowled » Fri Jan 23, 2015 8:45 pm

Don Chambers wrote:Exactly what role does Grunt and Bower play in your bp?
Bower is a package manager for (not only) JS assets. That means it basically “knows” which JS assets a project includes, pulls them into the project and can (but doesn't have to) keep them up to date.

So in yl-bp, I have a file called bower.json which lists JS plugins that I frequently use in projects. In that file, I can also specify which version of each JS plugin to get (on 'bower install') and whether to always get the latest version (e.g. on 'bower update'). By doing so, I don't have to keep those files (which update rather frequently) in my boilerplate repository, I can just pull them in using bower.

Grunt is a task runner which I used to create a build script for my projects. It does various (mostly tedious and repetitive) tasks, and it can execute most of them in the background while I develop, usually based on if certain files in the project change. Some of the tasks are also for testing purposes, e.g. checking HTML, SCSS and JS for structural errors etc. I'm too lazy to explain every nook and cranny of it, but basically it

* compiles SCSS files into CSS (I rarely write vanilla CSS anymore)
* runs autoprefixer which takes care of the vendor prefixes in CSS
* compiles HTML from Handlebars templates (so I can use includes in static HTML)
* combines all JS files into one (which is nice for performance)
* fetches an iconfont build from fontello.com (planning on replacing those with SVG in the future)

On another step, it creates files ready for deployment. This step in addition

* optimizes images using command line tools (again, performance)
* revisions the CSS and JS files referenced in the HTML (again, performance)
* creates an optimized build of Modernizr (yes, performance)

All this either runs in the background while I develop or is executed on a simple command ('grunt deploy'), which puts all the files that need to be deployed in a seperate directory.

It's not ready for s9y projects (yet), but can be easily tweaked to do so, meaning all tasks can also handle .tpl files instead of .html files. However, it can not generate .tpl from Handlebars (because that would be pointless).

Both bower and Grunt run on node.js, so that's a requirement. Sadly, the tool that checks SCSS files still needs Ruby, so that's another dependency on the build system.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
Don Chambers
Regular
Posts: 3633
Joined: Mon Feb 13, 2006 3:40 am
Location: Chicago, IL, USA
Contact:

Re: Anyone use 320andUp?

Post by Don Chambers » Fri Jan 23, 2015 11:03 pm

Seems you are using SASS, correct? Have you looked at LESS?

Regardless of that, I am reading repeated complaints of code bloat introduced by using bootstrap and foundation. Is there, by any chance, a tool that reads your project files (html, tpl, whatever), keeps track of actual classes used, and only outputs a subset of css that is actually referenced in the html files?

User avatar
yellowled
Regular
Posts: 7056
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: Anyone use 320andUp?

Post by yellowled » Fri Jan 23, 2015 11:33 pm

Don Chambers wrote:Seems you are using SASS, correct?
Sass using the SCSS syntax, correct.
Don Chambers wrote:Have you looked at LESS?
Yes. Back when I first looked at it, it was harder to set up than Sass, so I went with Sass.

In general, all CSS preprocessors (there's also Stylus) offer more or less the same functionality, what you want to use really depends on little details in personal preference. One argument pro Sass that I always found convincing is that it is the most popular preprocessor, so there's tons of documentation on it (by now, even books). My advice would be to avoid extensions like Compass or Bourbon, though. Same reasons as frameworks, they tend to add bloat.
Don Chambers wrote:Regardless of that, I am reading repeated complaints of code bloat introduced by using bootstrap and foundation.
Definitely true. These are full-fledged UI frameworks that come with a lot of code one might not need in any given project. They do offer ways to customize the output or the code included, but a lot of people don't seem to use them.
Don Chambers wrote:Is there, by any chance, a tool that reads your project files (html, tpl, whatever), keeps track of actual classes used, and only outputs a subset of css that is actually referenced in the html files?
There probably are many tools for that. :)

One thing I have heard of (but never used) is UnCSS. There's also a Grunt task for that.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

Post Reply