HTML5 Boilerplate

Mikes Notes

I have been looking for a robust and proven base CSS example. I have found two open-source and freely available with a community behind them. Both are on GitHub and have good documentation, code and examples. I have used the best of both.

Now in production.

CSS Templates

  • HTML5 Boilerplate
  • Motherplate

HTML5 Boilerplate

"HTML5 Boilerplate is an HTML, CSS and JavaScript template (or boilerplate) for creating HTML5 websites with cross-browser compatibility." - Wikipedia
"The web’s most popular front-end template.

HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package." - HTML5 Boilerplate

Resources

Motherplate

"Motherplate: A Responsive SCSS Boilerplate for Web Designers.

This is a bare bones HTML/CSS framework. This is what I'll typically start off most web projects with.
It includes a CSS reset and a bunch of minimal boilerplate styles that should come in useful for any project, including a responsive grid, typography, buttons, icons and forms.
It is not as in depth as something like HTML5 Boilerplate and doesn't include styled components like Bootstrap.
It can be used for a static web project as is, or you can copy the CSS folder into an existing framework (e.g. Rails)." - Motherplate

CCS

  • base/config Put all your variables in here e.g. colors, padding, border radius - this helps with consistency across your project.

  • base/grid A basic responsive grid system with 12 columns.
  • base/ie Any styles that you need to add in order for Internet Explorer to work.
  • base/mixins Reusabled Sass mixins e.g. clearfix.
  • base/print Basic print stylesheets to make your pages look better when printed.
  • base/responsive Add any global responsive styles here e.g. hide elements, show elements, resize elements.
  • base/shame Keep this to hand for any quick and dirty CSS you need to add but plan to tidy later.
  • base/type Basic styling for your typography.
  • components/alerts Alerts to notify or give feedback to the user
  • components/buttons Styles for any text links and/or buttons.
  • components/forms Some basic form styles.
  • components/media Styles for images, video etc.
  • components/nav Inline navigation.
  • components/other Other reusable styles that come in handy.
  • components/tables Styles for tables.
  • pages/home Styles that are specific to the homepage
  • pages/layout Global layout styles e.g. header, footer, logo etc.
  • main.scss This brings all the partials together.

Example

CSS
// Reset default browser styles using Normalize
@import "../../node_modules/normalize-scss/sass/_normalize.scss";

// Install FontAwesome for useful icons
@import "../../node_modules/font-awesome/scss/font-awesome.scss";

// Import fonts from Google
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700|Lato:400,700);

// Set variables and reusable mixins
@import "base/config";
@import "base/mixins";

// Import typical layout styles
@import "base/grid";
@import "base/type";

// Import reusable modules
@import "components/media";
@import "components/buttons";
@import "components/tables";
@import "components/forms";
@import "components/alerts";
@import "components/nav";
@import "components/other";

// Specific project styles, add any section specific sass modules here
@import "pages/layout";
@import "pages/home";

// Additional styles to think about
@import "base/responsive";
@import "base/print";

// If IE support is needed
@import "base/ie";

// For anything quick and dirty that needs thrown in
@import "base/shame";

Resources

By ,
Tags ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)