Getting Started

These patterns are meant to provide documentation of decisions and consistency across the City of Tampa's online properties.

Developers

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://kit.fontawesome.com/ca4203438a.js"></script>
<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.min.css">
<script src="https://www.tampa.gov/static/static/js/base.min.js"></script>

Requirements

Nodejs and NPM /nodejs.org/en/download/
Gulp installed globally
RECOMMENDED - Windows users install https://chocolatey.org/ so you can run choco install gulp-cli or choco install ddev

Getting Started

run npm i or npm install to install dependencies
then run the appropriate gulp command

Gulp Commands

Gulp.js is a task runner meant to automate much of the building and produce better production ready files.

gulp The default task meant for developers to edit pattern library. Will generate files as well as a live reloading experience.
gulp build Does only the production ready build parts from the default task
gulp vendors Updates vendor libraries such as Bootstrap, FontAwesome and jQuery
gulp css and gulp js build 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.

Notes: Your 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
*/