https://github.com/leemunroe/motherplate

A bare bones responsive SCSS boilerplate for web designers
https://github.com/leemunroe/motherplate

boilerplate bootstrap html mobile responsive-grid sass scss

Last synced: about 7 hours ago
JSON representation

A bare bones responsive SCSS boilerplate for web designers

• Host: GitHub
• URL: https://github.com/leemunroe/motherplate
• Owner: leemunroe
• License: mit
• Created: 2013-06-13T18:45:08.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2018-01-24T01:34:21.000Z (almost 7 years ago)
• Last Synced: 2024-11-04T17:47:49.113Z (5 days ago)
• Topics: boilerplate, bootstrap, html, mobile, responsive-grid, sass, scss
• Language: CSS
• Homepage: http://leemunroe.github.io/motherplate/example.html
• Size: 4.56 MB
• Stars: 397
• Watchers: 24
• Forks: 64
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Motherplate: A Responsive SCSS Boilerplate for Web Designers

Preview: https://leemunroe.github.io/motherplate/example.html

## What is this?

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).

## Features

* Uses SCSS partials to help structure the CSS.

* Responsive-ready 12-column grid system to work across all devices.

* Uses Font Awesome icon fonts for icons.

* Uses Normalize to reset browser styles.

* Only enough CSS to get you started; minimal visual styling with this boilerplate.

* Only the HTML/JS you need to get started; very little components with this boilerplate.

## How to Use

This will vary depending on the framework you are using. The following is how to for a basic static website.

### Install Node.js and use Grunt

Motherplate uses SCSS. This particular repo uses [Grunt](https://gruntjs.com/) to compile the SCSS to CSS and [NPM](https://www.npmjs.com/) to manage external dependencies like FontAwesome and Normalize.

You will need [Node.js](https://nodejs.org/download/). 

Open up terminal (or command line) and run the default Grunt task.

```

$ npm install

$ grunt

```

Grunt will watch for any changes you make to your SCSS files and compile your new `main.css` file.

## HTML

A bare bones index.html template.

## CSS

* `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. 

As your project grows and you need to add more styles just create new .scss files and reference them anywhere in your main.scss file.

## JavaScript ##

* I've included some basic Javascript including the latest jQuery and the document ready function.

## Images ##

* There is a /img folder for images.

* For images referenced in the CSS I tend to keep them in the css/assets/ folder e.g. sp.png is a sprite I can reference.

* Images referenced in the HTML are stored in the /img folder.

## Fonts ##

* Included font awesome for icons

## Further Documentation ##

* SASS

* normalize.css

* Font Awesome