A CSS3/HTML5 bootstrap for modern, responsive web apps
HTML CSS JavaScript
Clone or download
Pull request Compare This branch is 183 commits ahead, 2 commits behind 55minutes:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
distribution WIP for swapping out build system Sep 22, 2017
images Update favicons to handle more devices. Mar 3, 2016
source Fix clobbered style for pagination in style guide. May 23, 2018
.editorconfig WIP for swapping out build system Sep 20, 2017
.gitignore WIP for swapping out build system Sep 22, 2017
.htaccess Update readme, add htaccess to turn on… Nov 29, 2014
LICENSE Add Compass-based scaffolding. Sep 3, 2010
NOTICE Update copyright notices. May 23, 2018
README.md Update copyright notices. May 23, 2018
favicon.ico Update favicons to handle more devices. Mar 3, 2016
font-weight-tester.html WIP for swapping out build system Sep 22, 2017
index.html Update copyright notices. May 23, 2018
login.html Update copyright notices. May 23, 2018
package.json
parallax.html WIP for swapping out build system Sep 22, 2017
postcss.config.js WIP for swapping out build system Sep 20, 2017
style-guide.html Wrap up most remaining tasks for new build system. Sep 22, 2017
stylelint.config.js WIP for swapping build system Sep 21, 2017
webpack.config.js Lots of major-version package upgrades May 23, 2018
yarn.lock

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.