{"id":13564564,"url":"https://github.com/leemunroe/motherplate","last_synced_at":"2025-04-06T18:17:35.863Z","repository":{"id":8939782,"uuid":"10673188","full_name":"leemunroe/motherplate","owner":"leemunroe","description":"A bare bones responsive SCSS boilerplate for web designers","archived":false,"fork":false,"pushed_at":"2018-01-24T01:34:21.000Z","size":4786,"stargazers_count":400,"open_issues_count":0,"forks_count":64,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-03-30T17:09:45.620Z","etag":null,"topics":["boilerplate","bootstrap","html","mobile","responsive-grid","sass","scss"],"latest_commit_sha":null,"homepage":"http://leemunroe.github.io/motherplate/example.html","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leemunroe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-06-13T18:45:08.000Z","updated_at":"2025-03-26T00:36:49.000Z","dependencies_parsed_at":"2022-08-07T05:00:20.328Z","dependency_job_id":null,"html_url":"https://github.com/leemunroe/motherplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leemunroe%2Fmotherplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leemunroe%2Fmotherplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leemunroe%2Fmotherplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leemunroe%2Fmotherplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leemunroe","download_url":"https://codeload.github.com/leemunroe/motherplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247526768,"owners_count":20953143,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","bootstrap","html","mobile","responsive-grid","sass","scss"],"created_at":"2024-08-01T13:01:32.981Z","updated_at":"2025-04-06T18:17:35.825Z","avatar_url":"https://github.com/leemunroe.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# Motherplate: A Responsive SCSS Boilerplate for Web Designers\n\nPreview: https://leemunroe.github.io/motherplate/example.html\n\n## What is this?\nThis is a bare bones HTML/CSS framework. This is what I'll typically start off most web projects with.\n\nIt 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.\n\nIt is not as in depth as something like \u003ca href=\"https://html5boilerplate.com/\"\u003eHTML5 Boilerplate\u003c/a\u003e and doesn't include styled components like \u003ca href=\"https://getbootstrap.com/\"\u003eBootstrap\u003c/a\u003e.\n\nIt can be used for a static web project as is, or you can copy the CSS folder into an existing framework (e.g. Rails).\n\n## Features\n* Uses SCSS partials to help structure the CSS.\n* Responsive-ready 12-column grid system to work across all devices.\n* Uses Font Awesome icon fonts for icons.\n* Uses Normalize to reset browser styles.\n* Only enough CSS to get you started; minimal visual styling with this boilerplate.\n* Only the HTML/JS you need to get started; very little components with this boilerplate.\n\n## How to Use\nThis will vary depending on the framework you are using. The following is how to for a basic static website.\n\n### Install Node.js and use Grunt\nMotherplate 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.\n\nYou will need [Node.js](https://nodejs.org/download/). \n\nOpen up terminal (or command line) and run the default Grunt task.\n```\n$ npm install\n$ grunt\n```\n\nGrunt will watch for any changes you make to your SCSS files and compile your new `main.css` file.\n\n## HTML\nA bare bones index.html template.\n\n## CSS\n* `base/config` Put all your variables in here e.g. colors, padding, border radius - this helps with consistency across your project.\n* `base/grid` A basic responsive grid system with 12 columns.\n* `base/ie` Any styles that you need to add in order for Internet Explorer to work.\n* `base/mixins` Reusabled Sass mixins e.g. clearfix.\n* `base/print` Basic print stylesheets to make your pages look better when printed.\n* `base/responsive` Add any global responsive styles here e.g. hide elements, show elements, resize elements.\n* `base/shame` Keep this to hand for any quick and dirty CSS you need to add but plan to tidy later.\n* `base/type` Basic styling for your typography.\n* `components/alerts` Alerts to notify or give feedback to the user\n* `components/buttons` Styles for any text links and/or buttons.\n* `components/forms` Some basic form styles.\n* `components/media` Styles for images, video etc.\n* `components/nav` Inline navigation.\n* `components/other` Other reusable styles that come in handy.\n* `components/tables` Styles for tables.\n* `pages/home` Styles that are specific to the homepage\n* `pages/layout` Global layout styles e.g. header, footer, logo etc.\n* `main.scss` This brings all the partials together. \n\nAs your project grows and you need to add more styles just create new .scss files and reference them anywhere in your main.scss file.\n\n## JavaScript ##\n* I've included some basic Javascript including the latest jQuery and the document ready function.\n\n## Images ##\n* There is a /img folder for images.\n* 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.\n* Images referenced in the HTML are stored in the /img folder.\n\n## Fonts ##\n* Included font awesome for icons\n\n## Further Documentation ##\n* \u003ca href=\"http://sass-lang.com/\"\u003eSASS\u003c/a\u003e\n* \u003ca href=\"https://necolas.github.io/normalize.css/\"\u003enormalize.css\u003c/a\u003e\n* \u003ca href=\"http://fontawesome.io/\"\u003eFont Awesome\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleemunroe%2Fmotherplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleemunroe%2Fmotherplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleemunroe%2Fmotherplate/lists"}