Giter Club home page Giter Club logo

frontend-guidelines-questionnaire's Introduction

Frontend Guidelines Questionnaire

A one-page questionnaire to help your team establish effective frontend guidelines, so that you can write consistent & cohesive code together.

HTML

HTML Principles

  • What are some general principles your team should follow when writing HTML? (for example, authoring semantic HTML5 markup, accessibility, etc. See these resources for inspiration)

HTML Tools

  • Are you using an HTML preprocessor (such as HAML, Jade, etc)?
  • Are you using a templating engine (such as Mustache, Handlebars, etc)?
  • Does your backend architecture influence the frontend markup in any way (for example, WordPress will add wp-paginate to a class in your markup)? If so, can you highlight these conventions?

HTML Style

  • Spaces or Tabs?
  • What does HTML commenting look like?

CSS

CSS Principles

  • What are some general principles your team should follow when writing CSS? (For example, modularity, avoiding long selector strings, etc. See these resources for inspiration)

CSS Methodology

  • Is your team using a CSS methodology (such as SMACSS, BEM, or OOCSS? If yes, where is the documentation for that methodology?
  • Are you deviating from the methodology in any way? If so, can you highlight these conventions?

CSS Tools

  • Is the team using a preprocessor (such as Sass or Less)?
  • What are the guidelines for using that preprocessor (check out Sass Guidelines for inspiration)?
  • Are you using a CSS base (such as Normalize or a reset)?
  • Are you using any CSS postprocessors (such as Prefixfree or Autoprefixer)?
  • Are there specific CSS techniques you're utilizing (such as critical CSS)?

CSS Frameworks

  • Is the team using a framework (such as Bootstrap or Foundation)? If yes, where is the documentation for that framework?
  • Are you deviating from the framework in any way? If so, can you highlight these conventions?

CSS Style

  • Spaces or Tabs?
  • Spacing around rules?
  • Grouping properties?
  • What does CSS commenting look like?

JavaScript

JavaScript Principles

JavaScript tools

  • Are you using a JavaScript framework (such as jQuery, Ember, Angular, etc)?
  • Where is the documentation for those frameworks?
  • Are you using any polyfills or shims (such as any of these)?
  • What third-party scripts are dependencies for your project (such as scripts for form validation, graphs, animation, etc)?

JavaScript Style

(See these resources for inspiration)


Tooling

  • Are you using a task runner (such as Grunt or Gulp)?
  • Are you using a dependency manager (such as Bower or Composer)
  • Are you using any scaffolding tools (such as Yeoman)
  • Are you using any tools to reinforce frontend style (such as Editor Config or linters)?
  • Are any other specific pieces of software that are needed to work on this project?

Version control

  • What version control system are you using for your frontend code (such as Git or Subversion)?
  • Where is your version-controlled code hosted (such as Github or Bitbucket) ?
  • Do you use a version control workflow (such as gitflow, centralized, feature-branch, etc)?
  • Who's responsible for managing and governing the version controlled code??
  • Where are issues tracked?

Support and Optimization

It's important to recognize the difference between "support" and "optimization". You should do your best to support as many environments as possible while simultaneously optimizing for the environments that make the most sense for your business and users.


Documentation

  • Are you using a pattern library tool to document your front-end architecture?
  • Where does your documentation live? What are the links to the documentation?
  • Who's responsible for maintaining and governing the documentation?
  • What happens when the guidelines are updated?

Feel free to modify or extend (such as adding specific sections for performance, accessibility, etc) this document for your own organization's needs. For questions, comments, additions, and corrections, please open an issue on Github and/or reach out to @brad_frost on Twitter.

frontend-guidelines-questionnaire's People

Contributors

bradfrost avatar zachwills avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.