butterfly-framework
v0.0.2
Published
Butterfly is a modern front-end framework that combines CSS utilities, prebuilt components, and flexible JS features to make building web apps faster and easier.
Maintainers
Readme
��<�d�i�v� �a�l�i�g�n�=�"�c�e�n�t�e�r�"�>�
�
� � �<�!�-�-� �L�o�g�o� �-�-�>�
�
� � �<�i�m�g� �s�r�c�=�"�b�u�t�t�e�r�f�l�y�_�c�o�p�y�.�p�n�g�"� �a�l�t�=�"�L�o�g�o�"� �s�t�y�l�e�=�"�h�e�i�g�h�t�:� �1�3�0�p�x�;�"�>�
�
�
�
� � �<�!�-�-� �T�e�x�t� �-�-�>�
�
� � �<�h�2� �s�t�y�l�e�=�"�"�>�B�u�t�t�e�r�f�l�y�<�/�h�2�>�
�
� � �<�/�d�i�v�>�
�
�<�d�i�v� �a�l�i�g�n�=�"�c�e�n�t�e�r�"�>�
�
� � �<�i�m�g� �s�r�c�=�"�h�t�t�p�s�:�/�/�i�m�g�.�s�h�i�e�l�d�s�.�i�o�/�b�a�d�g�e�/�B�u�i�l�d�-�P�a�s�s�i�n�g�-�f�0�6�7�b�2�"�>�
�
� � � � �<�i�m�g� �s�r�c�=�"�h�t�t�p�s�:�/�/�i�m�g�.�s�h�i�e�l�d�s�.�i�o�/�g�i�t�h�u�b�/�l�a�s�t�-�c�o�m�m�i�t�/�V�t�o�m�2�1�/�b�u�t�t�e�r�f�l�y�?�c�o�l�o�r�=�f�0�6�7�b�2�"�>�
�
�<�i�m�g� �s�r�c�=�"�h�t�t�p�s�:�/�/�i�m�g�.�s�h�i�e�l�d�s�.�i�o�/�b�a�d�g�e�/�L�i�c�e�n�s�e�-�M�I�T�-�f�0�6�7�b�2�"�/�>� �<�b�r�>�
�
�<�i�m�g� �s�r�c�=�"�h�t�t�p�s�:�/�/�i�m�g�.�s�h�i�e�l�d�s�.�i�o�/�g�i�t�h�u�b�/�v�/�r�e�l�e�a�s�e�/�V�t�o�m�2�1�/�b�u�t�t�e�r�f�l�y�?�l�a�b�e�l�=�v�e�r�s�i�o�n�&�c�o�l�o�r�=�f�0�6�7�b�2�"� �/�>�
�
� � �<�i�m�g� �s�r�c�=�"�h�t�t�p�s�:�/�/�i�m�g�.�s�h�i�e�l�d�s�.�i�o�/�g�i�t�h�u�b�/�c�o�m�m�i�t�-�a�c�t�i�v�i�t�y�/�t�/�V�t�o�m�2�1�/�b�u�t�t�e�r�f�l�y�?�c�o�l�o�r�=�f�0�6�7�b�2�"�>�
�
�<�b�r�>�<�b�r�>�
�
�
�
� � �<�p� �s�t�y�l�e�=�"�f�o�n�t�-�s�i�z�e�:� �1�.�2�e�m�;� �c�o�l�o�r�:� �#�5�5�5�;�"�>�
�
� � � � �S�p�r�e�a�d� �Y�o�u�r� �W�i�n�g�s�,� �B�u�i�l�d� �F�a�s�t�e�r�
�
� � �<�/�p�>�
�
�<�/�d�i�v�>�
�
�
�
�
�
�
�
���B�u�t�t�e�r�f�l�y��� �i�s� �a� �m�o�d�e�r�n� �f�r�o�n�t�-�e�n�d� �f�r�a�m�e�w�o�r�k� �t�h�a�t� �c�o�m�b�i�n�e�s� ���C�S�S� �u�t�i�l�i�t�i�e�s�,� �p�r�e�b�u�i�l�t� �c�o�m�p�o�n�e�n�t�s�,� �a�n�d� �f�l�e�x�i�b�l�e� �J�S� �f�e�a�t�u�r�e�s��� �t�o� �m�a�k�e� �b�u�i�l�d�i�n�g� �w�e�b� �a�p�p�s� �f�a�s�t�e�r� �a�n�d� �e�a�s�i�e�r�.� �D�e�s�i�g�n�e�d� �f�o�r� �d�e�v�e�l�o�p�e�r�s� �w�h�o� �w�a�n�t� ���s�p�e�e�d�,� �s�i�m�p�l�i�c�i�t�y�,� �a�n�d� �f�u�l�l� �c�o�n�t�r�o�l���,� �B�u�t�t�e�r�f�l�y� �o�f�f�e�r�s� �b�o�t�h� �a� ���r�o�b�u�s�t� �s�t�y�l�i�n�g� �s�y�s�t�e�m��� �a�n�d� ���p�o�w�e�r�f�u�l� �J�S� �t�o�o�l�s��� �f�o�r� �d�y�n�a�m�i�c� �b�e�h�a�v�i�o�r�.�
�
�
�
�-�-�-�
�
�
�
�#�#� �=� �F�e�a�t�u�r�e�s�
�
�
�
�
�
�<�d�i�v�>�
�
�
�
�#�#�#� �C�S�S� �&� �S�t�y�l�i�n�g�
�
�-� ���U�t�i�l�i�t�i�e�s�:��� �S�p�a�c�i�n�g�,� �c�o�l�o�r�s�,� �t�y�p�o�g�r�a�p�h�y�,� �f�l�e�x�/�g�r�i�d�,� �a�n�d� �m�o�r�e�.�
�
�-� ���B�a�s�i�c� �C�o�m�p�o�n�e�n�t�s�:��� �B�u�t�t�o�n�s�,� �i�n�p�u�t�s�,� �n�a�v�b�a�r�,� �a�l�e�r�t�s�,� �r�a�n�g�e�s�,� �p�r�o�g�r�e�s�s�,� �d�r�o�p�d�o�w�n�s�,� �e�t�c�.�
�
�-� ���B�a�s�e� �S�t�y�l�e�s�:��� �D�e�f�a�u�l�t� �t�y�p�o�g�r�a�p�h�y�,� �r�e�s�e�t�s�,� �a�n�d� �r�e�s�p�o�n�s�i�v�e� �d�e�f�a�u�l�t�s�.�
�
�
�
�#�#�#� �J�a�v�a�S�c�r�i�p�t� �F�e�a�t�u�r�e�s�
�
�-� ���C�u�s�t�o�m� �A�t�t�r�i�b�u�t�e�s�:��� �E�x�t�e�n�d� �H�T�M�L� �e�l�e�m�e�n�t�s� �w�i�t�h� �s�p�e�c�i�a�l� �b�e�h�a�v�i�o�r�.�
�
�-� ���E�v�e�n�t�s�:��� �E�a�s�i�l�y� �a�t�t�a�c�h� �a�n�d� �h�a�n�d�l�e� �c�u�s�t�o�m� �e�v�e�n�t�s�.�
�
�-� ���C�u�s�t�o�m� �F�e�t�c�h�:��� �S�i�m�p�l�i�f�y� �A�J�A�X� �c�a�l�l�s� �w�i�t�h� �b�u�i�l�t�-�i�n� �u�t�i�l�i�t�i�e�s�.�
�
�-� ���M�a�c�r�o�s�:��� ��f�o�r��,� ��i�f��,� ��e�l�s�e��,� ��c�o�n�t�i�n�u�e��,� ��b�r�e�a�k�� �a�n�d� �m�o�r�e� �f�o�r� �d�y�n�a�m�i�c� �r�e�n�d�e�r�i�n�g�.�
�
�-� ���C�u�s�t�o�m� �T�a�g�s�:��� �B�u�i�l�d� �r�e�u�s�a�b�l�e� �H�T�M�L�-�l�i�k�e� �c�o�m�p�o�n�e�n�t�s�.�
�
�-� ���A�n�i�m�a�t�i�o�n�s�:��� �L�i�g�h�t�w�e�i�g�h�t� �J�S� �a�n�i�m�a�t�i�o�n�s� �f�o�r� �i�n�t�e�r�a�c�t�i�v�i�t�y�.�
�
�
�
�#�#�#� �B�u�t�t�e�r�f�l�y� �M�a�n�i�p�u�l�a�t�o�r�s�
�
��M�a�n�i�p�u�l�a�t�o�r�s� �(��@�� �t�a�g�s�)� �l�e�t� �y�o�u� �d�e�c�l�a�r�a�t�i�v�e�l�y� �h�a�n�d�l�e� �e�v�e�n�t�s�,� �t�i�m�e�r�s�,� �v�a�l�i�d�a�t�i�o�n�s�,� �D�O�M� �c�h�a�n�g�e�s�,� �a�n�d� �i�n�t�e�r�a�c�t�i�v�e� �b�e�h�a�v�i�o�r�s� �d�i�r�e�c�t�l�y� �i�n� �H�T�M�L� � n�o� �e�x�t�r�a� �J�a�v�a�S�c�r�i�p�t� �r�e�q�u�i�r�e�d�.��
�
�
�
�|� �M�a�n�i�p�u�l�a�t�o�r� �|� �D�e�s�c�r�i�p�t�i�o�n� �|� �E�x�a�m�p�l�e� �|�
�
�|�-�-�-�-�-�-�-�-�-�-�-�-�|�-�-�-�-�-�-�-�-�-�-�-�-�-�|�-�-�-�-�-�-�-�-�-�|�
�
�|� ��@�c�l�i�c�k�� �|� �T�r�i�g�g�e�r� �f�u�n�c�t�i�o�n� �o�n� �c�l�i�c�k� �|� ��<�b�u�t�t�o�n� �@�c�l�i�c�k�=�"�h�a�n�d�l�e�C�l�i�c�k�(�)�"�>�C�l�i�c�k� �M�e�<�/�b�u�t�t�o�n�>�� �|�
�
�|� ��@�d�b�c�l�i�c�k�� �|� �T�r�i�g�g�e�r� �f�u�n�c�t�i�o�n� �o�n� �d�o�u�b�l�e� �c�l�i�c�k� �|� ��<�d�i�v� �@�d�b�c�l�i�c�k�=�"�d�o�u�b�l�e�T�a�p�(�)�"�>�D�o�u�b�l�e� �C�l�i�c�k�<�/�d�i�v�>�� �|�
�
�|� ��@�m�-�d�o�w�n�� �|� �M�o�u�s�e� �d�o�w�n� �e�v�e�n�t� �|� ��<�d�i�v� �@�m�-�d�o�w�n�=�"�s�t�a�r�t�D�r�a�g�(�)�"�>�D�r�a�g�<�/�d�i�v�>�� �|�
�
�|� ��@�m�-�m�o�v�e�� �|� �M�o�u�s�e� �m�o�v�e� �e�v�e�n�t� �|� ��<�d�i�v� �@�m�-�m�o�v�e�=�"�t�r�a�c�k�M�o�u�s�e�(�)�"�>�<�/�d�i�v�>�� �|�
�
�|� ��@�m�-�o�v�e�r�� �|� �M�o�u�s�e� �o�v�e�r� �|� ��<�d�i�v� �@�m�-�o�v�e�r�=�"�h�o�v�e�r�E�f�f�e�c�t�(�)�"�>�H�o�v�e�r�<�/�d�i�v�>�� �|�
�
�|� ��@�m�-�u�p�� �|� �M�o�u�s�e� �u�p� �|� ��<�d�i�v� �@�m�-�u�p�=�"�s�t�o�p�D�r�a�g�(�)�"�>�<�/�d�i�v�>�� �|�
�
�|� ��@�m�-�o�u�t�� �|� �M�o�u�s�e� �o�u�t� �|� ��<�d�i�v� �@�m�-�o�u�t�=�"�h�o�v�e�r�L�e�a�v�e�(�)�"�>�<�/�d�i�v�>�� �|�
�
�|� ��@�m�-�w�h�e�e�l�� �|� �M�o�u�s�e� �w�h�e�e�l� �s�c�r�o�l�l� �|� ��<�d�i�v� �@�m�-�w�h�e�e�l�=�"�z�o�o�m�(�e�v�e�n�t�)�"�>�<�/�d�i�v�>�� �|�
�
�|� ��@�s�c�r�o�l�l�� �|� �S�c�r�o�l�l� �e�v�e�n�t� �|� ��<�d�i�v� �@�s�c�r�o�l�l�=�"�o�n�S�c�r�o�l�l�(�)�"�>�<�/�d�i�v�>�� �|�
�
�|� ��@�p�a�s�t�e�� �|� �P�a�s�t�e� �e�v�e�n�t� �|� ��<�i�n�p�u�t� �@�p�a�s�t�e�=�"�h�a�n�d�l�e�P�a�s�t�e�(�)�"�>�� �|�
�
�|� ��@�c�o�p�y�� �|� �C�o�p�y� �e�v�e�n�t� �|� ��<�i�n�p�u�t� �@�c�o�p�y�=�"�h�a�n�d�l�e�C�o�p�y�(�)�"�>�� �|�
�
�|� ��@�k�-�p�r�e�s�s�� �|� �K�e�y� �p�r�e�s�s� �e�v�e�n�t� �|� ��<�i�n�p�u�t� �@�k�-�p�r�e�s�s�=�"�k�e�y�P�r�e�s�s�e�d�(�)�"�>�� �|�
�
�|� ��@�k�-�d�o�w�n�� �|� �K�e�y� �d�o�w�n� �e�v�e�n�t� �|� ��<�i�n�p�u�t� �@�k�-�d�o�w�n�=�"�k�e�y�D�o�w�n�(�)�"�>�� �|�
�
�|� ��@�k�-�u�p�� �|� �K�e�y� �u�p� �e�v�e�n�t� �|� ��<�i�n�p�u�t� �@�k�-�u�p�=�"�k�e�y�U�p�(�)�"�>�� �|�
�
�|� ��@�l�o�a�d�� �|� �W�i�n�d�o�w�/�d�o�c�u�m�e�n�t� �l�o�a�d� �|� ��<�b�o�d�y� �@�l�o�a�d�=�"�i�n�i�t�(�)�"�>�� �|�
�
�|� ��@�c�h�a�n�g�e�� �|� �C�h�a�n�g�e� �e�v�e�n�t� �|� ��<�i�n�p�u�t� �@�c�h�a�n�g�e�=�"�v�a�l�u�e�C�h�a�n�g�e�d�(�)�"�>�� �|�
�
�|� ��@�r�e�s�i�z�e�� �|� �R�e�s�i�z�e� �b�o�d�y�/�d�o�c�u�m�e�n�t� �|� ��<�d�i�v� �@�r�e�s�i�z�e�=�"�r�e�s�i�z�e�H�a�n�d�l�e�r�(�)�"�>�� �|�
�
�|� ��@�b�l�u�r�� �|� �B�l�u�r� �e�v�e�n�t� �|� ��<�i�n�p�u�t� �@�b�l�u�r�=�"�o�n�B�l�u�r�(�)�"�>�� �|�
�
�|� ��@�s�u�b�m�i�t�� �|� �F�o�r�m� �s�u�b�m�i�t� �|� ��<�f�o�r�m� �@�s�u�b�m�i�t�=�"�h�a�n�d�l�e�S�u�b�m�i�t�(�)�"�>�� �|�
�
�|� ��@�s�e�a�r�c�h�� �|� �S�e�a�r�c�h� �i�n�p�u�t� �|� ��<�i�n�p�u�t� �t�y�p�e�=�"�s�e�a�r�c�h�"� �@�s�e�a�r�c�h�=�"�o�n�S�e�a�r�c�h�(�)�"�>�� �|�
�
�|� ��@�i�n�p�u�t�� �|� �I�n�p�u�t� �c�h�a�n�g�e� �|� ��<�i�n�p�u�t� �@�i�n�p�u�t�=�"�u�p�d�a�t�e�V�a�l�u�e�(�)�"�>�� �|�
�
�|� ��@�s�e�l�e�c�t�� �|� �S�e�l�e�c�t� �e�v�e�n�t� �|� ��<�i�n�p�u�t� �@�s�e�l�e�c�t�=�"�o�n�S�e�l�e�c�t�(�)�"�>�� �|�
�
�|� ��@�r�e�s�e�t�� �|� �F�o�r�m� �r�e�s�e�t� �|� ��<�f�o�r�m� �@�r�e�s�e�t�=�"�o�n�R�e�s�e�t�(�)�"�>�� �|�
�
�|� ��@�f�o�c�u�s�� �|� �F�o�c�u�s� �e�v�e�n�t� �|� ��<�i�n�p�u�t� �@�f�o�c�u�s�=�"�o�n�F�o�c�u�s�(�)�"�>�� �|�
�
�|� ��@�d�r�a�g�� �|� �D�r�a�g� �e�v�e�n�t� �|� ��<�d�i�v� �@�d�r�a�g�=�"�d�r�a�g�g�i�n�g�(�)�"�>�� �|�
�
�|� ��@�d�r�a�g�-�s�t�a�r�t�� �|� �D�r�a�g� �s�t�a�r�t� �|� ��<�d�i�v� �@�d�r�a�g�-�s�t�a�r�t�=�"�s�t�a�r�t�D�r�a�g�(�)�"�>�� �|�
�
�|� ��@�d�r�a�g�-�e�n�d�� �|� �D�r�a�g� �e�n�d� �|� ��<�d�i�v� �@�d�r�a�g�-�e�n�d�=�"�e�n�d�D�r�a�g�(�)�"�>�� �|�
�
�|� ��@�d�r�a�g�-�o�v�e�r�� �|� �D�r�a�g� �o�v�e�r� �|� ��<�d�i�v� �@�d�r�a�g�-�o�v�e�r�=�"�a�l�l�o�w�D�r�o�p�(�)�"�>�� �|�
�
�|� ��@�d�r�a�g�-�e�n�t�e�r�� �|� �D�r�a�g� �e�n�t�e�r� �|� ��<�d�i�v� �@�d�r�a�g�-�e�n�t�e�r�=�"�o�n�E�n�t�e�r�(�)�"�>�� �|�
�
�|� ��@�d�r�a�g�-�l�e�a�v�e�� �|� �D�r�a�g� �l�e�a�v�e� �|� ��<�d�i�v� �@�d�r�a�g�-�l�e�a�v�e�=�"�o�n�L�e�a�v�e�(�)�"�>�� �|�
�
�|� ��@�i�n�t�e�r�l�u�d�e�� �|� �R�u�n� �f�u�n�c�t�i�o�n� �r�e�p�e�a�t�e�d�l�y� �w�i�t�h� �i�n�t�e�r�v�a�l� �|� ��<�d�i�v� �@�i�n�t�e�r�l�u�d�e�=�"�t�i�c�k�(�)�"� �@�t�i�m�e�=�"�1�0�0�0�"�>�<�/�d�i�v�>�� �|�
�
�|� ��@�h�a�l�t�� �|� �R�u�n� �f�u�n�c�t�i�o�n� �a�f�t�e�r� �d�e�l�a�y� �|� ��<�d�i�v� �@�h�a�l�t�=�"�d�o�O�n�c�e�(�)�"� �@�t�i�m�e�=�"�2�0�0�0�"�>�<�/�d�i�v�>�� �|�
�
�|� ��@�c�o�u�n�t�d�o�w�n�� �|� �C�o�u�n�t�d�o�w�n� �t�i�m�e�r� �w�i�t�h� �c�a�l�l�b�a�c�k� �|� ��<�s�p�a�n� �@�c�o�u�n�t�d�o�w�n�=�"�d�o�n�e�(�)�"� �@�t�i�c�k�=�"�5�0�0�0�"�>�(�(�c�o�u�n�t�d�o�w�n�)�)�<�/�s�p�a�n�>�� �|�
�
�|� ��@�i�n�p�u�t�-�m�i�n�� �|� �M�i�n�i�m�u�m� �i�n�p�u�t� �l�e�n�g�t�h� �|� ��<�i�n�p�u�t� �@�i�n�p�u�t�-�m�i�n�=�"�3�"�>�� �|�
�
�|� ��@�i�n�p�u�t�-�m�a�x�� �|� �M�a�x�i�m�u�m� �i�n�p�u�t� �l�e�n�g�t�h� �|� ��<�i�n�p�u�t� �@�i�n�p�u�t�-�m�a�x�=�"�1�0�"�>�� �|�
�
�|� ��@�r�e�g�e�x�� �|� �V�a�l�i�d�a�t�e� �i�n�p�u�t� �w�i�t�h� �r�e�g�e�x� �|� ��<�i�n�p�u�t� �@�r�e�g�e�x�=�"�e�m�a�i�l�"�>�� �|�
�
�|� ��@�t�o�g�g�l�e�� �|� �T�o�g�g�l�e� �c�l�a�s�s�(�e�s�)� �o�n� �c�l�i�c�k� �|� ��<�b�u�t�t�o�n� �@�t�o�g�g�l�e�=�"�a�c�t�i�v�e�"� �@�t�a�r�g�e�t�=�"�#�p�a�n�e�l�"�>�T�o�g�g�l�e�<�/�b�u�t�t�o�n�>�� �|�
�
�|� ��@�s�h�o�w�� �|� �M�a�k�e� �e�l�e�m�e�n�t� �v�i�s�i�b�l�e� �|� ��<�d�i�v� �@�s�h�o�w�>�V�i�s�i�b�l�e�<�/�d�i�v�>�� �|�
�
�|� ��@�h�i�d�e�� �|� �H�i�d�e� �e�l�e�m�e�n�t� �|� ��<�d�i�v� �@�h�i�d�e�>�H�i�d�d�e�n�<�/�d�i�v�>�� �|�
�
�|� ��@�s�r�c�� �|� �S�e�t� ��s�r�c�� �a�t�t�r�i�b�u�t�e� �|� ��<�i�m�g� �@�s�r�c�=�"�i�m�a�g�e�.�j�p�g�"�>�� �|�
�
�|� ��@�f�a�l�l�b�a�c�k�� �|� �S�e�t� ��a�l�t�� �t�e�x�t� �|� ��<�i�m�g� �@�f�a�l�l�b�a�c�k�=�"�N�o� �i�m�a�g�e�"�>�� �|�
�
�|� ��@�l�i�n�k�� �|� �S�e�t� ��h�r�e�f�� �|� ��<�a� �@�l�i�n�k�=�"�h�t�t�p�s�:�/�/�e�x�a�m�p�l�e�.�c�o�m�"�>�G�o�<�/�a�>�� �|�
�
�|� ��@�t�e�x�t�� �|� �S�e�t� �i�n�n�e�r�H�T�M�L� �|� ��<�d�i�v� �@�t�e�x�t�=�"�H�e�l�l�o�"�>�<�/�d�i�v�>�� �|�
�
�|� ��@�p�l�a�c�e�h�o�l�d�e�r�� �|� �S�e�t� �i�n�p�u�t� �p�l�a�c�e�h�o�l�d�e�r� �|� ��<�i�n�p�u�t� �@�p�l�a�c�e�h�o�l�d�e�r�=�"�E�n�t�e�r� �n�a�m�e�"�>�� �|�
�
�|� ��@�c�o�m�p�u�t�e�� �|� �E�v�a�l�u�a�t�e� �e�x�p�r�e�s�s�i�o�n� �a�n�d� �i�n�s�e�r�t� �r�e�s�u�l�t� �|� ��<�s�p�a�n� �@�c�o�m�p�u�t�e�=�"�M�a�t�h�.�r�a�n�d�o�m�(�)�*�1�0�"�>�<�/�s�p�a�n�>�� �|�
�
�|� ��@�c�l�a�s�s�� �|� �S�e�t� �c�l�a�s�s�N�a�m�e� �|� ��<�d�i�v� �@�c�l�a�s�s�=�"�c�a�r�d�"�>�<�/�d�i�v�>�� �|�
�
�|� ��@�i�d�� �|� �S�e�t� �i�d� �|� ��<�d�i�v� �@�i�d�=�"�u�n�i�q�u�e�"�>�<�/�d�i�v�>�� �|�
�
�|� ��@�c�l�i�p�� �|� �C�o�p�y� �t�e�x�t� �t�o� �c�l�i�p�b�o�a�r�d� �|� ��<�b�u�t�t�o�n� �@�c�l�i�p�=�"�t�h�i�s�.�t�e�x�t�C�o�n�t�e�n�t�"�>�C�o�p�y�<�/�b�u�t�t�o�n�>�� �|�
�
�|� ��@�p�r�o�g�r�e�s�s�-�m�i�n�� �|� �S�e�t� �p�r�o�g�r�e�s�s� �m�i�n� �|� ��<�p�r�o�g�r�e�s�s� �@�p�r�o�g�r�e�s�s�-�m�i�n�=�"�0�"� �@�p�r�o�g�r�e�s�s�-�m�a�x�=�"�1�0�0�"� �@�p�r�o�g�r�e�s�s�-�v�a�l�=�"�2�5�"�>�<�/�p�r�o�g�r�e�s�s�>�� �|�
�
�|� ��@�p�r�o�g�r�e�s�s�-�m�a�x�� �|� �S�e�t� �p�r�o�g�r�e�s�s� �m�a�x� �|� ��<�p�r�o�g�r�e�s�s� �@�p�r�o�g�r�e�s�s�-�m�i�n�=�"�0�"� �@�p�r�o�g�r�e�s�s�-�m�a�x�=�"�2�0�0�"� �@�p�r�o�g�r�e�s�s�-�v�a�l�=�"�5�0�"�>�<�/�p�r�o�g�r�e�s�s�>�� �|�
�
�|� ��@�p�r�o�g�r�e�s�s�-�v�a�l�� �|� �S�e�t� �p�r�o�g�r�e�s�s� �v�a�l�u�e� �|� ��<�p�r�o�g�r�e�s�s� �@�p�r�o�g�r�e�s�s�-�m�i�n�=�"�0�"� �@�p�r�o�g�r�e�s�s�-�m�a�x�=�"�1�0�0�"� �@�p�r�o�g�r�e�s�s�-�v�a�l�=�"�7�5�"�>�<�/�p�r�o�g�r�e�s�s�>�� �|�
�
�|� ��@�p�r�o�g�r�e�s�s�-�c�o�l�o�r�� �|� �S�e�t� �p�r�o�g�r�e�s�s� �b�a�r� �c�o�l�o�r� �|� ��<�p�r�o�g�r�e�s�s� �@�p�r�o�g�r�e�s�s�-�m�i�n�=�"�0�"� �@�p�r�o�g�r�e�s�s�-�m�a�x�=�"�1�0�0�"� �@�p�r�o�g�r�e�s�s�-�v�a�l�=�"�5�0�"� �@�p�r�o�g�r�e�s�s�-�c�o�l�o�r�=�"�#�f�0�6�7�b�2�"�>�<�/�p�r�o�g�r�e�s�s�>�� �|�
�
�|� ��@�p�r�o�g�r�e�s�s�-�b�g�� �|� �S�e�t� �p�r�o�g�r�e�s�s� �b�a�c�k�g�r�o�u�n�d� �|� ��<�p�r�o�g�r�e�s�s� �@�p�r�o�g�r�e�s�s�-�m�i�n�=�"�0�"� �@�p�r�o�g�r�e�s�s�-�m�a�x�=�"�1�0�0�"� �@�p�r�o�g�r�e�s�s�-�v�a�l�=�"�5�0�"� �@�p�r�o�g�r�e�s�s�-�b�g�=�"�#�e�e�e�"�>�<�/�p�r�o�g�r�e�s�s�>�� �|�
�
�|� ��@�p�r�o�g�r�e�s�s�-�h�e�i�g�h�t�� �|� �S�e�t� �p�r�o�g�r�e�s�s� �h�e�i�g�h�t� �|� ��<�p�r�o�g�r�e�s�s� �@�p�r�o�g�r�e�s�s�-�m�i�n�=�"�0�"� �@�p�r�o�g�r�e�s�s�-�m�a�x�=�"�1�0�0�"� �@�p�r�o�g�r�e�s�s�-�v�a�l�=�"�5�0�"� �@�p�r�o�g�r�e�s�s�-�h�e�i�g�h�t�=�"�2�0�p�x�"�>�<�/�p�r�o�g�r�e�s�s�>�� �|�
�
�|� ��@�r�a�n�g�e�-�c�o�l�o�r�� �|� �S�e�t� �r�a�n�g�e� �i�n�p�u�t� �c�o�l�o�r� �|� ��<�i�n�p�u�t� �t�y�p�e�=�"�r�a�n�g�e�"� �@�r�a�n�g�e�-�c�o�l�o�r�=�"�#�f�0�6�7�b�2�"�>�� �|�
�
�|� ��@�r�a�n�g�e�-�b�g�� �|� �S�e�t� �r�a�n�g�e� �i�n�p�u�t� �b�a�c�k�g�r�o�u�n�d� �|� ��<�i�n�p�u�t� �t�y�p�e�=�"�r�a�n�g�e�"� �@�r�a�n�g�e�-�b�g�=�"�#�e�e�e�"�>�� �|�
�
�|� ��@�t�r�i�m�� �|� �T�r�i�m� �w�h�i�t�e�s�p�a�c�e� �o�n� �i�n�p�u�t� �|� ��<�i�n�p�u�t� �@�t�r�i�m�>�� �|�
�
�|� ��@�s�a�n�i�t�i�z�e�� �|� �R�e�m�o�v�e� �u�n�s�a�f�e� �c�h�a�r�a�c�t�e�r�s� �|� ��<�i�n�p�u�t� �@�s�a�n�i�t�i�z�e�=�"�s�o�f�t�"�>�� �|�
�
�|� ��@�l�o�g�� �|� �L�o�g� �v�a�l�u�e�/�c�o�n�t�e�n�t� �t�o� �c�o�n�s�o�l�e� �|� ��<�d�i�v� �@�l�o�g�=�"�t�h�i�s�"�>�.�.�.�<�/�d�i�v�>�� �|�
�
�
�
�#�#�#� �D�e�v�e�l�o�p�e�r�-�F�r�i�e�n�d�l�y�
�
�-� �L�i�g�h�t�w�e�i�g�h�t� �a�n�d� �f�a�s�t�
�
�-� �F�u�l�l�y� �m�o�d�u�l�a�r�:� �u�s�e� �o�n�l�y� �w�h�a�t� �y�o�u� �n�e�e�d�
�
�-� �C�o�m�p�a�t�i�b�l�e� �w�i�t�h� �p�l�a�i�n� �H�T�M�L� �o�r� �o�t�h�e�r� �f�r�a�m�e�w�o�r�k�s�
�
�
�
�-�-�-�
�
�
�
�
�
�
�
�#�#� �=��� �I�n�s�t�a�l�l�a�t�i�o�n�
�
�
�
�A�d�d� �t�h�e� �f�o�l�l�o�w�i�n�g� �l�i�n�k�s� �t�o� �y�o�u�r� �H�T�M�L� ��<�h�e�a�d�>�� �t�o� �i�n�c�l�u�d�e� �B�u�t�t�e�r�f�l�y� �v�i�a� �C�D�N�:�
�
�
�
����h�t�m�l�
�
�<�!�-�-�C�S�S� �&� �J�S�-�-�>�
�
�<�l�i�n�k� �r�e�l�=�"�s�t�y�l�e�s�h�e�e�t�"� �h�r�e�f�=�"�h�t�t�p�s�:�/�/�c�d�n�.�j�s�d�e�l�i�v�r�.�n�e�t�/�g�h�/�V�T�o�m�2�1�/�b�u�t�t�e�r�f�l�y�@�m�a�s�t�e�r�/�d�i�s�t�/�s�t�y�l�e�s�/�b�u�n�d�l�e�.�m�i�n�.�c�s�s�"�>�
�
�<�s�c�r�i�p�t� �t�y�p�e�=�"�m�o�d�u�l�e�"� �s�r�c�=�"�h�t�t�p�s�:�/�/�c�d�n�.�j�s�d�e�l�i�v�r�.�n�e�t�/�g�h�/�V�T�o�m�2�1�/�b�u�t�t�e�r�f�l�y�@�m�a�s�t�e�r�/�d�i�s�t�/�j�s�/�i�n�d�e�x�.�m�i�n�.�j�s�"�>�<�/�s�c�r�i�p�t�>�
�
����
�
�
�
�A�l�t�e�r�n�a�t�i�v�e�l�y�,� �y�o�u� �c�a�n� �u�s�e� �n�p�m�:�
�
�
�
����b�a�s�h�
�
�n�p�m� �i� �b�u�t�t�e�r�f�l�y�-�f�r�a�m�e�w�o�r�k�
�
����
�
�
�
�o�r� �y�a�r�n�:�
�
�
�
����b�a�s�h�
�
�y�a�r�n� �a�d�d� �b�u�t�t�e�r�f�l�y�-�f�r�a�m�e�w�o�r�k�
�
����
�
�
�
�o�r� �e�v�e�n� �b�o�w�e�r�:�
�
�
�
����b�a�s�h�
�
�b�o�w�e�r� �i�n�s�t�a�l�l� �h�t�t�p�s�:�/�/�g�i�t�h�u�b�.�c�o�m�/�V�T�o�m�2�1�/�b�u�t�t�e�r�f�l�y�.�g�i�t�
�
����
�
�
�
����b�a�s�h�
�
�b�o�w�e�r� �i�n�s�t�a�l�l� �h�t�t�p�s�:�/�/�g�i�t�h�u�b�.�c�o�m�/�V�T�o�m�2�1�/�b�u�t�t�e�r�f�l�y�.�g�i�t�#�0�.�0�.�2�
�
����
�
�
�
�
�
�#�#� �<�� �B�r�o�w�s�e�r� �S�u�p�p�o�r�t�
�
�
�
�B�u�t�t�e�r�f�l�y� �i�s� �d�e�s�i�g�n�e�d� �t�o� �w�o�r�k� �o�n� �a�l�l� �m�o�d�e�r�n� �b�r�o�w�s�e�r�s�.� �I�t� �u�s�e�s� �b�u�i�l�t�-�i�n� �u�t�i�l�i�t�i�e�s� �a�n�d� �s�t�a�n�d�a�r�d� �C�S�S� �f�e�a�t�u�r�e�s� �t�o� �e�n�s�u�r�e� �b�r�o�a�d� �c�o�m�p�a�t�i�b�i�l�i�t�y�.� � �
�
�
�
�#�#�#� �F�u�l�l�y� �S�u�p�p�o�r�t�e�d�:�
�
�-� ���C�h�r�o�m�e��� �(�l�a�t�e�s�t�)�
�
�-� ���E�d�g�e��� �(�l�a�t�e�s�t�)�
�
�-� ���F�i�r�e�f�o�x��� �(�l�a�t�e�s�t�)�
�
�-� ���O�p�e�r�a��� �(�l�a�t�e�s�t�)�
�
�-� ���S�a�f�a�r�i��� �(�l�a�t�e�s�t�)�
�
�
�
�#�#�#� �P�a�r�t�i�a�l� �S�u�p�p�o�r�t�:�
�
�-� ���I�n�t�e�r�n�e�t� �E�x�p�l�o�r�e�r� �1�1�+��� � �s�o�m�e� �a�d�v�a�n�c�e�d� �C�S�S� �u�t�i�l�i�t�i�e�s� �a�n�d� �J�S� �f�e�a�t�u�r�e�s� �m�a�y� �n�o�t� �w�o�r�k� �f�u�l�l�y�.� � �
�
�
�
�>�F�o�r� �t�h�e� �b�e�s�t� �e�x�p�e�r�i�e�n�c�e�,� �w�e� �r�e�c�o�m�m�e�n�d� �u�s�i�n�g� �m�o�d�e�r�n� �b�r�o�w�s�e�r�s� �t�h�a�t� �s�u�p�p�o�r�t� �C�S�S� �G�r�i�d�,� �F�l�e�x�b�o�x�,� �a�n�d� �E�S�6�+� �J�a�v�a�S�c�r�i�p�t� �f�e�a�t�u�r�e�s�.�
�
�
�
�<�h�r� �s�t�y�l�e�=�"�m�a�r�g�i�n�:� �4�0�p�x� �0�;� �b�o�r�d�e�r�:� �1�p�x� �s�o�l�i�d� �#�e�e�e�;�"�>�
�
�
�
�<�d�i�v� �a�l�i�g�n�=�"�c�e�n�t�e�r�"� �s�t�y�l�e�=�"�f�o�n�t�-�s�i�z�e�:� �0�.�9�e�m�;� �c�o�l�o�r�:� �#�5�5�5�;� �l�i�n�e�-�h�e�i�g�h�t�:� �1�.�6�;�"�>�
�
� � �<�!�-�-� �C�o�p�y�r�i�g�h�t� �-�-�>�
�
� � �<�p�>�
�
� � � � ��� �2�0�2�6� �B�u�t�t�e�r�f�l�y� � �
�
� � � � �<�a� �h�r�e�f�=�"�L�I�C�E�N�S�E�"� �s�t�y�l�e�=�"�c�o�l�o�r�:� �#�f�0�6�7�b�2�;� �t�e�x�t�-�d�e�c�o�r�a�t�i�o�n�:� �n�o�n�e�;�"�>�M�I�T� �L�i�c�e�n�s�e�<�/�a�>� �|� �
�
� � � � �<�a� �h�r�e�f�=�"�C�O�D�E�_�O�F�_�C�O�N�D�U�C�T�.�m�d�"� �s�t�y�l�e�=�"�c�o�l�o�r�:� �#�f�0�6�7�b�2�;� �t�e�x�t�-�d�e�c�o�r�a�t�i�o�n�:� �n�o�n�e�;�"�>�C�o�d�e� �o�f� �C�o�n�d�u�c�t�<�/�a�>�
�
� � �<�/�p�>�
�
�
�
� � �<�!�-�-� �P�r�o�j�e�c�t� �L�i�n�k�s� �-�-�>�
�
� � �<�p�>�
�
� � � � �<�a� �h�r�e�f�=�"�h�t�t�p�s�:�/�/�g�i�t�h�u�b�.�c�o�m�/�V�T�o�m�2�1�/�b�u�t�t�e�r�f�l�y�"� �s�t�y�l�e�=�"�c�o�l�o�r�:� �#�f�0�6�7�b�2�;� �t�e�x�t�-�d�e�c�o�r�a�t�i�o�n�:� �n�o�n�e�;�"�>�G�i�t�H�u�b�<�/�a�>� �|�
�
� � � � �<�a� �h�r�e�f�=�"�h�t�t�p�s�:�/�/�b�u�t�t�e�r�f�l�y�f�r�a�m�e�w�o�r�k�.�c�o�m�"� �s�t�y�l�e�=�"�c�o�l�o�r�:� �#�f�0�6�7�b�2�;� �t�e�x�t�-�d�e�c�o�r�a�t�i�o�n�:� �n�o�n�e�;�"�>�W�e�b�s�i�t�e�<�/�a�>� �|�
�
� � � � �<�a� �h�r�e�f�=�"�#�d�o�c�u�m�e�n�t�a�t�i�o�n�"� �s�t�y�l�e�=�"�c�o�l�o�r�:� �#�f�0�6�7�b�2�;� �t�e�x�t�-�d�e�c�o�r�a�t�i�o�n�:� �n�o�n�e�;�"�>�D�o�c�s�<�/�a�>�
�
� � �<�/�p�>�
�
�
�
� � �<�!�-�-� �S�o�c�i�a�l� �/� �B�a�d�g�e�s� �-�-�>�
�
� � �<�p�>�
�
� � � � �<�i�m�g� �s�r�c�=�"�h�t�t�p�s�:�/�/�i�m�g�.�s�h�i�e�l�d�s�.�i�o�/�g�i�t�h�u�b�/�s�t�a�r�s�/�V�T�o�m�2�1�/�b�u�t�t�e�r�f�l�y�?�s�t�y�l�e�=�s�o�c�i�a�l�"� �a�l�t�=�"�G�i�t�H�u�b� �S�t�a�r�s�"�>�
�
� � � � �<�i�m�g� �s�r�c�=�"�h�t�t�p�s�:�/�/�i�m�g�.�s�h�i�e�l�d�s�.�i�o�/�t�w�i�t�t�e�r�/�f�o�l�l�o�w�/�B�u�t�t�e�r�f�l�y�J�S�?�s�t�y�l�e�=�s�o�c�i�a�l�"� �a�l�t�=�"�T�w�i�t�t�e�r� �F�o�l�l�o�w�"�>�
�
� � �<�/�p�>�
�
�
�
� � �<�!�-�-� �T�a�g�l�i�n�e� �/� �M�e�s�s�a�g�e� �-�-�>�
�
�
�
�
�
��B�u�i�l�d� �e�l�e�g�a�n�t�,� �l�i�g�h�t�w�e�i�g�h�t� �w�e�b� �a�p�p�s� �w�i�t�h� �B�u�t�t�e�r�f�l�y� � �S�p�r�e�a�d� �Y�o�u�r� �W�i�n�g�s�,� �B�u�i�l�d� �F�a�s�t�e�r�.��
�
�<�/�d�i�v�>�
�
�
