10 ms·

Web Starter Kit

553 points by restlessdesign 12y ago

xbryanx 12y ago
I was really hoping "Delete key friendly" meant that they weren't forcing Chrome to bind delete to the back function any longer.
- paulirish 12y ago
  Removing that has been attempted a few times and failed. I would love to see that shortcut removed myself too. :/
  - nguyenhimself 12y ago
    I'm surprised more people don't know about this BackStop extension that does just that: https://chrome.google.com/webstore/detail/backstop/pidcjgldchekcoolelhbjfbnccjkckfj https://chrome.google.com/webstore/detail/backstop/pidcjgldc...
dudus 12y ago
Twitter Bootstrap competitor?
- Nico2706 12y ago
  More like html5boilerplate alternative.
  - kinlan 12y ago
    I think this is a fair comparison. Right now we are not providing components like the ones you get in Zurb and Bootstrap. EDIT: clarified.
    - brbcoding 12y ago
      It seems like this is more of a workflow than just a framework. Zurb and bootstrap don't come with build tools as far as I know, whereas this includes a gulpfile and a bunch of other stuff that's very common in my workflow. This feels more yeoman-esque + generator to me. Edit: Totally posted this before I read 'Web Starter Kit is inspired by Mobile HTML5 Boilerplate and Yeoman's generator-gulp-webapp, having taken input from contributors to both projects during development. Our FAQs attempt to answer commonly asked questions about the project.'
      - kinlan 12y ago
        Yeah. that is a very good summary. If you want build process and tooling to help then we have that based on the tools that we think are the best, however we don't force workflow on people if they don't want it.
        dwd 12y ago
        Noticed Paul Irish is no longer active on H5BP, is he now on team Web Starter Kit or working on the broader Web Fundamentals?
        kinlan 12y ago
        Paul Irish has given us guidance, input and feedback and is on the same team as me, but Addy Osmani is the main driver of starter kit, with me leading Web Fundamentals.
        dwd 12y ago
        Thanks for the insight. Given his broader influence and role at Google it made sense he was involved in some way.
  - Kiro 12y ago
    Definitely more Bootstrap than H5BP. H5BP is just an index.html with some reset CSS and Modernizr. This is much more.
  - rog3r 12y ago
    More like Yeoman competition.
- addyo 12y ago
  Good question. We don't consider ourselves a Bootstrap competitor, but rather a combination of best practices and tooling when it comes to starting work on new multi-device/mobile web projects. Bootstrap, Zurb and similar libraries provide a great start for prototyping your apps, but one of the biggest challenges with them is that it’s (almost too) easy to get stuck using their styles, look and feel for the lifetime of your application. We think this leads to a poorer experience. It's also easy to just end up with 100KB+ of styles (unless you're opting for a modular build) that never get removed. In Web Starter Kit, we provide you a boilerplate set of base styles and a visual style guide for your components, but we actively encourage you to change these to suit your own app. This may require a little more work, but the reality is that any serious project is going to have it’s own look and feel and we want you to feel comfortable changing the kit to suit your own needs. We also include tooling for removing unused CSS. So, even if you use our styles (or choose to use Bootstrap instead) we should hopefully help keep your pages lean.
  - deleted 12y ago
    [deleted]
  - joshma 12y ago
    Is there any way to use the tooling independently of web starter kit? Wasn't able to find a link on the site, are they just warnings you see once you start developing? Can the tooling account for JS changes and navigation between pages? Sorry for the barrage of questions, just really hoping to find a decent tool to clean up CSS...
    - mofle 12y ago
      If it's just cleaning up CSS you're after, I would use UnCSS. Checkout grunt-uncss task or gulp-uncss to hook it up to your build process. We don't currently document using the tooling independent of the kit, but you should be able to pluck the package.json and gulpfile.js and edit per your needs. We'll try to get this documented.
    - deleted 12y ago
      [deleted]
greenpizza13 12y ago
Feels like a Bootstrap competitor, with many more cross platform features and shortcuts to optimizations, device access, etc.
nullgeo 12y ago
Ironically the home page for it looks horrible in the latest version of Chrome under Windows.
- kinlan 12y ago
  Can you file an issue on our repository and I will investigate it. It looked ok when I was running it last night. https://github.com/Google/WebFundamentals/issues https://github.com/Google/WebFundamentals/issues is our tracker. EDIT: adding link to issue tracker.
- flipcoder 12y ago
  Same here, with Firefox on Linux. The grid shows gaps like the web page is missing icons when you stretch the window width far enough.
  - graedus 12y ago
    For me (Chrome, Win7), the gaps are explained by "PageSpeed Insights Reporting" and "SASS Support" wrapping down to the next row for all but a small range of horizontal viewport widths.
    - kinlan 12y ago
      Thanks, I'll get the team to look at this.
Siecje 12y ago
I wonder what browsers versions they are going to support at launch.
- addyo 12y ago
  We cover this in our browser support section: https://github.com/google/web-starter-kit#browser-support https://github.com/google/web-starter-kit#browser-support
  - cozuya 12y ago
    I'll be that guy: this seems nice, I'd love to use it, I'll take another look some time around 2018 when I can start to consider pitching dropping IE9 support. IE10+ is simply ridiculously prohibitive for something like this.
leke 12y ago
It's a good idea, but it's currently lacking the richness of bootstrap.
- addyo 12y ago
  For sure. This is just a start and we don't intend on competing with Bootstrap in terms of UI components. We spent a long time evaluating many of the existing UI libraries available today and if a developer chooses to use one of them with the kit, they can. That's cool.
fidotron 12y ago
The web is now hamstrung by the HTML/CSS layout model more than anything else. The hackery required to attempt to imitate native mobile apps is horrific. Google would be better off throwing efforts into a new layout engine leveraging raw JS and WebGL, but with a sane API, than these continuous attempts to push HTML into places where it doesn't work. If they don't lead it I can see someone else doing it in such a way that their core money maker of web scraping and indexing ceases to work.
- addyo 12y ago
  On the Chrome team we're always looking at ways to better provide access to lower level primitives and machinery to enable you to do things like this. It's a multi-faceted problem however. If you have specific suggestions around alternative layout engines, discourse.specifiction.org is a great place to lay out your suggestions in more detail (not that HN isn't useful for this, but those interested in standards generally frequent the discussion board). Outside of layout engines, we're also looking at enabling developers to do more things they would like to with native hardware. Take a look at https://github.com/w3c-webmob/web-api-gap/tree/master/features https://github.com/w3c-webmob/web-api-gap/tree/master/featur... for feature gaps and efforts to fill them.
  - jlhonora 12y ago
    Android's layout structure could be an option. It is much easier to handle than HTML + CSS, IMHO.
  - fidotron 12y ago
    To be clear, I think in the medium to long term other than legacy HTML support browsers will get out of the layout engine business. Layout belongs in the JavaScript layer (or similar execution env) on top of a lower level abstraction, which is why I picked out WebGL as the most likely contender. Then the on the wire format becomes pure semantics, which can either be semi standardised, or not. (And Google clearly have an interest in promoting the former). WebGL, as it stands, seems to lack a few useful primitives for such a task, most notably needing an equivalent to process separated iframes. That might be possible already, but if not I'm sure it will be cracked enormously faster than attempting to debate and implement tiny incremental improvements in the HTML spec. My understanding is this is remarkably close to how the PS4 UI is actually implemented already.
ondrae 12y ago
Its interesting they are using GitHub instead of Google Code.
- addyo 12y ago
  Google Code is great, but I personally love GitHub <3 We've been actively pushing to do more development there across https://github.com/google https://github.com/google https://github.com/googlechrome https://github.com/googlechrome and so on.
  - wldcordeiro 12y ago
    Google Code has been languishing. You guys could really do some things with it to make it a competitor with Github and Bitbucket.
    - ceejayoz 12y ago
      I see Google Code being in the same spot as Google Reader on Google's roadmap.
      - hobofan 12y ago
        I always begin to think the same thing, but then they open source a new project that is hosted on Google Code.
        davb 12y ago
        I wondered if Google's internal development infrastructure looks like or hooks into Google Code, making it easy to release code publicly on Google Code.
        willnorris 12y ago
        Not really... it's about the same amount of work whether it goes to Google Code or GitHub. The teams that have an easier time of it are those that are using Git+Gerrit internally, since a public release is as simple as `git remote add` and `git push`. A number of teams continue to use tools like https://code.google.com/p/make-open-easy/ https://code.google.com/p/make-open-easy/ with varying degrees of success.
wuliwong 12y ago
It seems the navigation disappears entirely when you shrink the window. I would think they would implement their "hamburger" icon?
- kinlan 12y ago
  Ah, cool I think you have hit an intended design feature. We use min-device-width to know that you started on a smaller screen (or a wide screen). If you are on a wide screen responsive elements are changed slightly to fit the screen. If you start on a small screen you get the hamburger menu. Can you file an issue on the github project so that we can work on it to see if it is an issue.
  - OutThisLife 12y ago
    On the homepage, the 'hamburger' menu doesn't show. Every other page is fine though.
- gerbal 12y ago
  On other pages it does hamburger icon properly, so, presumably, it's an issue with that page.
aikah 12y ago
@addy nice! so what's the goal here.Why would one use this over bootstrap/foundation/x css framework? Do you intend to integrate this with other frameworks you've written and other Google products like polymer/angularjs? My point is are you developping a coherent ecosystem or are they just independent tools? thanks.
- kinlan 12y ago
  I'll just reply because I know Addy is crazy busy. The goal is to give developers the education and tooling they need to do well out of the box by following all of our best practices straight away. In this case it can complement bootstrap and other frameworks because we are not building out a component library.
lvillani 12y ago
I wish I had this in my tool belt a few months ago when we began working on our web application. The core of our project can be reduced to something like web-starter-kit but we had to get there with many, many hours of hard-earned knowledge. I also like the leanness and cleanliness of web-starter-kit, it's really a nice collection of best-practices and pre-configured tools. I will definitely incorporate some pieces into our existing project and use it as a base for our next ones. Thanks guys!
JohnnyPython85 12y ago
>If you are planning to do the same, spend time listing down all your UI elements and test whether the theme supports them. This is all too important when evaluating a prefab Bootstrap theme. In the past when I have used Wrapbootstrap themes, I've been a few days in frustrated that something isn't working. Then when I dig into the asset files I realize that the theme was poorly written and I've been spinning my wheels for nothing. It's too bad so many themes look nice but simply aren't built the right way.
smrtinsert 12y ago
I suppose you could go this route. More realistic is to produce different server side files for each client type and keep it simple. There are tons of business reasons to make them physically separate as well, special promotions, advertising requirements, conditional scripts, etc.
- ch0wn 12y ago
  And there are also tons of reasons for the responsive solution. It all depends on your requirements and use cases. I don't think there's way to unconditionally say that one is better than the other at the moment.
- nlh 12y ago
  One reason not to use your method: Google's own guidelines. See: https://developers.google.com/webmasters/smartphone-sites/details https://developers.google.com/webmasters/smartphone-sites/de... "Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google's recommended configuration." Generally I've found that when Google recommends something, their search algo prefers this too. I obviously don't have direct proof that it does, but if SEO matters I'd follow what they suggest.
  - kinlan 12y ago
    It's an interesting one. Adaptive serving is a reasonable solution when you are a large site and you can't wholesale merge your site in one go into a fully responsive solution. We find that Adaptive (i.e, server side detection of "mobile") leads to way more problems in the long term with maintenance, keeping up with new devices and also ensuring that you have all the correct canonical links etc in place to ensure that your "SEO" is still good. Our guidance is responsive all the things...
jacquesm 12y ago
This somehow reminds me of Inception. We have a perfectly functional computer, then we run a browser on it, we download a bunch of HTML, which in turn will download a whole slew of JavaScript in order to create the illusion of an application running natively that offers a subset of what the computer could offer. The only difference is that this web application supposedly runs on 'all devices' except that every web application is quite brittle once you try to actually run it on all devices. And forget about device access (though that is slowly getting a bit better). The only plus I see in all this is that in the end we are now free of the API lock-in that OS vendors traditionally required, that we tend to take 'client-server' applications more or less for granted and that because it is server centric you don't have to bug your users to download the latest version every time you improve things (though as was pointed out in another thread, this is also a disadvantage, as a user you lose control and if the company goes out of business you could lose it all). The web also roams much easier. If we keep going like this for a little while then we're back where we started, with the graphics terminals from the 80's, (canvas is pretty close actually) only this time across the WAN instead of a lan and with the ability to hyperlink between applications.
- ChuckMcM 12y ago
  You trade browser lock-in for OS lock-in. The original Internet Explorer strategy. Fundamentally it is a rent seeking strategy. When I noticed that Google was up to paying a billion dollars a quarter for traffic I realized that in some ways the gold leaf was falling off the piazza and revealing the the ugly plaster behind it. My guess is that the rent seeking here is in the form of directing search traffic in some way.
  - esolyt 12y ago
    Browser lock-in? What makes you think web applications made with this kit work only in Chrome?
    - addyo 12y ago
      One of the core values behind this project is that it should work extremely well cross-device and that most definitely means on devices where Chrome isn't the primary browser. During development we've ensured that we test on Firefox OS, Windows phone, iOS and browsers other than Chrome which run on Android. I want to give people something that they can rely on. Chrome isn't the only browser in the world for sure :)
derengel 12y ago
for newbies like me this is just to great, cross device webdev can be a nightmare or this just to good to be true?
tdicola 12y ago
How does this compare to Yeoman, and is it meant to be a replacement? I thought Yeoman was made by some Google folks.
- sinaa 12y ago
  From the documentation: "Web Starter Kit is inspired by Mobile HTML5 Boilerplate and Yeoman's generator-gulp-webapp, having taken input from contributors to both projects during development."
  - kinlan 12y ago
    It's not a replacement. My opinion on this as a stakeholder is that is meant for different audience that Yeoman serves. Ultimately we have produced a highly opinionated stack that developers can start with and customize as they like (or not if they don't want to). This lets developers who are experienced quickly start and manipulate it, and lets developers who don't know what a good workflow looks like be set up for success straight away. Yeoman on the other hand gives you complete control over how you want your project to be started and assumes that you know all the answers to the questions the generator poses. I also like that Web Starter Kit is just a simple download that you can extract and be good to go with.
webXL 12y ago
Is it just me, or do the fonts on that page look terrible on Windows? /edit: looks like it's just "Roboto Condensed"
- wyck 12y ago
  No it's not just you, it's everyone using chrome windows, it a bug in their rendering engine that has been unfixed for years. There are multiple easy ways to fix this (load order, re-rendering font, server config)..you would think a web starter kit would get the basics of fonts right... The layout is also broken for the icon rows... Example: http://i.imgur.com/8DCIsLw.jpg http://i.imgur.com/8DCIsLw.jpg
  - zapt02 12y ago
    Looks like the classes for the icons are way wrong, or they forgot a clear:both; somewhere which makes the rows cascade improperly.
  - jahewson 12y ago
    It's not a bug, it's just how GDI ClearType renders text. It doesn't perform y-axis antialiasing so almost-horizontal curves look blocky. The solution is to use DirectWrite but Chrome hasn't made the jump yet.
- krambs 12y ago
  Chrome has finally fixed this. There is a flag for DirectWrite in the release version, but it's actually polished in Canary. They are aiming for 37. https://code.google.com/p/chromium/issues/detail?id=137692#c104 https://code.google.com/p/chromium/issues/detail?id=137692#c...
ejain 12y ago
I can't help but notice that the display of <ul> items is broken (current Firefix, 14pt min font size)...
- nekitamo 12y ago
  Same here!
PeterUstinox 12y ago
Will this become an official Yeoman generator?
gedrap 12y ago
Some people hate the idea of shifting everything to Web. Other people hate how unsuitable HTML5/CSS3 is for replicating native appearance. But I think overall, it's a good middle ground. There will never be a perfect solution in the real world (where resources are limited, and companies are motivated to lock-in). Web is not a perfect medium, it has it's disadvantages. Web apps were definitely not in mind when developing and designing Web. But on other hand, it works and it's proven, it's been here for a while. There are solid technologies supporting it (nginx, apache, programming languages with their frameworks). Some say why not native? For the reasons we shifted away from native. Could we improve current situation with native applications? Maybe. But it requires a major player to get involved (read: money and skill). Would they be motivated in pursuing something philosophically right and all, while current technologies generate a lot of money? Doubt so. Yes, HTML and CSS were not meant to be used for mobile apps, mimicking native appearance. As an alternative, we can stick to vendor, and learn vendor specific stuff which doesn't share much in common, not even programming languages. Meanwhile HTML/CSS is something much more developers are familiar. It allows more developers to develop iOS/Android apps. Maybe we should just make it DRYier like we were doing with so many problems? At first, grid frameworks came for CSS layout, then Bootstrap. And in future bootstrap-which-gives-native-iOS/Android look will come? There must be something like that already. We could throw it all away and create some new API (some suggest JS + WebGL). But again. It requires major effort, major resources and current technologies are money machines. So why to stop? Not everything can be perfect and correct in real world, with real constraints. Some people prove that wrong from time to time. Will someone do this time?
peter-row 12y ago
Just a stupid question ... what is it? edit: Answered in other people's comments - it's somewhere between HTML5BoilerPlate and Bootstrap - a basic "hello world" bunch of HTML / SASS / js boilerplate code. This one has an emphasis on mobile.
bgruber 12y ago
as someone only casually familiar with node and and frontend dev generally, i'm curious about the instructions to install gulp and other things globally instead of local to the project. could someone illuminate the reasoning behind that? my thinking is that you're almost always better off doing things local to the project if possible.
rwhitman 12y ago
I guess it makes sense that the only library left to have in Google's web stack was an HTML/CSS framework. So now the circle is complete - you can run a website in Chrome on a Chromebook with a Starter Kit layout (all images as WebP of course) on top of AngularJS, running off a Go backend on App Engine.
drcode 12y ago
I like this tool in theory, but the inital web site for it sucks... I was interested in learning about their "Live Browser Reloading" but was unable to learn more about it, as I ended up traveling through a Kafkaesque labyrinth of documentation pages. Google guys/gals: Please keep working on this, but also make the website more friendly!
jebblue 12y ago
This seems crude to me compared to my experiences with jQuery Mobile. This also affirms my belief that custom Android and iPhone development is going to go the way of the dinosaur. It's all about the web.
jfoster 12y ago
It's always interesting to see the flurry of Google releases in the month leading up to Google IO. My understanding is that projects hold out on releasing in the hopes of being included in the Google IO line-up, but release just prior to (or after) Google IO if they didn't end up making the cut. I don't mean to belittle these projects (this one looks quite good, for example!), just pointing out that you can potentially get a read of Google's current priorities by comparing the projects released surrounding Google IO versus the projects released at Google IO. There are some other factors to be mindful of, such as Google IO's focus on developers, however.
mythz 12y ago
Why does this need to depend on Ruby as well as node.js? As a starter kit shouldn't it aim for the least dependencies to get started? So for devs who want to use this with another web framework like Python, They need to have node, Ruby and Python installed? Node is extremely easy to deploy/install that's even self-hostable where you can even check in node.exe (e.g. on Windows) into the repo so no prior installation is necessary. Just run `node install` to pull in all the dependencies and your away. Surely that's the kind of dev experience we should be aiming for? Are the benefits for SASS over a pure js solution like less that much better to justify the extra infrastructure dependencies?
- oliyoung 12y ago
  Ruby is a dependency for SASS, that'd be the only reason
  - StillBored 12y ago
    There is libsass and sassc https://github.com/sass/sassc https://github.com/sass/sassc It works for a fairly large project i'm involved in. Besides being AFAIU significantly faster then the ruby one, it allowed me to continue to refuse to add another scripting environment to our already mile long dependency list.
redact207 12y ago
I've been working on a similar web builder with Entomic - https://www.entomic.com https://www.entomic.com - that lets you create sites and get live previews across different browsers and devices as you develop. It's a little rough still, but it does make responsive development a bit easier.
thinkerer 12y ago
I think if this can be extended to make the changes easy to apply (with real time checking of how the output will be) and understanding the code differences, then many of the wireframe companies out there may lose their appeal....
sidcool 12y ago
I am a bit confused here. What is the difference between Dart and Angular, and this initiative? I hope this does not sound as a dumb question. I am asking this because people here are comparing it to Twitter Bootstrap.
- spankalee 12y ago
  Dart is a programming language that compiles to JavaScript. The project also encompasses APIs like collections, async and a much improved DOM API. Dart also has a node.js-like server VM with IO. Angular is a client-side web framework that provides templating and data-binding. It was originally written in JavaScript, and now has a Dart port as well. Somewhat relatedly, Google and Mozilla have been working on the web components standards, which bring some of the features Angular popularized, and some more fundamental ones as well, natively into the browser. These include Custom Elements, Shadow DOM, Mutation Observers, Object.observe(), and HTML Imports. Polymer is a project that helps with building custom elements, it adds some sugar including templating and data-binding, similar to Angular in some ways, but completely focused on modern Web Components related standards, and on elements - not apps or frameworks. You can use Polymer elements in any app with any framework, or without a framework. Web Starter Kit looks like a bundle tools to help you build a site with modern best practices, like responsive layouts, a local dev server, a build system, mobile-friendly user input, multi-device testing, etc. Web Starter Kit looks like it's framework agnostic, so you could probably use Angular or other frameworks to fill in the views, though these days you might find you don't really need a framework if you're using Web Components.
  - sidcool 12y ago
    That's a comprehensive explanation, thanks!
- bzelip 12y ago
  Here's an informative podcast by the Changelog that interviews a Dart author and a Dart outreach advocate, http://thechangelog.com/121/ http://thechangelog.com/121/ tldr; it's more than compiling to JS.
irfan 12y ago
This is how their homepage appear in my chrome: http://i.imgur.com/UCfMstr.png http://i.imgur.com/UCfMstr.png
thomasfl 12y ago
That's it. Google now finally owns the web. The decide what people should find on the web, and they define the web standards, so why not use their html templates.
moretti 12y ago
I'm curios about the CSS naming conventions. I'm assuming for example that component--modifier-name denotes a class modifier (ex. .button--primary and .button--secondary) and component__descendant-name denotes a a descendent node of a component (ex articles-list__item). It looks similar to SuitCSS (https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md https://github.com/suitcss/suit/blob/master/doc/naming-conve...). Is there more information about them?
xtx23 12y ago
isn't this just mostly a copy of Prepros: http://alphapixels.com/prepros/ http://alphapixels.com/prepros/ :/

553 points by restlessdesign 12y ago

I was really hoping "Delete key friendly" meant that they weren't forcing Chrome to bind delete to the back function any longer.

paulirish 12y ago
Removing that has been attempted a few times and failed. I would love to see that shortcut removed myself too. :/
- nguyenhimself 12y ago
  I'm surprised more people don't know about this BackStop extension that does just that: https://chrome.google.com/webstore/detail/backstop/pidcjgldchekcoolelhbjfbnccjkckfj https://chrome.google.com/webstore/detail/backstop/pidcjgldc...

dudus 12y ago

Twitter Bootstrap competitor?

Nico2706 12y ago
More like html5boilerplate alternative.
- kinlan 12y ago
  I think this is a fair comparison. Right now we are not providing components like the ones you get in Zurb and Bootstrap. EDIT: clarified.
  - brbcoding 12y ago
    It seems like this is more of a workflow than just a framework. Zurb and bootstrap don't come with build tools as far as I know, whereas this includes a gulpfile and a bunch of other stuff that's very common in my workflow. This feels more yeoman-esque + generator to me. Edit: Totally posted this before I read 'Web Starter Kit is inspired by Mobile HTML5 Boilerplate and Yeoman's generator-gulp-webapp, having taken input from contributors to both projects during development. Our FAQs attempt to answer commonly asked questions about the project.'
    - kinlan 12y ago
      Yeah. that is a very good summary. If you want build process and tooling to help then we have that based on the tools that we think are the best, however we don't force workflow on people if they don't want it.
      - dwd 12y ago
        Noticed Paul Irish is no longer active on H5BP, is he now on team Web Starter Kit or working on the broader Web Fundamentals?
        kinlan 12y ago
        Paul Irish has given us guidance, input and feedback and is on the same team as me, but Addy Osmani is the main driver of starter kit, with me leading Web Fundamentals.
        dwd 12y ago
        Thanks for the insight. Given his broader influence and role at Google it made sense he was involved in some way.
- Kiro 12y ago
  Definitely more Bootstrap than H5BP. H5BP is just an index.html with some reset CSS and Modernizr. This is much more.
- rog3r 12y ago
  More like Yeoman competition.
addyo 12y ago
Good question. We don't consider ourselves a Bootstrap competitor, but rather a combination of best practices and tooling when it comes to starting work on new multi-device/mobile web projects. Bootstrap, Zurb and similar libraries provide a great start for prototyping your apps, but one of the biggest challenges with them is that it’s (almost too) easy to get stuck using their styles, look and feel for the lifetime of your application. We think this leads to a poorer experience. It's also easy to just end up with 100KB+ of styles (unless you're opting for a modular build) that never get removed. In Web Starter Kit, we provide you a boilerplate set of base styles and a visual style guide for your components, but we actively encourage you to change these to suit your own app. This may require a little more work, but the reality is that any serious project is going to have it’s own look and feel and we want you to feel comfortable changing the kit to suit your own needs. We also include tooling for removing unused CSS. So, even if you use our styles (or choose to use Bootstrap instead) we should hopefully help keep your pages lean.
- deleted 12y ago
  [deleted]
- joshma 12y ago
  Is there any way to use the tooling independently of web starter kit? Wasn't able to find a link on the site, are they just warnings you see once you start developing? Can the tooling account for JS changes and navigation between pages? Sorry for the barrage of questions, just really hoping to find a decent tool to clean up CSS...
  - mofle 12y ago
    If it's just cleaning up CSS you're after, I would use UnCSS. Checkout grunt-uncss task or gulp-uncss to hook it up to your build process. We don't currently document using the tooling independent of the kit, but you should be able to pluck the package.json and gulpfile.js and edit per your needs. We'll try to get this documented.
  - deleted 12y ago
    [deleted]

greenpizza13 12y ago

Feels like a Bootstrap competitor, with many more cross platform features and shortcuts to optimizations, device access, etc.

nullgeo 12y ago

Ironically the home page for it looks horrible in the latest version of Chrome under Windows.

kinlan 12y ago
Can you file an issue on our repository and I will investigate it. It looked ok when I was running it last night. https://github.com/Google/WebFundamentals/issues https://github.com/Google/WebFundamentals/issues is our tracker. EDIT: adding link to issue tracker.
flipcoder 12y ago
Same here, with Firefox on Linux. The grid shows gaps like the web page is missing icons when you stretch the window width far enough.
- graedus 12y ago
  For me (Chrome, Win7), the gaps are explained by "PageSpeed Insights Reporting" and "SASS Support" wrapping down to the next row for all but a small range of horizontal viewport widths.
  - kinlan 12y ago
    Thanks, I'll get the team to look at this.

Siecje 12y ago

I wonder what browsers versions they are going to support at launch.

addyo 12y ago
We cover this in our browser support section: https://github.com/google/web-starter-kit#browser-support https://github.com/google/web-starter-kit#browser-support
- cozuya 12y ago
  I'll be that guy: this seems nice, I'd love to use it, I'll take another look some time around 2018 when I can start to consider pitching dropping IE9 support. IE10+ is simply ridiculously prohibitive for something like this.

leke 12y ago

It's a good idea, but it's currently lacking the richness of bootstrap.

addyo 12y ago
For sure. This is just a start and we don't intend on competing with Bootstrap in terms of UI components. We spent a long time evaluating many of the existing UI libraries available today and if a developer chooses to use one of them with the kit, they can. That's cool.

fidotron 12y ago

The web is now hamstrung by the HTML/CSS layout model more than anything else. The hackery required to attempt to imitate native mobile apps is horrific. Google would be better off throwing efforts into a new layout engine leveraging raw JS and WebGL, but with a sane API, than these continuous attempts to push HTML into places where it doesn't work. If they don't lead it I can see someone else doing it in such a way that their core money maker of web scraping and indexing ceases to work.

addyo 12y ago
On the Chrome team we're always looking at ways to better provide access to lower level primitives and machinery to enable you to do things like this. It's a multi-faceted problem however. If you have specific suggestions around alternative layout engines, discourse.specifiction.org is a great place to lay out your suggestions in more detail (not that HN isn't useful for this, but those interested in standards generally frequent the discussion board). Outside of layout engines, we're also looking at enabling developers to do more things they would like to with native hardware. Take a look at https://github.com/w3c-webmob/web-api-gap/tree/master/features https://github.com/w3c-webmob/web-api-gap/tree/master/featur... for feature gaps and efforts to fill them.
- jlhonora 12y ago
  Android's layout structure could be an option. It is much easier to handle than HTML + CSS, IMHO.
- fidotron 12y ago
  To be clear, I think in the medium to long term other than legacy HTML support browsers will get out of the layout engine business. Layout belongs in the JavaScript layer (or similar execution env) on top of a lower level abstraction, which is why I picked out WebGL as the most likely contender. Then the on the wire format becomes pure semantics, which can either be semi standardised, or not. (And Google clearly have an interest in promoting the former). WebGL, as it stands, seems to lack a few useful primitives for such a task, most notably needing an equivalent to process separated iframes. That might be possible already, but if not I'm sure it will be cracked enormously faster than attempting to debate and implement tiny incremental improvements in the HTML spec. My understanding is this is remarkably close to how the PS4 UI is actually implemented already.

ondrae 12y ago

Its interesting they are using GitHub instead of Google Code.

addyo 12y ago
Google Code is great, but I personally love GitHub <3 We've been actively pushing to do more development there across https://github.com/google https://github.com/google https://github.com/googlechrome https://github.com/googlechrome and so on.
- wldcordeiro 12y ago
  Google Code has been languishing. You guys could really do some things with it to make it a competitor with Github and Bitbucket.
  - ceejayoz 12y ago
    I see Google Code being in the same spot as Google Reader on Google's roadmap.
    - hobofan 12y ago
      I always begin to think the same thing, but then they open source a new project that is hosted on Google Code.
      - davb 12y ago
        I wondered if Google's internal development infrastructure looks like or hooks into Google Code, making it easy to release code publicly on Google Code.
        willnorris 12y ago
        Not really... it's about the same amount of work whether it goes to Google Code or GitHub. The teams that have an easier time of it are those that are using Git+Gerrit internally, since a public release is as simple as `git remote add` and `git push`. A number of teams continue to use tools like https://code.google.com/p/make-open-easy/ https://code.google.com/p/make-open-easy/ with varying degrees of success.

wuliwong 12y ago

It seems the navigation disappears entirely when you shrink the window. I would think they would implement their "hamburger" icon?

kinlan 12y ago
Ah, cool I think you have hit an intended design feature. We use min-device-width to know that you started on a smaller screen (or a wide screen). If you are on a wide screen responsive elements are changed slightly to fit the screen. If you start on a small screen you get the hamburger menu. Can you file an issue on the github project so that we can work on it to see if it is an issue.
- OutThisLife 12y ago
  On the homepage, the 'hamburger' menu doesn't show. Every other page is fine though.
gerbal 12y ago
On other pages it does hamburger icon properly, so, presumably, it's an issue with that page.

aikah 12y ago

@addy nice! so what's the goal here.Why would one use this over bootstrap/foundation/x css framework? Do you intend to integrate this with other frameworks you've written and other Google products like polymer/angularjs? My point is are you developping a coherent ecosystem or are they just independent tools? thanks.

kinlan 12y ago
I'll just reply because I know Addy is crazy busy. The goal is to give developers the education and tooling they need to do well out of the box by following all of our best practices straight away. In this case it can complement bootstrap and other frameworks because we are not building out a component library.

lvillani 12y ago

I wish I had this in my tool belt a few months ago when we began working on our web application. The core of our project can be reduced to something like web-starter-kit but we had to get there with many, many hours of hard-earned knowledge. I also like the leanness and cleanliness of web-starter-kit, it's really a nice collection of best-practices and pre-configured tools. I will definitely incorporate some pieces into our existing project and use it as a base for our next ones. Thanks guys!

JohnnyPython85 12y ago

>If you are planning to do the same, spend time listing down all your UI elements and test whether the theme supports them. This is all too important when evaluating a prefab Bootstrap theme. In the past when I have used Wrapbootstrap themes, I've been a few days in frustrated that something isn't working. Then when I dig into the asset files I realize that the theme was poorly written and I've been spinning my wheels for nothing. It's too bad so many themes look nice but simply aren't built the right way.

smrtinsert 12y ago

I suppose you could go this route. More realistic is to produce different server side files for each client type and keep it simple. There are tons of business reasons to make them physically separate as well, special promotions, advertising requirements, conditional scripts, etc.

ch0wn 12y ago
And there are also tons of reasons for the responsive solution. It all depends on your requirements and use cases. I don't think there's way to unconditionally say that one is better than the other at the moment.
nlh 12y ago
One reason not to use your method: Google's own guidelines. See: https://developers.google.com/webmasters/smartphone-sites/details https://developers.google.com/webmasters/smartphone-sites/de... "Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google's recommended configuration." Generally I've found that when Google recommends something, their search algo prefers this too. I obviously don't have direct proof that it does, but if SEO matters I'd follow what they suggest.
- kinlan 12y ago
  It's an interesting one. Adaptive serving is a reasonable solution when you are a large site and you can't wholesale merge your site in one go into a fully responsive solution. We find that Adaptive (i.e, server side detection of "mobile") leads to way more problems in the long term with maintenance, keeping up with new devices and also ensuring that you have all the correct canonical links etc in place to ensure that your "SEO" is still good. Our guidance is responsive all the things...

jacquesm 12y ago

This somehow reminds me of Inception. We have a perfectly functional computer, then we run a browser on it, we download a bunch of HTML, which in turn will download a whole slew of JavaScript in order to create the illusion of an application running natively that offers a subset of what the computer could offer. The only difference is that this web application supposedly runs on 'all devices' except that every web application is quite brittle once you try to actually run it on all devices. And forget about device access (though that is slowly getting a bit better). The only plus I see in all this is that in the end we are now free of the API lock-in that OS vendors traditionally required, that we tend to take 'client-server' applications more or less for granted and that because it is server centric you don't have to bug your users to download the latest version every time you improve things (though as was pointed out in another thread, this is also a disadvantage, as a user you lose control and if the company goes out of business you could lose it all). The web also roams much easier. If we keep going like this for a little while then we're back where we started, with the graphics terminals from the 80's, (canvas is pretty close actually) only this time across the WAN instead of a lan and with the ability to hyperlink between applications.

ChuckMcM 12y ago
You trade browser lock-in for OS lock-in. The original Internet Explorer strategy. Fundamentally it is a rent seeking strategy. When I noticed that Google was up to paying a billion dollars a quarter for traffic I realized that in some ways the gold leaf was falling off the piazza and revealing the the ugly plaster behind it. My guess is that the rent seeking here is in the form of directing search traffic in some way.
- esolyt 12y ago
  Browser lock-in? What makes you think web applications made with this kit work only in Chrome?
  - addyo 12y ago
    One of the core values behind this project is that it should work extremely well cross-device and that most definitely means on devices where Chrome isn't the primary browser. During development we've ensured that we test on Firefox OS, Windows phone, iOS and browsers other than Chrome which run on Android. I want to give people something that they can rely on. Chrome isn't the only browser in the world for sure :)

derengel 12y ago

for newbies like me this is just to great, cross device webdev can be a nightmare or this just to good to be true?

tdicola 12y ago

How does this compare to Yeoman, and is it meant to be a replacement? I thought Yeoman was made by some Google folks.

sinaa 12y ago
From the documentation: "Web Starter Kit is inspired by Mobile HTML5 Boilerplate and Yeoman's generator-gulp-webapp, having taken input from contributors to both projects during development."
- kinlan 12y ago
  It's not a replacement. My opinion on this as a stakeholder is that is meant for different audience that Yeoman serves. Ultimately we have produced a highly opinionated stack that developers can start with and customize as they like (or not if they don't want to). This lets developers who are experienced quickly start and manipulate it, and lets developers who don't know what a good workflow looks like be set up for success straight away. Yeoman on the other hand gives you complete control over how you want your project to be started and assumes that you know all the answers to the questions the generator poses. I also like that Web Starter Kit is just a simple download that you can extract and be good to go with.

webXL 12y ago

Is it just me, or do the fonts on that page look terrible on Windows? /edit: looks like it's just "Roboto Condensed"

wyck 12y ago
No it's not just you, it's everyone using chrome windows, it a bug in their rendering engine that has been unfixed for years. There are multiple easy ways to fix this (load order, re-rendering font, server config)..you would think a web starter kit would get the basics of fonts right... The layout is also broken for the icon rows... Example: http://i.imgur.com/8DCIsLw.jpg http://i.imgur.com/8DCIsLw.jpg
- zapt02 12y ago
  Looks like the classes for the icons are way wrong, or they forgot a clear:both; somewhere which makes the rows cascade improperly.
- jahewson 12y ago
  It's not a bug, it's just how GDI ClearType renders text. It doesn't perform y-axis antialiasing so almost-horizontal curves look blocky. The solution is to use DirectWrite but Chrome hasn't made the jump yet.
krambs 12y ago
Chrome has finally fixed this. There is a flag for DirectWrite in the release version, but it's actually polished in Canary. They are aiming for 37. https://code.google.com/p/chromium/issues/detail?id=137692#c104 https://code.google.com/p/chromium/issues/detail?id=137692#c...

ejain 12y ago

I can't help but notice that the display of <ul> items is broken (current Firefix, 14pt min font size)...

nekitamo 12y ago
Same here!

PeterUstinox 12y ago

Will this become an official Yeoman generator?

gedrap 12y ago

Some people hate the idea of shifting everything to Web. Other people hate how unsuitable HTML5/CSS3 is for replicating native appearance. But I think overall, it's a good middle ground. There will never be a perfect solution in the real world (where resources are limited, and companies are motivated to lock-in). Web is not a perfect medium, it has it's disadvantages. Web apps were definitely not in mind when developing and designing Web. But on other hand, it works and it's proven, it's been here for a while. There are solid technologies supporting it (nginx, apache, programming languages with their frameworks). Some say why not native? For the reasons we shifted away from native. Could we improve current situation with native applications? Maybe. But it requires a major player to get involved (read: money and skill). Would they be motivated in pursuing something philosophically right and all, while current technologies generate a lot of money? Doubt so. Yes, HTML and CSS were not meant to be used for mobile apps, mimicking native appearance. As an alternative, we can stick to vendor, and learn vendor specific stuff which doesn't share much in common, not even programming languages. Meanwhile HTML/CSS is something much more developers are familiar. It allows more developers to develop iOS/Android apps. Maybe we should just make it DRYier like we were doing with so many problems? At first, grid frameworks came for CSS layout, then Bootstrap. And in future bootstrap-which-gives-native-iOS/Android look will come? There must be something like that already. We could throw it all away and create some new API (some suggest JS + WebGL). But again. It requires major effort, major resources and current technologies are money machines. So why to stop? Not everything can be perfect and correct in real world, with real constraints. Some people prove that wrong from time to time. Will someone do this time?

peter-row 12y ago

Just a stupid question ... what is it? edit: Answered in other people's comments - it's somewhere between HTML5BoilerPlate and Bootstrap - a basic "hello world" bunch of HTML / SASS / js boilerplate code. This one has an emphasis on mobile.

bgruber 12y ago

as someone only casually familiar with node and and frontend dev generally, i'm curious about the instructions to install gulp and other things globally instead of local to the project. could someone illuminate the reasoning behind that? my thinking is that you're almost always better off doing things local to the project if possible.

rwhitman 12y ago

I guess it makes sense that the only library left to have in Google's web stack was an HTML/CSS framework. So now the circle is complete - you can run a website in Chrome on a Chromebook with a Starter Kit layout (all images as WebP of course) on top of AngularJS, running off a Go backend on App Engine.

drcode 12y ago

I like this tool in theory, but the inital web site for it sucks... I was interested in learning about their "Live Browser Reloading" but was unable to learn more about it, as I ended up traveling through a Kafkaesque labyrinth of documentation pages. Google guys/gals: Please keep working on this, but also make the website more friendly!

jebblue 12y ago

This seems crude to me compared to my experiences with jQuery Mobile. This also affirms my belief that custom Android and iPhone development is going to go the way of the dinosaur. It's all about the web.

jfoster 12y ago

It's always interesting to see the flurry of Google releases in the month leading up to Google IO. My understanding is that projects hold out on releasing in the hopes of being included in the Google IO line-up, but release just prior to (or after) Google IO if they didn't end up making the cut. I don't mean to belittle these projects (this one looks quite good, for example!), just pointing out that you can potentially get a read of Google's current priorities by comparing the projects released surrounding Google IO versus the projects released at Google IO. There are some other factors to be mindful of, such as Google IO's focus on developers, however.

mythz 12y ago

Why does this need to depend on Ruby as well as node.js? As a starter kit shouldn't it aim for the least dependencies to get started? So for devs who want to use this with another web framework like Python, They need to have node, Ruby and Python installed? Node is extremely easy to deploy/install that's even self-hostable where you can even check in node.exe (e.g. on Windows) into the repo so no prior installation is necessary. Just run `node install` to pull in all the dependencies and your away. Surely that's the kind of dev experience we should be aiming for? Are the benefits for SASS over a pure js solution like less that much better to justify the extra infrastructure dependencies?

oliyoung 12y ago
Ruby is a dependency for SASS, that'd be the only reason
- StillBored 12y ago
  There is libsass and sassc https://github.com/sass/sassc https://github.com/sass/sassc It works for a fairly large project i'm involved in. Besides being AFAIU significantly faster then the ruby one, it allowed me to continue to refuse to add another scripting environment to our already mile long dependency list.

redact207 12y ago

I've been working on a similar web builder with Entomic - https://www.entomic.com https://www.entomic.com - that lets you create sites and get live previews across different browsers and devices as you develop. It's a little rough still, but it does make responsive development a bit easier.

thinkerer 12y ago

I think if this can be extended to make the changes easy to apply (with real time checking of how the output will be) and understanding the code differences, then many of the wireframe companies out there may lose their appeal....

sidcool 12y ago

I am a bit confused here. What is the difference between Dart and Angular, and this initiative? I hope this does not sound as a dumb question. I am asking this because people here are comparing it to Twitter Bootstrap.

spankalee 12y ago
Dart is a programming language that compiles to JavaScript. The project also encompasses APIs like collections, async and a much improved DOM API. Dart also has a node.js-like server VM with IO. Angular is a client-side web framework that provides templating and data-binding. It was originally written in JavaScript, and now has a Dart port as well. Somewhat relatedly, Google and Mozilla have been working on the web components standards, which bring some of the features Angular popularized, and some more fundamental ones as well, natively into the browser. These include Custom Elements, Shadow DOM, Mutation Observers, Object.observe(), and HTML Imports. Polymer is a project that helps with building custom elements, it adds some sugar including templating and data-binding, similar to Angular in some ways, but completely focused on modern Web Components related standards, and on elements - not apps or frameworks. You can use Polymer elements in any app with any framework, or without a framework. Web Starter Kit looks like a bundle tools to help you build a site with modern best practices, like responsive layouts, a local dev server, a build system, mobile-friendly user input, multi-device testing, etc. Web Starter Kit looks like it's framework agnostic, so you could probably use Angular or other frameworks to fill in the views, though these days you might find you don't really need a framework if you're using Web Components.
- sidcool 12y ago
  That's a comprehensive explanation, thanks!
bzelip 12y ago
Here's an informative podcast by the Changelog that interviews a Dart author and a Dart outreach advocate, http://thechangelog.com/121/ http://thechangelog.com/121/ tldr; it's more than compiling to JS.

irfan 12y ago

This is how their homepage appear in my chrome: http://i.imgur.com/UCfMstr.png http://i.imgur.com/UCfMstr.png

thomasfl 12y ago

That's it. Google now finally owns the web. The decide what people should find on the web, and they define the web standards, so why not use their html templates.

moretti 12y ago

I'm curios about the CSS naming conventions. I'm assuming for example that component--modifier-name denotes a class modifier (ex. .button--primary and .button--secondary) and component__descendant-name denotes a a descendent node of a component (ex articles-list__item). It looks similar to SuitCSS (https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md https://github.com/suitcss/suit/blob/master/doc/naming-conve...). Is there more information about them?

xtx23 12y ago

isn't this just mostly a copy of Prepros: http://alphapixels.com/prepros/ http://alphapixels.com/prepros/ :/