Meta tags:

Headings (most frequently used words):

imports, kit, variables, extension, the, use, variable, why, you, languages, what, is, base64, compiling, getting, started, common, questions, file, root, relative, multiple, partial, convention, details, practical, examples, limitations, judiciously, flexible, syntax, all, are, strings, one, per, comment, nil, optionals, scope, does, exist, didn, just, html, want, loops, and, conditionals, re, locking, us, into, codekit,

Text of the page (most frequently used words):
the (73), kit (44), you (43), file (31), html (22), and (21), codekit (21), #import (21), use (19), variable (19), for (17), this (17), that (14), will (13), any (12), just (12), body (12), #variables (11), page (11), output (11), compile (10), somefile (10), extension (9), can (9), may (9), add (8), not (8), like (8), menu (8), look (8), into (7), more (7), all (7), imports (7), from (7), class (7), myvar (7), are (7), special (6), would (6), files (6), nav (6), active (6), syntax (6), comment (6), want (5), time (5), simple (5), text (5), languages (5), after (5), master (5), value (5), set (5), nil (5), other (5), width (5), statement (5), with (5), base64 (5), include (5), language (4), really (4), finder (4), then (4), optional (4), css (4), compiled (4), only (4), when (4), div (4), style (4), pug (4), folder (4), because (3), they (3), comments (3), these (3), browser (3), using (3), than (3), things (3), also (3), your (3), have (3), declare (3), beta (3), write (3), _nav (3), here (3), name (3), defined (3), partial (3), contains (3), same (3), flexible (3), multiple (3), one (3), 40px (3), each (3), stuff (3), stylesheet (3), sass (3), required (3), custom (3), png (3), fails (3), project (3), root (3), relative (3), support (2), developer (2), clear (2), attempt (2), people (2), simply (2), best (2), way (2), know (2), common (2), feature (2), open (2), need (2), step (2), string (2), substitution (2), its (2), scope (2), loops (2), get (2), missing (2), content (2), such (2), regular (2), why (2), don (2), php (2), including (2), navigation (2), change (2), must (2), window (2), rename (2), note (2), details (2), paths (2), getting (2), started (2), point (2), declared (2), imported (2), available (2), undefined (2), now (2), some (2), othervar (2), what (2), means (2), otherwise (2), adopts (2), suppose (2), building (2), named (2), becomes (2), nothing (2), single (2), per (2), everything (2), quotation (2), marks (2), leading (2), strings (2), together (2), haml (2), slim (2), colons (2), equals (2), signs (2), space (2), valid (2), finish (2), sandwiches (2), external (2), less (2), stylus (2), instead (2), comma (2), separated (2), list (2), disk (2), hooks (2), type (2), types (2), importing (2), compiling (2), image (2), example (2), folders (2), framework (2), _somefile (2), convention (2), underscore (2), path (2), plugins (2), frameworks (2), minifier (2), tools (2), postcss (2), browsers (2), steps (2), topics (2), privacy, policy, report, bug, email, follow, twitter, made, san, diego, negative, compiler, welcome, product, crystal, tie, fulfill, request, folks, app, tool, job, forced, source, locking, complex, patterns, robust, limited, design, keep, approachable, easy, plus, inside, quickly, ugly, conditionals, once, could, display, but, included, anything, relied, different, makes, contents, didn, lots, asked, bar, every, very, specific, problem, designed, solve, does, exist, questions, right, click, choose, info, pops, try, itself, actually, fact, input, matter, see, setting, take, used, extends, contrast, operator, receive, error, without, targets, done, contain, page2, easily, states, items, page1, has, put, skip, swift, code, optionals, essentially, substituted, keyword, attempting, result, behavior, considered, part, wrap, appear, trailing, whitespace, however, ignored, etc, capability, jade, amazing, var2, incredible, manifesto, who, needs, either, denote, assign, following, declarations, final, declaration, declaring, there, still, good, reasons, blindly, bundling, massive, slow, down, loads, prevent, caching, instance, increases, overall, takes, won, able, inject, changes, preview, whole, reloaded, judiciously, pass, assumes, limitations, scss, excellent, emails, line, cannot, link, practical, examples, written, allows, run, normally, afterwards, delete, replace, works, before, img, src, data, myimage, encode, targeting, how, follows, sequence, resolve, meant, others, filename, helps, recognize, statements, otherfile, thirdfile, resolved, somesubfolder, begins, slash, evaluated, exclude, automatically, looks, replaces, entire, recursively, chain, somefileatrelativepath, no_spaces_at_beginning_or_end, txt, prefer, quotes, spaces, totally, except, adds, two, compiles, ideal, static, sites, faq, upgrading, read, mode, coda, sublime, atom, nova, editor, scripting, team, workflows, adding, environment, advanced, eslint, checkers, jeet, nib, susy, zurb, foundation, bitters, bourbon, bootstrap, tailwind, gif, svg, jpeg, webp, optimizers, json, markdown, typescript, coffeescript, javascript, bless, lightningcss, cache, buster, rollup, bundler, terser, babel, transpiler, npm, purgecss, autoprefixer, license, recovery, troubleshooting, git, target, build, defaults, new, projects, second, action, options, sync, live, reload, first, close, view, buy, updates, about, help, videos, features,

Text of the page (random words):
codekit languages kit features videos help about updates menu buy now languages kit view topics close topics first steps getting started live reload browsers browser sync set language options set output paths action second steps defaults for new projects build your project set target browsers stuff to know codekit git troubleshooting license recovery postcss tools autoprefixer purgecss custom postcss plugins other tools npm babel js transpiler terser js minifier rollup js bundler cache buster html minifier lightningcss bless languages sass less stylus javascript coffeescript typescript pug haml slim kit markdown json image optimizers webp png jpeg svg gif frameworks codekit frameworks tailwind bootstrap bourbon bitters zurb foundation susy nib jeet syntax checkers eslint advanced hooks environment variables adding custom languages team workflows scripting codekit editor plugins nova atom sublime text coda 2 more read only mode upgrading from 2 0 faq what is kit a kit file is just html with special comments kit adds two things to html imports and variables codekit compiles kit files into html so kit is ideal for static sites imports you may import any file of any type into a kit file the syntax is just like css import somefile kit import file html the syntax is flexible you may use include instead of import if you prefer quotes and spaces are totally optional except for the space after the import statement all of these are valid include somefile kit import somefileatrelativepath html include no_spaces_at_beginning_or_end txt when compiling codekit replaces this special comment with the entire text of the file you re importing if the import is also a kit file codekit will compile it recursively this way you can chain multiple files together file extension the extension is optional if you exclude it codekit will automatically add kit when it looks for the file an extension is required to import other file types such as html root relative imports if the import path begins with a slash codekit will look for the file relative to the project s root folder otherwise the path is evaluated relative to the kit file that contains the import statement resolved from the project s root folder import somesubfolder somefile multiple imports you may import more than one file at a time by using a comma separated list import somefile otherfile html thirdfile kit the partial convention kit adopts the partial convention from sass if a file is only meant to be imported into others add a leading underscore to the filename this helps you recognize import only files in the finder you are not required to include the underscore in import statements example suppose a file named master kit contains this special comment include somefile codekit follows this sequence to resolve the import look for somefile kit in the same folder as master kit if that fails look for _somefile kit in the same folder if that fails look for somefile kit in all codekit framework folders if that fails look for _somefile kit in all codekit framework folders base64 imports if you write import base64 codekit will base64 encode the content of the file you re targeting here s an example of how to use it img src data image png base64 import base64 myimage png compiling imports if you want codekit to compile a file before importing it write compile compile somefile pug codekit will compile somefile pug then replace the special comment with the compiled output this works with any type of file including custom types you may have defined in codekit details somefile pug is compiled and its output is written to disk this allows any hooks that you may have defined to run on the output just as they normally would afterwards codekit will delete the output file from disk practical examples an excellent time to use this feature is when you re building html emails and must in line css because you cannot link to an external stylesheet style compile stylesheet scss style limitations you may not pass a comma separated list to a compile statement a file extension is required if it s missing codekit assumes kit use judiciously each compile statement that you add increases the overall time it takes to compile the kit file if you use this statement to compile a stylesheet file sass less or stylus codekit won t be able to inject changes into the browser preview instead the whole page will be reloaded there are still good reasons to use external css and js files blindly bundling everything into one massive html file may slow down page loads or prevent caching for instance variables declaring a variable in kit is simple width 40px myvar we finish each other s sandwiches at any point after the declaration we can use these variables like this body p myvar p div style width width stuff div body and the final output becomes body p we finish each other s sandwiches p div style width 40px stuff div body flexible syntax you can use either or to denote a variable name you can use equals signs colons or just a space to assign a value all of the following are valid variable declarations myvar this text is amazing var2 some other incredible text width 40px manifesto who needs colons and equals signs all variables are strings all kit variables are simple strings this means you can not do things like add variables together etc if you need that capability it s time to step up to php jade haml or slim also everything after the variable name is considered part of the variable value if you wrap your string in quotation marks the quotation marks will appear when you use the variable leading and trailing whitespace in the variable value however is ignored one variable per comment you may only declare or use a single variable per special comment attempting to declare or use multiple variables in a single comment will result in undefined behavior nil variables you may set a variable s value to nothing using the same flexible syntax and the nil keyword myvar nil myvar nil a variable that is set to nil becomes essentially a no op nothing will be substituted for it in the html output optionals kit adopts the optional syntax from swift suppose you re building a navigation menu a partial named _nav kit contains this code dl dd class myvar page 1 dd dd class othervar page 2 dd dl the after the variable name means if this variable has a value put it here otherwise if the variable is not defined just skip it you can easily use this to add active states to nav menu items here s what page1 kit would look like body myvar nav menu active import _nav kit body the compiled html for page 1 would look like this body dl dd class nav menu active page 1 dd dd class page 2 dd dl body and then page2 kit would contain body othervar nav menu active import _nav kit body and the compiled output for page 2 would look like body dl dd class page 1 dd dd class nav menu active page 2 dd dl body now just write some css that targets the nav menu active class and you re done note if you attempt to use an undefined variable without the optional operator you ll receive an error variable scope a variable can be used at any point after it is declared this extends into imported files if you declare a variable in master kit then import beta kit the variable from master will be available in beta by contrast any variables declared in beta will not be available in master getting started simply take any regular html file and rename it from html to kit you can also use kit for more than just html in fact your output file can have any extension you d like kit is really just a simple text substitution language so the input and output languages don t matter see setting output paths for details note to change the extension of an html file in the finder you must right click the file choose get info and then change the extension in the window that pops up if you try to do so in the finder window itself finder will actually rename the file to kit html common questions why does kit exist lots of people asked me to add imports for html files they don t want to use php just to do simple things like including a navigation bar on every page that s the very specific problem kit is designed to solve why didn t you just use the html extension once you add these special comments to a file that file is not really html any more you could open it in a browser and it would display but you d be missing all the included content and anything that relied on variables as such using a different file extension makes it clear that the contents of the file is more than just regular html i want loops and conditionals if you need more complex patterns it s time to step up to a more robust language kit is just simple string substitution its scope is limited by design to keep it approachable and easy plus if s and loops inside of html comments quickly get really ugly you re locking us into codekit negative the kit compiler is open source and any developer is welcome to add kit support to any product i want to be crystal clear the kit language is not an attempt to tie people to codekit it s simply the best way i know to fulfill a really common feature request i want folks to use my app because it s the best tool for the job not because they re forced to use it made in san diego ca follow the developer on twitter email support report a bug privacy policy