These patterns are meant to provide documentation of decisions and consistency across the City of Tampa's online properties.
Developers can contribute to the pattern library by simply including KSS comment blocks in their sass files. Sass files should be broken up to manage their complexity and size of individual sass files. A new file is not required for each new pattern, unless there is no good existing fit. Break up a sass file if it becomes too large or complex.
Style Sheet assets
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>jQuery is not included but required.
<link rel="stylesheet" href="https://www.tampa.gov/static/static/css/base.css">
- Nodejs and NPM /nodejs.org/en/download/
- Gulp installed globally
- RECOMMENDED - Windows users install https://chocolatey.org/ so you can run
choco install gulp-clior
choco install ddev
npm installto install dependencies
- then run the appropriate gulp command
Gulp.js is a task runner meant to automate much of the building and produce better production ready files.
gulpThe default task meant for developers to edit pattern library. Will generate files as well as a live reloading experience.
gulp buildDoes only the production ready build parts from the default task
gulp vendorsUpdates vendor libraries such as Bootstrap, FontAwesome and jQuery
gulp jsbuild are for small updates and run only those workflows of the main default task
KSS Documentation Template
This is example markup for documenting components in the styleguide for future developers to reference.
Markup: section cant have any empty lines.
/* Component Name KSS Documentation comment example. Here is where you describe your component maybe its features or how it should work. <p><strong>When to use:</strong> Some guidance on when to use this component.</p> <p><strong>When not to:</strong> Some guidance on when it is not the best choice.</p> <p><strong>Notes:</strong> Any further info that is useful. Such as things to watch out for or accessibility concerns</p> Markup: <h1>Example Markup</h1> Styleguide Section.ComponentName */