Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I've been working on a similar project which involved delivery of UI widgets for the development team. Some of them had built-in interactivity, written in javascript. </p> <p>We delivered each widget in a separate folder containing the following subfolders:</p> <ul> <li>Dist <ul> <li>img</li> <li>js</li> <li>css</li> </ul></li> <li>Source <ul> <li>img</li> <li>js</li> <li>css</li> </ul></li> <li>Test</li> </ul> <p>The <strong>Source folder</strong> contains usually the non-minified versions of js and css source. Also if you use SASS or LESS for your css (and you should be using it for such a huge project), the /Source/CSS folder is the place to store your uncompiled css sources. Also here, in the img folder we usually have included the PSD files we've used to design the component</p> <p>In the <strong>Dist</strong>(ribution) <strong>folder</strong> we shipped the compiled and minified css, the images used (when necessary) combined in sprites, and also the minified js code. Although you can prepare all these minified versions by yourself, it's faster if you automate the whole process with Grunt. You simply define a task that minifies js and css and creates the appropriate folder structure. All with a single press of a button (it's actually a command being executed).</p> <p>The <strong>Test folder</strong> usually includes a html page that renders the component and provides instructions on how to test its different states or interactive features. This html page should always use the css and js files from the Dist folder. It's also a good practice to include a short read.me file describing the steps required to include the component into an existing page. Last but not least, if we're speaking about responsive layouts, it's also a good practice to provide here screenshots with the widget/component rendered in mobile browsers at various resolutions (ipad/iphone/android phone).</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload