![]() One is at 20px and the other at 26px as these are the most common line-heights in my work. ![]() Two baseline images are included for use with the grid overlay. Because rems aren't widely supported, A pixel value is always declared first. This means that 1rem = 10px so the maths is a little easiter. The base font size is reduced to 10px using a percentage and thereafter rems are used to declare font-sizes and heights, based on this value. As a consiquence, it keeps the typography and layout code to a minimum. It only contains code that I find myself using in every project. This template aims to keep superfluous code to a minimum. Other than the individual HTML pages, the following files are generated by CodeKit: Other pages should be dropped in the root and import _head and _foot like this. index.kit - A template for the index page.codekit-config.json - A CodeKit Config File.plugins.js - Based on H5BP, with a few additions.main.js - User Scripts should go in here.js/boxsizing-polyfill.htc - A polyfill that allows IE to understand box-sizing.includes/_grid.kit - A fluid grid overlay for use during development.includes/_foot.kit - The bottom part of each page.includes/_head.kit - The top part of each page, based on H5BP.main.scss also imports Bourboun by default and my own local mixins library. _print.scss - Contains print-specific styles based on H5BP.Įach module (again, see SMACSS) should have its own SCSS file._helpers.scss - Contains a stripped-down version of the helper classes from H5BP.See SMACSS for more information on organising styles. _layout.scss - Should contain layout-speciffic class declarations._base.scss - Contains fixes for some common bugs and base styles.This can be removed if the project isn't using codekit. /sprite - contains images that should be compiled into a sprite using Compass.It might be better to build plugins into plugins.js using codekit imports. Other plugins can go in here, but be aware of the number of HTTP requests. /js/vendor - contains jQuery & Modenizr. ![]() /js - contains the projects javascript files./img - contains all image files for the project./fonts - an empty folder for font files./css - contains a minified main.scss with all the other SCSS files imported.There is a similar template for those that use Hammer here. It's based partially on HTML5 Boilerplate. You can use the scripts-section of your package.This is a base tempate for building static sites using CodeKit. It's best not to install webpack globally, because it's a dependency of your project and thus should be controlled via npm. I've attempted to create a file several times, my latest attempt was several versions of this: module.exports = , Node was installed with homebrew's brew install node and seems to be working fine otherwise. # load bootstrap files as "bootstrap/wells" Scss/modules/_bootstrap-customizations.scssĬontents of styles.scss "modules/bootstrap-customizations" # local "bootstrap/mixins" Js/main.js <- currently the compiled js 'output' fileĬss/styles.css <- currently the compiled css 'output' file I'm currently storing these globally, outside of the project: ~/bower_components/twbs-bootstrap-sass/vendor/assets/stylesheetsīecause CodeKit supports compass, I've got this in my config.rb file: add_import_path "~/bower_components/twbs-bootstrap-sass/vendor/assets/stylesheets" End up with one css file and one script file that can be included with a stylesheet and script tag.Use webpack -watch to compile both scripts and styles automatically when they are changed.Maintain a small file with bootstrap customizations via sass variables, like $brand-primary.Selectively include components of the bootstrap-sass (scss) framework as needed.Have all script source files and libraries minified / uglified and combined into one file.Write javascript with the coffeescript syntax.I just can't seem to get it working correctly. I started working to move from CodeKit to Grunt and Gulp, and then learned about webpack which sounds very cool. ![]() I'm having trouble using webpack instead of Codekit v1.9.3.
0 Comments
Leave a Reply. |