├── .editorconfig ├── .gitignore ├── .travis.yml ├── AUTHORS.md ├── CONTRIBUTING.md ├── Compile.app └── Contents │ ├── Info.plist │ ├── MacOS │ └── Compile │ └── Resources │ ├── AppSettings.plist │ ├── MainMenu.nib │ ├── appIcon.icns │ └── script ├── LICENSE.md ├── README.md ├── Start.app └── Contents │ ├── Info.plist │ ├── MacOS │ └── Start │ └── Resources │ ├── AppSettings.plist │ ├── MainMenu.nib │ ├── appIcon.icns │ └── script ├── index.jade ├── livereload.js └── styleguide ├── _data.json ├── assets ├── fonts │ └── Huge │ │ ├── GalaxieCopernicus-Book.eot │ │ ├── GalaxieCopernicus-Book.svg │ │ ├── GalaxieCopernicus-Book.woff │ │ ├── GalaxieCopernicus-BookItalic.eot │ │ ├── GalaxieCopernicus-BookItalic.svg │ │ ├── GalaxieCopernicus-BookItalic.woff │ │ ├── huge_agb_v5-webfont.eot │ │ ├── huge_agb_v5-webfont.svg │ │ ├── huge_agb_v5-webfont.woff │ │ └── stylesheet.css ├── images │ ├── huge-logo.svg │ ├── logo_placeholder.png │ └── template01.svg ├── scripts │ └── styleguide.js └── styles │ ├── structure.scss │ └── styleguide.scss ├── modules ├── 1_introduction │ ├── _data.json │ ├── _introduction.jade │ ├── introduction.js │ └── introduction.scss ├── 2_colors │ ├── _colors.jade │ ├── _data.json │ └── colors.scss ├── 3_typography │ ├── _data.json │ ├── _typography.jade │ └── typography.scss ├── 4_buttons │ ├── _buttons.jade │ ├── _data.json │ └── buttons.scss ├── 5_lists │ ├── _data.json │ ├── _lists.jade │ └── lists.scss ├── 6_forms │ ├── _data.json │ ├── _forms.jade │ ├── forms.scss │ └── vendor │ │ └── foundation-form.scss ├── 7_tables │ ├── _data.json │ ├── _tables.jade │ └── tables.scss └── 8_templates │ ├── _data.json │ ├── _templates.jade │ └── templates.scss ├── structure ├── .jscsrc ├── .jshintrc ├── README.md ├── _includes │ ├── _layout.jade │ └── modulesData.jade ├── _node-files │ ├── modules │ │ ├── livereloader.js │ │ ├── utils.js │ │ ├── watcher.js │ │ ├── write-date.js │ │ ├── write-to-javascript.js │ │ └── write-to-stylesheet.js │ ├── package.json │ ├── watch.js │ └── write-date-exec.js ├── _templates │ ├── _footer.jade │ ├── _header.jade │ ├── _modules.jade │ └── _sidebar.jade ├── _tests │ ├── _lint.sh │ ├── bin │ │ └── selenium-server-standalone-2.46.0.jar │ ├── mocks │ │ └── 00_testmodule │ │ │ ├── _data.json │ │ │ ├── _testmodule.jade │ │ │ ├── testmodule.js │ │ │ └── testmodule.scss │ ├── nightwatch.json │ ├── structure-end-2-end.js │ ├── structure-front-scripts.js │ ├── structure-node-dependencies.js │ ├── structure-node-integration.js │ └── structure-node-modules.js ├── images │ ├── close.svg │ ├── favicon.png │ ├── h.jpg │ ├── hamburger.svg │ ├── huge-logo.svg │ ├── icon_code.svg │ ├── icon_code_white.svg │ ├── icon_full.svg │ ├── icon_large_up.svg │ ├── icon_medium_up.svg │ ├── icon_small_up.svg │ └── logoHuge.png ├── scripts │ ├── iframe.js │ ├── styleguide.js │ └── vendor │ │ ├── jquery-1.11.1.min.js │ │ ├── prism.js │ │ └── tidy.js └── styles │ ├── _base │ ├── _general.scss │ ├── _typography.scss │ ├── _utils.scss │ └── _variables.scss │ ├── _modules │ ├── _footer.scss │ ├── _header.scss │ ├── _iframe.scss │ └── _sidebar.scss │ ├── _vendor │ ├── _foundation-grid.scss │ ├── _normalize.scss │ └── _prism.scss │ └── structure.scss └── styleguide.jade /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs 2 | # http://editorconfig.org 3 | 4 | root = true 5 | 6 | [*] 7 | charset = utf-8 8 | indent_style = space 9 | indent_size = 2 10 | end_of_line = lf 11 | insert_final_newline = true 12 | trim_trailing_whitespace = true 13 | max_line_length = 80 14 | 15 | [*.md] 16 | max_line_length = 0 17 | trim_trailing_whitespace = false 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .tmp 3 | .sass-cache 4 | .codekit-cache 5 | *.lock 6 | *.log 7 | .idea 8 | logs 9 | reports -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | env: 3 | - CXX=g++-4.8 4 | addons: 5 | apt: 6 | sources: 7 | - ubuntu-toolchain-r-test 8 | packages: 9 | - g++-4.8 10 | node_js: 11 | - 4.4.5 12 | script: 13 | - export DISPLAY=:99.0 14 | - sh -e /etc/init.d/xvfb start 15 | - sleep 5 16 | - cd styleguide/structure/_node-files 17 | - npm install tape faucet browserify nightwatch 18 | - npm install 19 | - cd ../_tests 20 | - node structure-node-dependencies.js 21 | - node structure-node-modules.js 22 | - node structure-front-scripts.js 23 | -------------------------------------------------------------------------------- /AUTHORS.md: -------------------------------------------------------------------------------- 1 | Authors 2 | 3 | Caio Vaccaro 4 | Felipe Medina 5 | João Pedro Frota 6 | Ian Bartholomew 7 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | ## 3.0 4 | We are now developing the 3rd major version of Styleguide. The only branch type allowed to serve 2.x are hotfixes and master (until we achieve 3.0). Branch develop and feature/ should relate to 3.x development. 5 | 6 | After 3.0 we will continue to release patches for 2.x, but no additional features. 7 | 8 | ## Git branching model 9 | This repo branching model is **inspired by Git Flow**. Currently we have these types of branches: 10 | - master - Latest release, stable 11 | - develop - Main development, unstable 12 | - release/ - Release archive 13 | - feature/ - Specific features development 14 | - example/ - Helpful examples 15 | - hotfix/ - Emergency fixes for latest release 16 | 17 | [Read the Git Flow reference](http://nvie.com/posts/a-successful-git-branching-model/). 18 | This repo uses [Semantic Versioning](http://semver.org/). 19 | 20 | ## Creating Modules 21 | 22 | The good news is that whatever you create in the Styleguide will be treated as a module. This way we are able to add an awesome resource for the community. 23 | 24 | Don't forget to read about ["How modules work"](http://hugeinc.github.io/styleguide/modules.html#how-they-work) and ["Module Structure"](http://hugeinc.github.io/styleguide/modules.html#modules-structure) before you move forward. 25 | 26 | ###_data.json 27 | You can define a key-value in this file that will be used in your module. 28 | 29 | Examples: 30 | 31 | ```json 32 | "items": { 33 | "people": [ 34 | { 35 | "name": "John", 36 | "age": "32" 37 | }, 38 | { 39 | "name": "Kirsten", 40 | "age": "28" 41 | } 42 | ] 43 | } 44 | ``` 45 | 46 | ### Jade 47 | You can use all the info of _data.json inside the .jade file: 48 | 49 | ```html 50 | table 51 | each folk in people 52 | tr 53 | td=folk.name 54 | td=folk.age 55 | ``` 56 | 57 | ### Javascript 58 | In case you need Javascript for your module, use the key scripts e and add the file path: 59 | 60 | ```json 61 | "scripts": ["vendor/foundation.equalizer.js", "pricing-tables.js"] 62 | ``` 63 | 64 | ## Changing Structure 65 | 66 | ### Dependencies 67 | - Node.js 68 | - Harp.js 69 | - Node Livereload 70 | - Node Watch 71 | 72 | ### Harp 73 | Harp is used for both serving files and compiling, such actions are done through the Start.app and Compile.add. The Start.app uses a Node.js file in order to configure Livereload and Harp together. 74 | 75 | ### Scripts 76 | The source of the Start.app and Compile.app are inside of each app content: Contents/Resources/script 77 | 78 | ### Node Files 79 | In the styleguide/structure/_node-files folder you will find the code that: 80 | 81 | - Start Harp 82 | - Start Livereload 83 | - Writes the current date to styleguide/_data.json file (on start and compile) 84 | - Concatenate all modules javascript code into one file in styleguide/assets/scripts/styleguide.js 85 | - Concatenate all modules stylesheet code into one file in styleguide/assets/styles/styleguide.js 86 | 87 | ### Structure CSS 88 | In the folder styleguide/structure/styles is the stylesheet of the structure (header, sidebar and basic components), without any module specific code. 89 | 90 | ### Structure Javascript 91 | In the folder styleguide/structure/scripts is the javascript of the structure (header, sidebar and basic components), without any module specific code. 92 | 93 | ### Modules Data 94 | The styleguide/structure/_includes/modulesData.jade is responsible for collecting all necessary data of all modules into one object that will be used by all structure files. 95 | 96 | ### Pull Request 97 | In order to do a Pull Request, you should first lint your code with styleguide/structure/_tests/_lint.sh (execute in the command line). Code with lint errors will not be accepted. 98 | 99 | ## Reporting Issues 100 | 101 | Please use our Github repository to report issues. All issues must have: 102 | 103 | - Your operating system (name and version) 104 | - The browser you are using (name and version) 105 | - The full copy of any error messages available 106 | - A full description of how to reproduce the issue you have found 107 | -------------------------------------------------------------------------------- /Compile.app/Contents/Info.plist: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugeinc/styleguide/480d151d58e946f06cff140303ecfa180b1ff105/Compile.app/Contents/Info.plist -------------------------------------------------------------------------------- /Compile.app/Contents/MacOS/Compile: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugeinc/styleguide/480d151d58e946f06cff140303ecfa180b1ff105/Compile.app/Contents/MacOS/Compile -------------------------------------------------------------------------------- /Compile.app/Contents/Resources/AppSettings.plist: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugeinc/styleguide/480d151d58e946f06cff140303ecfa180b1ff105/Compile.app/Contents/Resources/AppSettings.plist -------------------------------------------------------------------------------- /Compile.app/Contents/Resources/MainMenu.nib: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugeinc/styleguide/480d151d58e946f06cff140303ecfa180b1ff105/Compile.app/Contents/Resources/MainMenu.nib -------------------------------------------------------------------------------- /Compile.app/Contents/Resources/appIcon.icns: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugeinc/styleguide/480d151d58e946f06cff140303ecfa180b1ff105/Compile.app/Contents/Resources/appIcon.icns -------------------------------------------------------------------------------- /Compile.app/Contents/Resources/script: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | PROJECT_PATH=$(dirname "$0") 3 | 4 | compile() { 5 | cd "$PROJECT_PATH" 6 | cd ../../.. 7 | cd styleguide/structure/_node-files 8 | node write-date-exec.js 9 | cd ../../.. 10 | STYLEGUIDE_COMPILE=1 ./styleguide/structure/_node-files/node_modules/.bin/harp compile 11 | cd www 12 | find . -type f -name "*.html" -exec ../styleguide/structure/_node-files/node_modules/.bin/js-beautify -r {} \; 13 | find . -type f -name "*.js" -exec ../styleguide/structure/_node-files/node_modules/.bin/js-beautify -r {} \; 14 | find . -type f -name "*.css" -exec ../styleguide/structure/_node-files/node_modules/.bin/js-beautify -r {} \; 15 | rm -rf AUTHORS.html Compile.app/ README.html CONTRIBUTING.html LICENSE.html Start.app/ livereload.js 16 | echo "Done! Compiled HTML in the www folder." 17 | echo "PROGRESS:100" 18 | } 19 | 20 | echo "Compiling Styleguide..." 21 | echo "" 22 | echo "PROGRESS:0" 23 | if [ ! -f ../../../styleguide/structure/_node-files/node_modules/.bin/harp ] 24 | then 25 | echo "Harp wasn't found, please run the Start file." 26 | else 27 | compile 28 | fi 29 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Huge Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Styleguide [![Build Status](https://travis-ci.org/hugeinc/styleguide.svg?branch=master)](https://travis-ci.org/hugeinc/styleguide) 2 | #### A tool to make creating and maintaining styleguides easy. 3 | #####v2.0.8 4 | 5 | For downloads, how to get started and detailed documentation please refer to the [Styleguide Website](http://hugeinc.github.io/styleguide/) 6 | 7 | #### Thanks to 8 | - [Node.js](http://nodejs.org) 9 | - [Harp.js](http://harpjs.com) 10 | - [Node Livereload](https://www.npmjs.com/package/livereload) 11 | - [Node Watch](https://www.npmjs.com/package/watch) 12 | 13 | ### Known issues 14 | 1 - You should allow unregistered applications to run in order to use the Start.app file. You can do so in Settings > Security & Privacy 15 | 16 | 2 - The compiled offline version have a smaller issue on Chrome. Chrome have a security policy of not allowing communication with iframes under file:// protocol, so any interaction that needs such communication will be removed (basically the sidebar menu). This is only for the offline compiled version. 17 | 18 | 3 - If you are a Mac user and after running the Start.app you have this error: 19 | 20 | ``` 21 | npm ERR! Please try running this command again as root/Administrator. 22 | ``` 23 | You have probably installed Node with sudo or root permission. You will need to fix permissions to the .npm folder with the following command: 24 | 25 | ``` 26 | sudo chown -R $(whoami) ~/.npm 27 | sudo chown -R $(whoami) /usr/local/lib/node_modules 28 | ``` 29 | 30 | After that, try running the Start.app again. 31 | 32 | 4 - If you have XCode installed but have not agreed with the License you will get this error: 33 | ``` 34 | Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo. 35 | ``` 36 | Open XCode and accept the license, then try running Start.app again. 37 | 38 | 5 - If you get a **404 - No data received** error, you might have a port conflict, there are two ways you can change the port number (default to **9241**): 39 | - Change the PORT variable inside styleguide/structure/_node-files/watch.js 40 | - Set an environment variable (PORT or STYLEGUIDE_PORT): 41 | 42 | If you are running the Styleguide manually, in the last step you might do: 43 | 44 | ``` 45 | PORT=7000 node watch.js 46 | ``` 47 | or 48 | ``` 49 | STYLEGUIDE_PORT=7000 node watch.js 50 | ``` 51 | The Start.app is self contained, and for security reasons it does not have access to external variables. 52 | If you want to change the port for the Start.app it is recommended to change the watch.js file. 53 | You can, if you want, add a variable to your .bashrc file and it will be available for the Start.app: 54 | ``` 55 | touch ~/.bashrc 56 | echo 'export PORT=1234' >> ~/.bashrc 57 | ``` 58 | or 59 | ``` 60 | echo 'export STYLEGUIDE_PORT=1234' >> ~/.bashrc 61 | ``` 62 | -------------------------------------------------------------------------------- /Start.app/Contents/Info.plist: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugeinc/styleguide/480d151d58e946f06cff140303ecfa180b1ff105/Start.app/Contents/Info.plist -------------------------------------------------------------------------------- /Start.app/Contents/MacOS/Start: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugeinc/styleguide/480d151d58e946f06cff140303ecfa180b1ff105/Start.app/Contents/MacOS/Start -------------------------------------------------------------------------------- /Start.app/Contents/Resources/AppSettings.plist: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugeinc/styleguide/480d151d58e946f06cff140303ecfa180b1ff105/Start.app/Contents/Resources/AppSettings.plist -------------------------------------------------------------------------------- /Start.app/Contents/Resources/MainMenu.nib: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugeinc/styleguide/480d151d58e946f06cff140303ecfa180b1ff105/Start.app/Contents/Resources/MainMenu.nib -------------------------------------------------------------------------------- /Start.app/Contents/Resources/appIcon.icns: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugeinc/styleguide/480d151d58e946f06cff140303ecfa180b1ff105/Start.app/Contents/Resources/appIcon.icns -------------------------------------------------------------------------------- /Start.app/Contents/Resources/script: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | PROJECT_PATH=$(dirname "$0") 3 | 4 | installNode() { 5 | xcode-select --install 6 | xcode-select -p >/dev/null 2>&1 7 | while [ ! $? -eq 0 ]; 8 | do 9 | echo "Waiting for installing XCode" 10 | sleep 1 11 | xcode-select -p >/dev/null 2>&1 12 | done 13 | printf "\nInstalling Node.js...\n" 14 | cd ~ 15 | echo 'export PATH=$HOME/local/bin:$PATH' >> .bashrc 16 | . .bashrc 17 | mkdir local 18 | mkdir node-latest-install 19 | cd node-latest-install 20 | curl https://nodejs.org/dist/v6.2.0/node-v6.2.0.tar.gz | tar xz --strip-components=1 21 | ./configure --prefix=../local 22 | make install 23 | curl -L https://www.npmjs.org/install.sh | sh 24 | } 25 | 26 | run() { 27 | cd ~ 28 | . .bashrc 29 | cd "$PROJECT_PATH" 30 | printf "\nChecking dependencies...\n\n" 31 | cd ../../../styleguide/structure/_node-files 32 | npm install 33 | echo "PROGRESS:80" 34 | createLockFile 35 | cd styleguide/structure/_node-files 36 | printf "\nLet's start this thing...\n" 37 | node watch.js 38 | echo "PROGRESS:100" 39 | } 40 | 41 | createLockFile() { 42 | cd "$PROJECT_PATH" 43 | cd ../../.. 44 | if [ ! -f .install.lock ]; then 45 | touch .install.lock 46 | fi 47 | } 48 | . ~/.bashrc 49 | echo "Styleguide. Welcome!" 50 | cd ../../.. 51 | if [ ! -f .install.lock ]; then 52 | echo "PROGRESS:0" 53 | type node >/dev/null 2>&1 54 | if [ $? -eq 1 ] 55 | then 56 | type nvm >/dev/null 2>&1 57 | if [ $? -eq 1 ] 58 | then 59 | installNode 60 | echo "PROGRESS:50" 61 | run 62 | fi 63 | else 64 | echo "PROGRESS:50" 65 | run 66 | fi 67 | else 68 | echo "PROGRESS:50" 69 | run 70 | fi 71 | -------------------------------------------------------------------------------- /index.jade: -------------------------------------------------------------------------------- 1 | extends styleguide/structure/_includes/_layout 2 | block styles 3 | link(href='styleguide/assets/styles/structure.css', rel='stylesheet') 4 | link(href='styleguide/assets/styles/styleguide.css', rel='stylesheet') 5 | 6 | block content 7 | include styleguide/structure/_templates/_header.jade 8 | include styleguide/structure/_templates/_sidebar.jade 9 | .huge-iframe-wrapper 10 | iframe(src="styleguide/styleguide.html", frameborder="0", height="100%", width="100%") 11 | 12 | block scripts 13 | script(src="styleguide/structure/scripts/vendor/jquery-1.11.1.min.js") 14 | script(src="styleguide/structure/scripts/styleguide.js") 15 | if !process.env.STYLEGUIDE_COMPILE 16 | script. 17 | document.write('