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 can be used for a static web project as is, or you can copy the CSS folder into an existing framework (e.g. Rails).
This will vary depending on the framework you are using. The following is how to for a basic static website.
You will need Node.js.
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
A bare bones index.html template.
base/configPut all your variables in here e.g. colors, padding, border radius - this helps with consistency across your project.
base/gridA basic responsive grid system with 12 columns.
base/ieAny styles that you need to add in order for Internet Explorer to work.
base/mixinsReusabled Sass mixins e.g. clearfix.
base/printBasic print stylesheets to make your pages look better when printed.
base/responsiveAdd any global responsive styles here e.g. hide elements, show elements, resize elements.
base/shameKeep this to hand for any quick and dirty CSS you need to add but plan to tidy later.
base/typeBasic styling for your typography.
components/alertsAlerts to notify or give feedback to the user
components/buttonsStyles for any text links and/or buttons.
components/formsSome basic form styles.
components/mediaStyles for images, video etc.
components/otherOther reusable styles that come in handy.
components/tablesStyles for tables.
pages/homeStyles that are specific to the homepage
pages/layoutGlobal layout styles e.g. header, footer, logo etc.
main.scssThis 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.