Skip to content
Branch: master
Go to file
Code
This branch is 220 commits ahead, 2 commits behind 55minutes:master.

Latest commit

Files

Permalink
Failed to load latest commit information.

README.md

CSS3/HTML5 Foundation

This project is a CSS3/HTML5 template for crafting modern web applications. This latest iteration of the template is well-suited for building simple static websites, or serving as the foundation for web applications. For a React/Redux-based application, see my create-react-app-based starter project.

To use this project, you should have a recent (>= 8.0) version of node.js installed.

Feature Highlights

  • A fluid, responsive layout following the principles of Responsive Web Design.
  • Best practices recommended by various boilerplate projects, as well as our own experience developing web applications.
  • A style guide containing examples of the default styles defined in the project.
  • A number of convenient Sass mixins for:
  • Integration with the Susy layout framework.
  • Integration with Font Awesome.
  • Sass linting with stylelint.
  • Dependency management with npm/yarn.
  • Asset bundling with webpack.
  • Integration with Browsersync for really painless development.

Getting Started

  1. Install node.js, or verify that it is already installed.

  2. Change into the css3-foundation/ directory in your favorite terminal application and type npm install.

  3. Steps 1–2 are one-time-only setup requirements. Hereafter, all you need to do is run the following command from css3-foundation/:

     npm run start
    

    This will monitor changes to your source files, recompile the Sass and JavaScript, and (re)load your browser. To compile the scripts and styles one time only, type:

     npm run build
    

    See all available npm scripts:

     npm run
    

File organization

Files in this project are organized into directories like so:

css3-foundation/
├── distribution
│   ├── fonts
│   ├── scripts
│   └── styles
├── images
│   ├── app-icons
│   └── originals
└── source
    ├── scripts
    │   └── vendor
    └── styles
        ├── basics
        └── shared

Please refer to individual source files for details on what should be included there, but here are some general guidelines for file organization:

  • source/ contains the Sass and JavaScript source files that Webpack will combine/compile
    • source/styles/ contains the Sass source files. We use the SCSS syntax for this project.
      • source/styles/basics/ contains the building blocks of our styles: the colors, the typography, the grid.
      • source/styles/shared/ contains application-wide styles like header, footer and form styles. Default styles for the basic HTML tags should also be included here.
    • source/scripts/ contains all of the project's JavaScript files. Put custom JavaScript at the top level of this directory.
      • source/scripts/vendor/ contains custom-built libraries like Modernizr. npm/yarn-installed libraries are, of course, in node_modules/.
  • distribution/ will contain the processed asset files that are included by the HTML files
    • distribution/styles/ contains the compiled stylesheets, the CSS files that we will include in our markup. The contents of this directory are not checked into source control, but will be generated by Webpack when you run npm run build.
    • distribution/scripts/ contains the compiled JavaScript files, the JS files that we will include in our markup. The contents of this directory are not checked into source control, but will be generated by Webpack when you run npm run build.

CSS rule organization & linting

A single CSS rule set can quickly grow large and unwieldy, so to promote ease of reading, we recommend following a prescribed order for writing your CSS rules. In general, we work from the outside in, from layout to text:

selector
{
  /* Display and positioning */
  display: …;
  visibility: …;
  position: …;
  top: …;
  right: …;
  bottom: …;
  left: …;
  z-index: …;
  clear: …;
  float: …;

  /* Transforms and animations */
  transform: …;
  animation: …;
  transition: …;

  /* Box model/layout */
  box-*: …;
  margin: …;
  outline: …;
  border: …;
  padding: …;
  width: …;
  min-width: …;
  max-width: …;
  height: …;
  min-height: …;
  max-height: …;
  overflow: …;
  clip: …;
  resize: …;
  table-layout: …;

  /* Alignment */
  vertical-align: …;
  text-align: …;

  /* Background/foreground color */
  background: …;
  color: …;
  opacity: …;

  /* Text properties */
  font-family: …;
  font-size: …;
  line-height: …;
  direction: …;
  font-style: …;
  font-variant
  text-decoration: …;
  text-indent: …;
  text-transform: …;
  letter-spacing: …;
  word-spacing: …;
  word-break: …;
  word-wrap: …;
  quotes: …;
  page-breakpointsak-*: …;
  list-style: …;
  white-space: …;
}

This is of course not required; some teams prefer, for example, to alphabetize the rules instead. The important thing is that whatever your team chooses, there is a consistent, documented pattern. We define our preferred order in this repository's stylelint.config.js and enforce it through stylelint and the stylelint-order plugin.

You can’t perform that action at this time.