├── .gitignore ├── LICENSE ├── README.md └── oocss ├── .gitignore ├── README.md ├── Vagrantfile ├── components-list.json ├── makefile ├── screenshot └── terminal-build.png ├── src ├── components │ ├── _normalize.scss │ ├── _variables.scss │ ├── box │ │ ├── _box.scss │ │ ├── box.handlebars │ │ ├── box_doc.handlebars │ │ └── skin │ │ │ └── _boxBasic.scss │ ├── boxFoot │ │ ├── boxFoot.handlebars │ │ └── boxFoot_doc.handlebars │ ├── boxHead │ │ ├── boxHead.handlebars │ │ └── boxHead_doc.handlebars │ ├── button │ │ ├── _button.scss │ │ ├── _buttonLink.scss │ │ ├── _buttonSkin.scss │ │ ├── button.handlebars │ │ └── button_doc.handlebars │ ├── divider │ │ ├── _divider.scss │ │ ├── divider.handlebars │ │ └── divider_doc.handlebars │ ├── doc.scss │ ├── form │ │ ├── _form.scss │ │ ├── _formMixins.scss │ │ ├── checkboxRadio │ │ │ ├── _checkboxRadio.scss │ │ │ ├── checkboxRadio.handlebars │ │ │ └── checkboxRadio_doc.handlebars │ │ ├── dropdown │ │ │ ├── _dropdown.scss │ │ │ ├── dropdown.handlebars │ │ │ ├── dropdown.json │ │ │ ├── dropdown_doc.handlebars │ │ │ └── script │ │ │ │ └── dropdown.js │ │ ├── fieldGroup │ │ │ ├── _fieldGroup.scss │ │ │ ├── fieldGroup.handlebars │ │ │ └── fieldGroup_doc.handlebars │ │ ├── fieldGroupInline │ │ │ ├── _fieldGroupInline.scss │ │ │ ├── fieldGroupInline.handlebars │ │ │ └── fieldGroupInline_doc.handlebars │ │ ├── fieldRange │ │ │ ├── _fieldRange.scss │ │ │ ├── fieldRange.handlebars │ │ │ └── fieldRange_doc.handlebars │ │ ├── form.handlebars │ │ ├── form.json │ │ ├── form_doc.handlebars │ │ ├── incFormsComponents.handlebars │ │ ├── input │ │ │ ├── _input.scss │ │ │ ├── input.handlebars │ │ │ ├── input.json │ │ │ └── input_doc.handlebars │ │ ├── label │ │ │ ├── _label.scss │ │ │ ├── label.handlebars │ │ │ └── label_doc.handlebars │ │ ├── select │ │ │ ├── _select.scss │ │ │ ├── select.handlebars │ │ │ ├── select.json │ │ │ └── select_doc.handlebars │ │ └── textarea │ │ │ ├── _textarea.scss │ │ │ ├── textarea.handlebars │ │ │ └── textarea_doc.handlebars │ ├── grid │ │ ├── _grid-responsive.scss │ │ ├── _grid.scss │ │ ├── grid.handlebars │ │ ├── grid_doc.handlebars │ │ ├── grid_responsive.handlebars │ │ └── grid_responsive_doc.handlebars │ ├── icon │ │ ├── _icon.scss │ │ ├── icon.handlebars │ │ ├── icon_doc.handlebars │ │ └── skin │ │ │ ├── _iconCompact.scss │ │ │ └── _iconExt.scss │ ├── link │ │ ├── _link.scss │ │ ├── link.handlebars │ │ └── link_doc.handlebars │ ├── list │ │ ├── _list.scss │ │ ├── _listWhitespace.scss │ │ ├── list.handlebars │ │ ├── list_doc.handlebars │ │ └── skin │ │ │ ├── _listBordered.scss │ │ │ ├── _listBulleted.scss │ │ │ ├── _listInline.scss │ │ │ ├── _listInlineDivider.scss │ │ │ ├── _listOrdered.scss │ │ │ └── _listUnbulleted.scss │ ├── media │ │ ├── _media.scss │ │ ├── media.handlebars │ │ └── media_doc.handlebars │ ├── mediaInline │ │ ├── _mediaInline.scss │ │ ├── mediaInline.handlebars │ │ └── mediaInline_doc.handlebars │ ├── print.scss │ ├── screen.scss │ ├── table │ │ ├── _table.scss │ │ ├── _tableWhitespace.scss │ │ ├── table.handlebars │ │ └── table_doc.handlebars │ ├── template │ │ └── _template.scss │ ├── typography │ │ ├── _typeColor.scss │ │ ├── _typography.scss │ │ ├── skin │ │ │ ├── _typeHighlight.scss │ │ │ ├── _typeLowlight.scss │ │ │ └── _typeUpper.scss │ │ ├── typography.handlebars │ │ ├── typography_doc.handlebars │ │ └── typography_test.handlebars │ ├── utils │ │ ├── _clearfix-me.scss │ │ ├── _fontSize.scss │ │ ├── _hideFully.scss │ │ ├── _hideText.scss │ │ ├── _hideVisually.scss │ │ ├── _inlineBlockFix.scss │ │ ├── _pxToEm.scss │ │ ├── _textAlign.scss │ │ ├── utils.handlebars │ │ └── utils_doc.handlebars │ └── whitespace │ │ ├── _whitespace.scss │ │ ├── whitespace.handlebars │ │ └── whitespace_doc.handlebars ├── docs │ ├── _scripts_doc.handlebars │ ├── component_doc_template.handlebars │ └── library.handlebars ├── includes │ ├── _footer.handlebars │ ├── _headDoc.handlebars │ ├── _headTemplate.handlebars │ ├── _header.handlebars │ └── _scripts_after.handlebars ├── libs │ ├── css │ │ └── github.css │ └── script │ │ ├── docs.js │ │ ├── html5shiv-printshiv.js │ │ ├── jquery-1.9.1.js │ │ └── rainbow │ │ ├── language │ │ ├── css.js │ │ ├── generic.js │ │ ├── html.js │ │ └── javascript.js │ │ └── rainbow.js ├── template │ └── template.handlebars └── workshop │ └── assets │ └── readme.md ├── start ├── mac-start.command ├── mac-stop.command ├── win-start.bat └── win-stop.bat └── tools ├── build.js ├── common.js ├── component.js ├── componentTemplate ├── _component.scss ├── component.handlebars ├── component_doc.handlebars └── script │ └── component.js ├── config.js ├── config └── config.rb ├── files ├── Utils.js ├── handlebars.helpers.js ├── handlebars.include.js ├── htmlPrettyPrint.js └── watch.js ├── package.json ├── vagrant ├── vagrant_user.sh └── vagrantfile_ssh ├── version ├── watch.js └── workshop.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Compiled source # 2 | ################### 3 | *.com 4 | *.class 5 | *.dll 6 | *.exe 7 | *.o 8 | *.so 9 | 10 | # Packages # 11 | ############ 12 | # it's better to unpack these files and commit the raw source 13 | # git has its own built in compression methods 14 | *.7z 15 | *.dmg 16 | *.gz 17 | *.iso 18 | *.jar 19 | *.rar 20 | *.tar 21 | *.zip 22 | 23 | # Logs and databases # 24 | ###################### 25 | *.log 26 | *.sql 27 | *.sqlite 28 | 29 | # OS generated files # 30 | ###################### 31 | .DS_Store* 32 | thumbs.db 33 | .idea 34 | .vagrant 35 | Icon? 36 | Thumbs.db 37 | *.sublime-workspace 38 | *.sublime-project 39 | *.sass-cache 40 | .sass-cache 41 | /.sass-cache 42 | /build 43 | npm-debug.log 44 | node_modules 45 | /workshop 46 | /testvagrant 47 | /workshop.zip 48 | package.box 49 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Software License Agreement (BSD License) 2 | 3 | Copyright (c) 2009, Nicole Sullivan. 4 | All rights reserved. 5 | 6 | Redistribution and use of this software in source and binary forms, with or without modification, are 7 | permitted provided that the following conditions are met: 8 | 9 | * Redistributions of source code must retain the above 10 | copyright notice, this list of conditions and the 11 | following disclaimer. 12 | 13 | * Redistributions in binary form must reproduce the above 14 | copyright notice, this list of conditions and the 15 | following disclaimer in the documentation and/or other 16 | materials provided with the distribution. 17 | 18 | * Neither the name of Nicole Sullivan nor the names of its 19 | contributors may be used to endorse or promote products 20 | derived from this software without specific prior 21 | written permission of Nicole Sullivan. 22 | 23 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED 24 | WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A 25 | PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR 26 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 27 | LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS 28 | INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR 29 | TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF 30 | ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #OOCSS 2 | [Look into oocss folder for more informations](https://github.com/stubbornella/oocss/tree/master/oocss) 3 | 4 | -------------------------------------------------------------------------------- /oocss/.gitignore: -------------------------------------------------------------------------------- 1 | # Compiled source # 2 | ################### 3 | *.com 4 | *.class 5 | *.dll 6 | *.exe 7 | *.o 8 | *.so 9 | 10 | # Packages # 11 | ############ 12 | # it's better to unpack these files and commit the raw source 13 | # git has its own built in compression methods 14 | *.7z 15 | *.dmg 16 | *.gz 17 | *.iso 18 | *.jar 19 | *.rar 20 | *.tar 21 | *.zip 22 | 23 | # Logs and databases # 24 | ###################### 25 | *.log 26 | *.sql 27 | *.sqlite 28 | 29 | # OS generated files # 30 | ###################### 31 | .DS_Store* 32 | thumbs.db 33 | .idea 34 | .vagrant 35 | Icon? 36 | Thumbs.db 37 | *.sublime-workspace 38 | *.sublime-project 39 | *.sass-cache 40 | .sass-cache 41 | /.sass-cache 42 | /build 43 | npm-debug.log 44 | node_modules 45 | /workshop 46 | /workshop.zip -------------------------------------------------------------------------------- /oocss/README.md: -------------------------------------------------------------------------------- 1 | # Setting Up Your Dev Environment 2 | 3 | * [Project overview](#overview) 4 | * [Vocabulary](#vocab) 5 | * [Required tools](#required-tools) 6 | * [Vagrant](#required-vagrant) 7 | * [Virtual Box](#required-virtual) 8 | * [Git (gui or command line)](#required-git) 9 | * [Setup Github](#setup-github) 10 | * [Setup Vagrant](#setup-vagrant) 11 | * [What is Vagrant](#what-vagrant) 12 | * [Before starting Vagrant](#before-vagrant) 13 | * [Vagrant via batch files](#vagrant-batch) 14 | * [Vagrant via the command line](#vagrant-command) 15 | * [Build the project](#build) 16 | * [Test the project in a browser](#test) 17 | * [Knowns issues](#issues) 18 | 19 | ## Project overview 20 | The project uses a custom environment that automatically installs most of the tools you'll need to get started. We're trying to make the setup as painless as possible, so any feedback is very welcome. If you just want to see what's going on, but you don't want to do development yourself, you won't need to worry about the rest of this section. You can skip to Required Tools, and start getting things set up. 21 | 22 | If you'll be doing development with us, we'll write SASS, handlebars, JavaScript, and JSON, all of which can be found in the /src/ directory. This will compile to CSS, HTML, and concatenated JavaScript in the /build/ directory. We use watchers which pole for changes to all of these files so you don't need to manually recreate the build directory each time you make modifications. 23 | 24 | After we've done the basic setup, we'll guide you through making a new button skin so you can see how all the pieces play together. 25 | 26 | ### Vocabulary 27 | 28 | 1. **build** : Take source files, compile them and put them into the final directory called “build” 29 | 30 | 1. **watch** : Listen for changes to the source files of the project and automatically start the build 31 | 32 | ## Required tools 33 | 34 | You will need to install three tools in order to have a complete working environment; Vagrant, Virtualbox, and Git. 35 | 36 | ### Vagrant 37 | Used for launching the working environment 38 | [http://downloads.vagrantup.com/](http://downloads.vagrantup.com/) 39 | Download Vagrant : [mac](http://files.vagrantup.com/packages/64e360814c3ad960d810456add977fd4c7d47ce6/Vagrant.dmg) | [windows](http://files.vagrantup.com/packages/64e360814c3ad960d810456add977fd4c7d47ce6/Vagrant.msi) 40 | 41 | ### Virtualbox 42 | Used by Vagrant 43 | [https://www.virtualbox.org/wiki/Downloads](https://www.virtualbox.org/wiki/Downloads) 44 | Download Virtualbox : [mac](http://download.virtualbox.org/virtualbox/4.2.10/VirtualBox-4.2.10-84104-OSX.dmg) | [windows](http://download.virtualbox.org/virtualbox/4.2.10/VirtualBox-4.2.10-84105-Win.exe) 45 | 46 | ### Git (gui or command line) 47 | You can choose to use git via the command line or a gui. We quite like Git Tower as it works well with our workflow. Please don't use Github for mac as we had a lot of conflict issues with it in the past. 48 | 49 | Download Git Command Line: [mac](http://git-scm.com/download/mac) | [windows](http://git-scm.com/download/win) 50 | Download Git Tower : [mac](http://www.git-tower.com/) 51 | Download TortoiseGit : [win](https://code.google.com/p/tortoisegit/wiki/Download?tm=2) 52 | 53 | ## [Setup Github](https://help.github.com/articles/fork-a-repo) 54 | 1. **Fork the repository** - by clicking the "fork" button on the project page in github. 55 | 56 | 1. **Clone the fork locally** - We recommend Git Tower or the command line. Do not use the Github native app as it has caused major merge conflicts for us in the past. 57 | 58 | ## Setup Vagrant 59 | 60 | ### What is Vagrant? 61 | Vagrant is a virtual machine manager that will automatically download and setup a working environment for the project. You'll simply start and stop vagrant when you begin and end working on the project. The first time you start vagrant, it may take several minutes to prepare the environment. 62 | 63 | ### Before starting Vagrant 64 | First you need to update your git project by pulling the latest changes from repository. This will ensure you have the latest version of the build. 65 | 66 | The first time you start Vagrant may take a several minutes to download the Virtual Machine (about 200 MB to download). Each time you start/stop vagrant it takes a couple of minutes as well. 67 | 68 | After you update your project, there are two ways to start Vagrant: via [batch files](#vagrant-batch) or via [command line](#vagrant-command). 69 | 70 | If you don't feel comfortable with the command line, we recommend you start Vagrant via the batch files. 71 | 72 | ### Vagrant via batch files 73 | 74 | #### Start Vagrant 75 | 76 | 1. Inside the OOCSS folder, you will find a folder called `/start/`. 77 | 78 | 1. Inside the start folder, you will find batch files to start the virtual machine when you are ready to begin working on the project. 79 | If you are on Mac, click on `mac-start.command`. 80 | If you are on Windows, click on `win-start.bat`. 81 | 82 | 1. A terminal window will open up to begin the build of the project. You will see a message saying the build is done after a while: 83 | ![Terminal window message](screenshot/terminal-build.png) 84 | 85 | Starting Vagrant via batch file will build and watch your project, i.e. it will automatically compile your updates when you make changes to your files. 86 | 87 | 1. Now you are ready to start working on your project. As long as you leave the terminal open, Vagrant will watch for changes. When you make changes to your handlebars, Sass or JavaScript files. You won't see the process show the changes. 88 | 89 | Make sure you leave the terminal open. It will automatically close when you stop the virtual machine by running the stop vagrant batch file. 90 | 91 | #### Stop Vagrant 92 | 1. You can leave Vagrant running for as long as you like, but when you want to stop working on the project, in the `/start/` folder you will see batch files to stop the virtual machine. 93 | If you are on Mac, click on the `mac-stop.command`. 94 | If you are on Windows, click `win-stop.bat`. 95 | This will open a terminal window. 96 | 97 | 1. When the process is completed, you can close the terminal window. 98 | 99 | ### Vagrant via the command line 100 | You can set up Vagrant via the command line if you feel comfortable with it. Note: If you start vagrant by using `vagrant up` in command line, you will need to run the build and watch commands yourself. 101 | 102 | These are the essential commands you'll be interested in: 103 | 104 | * `vagrant up` - Starts Vagrant. A virtual machine will be downloaded. Run this command from your project directory. 105 | * `vagrant ssh` - Access the VM. 106 | * `vagrant halt` - Stops the VM. 107 | 108 | ## Build the project 109 | 110 | If you will be doing development on the project, you'll need to know a bit more about the build system. If not, you can happily skip this section. We use Make to create the style guide and the rest of the build directory. 111 | 112 | Some common commands you'll need: 113 | 114 | * `make build` - Creates the style guide and all the JavaScript, HTML, and CSS files required for it. 115 | * `make watch` - Watches JavaScript, handlebars, and Sass files When any changes are saved, it automatically rebuilds the project so you can see the latest changes. 116 | * `make bw` - Runs `make buil`d and `make watch` at the same time. 117 | * `make component -name [component name]` - Create a new component with the name you specify. E.g. `make component -name button`. This will automatically create the component folder, Sass, handlebar and JavaScript files. 118 | 119 | ## Test the project in a browser 120 | After you've run the batch files or built the project via command line, you are ready to see the library in the browser by going to the following URL: [http://localhost:8080](http://localhost:8080) 121 | 122 | Alternatively, you can directly access the component library of the project inside the `/build/` directory. You’ll find the compiled CSS, JavaScript, and HTML inside the `/build/` directory. 123 | 124 | ## Knowns issues 125 | 126 | ### Port 8080 already used: 127 | If you start a VM and get this message: 128 | > Vagrant cannot forward the specified ports on this VM, since they would collide with another VirtualBox virtual machine's forwarded ports! The forwarded port to 8080 is already in use on the host machine. 129 | 130 | To fix this: 131 | 132 | 1. modify your current projects Vagrantfile to use another port. In example below, '1234' would be replaced by a unique host port: 133 | `config.vm.forward_port 80, 1234` 134 | 135 | 1. Open Virtual Box 136 | 1. Select each VM and Pause it (CMD + P) or Power Off it (CMD + F) 137 | 1. Close Virtual Box and run `vagrant up` or `vagrant resume`again. 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | -------------------------------------------------------------------------------- /oocss/Vagrantfile: -------------------------------------------------------------------------------- 1 | # -*- mode: ruby -*- 2 | # vi: set ft=ruby : 3 | 4 | Vagrant.configure("2") do |config| 5 | config.vm.box = "stubbornella" 6 | 7 | # === box URLS === 8 | config.vm.box_url = "https://dl.dropbox.com/u/558452/vagrant/package.box" 9 | #config.vm.box_url = "~/Dropbox/Public/vagrant/package.box" 10 | 11 | # === box config === 12 | config.vm.network :forwarded_port, guest: 80, host: 8080 13 | #config.vm.synced_folder ".", "/vagrant" 14 | #vb.gui = true 15 | 16 | # provision only if .vagrantstartt exists 17 | #if File.exist?(".vagrantstart") 18 | # config.vm.provision :shell, :path => ".vagrantstart" 19 | #end 20 | 21 | config.vm.provision :shell, :path => "tools/vagrant/vagrant_user.sh" 22 | end 23 | 24 | -------------------------------------------------------------------------------- /oocss/components-list.json: -------------------------------------------------------------------------------- 1 | { 2 | "components": [ 3 | { 4 | "name": "typography", 5 | "longname": "Typography", 6 | "path": "components/typography", 7 | "skins": [ 8 | { 9 | "elementType": "h1", 10 | "title": "h1.Heading", 11 | "lorem": "Nunc semper semper ullamcorper. Cras gravida mauris a mauris rhoncus et cursus nibh blandit. Proin ut odio dui. Fusce nibh enim, consectetur ut facilisis euismod, pellentesque fermentum odio. Sed at nulla lorem. Phasellus ut mi risus. " 12 | }, 13 | { 14 | "elementType": "h2", 15 | "title": "h2.Heading", 16 | "lorem": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor quam nec nibh adipiscing dictum. Sed auctor tristique ligula, at porttitor velit hendrerit lacinia. Nunc semper semper ullamcorper. Cras gravida mauris a mauris rhoncus et cursus nibh blandit." 17 | }, 18 | { 19 | "elementType": "h3", 20 | "title": "h3.Heading", 21 | "lorem": "Fusce nibh enim, consectetur ut facilisis euismod, pellentesque fermentum odio. Sed at nulla lorem. Phasellus ut mi risus. Fusce nibh enim, consectetur ut facilisis euismod, pellentesque fermentum odio. Sed at nulla lorem. Phasellus ut mi risus." 22 | }, 23 | { 24 | "elementType": "h4", 25 | "title": "h4.Heading", 26 | "lorem": "Nunc semper semper ullamcorper. Cras gravida mauris a mauris rhoncus et cursus nibh blandit. Proin ut odio dui. Fusce nibh enim, consectetur ut facilisis euismod, pellentesque fermentum odio. Sed at nulla lorem. Phasellus ut mi risus. " 27 | }, 28 | { 29 | "elementType": "h5", 30 | "title": "h5.Heading. Small text", 31 | "lorem": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor quam nec nibh adipiscing dictum. Sed auctor tristique ligula, at porttitor velit hendrerit lacinia. Nunc semper semper ullamcorper. Cras gravida mauris a mauris rhoncus et cursus nibh blandit." 32 | }, 33 | { 34 | "elementType": "h6", 35 | "title": "h6.Heading. Extra small text", 36 | "lorem": "Fusce nibh enim, consectetur ut facilisis euismod, pellentesque fermentum odio. Sed at nulla lorem. Phasellus ut mi risus. Fusce nibh enim, consectetur ut facilisis euismod, pellentesque fermentum odio. Sed at nulla lorem. Phasellus ut mi risus." 37 | }, 38 | { 39 | "elementType": "h3", 40 | "title": "h5.Heading style on a h3 tag", 41 | "className": "h5", 42 | "lorem": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor quam nec nibh adipiscing dictum. Sed auctor tristique ligula, at porttitor velit hendrerit lacinia. Nunc semper semper ullamcorper. Cras gravida mauris a mauris rhoncus et cursus nibh blandit." 43 | }, 44 | { 45 | "elementType": "p", 46 | "title": "Default paragraphy text", 47 | "lorem": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor quam nec nibh adipiscing dictum. Sed auctor tristique ligula, at porttitor velit hendrerit lacinia. Nunc semper semper ullamcorper. Cras gravida mauris a mauris rhoncus et cursus nibh blandit." 48 | }, 49 | { 50 | "elementType": "p", 51 | "title": "Type Highlight", 52 | "className": "typeHighlight1", 53 | "doc": "Skin class. Optional. Blue text" 54 | }, 55 | { 56 | "elementType": "p", 57 | "title": "Type Lowlight", 58 | "className": "typeLowlight", 59 | "doc": "Skin class. Optional. Light grey text" 60 | }, 61 | { 62 | "elementType": "p", 63 | "title": "Uppercase", 64 | "className": "typeUpper", 65 | "doc": "Skin class. Optional. All uppser case" 66 | }, 67 | { 68 | "elementType": "strong", 69 | "title": "Bold text using strong tag", 70 | "className": "", 71 | "doc": "" 72 | }, 73 | { 74 | "elementType": "em", 75 | "title": "Emphasis text using em tag", 76 | "className": "", 77 | "doc": "" 78 | } 79 | ] 80 | }, 81 | { 82 | "name": "link", 83 | "longname": "Link", 84 | "path": "components/link", 85 | "skins": [ 86 | { 87 | "className": "", 88 | "title": "Default link", 89 | "doc": "Default link" 90 | } 91 | ] 92 | }, 93 | { 94 | "name": "box", 95 | "longname": "Boxes", 96 | "path": "components/box", 97 | "skins": [ 98 | { 99 | "className": "boxBasic backgroundBasic", 100 | "title": "A Basic Box", 101 | "body": "This box has a white background.", 102 | "doc": "this is a doc" 103 | } 104 | ] 105 | }, 106 | { 107 | "name": "boxHead", 108 | "longname": "Box Headers", 109 | "path": "components/boxHead", 110 | "skins": [ 111 | { 112 | "className": "boxHeadBasic", 113 | "title": "Box header" 114 | } 115 | ] 116 | }, 117 | { 118 | "name": "boxFoot", 119 | "longname": "Box Footers", 120 | "path": "components/boxFoot", 121 | "skins": [ 122 | { 123 | "className": "boxFootBasic", 124 | "title": "Box footer" 125 | } 126 | ] 127 | }, 128 | { 129 | "name":"grid", 130 | "longname":"Grid", 131 | "path":"components/grid", 132 | "skins":[] 133 | }, 134 | { 135 | "name":"grid_responsive", 136 | "longname":"Grid - responsive", 137 | "path":"components/grid", 138 | "skins":[ 139 | { 140 | "cols":12 141 | } 142 | ] 143 | }, 144 | { 145 | "name":"divider", 146 | "longname":"Divider", 147 | "path":"components/divider", 148 | "skins":[] 149 | }, 150 | { 151 | "name":"list", 152 | "longname":"List", 153 | "path":"components/list", 154 | "skins":[ 155 | { 156 | "tagname": "ol", 157 | "className": "listOrdered", 158 | "title": "Ordered List", 159 | "doc": "Ordered list. Shows an numbered indicator for each list item. Can be extended via skin classes" 160 | }, 161 | { 162 | "tagname": "ul", 163 | "className": "listBulleted", 164 | "title": "Bulleted List", 165 | "doc": "Unordered list. Base class. Skins and subclasses that extend ul should add their classname to this element." 166 | }, 167 | { 168 | "tagname": "ul", 169 | "className": "listUnbulleted", 170 | "title": "Unbulleted list", 171 | "doc": "An unordered list with no bullets and has top and bottom margin." 172 | }, 173 | { 174 | "tagname": "ul", 175 | "className": "listBordered", 176 | "title": "Bordered", 177 | "doc": "List with top border" 178 | }, 179 | { 180 | "tagname": "ul", 181 | "className": "listInline", 182 | "title": "Inline list", 183 | "doc": "Inline list" 184 | }, 185 | { 186 | "tagname": "ul", 187 | "className": "listInlineDivider", 188 | "title": "Inline list with dividers", 189 | "doc": "Inline list with dividers" 190 | } 191 | ] 192 | }, 193 | { 194 | "name": "media", 195 | "longname": "Media Block", 196 | "path": "components/media", 197 | "skins": [ 198 | { 199 | "className": "", 200 | "imgType": "", 201 | "bodyContent": "Simple text next to a small icon.", 202 | "imgHeight": "21", 203 | "imgWidth": "21", 204 | "imgAltText": "Left aligned image." 205 | }, 206 | { 207 | "className": "", 208 | "imgType": "", 209 | "title": "Right aligned media block", 210 | "bodyContent": "Media block with a right aligned image. Note that the media block expands to fill all the space available.", 211 | "imgAltText": "Left aligned image. ", 212 | "imgExtWidth": "21", 213 | "imgExtHeight": "21", 214 | "imgExtAltText": "Right aligned image." 215 | }, 216 | { 217 | "className": "", 218 | "imgType": "", 219 | "title": "Right and left aligned media block", 220 | "bodyContent": "

This media block has an image aligned to the right via the imgExt class applied to the image wrapper. Images can be right, left, or both. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

", 221 | "imgHeight": "64", 222 | "imgWidth": "64", 223 | "imgAltText": "Right aligned image.", 224 | "imgExtWidth": "64", 225 | "imgExtHeight": "64", 226 | "imgExtAltText": "Replace with good alt text" 227 | }, 228 | { 229 | "title": "Nested media block", 230 | "imgHeight": "128", 231 | "imgWidth": "128", 232 | "bodyContent": "

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

\n
\n nested media block\n
media blocks can be nested.
\n
" 233 | } 234 | ] 235 | }, 236 | { 237 | "name": "mediaInline", 238 | "longname": "Inline Media Block", 239 | "path": "components/mediaInline", 240 | "skins": [ 241 | { 242 | "title": "Left aligned inline media block", 243 | "bodyContent": "Icon on the left", 244 | "imgHeight": "25", 245 | "imgWidth": "25", 246 | "imgAltText": "" 247 | }, 248 | { 249 | "title": "Right aligned inline media block", 250 | "bodyContent": "Icon on the right", 251 | "imgAltText": "Left aligned image. ", 252 | "imgExtWidth": "25", 253 | "imgExtHeight": "25" 254 | } 255 | ] 256 | }, 257 | { 258 | "name": "table", 259 | "longname": "Table", 260 | "path": "components/table" 261 | }, 262 | { 263 | "name":"button", 264 | "longname":"Buttons", 265 | "path":"components/button", 266 | "skins":[ 267 | { 268 | "className":"btn", 269 | "btnType":"button", 270 | "btnText":"Default button", 271 | "doc":"Base class. Required. Skins and subclasses that extend btn should add their classname to this element." 272 | }, 273 | { 274 | "className":"btnLink", 275 | "btnType":"btnLink", 276 | "btnText":"Default button that use anchor tag", 277 | "doc":"Button that looks like a link" 278 | } 279 | ] 280 | }, 281 | { 282 | "name" : "form", 283 | "longname" : "Form", 284 | "path" : "components/form" 285 | }, 286 | { 287 | "name":"icon", 288 | "longname":"Icon", 289 | "path":"components/icon", 290 | "skins":[ 291 | { 292 | "className":"iconExt", 293 | "doc":"Skin class. Makes margin on left side instead of right" 294 | }, 295 | { 296 | "className":"iconCompact", 297 | "dock":"Skin class. Turn off margin on both sides" 298 | } 299 | ] 300 | }, 301 | { 302 | "name":"whitespace", 303 | "longname":"Whitespace", 304 | "path":"components/whitespace", 305 | "skins":[ 306 | { 307 | "className": "pal" 308 | } 309 | ] 310 | }, 311 | { 312 | "name":"utils", 313 | "longname":"Utilities", 314 | "path":"components/utils" 315 | } 316 | ] 317 | } 318 | -------------------------------------------------------------------------------- /oocss/makefile: -------------------------------------------------------------------------------- 1 | DATE=$(shell date +%I:%M%p) 2 | HR=\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\# 3 | CHECK=\033[32m✔\033[39m 4 | BUILDDIR=build 5 | 6 | .PHONY:build workshop 7 | 8 | # 9 | # BUILD DOCS 10 | # 11 | 12 | build: clean 13 | @echo "\n${HR}" 14 | @echo "Building OOCSS..." 15 | @echo "${HR}\n" 16 | @mkdir ${BUILDDIR} 17 | @echo "\n${HR}" 18 | @mkdir build/css 19 | # @cd tools/config; compass compile 20 | @echo "Building CSS Files with Sass..." 21 | @echo "\n${HR}" 22 | @echo "Building Documentation..." 23 | @echo "${HR}\n" 24 | @mkdir ${BUILDDIR}/docs 25 | @node tools/build 26 | @echo "\n${HR}" 27 | @echo "${HR}\n" 28 | @echo "OOCSS Build ${CHECK} Done" 29 | @echo "${HR}" 30 | 31 | # 32 | # START BUILD AND WATCH 33 | # 34 | 35 | bw: build watch 36 | @echo "watching..." 37 | 38 | 39 | # 40 | # INITIALIZE THE NODE PACKAGE FOR THE BUILD PROCESS 41 | # 42 | 43 | init: 44 | @echo "${HR}" 45 | @echo "INSTALL NEEDED TOOLS FOR BUILD" 46 | @echo "THIS COMMAND MUST BE LAUNCHED IN ROOT MODE (su, sudo, etc...)" 47 | @echo "Example in Mac OSX : sudo make init" 48 | @echo "${HR}" 49 | @echo "Initialize node packages" 50 | @echo "${HR}" 51 | @cd tools; npm install 52 | @echo "\n${HR}" 53 | @echo "Node Packages ${CHECK} Done" 54 | @echo "\n${HR}" 55 | @echo "Install sass and compass with gem\n" 56 | @echo "If you have an error, please install ruby :" 57 | @echo "http://www.ruby-lang.org/en/downloads/" 58 | @gem list --local | grep "compass (" && echo "already installed" || (echo "If password is requested, you must type your system\npassword because root access is needed\nOtherwise, wait..." && sudo gem install compass) 59 | @echo "Tools installation ${CHECK} Done" 60 | 61 | 62 | # 63 | # CLEAN THE BUILD DIRECTORY 64 | # 65 | 66 | clean: 67 | @echo "${HR}" 68 | @echo "Clean the project" 69 | @echo "${HR}" 70 | @echo "Removing the build directory" 71 | @rm -rf ${BUILDDIR} 72 | @rm -rf workshop* 73 | @echo "cleaning compass files..." 74 | @cd tools/config;compass clean 75 | @echo "Remove Node modules" 76 | @echo "${HR}" 77 | @echo "Clean project ${CHECK} Done" 78 | @echo "${HR}" 79 | 80 | 81 | # 82 | # RESET THE DIRECTORY (remove node modules folder and clean 83 | # 84 | 85 | reset: clean 86 | @rm -rf tools/node_modules 87 | 88 | 89 | # 90 | # INSTALL THIRD PARTY TOOLS FOR BUILD AND WORKING 91 | # 92 | 93 | watch: 94 | @echo "${HR}" 95 | @echo "Start Compass and project watch" 96 | node tools/watch 97 | @echo "End of project watching" 98 | 99 | 100 | # 101 | # Create a new component from ComponentTemplate 102 | # 103 | 104 | component: 105 | @echo "Create component folder $(name)" 106 | @cp -R tools/componentTemplate src/components/$(name) 107 | @mv src/components/$(name)/_component.scss src/components/$(name)/_$(name).scss 108 | @mv src/components/$(name)/component.handlebars src/components/$(name)/$(name).handlebars 109 | @mv src/components/$(name)/component_doc.handlebars src/components/$(name)/$(name)_doc.handlebars 110 | @mv src/components/$(name)/script/component.js src/components/$(name)/script/$(name).js 111 | @node tools/component.js $(name) 112 | @echo "Done" 113 | 114 | # 115 | # Create A Workshop folder 116 | # 117 | 118 | workshop: 119 | @echo "${HR}" 120 | @echo "Build the project" 121 | @make -B 122 | @echo "Create the workshop directory" 123 | @rm -rf workshop 124 | @cp -R build workshop 125 | # clean workshop directory 126 | @rm -rf workshop/sample 127 | @rm -rf workshop/docs/components 128 | @mv workshop/template/template.html workshop/ 129 | @node tools/workshop.js 130 | @rm -rf workshop/template 131 | @cp -R src/workshop/assets workshop/assets 132 | @echo "Workshop directory is created" 133 | @rm -f workshop.zip 134 | @zip -r -9 -q workshop.zip workshop 135 | @echo "workshop.zip is created" 136 | 137 | # 138 | # Install osx terminal-notifier, only use this command if you want watch notifications in OSx 10.7/10.8 139 | # 140 | 141 | notifier: 142 | @gem list --local | grep "terminal-notifier (" && echo "already installed" || (echo "If password is requested, you must type your system\npassword because root access is needed\nOtherwise, wait..." && sudo gem install terminal-notifier) 143 | -------------------------------------------------------------------------------- /oocss/screenshot/terminal-build.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stubbornella/oocss/0c146a17e13d7b9d5797ffbf2805ce482cbddd9b/oocss/screenshot/terminal-build.png -------------------------------------------------------------------------------- /oocss/src/components/_normalize.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * We are using most of Normalize CSS with these modifications: 3 | * 4 | * Moved some of the typography styling to _typography.scss, unless it's something we think that should be set as default 5 | * Removed list default margin, padding and list style 6 | * 7 | */ 8 | 9 | /*! normalize.css v1.0.2 | MIT License | git.io/normalize */ 10 | 11 | /* ========================================================================== 12 | HTML5 display definitions 13 | ========================================================================== */ 14 | 15 | /* 16 | * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. 17 | */ 18 | 19 | article, 20 | aside, 21 | details, 22 | figcaption, 23 | figure, 24 | footer, 25 | header, 26 | hgroup, 27 | nav, 28 | section, 29 | summary { 30 | display: block; 31 | } 32 | 33 | /* 34 | * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. 35 | */ 36 | 37 | audio, 38 | canvas, 39 | video { 40 | display: inline-block; 41 | *display: inline; 42 | *zoom: 1; 43 | } 44 | 45 | /* 46 | * Prevents modern browsers from displaying `audio` without controls. 47 | * Remove excess height in iOS 5 devices. 48 | */ 49 | 50 | audio:not([controls]) { 51 | display: none; 52 | height: 0; 53 | } 54 | 55 | /* 56 | * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, 57 | * and Safari 4. 58 | * Known issue: no IE 6 support. 59 | */ 60 | 61 | [hidden] { 62 | display: none; 63 | } 64 | 65 | /* ========================================================================== 66 | Base 67 | ========================================================================== */ 68 | 69 | /* 70 | * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using 71 | * `em` units. 72 | * 2. Prevents iOS text size adjust after orientation change, without disabling 73 | * user zoom. 74 | */ 75 | 76 | html { 77 | font-size: 100%; /* 1 */ 78 | -webkit-text-size-adjust: 100%; /* 2 */ 79 | -ms-text-size-adjust: 100%; /* 2 */ 80 | } 81 | 82 | /* 83 | * Addresses margins handled incorrectly in IE 6/7. 84 | */ 85 | 86 | body { 87 | margin: 0; 88 | } 89 | 90 | /* ========================================================================== 91 | Links 92 | ========================================================================== */ 93 | 94 | /* 95 | * Addresses `outline` inconsistency between Chrome and other browsers. 96 | */ 97 | 98 | a:focus { 99 | outline: thin dotted; 100 | } 101 | 102 | /* 103 | * Improves readability when focused and also mouse hovered in all browsers. 104 | */ 105 | 106 | a:active, 107 | a:hover { 108 | outline: 0; 109 | } 110 | 111 | /* ========================================================================== 112 | Typography 113 | ========================================================================== */ 114 | 115 | /* 116 | * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome. 117 | */ 118 | 119 | abbr[title] { 120 | border-bottom: 1px dotted; 121 | } 122 | 123 | /* 124 | * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. 125 | */ 126 | 127 | b, 128 | strong { 129 | font-weight: bold; 130 | } 131 | 132 | /* 133 | * Addresses styling not present in Safari 5 and Chrome. 134 | */ 135 | 136 | dfn { 137 | font-style: italic; 138 | } 139 | 140 | /* 141 | * Improves readability of pre-formatted text in all browsers. 142 | */ 143 | 144 | pre { 145 | white-space: pre; 146 | white-space: pre-wrap; 147 | word-wrap: break-word; 148 | } 149 | 150 | /* 151 | * Addresses CSS quotes not supported in IE 6/7. 152 | */ 153 | 154 | q { 155 | quotes: none; 156 | } 157 | 158 | /* 159 | * Addresses `quotes` property not supported in Safari 4. 160 | */ 161 | 162 | q:before, 163 | q:after { 164 | content: ''; 165 | content: none; 166 | } 167 | 168 | /* 169 | * Addresses inconsistent and variable font size in all browsers. 170 | */ 171 | 172 | small { 173 | font-size: 80%; 174 | } 175 | 176 | /* 177 | * Prevents `sub` and `sup` affecting `line-height` in all browsers. 178 | */ 179 | 180 | sub, 181 | sup { 182 | font-size: 75%; 183 | line-height: 0; 184 | position: relative; 185 | vertical-align: baseline; 186 | } 187 | 188 | sup { 189 | top: -0.5em; 190 | } 191 | 192 | sub { 193 | bottom: -0.25em; 194 | } 195 | 196 | /* ========================================================================== 197 | Lists 198 | ========================================================================== */ 199 | 200 | dl, 201 | dt, 202 | dd, 203 | menu, 204 | ol, 205 | ul { 206 | margin: 0; 207 | padding: 0; 208 | list-style-type: none; 209 | } 210 | 211 | /* ========================================================================== 212 | Embedded content 213 | ========================================================================== */ 214 | 215 | /* 216 | * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3. 217 | * 2. Improves image quality when scaled in IE 7. 218 | */ 219 | 220 | img { 221 | border: 0; /* 1 */ 222 | -ms-interpolation-mode: bicubic; /* 2 */ 223 | } 224 | 225 | /* 226 | * Corrects overflow displayed oddly in IE 9. 227 | */ 228 | 229 | svg:not(:root) { 230 | overflow: hidden; 231 | } 232 | 233 | /* ========================================================================== 234 | Figures 235 | ========================================================================== */ 236 | 237 | /* 238 | * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11. 239 | */ 240 | 241 | figure { 242 | margin: 0; 243 | } 244 | 245 | /* ========================================================================== 246 | Forms 247 | ========================================================================== */ 248 | 249 | /* 250 | * Corrects margin displayed oddly in IE 6/7. 251 | */ 252 | 253 | form { 254 | margin: 0; 255 | } 256 | 257 | /* 258 | * Define consistent border, margin, and padding. 259 | */ 260 | 261 | /* 262 | * [OOCSS] - removed border bottom styling. Set margin and padding to 0. 263 | */ 264 | fieldset { 265 | margin: 0; 266 | padding: 0; 267 | } 268 | 269 | /* 270 | * 1. Corrects color not being inherited in IE 6/7/8/9. 271 | * 2. Corrects text not wrapping in Firefox 3. 272 | * 3. Corrects alignment displayed oddly in IE 6/7. 273 | */ 274 | 275 | legend { 276 | border: 0; /* 1 */ 277 | padding: 0; 278 | white-space: normal; /* 2 */ 279 | *margin-left: -7px; /* 3 */ 280 | } 281 | 282 | /* 283 | * 1. Corrects font size not being inherited in all browsers. 284 | * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, 285 | * and Chrome. 286 | * 3. Improves appearance and consistency in all browsers. 287 | */ 288 | 289 | button, 290 | input, 291 | select, 292 | textarea { 293 | font-size: 100%; /* 1 */ 294 | margin: 0; /* 2 */ 295 | vertical-align: baseline; /* 3 */ 296 | *vertical-align: middle; /* 3 */ 297 | } 298 | 299 | /* 300 | * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in 301 | * the UA stylesheet. 302 | */ 303 | 304 | button, 305 | input { 306 | line-height: normal; 307 | } 308 | 309 | /* 310 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 311 | * and `video` controls. 312 | * 2. Corrects inability to style clickable `input` types in iOS. 313 | * 3. Improves usability and consistency of cursor style between image-type 314 | * `input` and others. 315 | * 4. Removes inner spacing in IE 7 without affecting normal text inputs. 316 | * Known issue: inner spacing remains in IE 6. 317 | */ 318 | 319 | button, 320 | html input[type="button"], /* 1 */ 321 | input[type="reset"], 322 | input[type="submit"] { 323 | -webkit-appearance: button; /* 2 */ 324 | cursor: pointer; /* 3 */ 325 | *overflow: visible; /* 4 */ 326 | } 327 | 328 | /* 329 | * Re-set default cursor for disabled elements. 330 | */ 331 | 332 | button[disabled], 333 | input[disabled] { 334 | cursor: default; 335 | } 336 | 337 | /* 338 | * 1. Addresses box sizing set to content-box in IE 8/9. 339 | * 2. Removes excess padding in IE 8/9. 340 | * 3. Removes excess padding in IE 7. 341 | * Known issue: excess padding remains in IE 6. 342 | */ 343 | 344 | input[type="checkbox"], 345 | input[type="radio"] { 346 | box-sizing: border-box; /* 1 */ 347 | padding: 0; /* 2 */ 348 | *height: 13px; /* 3 */ 349 | *width: 13px; /* 3 */ 350 | } 351 | 352 | /* 353 | * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. 354 | * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome 355 | * (include `-moz` to future-proof). 356 | */ 357 | 358 | input[type="search"] { 359 | -webkit-appearance: textfield; /* 1 */ 360 | -moz-box-sizing: content-box; 361 | -webkit-box-sizing: content-box; /* 2 */ 362 | box-sizing: content-box; 363 | } 364 | 365 | /* 366 | * Removes inner padding and search cancel button in Safari 5 and Chrome 367 | * on OS X. 368 | */ 369 | 370 | input[type="search"]::-webkit-search-cancel-button, 371 | input[type="search"]::-webkit-search-decoration { 372 | -webkit-appearance: none; 373 | } 374 | 375 | /* 376 | * Removes inner padding and border in Firefox 3+. 377 | */ 378 | 379 | button::-moz-focus-inner, 380 | input::-moz-focus-inner { 381 | border: 0; 382 | padding: 0; 383 | } 384 | 385 | /* 386 | * 1. Removes default vertical scrollbar in IE 6/7/8/9. 387 | * 2. Improves readability and alignment in all browsers. 388 | */ 389 | 390 | textarea { 391 | overflow: auto; /* 1 */ 392 | vertical-align: top; /* 2 */ 393 | } 394 | 395 | /* ========================================================================== 396 | Tables 397 | ========================================================================== */ 398 | 399 | /* 400 | * Remove most spacing between table cells. 401 | */ 402 | 403 | table { 404 | border-collapse: collapse; 405 | border-spacing: 0; 406 | } 407 | 408 | th { 409 | font-weight: normal; 410 | } 411 | -------------------------------------------------------------------------------- /oocss/src/components/_variables.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Compass prefix support 3 | ========================================================================== */ 4 | //$support-for-original-webkit-gradients : false; 5 | 6 | /* ========================================================================== 7 | Common variables 8 | ========================================================================== */ 9 | /** 10 | * 11 | * DO NOT use these variables directly in components. 12 | * Assign them to component specific variables 13 | * 14 | */ 15 | 16 | /* Colors */ 17 | $black: #313131; 18 | $blue: #1d4a83; 19 | $lightBlue: #8ebaf4; 20 | $grey: #666; 21 | $lightGrey: #999; 22 | 23 | /* Border radius */ 24 | $borderRadiusDefault: 6px; 25 | 26 | /* ========================================================================== 27 | Browser support 28 | ========================================================================== */ 29 | $ie7: false; 30 | $ie8: false; 31 | 32 | /* ========================================================================== 33 | Component specific variables 34 | ========================================================================== */ 35 | 36 | /* Typography 37 | ========================================================================== */ 38 | $baseFontSize: 14px; 39 | // When using baseFontSize variable, must use it with fontSize mixin 40 | $baseFontFamily: Arial, sans-serif; 41 | $baseLineHeight: 1.5; 42 | //must be unitless 43 | $baseSpacing: $baseLineHeight+em; 44 | //vertical spacing 45 | $baseTextColor: $black; 46 | 47 | /* Type Color */ 48 | $typeHighlight: $blue; 49 | $typeLowlight: $lightGrey; 50 | 51 | /* Grid 52 | ========================================================================== */ 53 | $cols: 12; 54 | $baseGutter: 20px; 55 | //horizontal spacing 56 | 57 | /* Link 58 | ========================================================================== */ 59 | $linkColor: $blue; 60 | $linkHoverColor: $lightBlue; 61 | 62 | /* Background 63 | ========================================================================== */ 64 | $bgBasic: #fff; 65 | 66 | /* Box 67 | ========================================================================== */ 68 | /* Contour */ 69 | $boxBasicBorderRadius: $borderRadiusDefault; 70 | 71 | /* Box foot */ 72 | $boxFootDivider: $blue; 73 | 74 | /* Divider 75 | ========================================================================== */ 76 | $dividerColor: $blue; 77 | 78 | /* List 79 | ========================================================================== */ 80 | $listInlineDividerBorder: $lightGrey; 81 | $listBorder: $lightGrey; 82 | 83 | /* Table 84 | ========================================================================== */ 85 | $tableBorderColor: $blue; 86 | 87 | /* Form 88 | ========================================================================== */ 89 | $labelLeftWidth: 30%; 90 | $formFieldBorder: 1px solid $grey; 91 | $placeholderText: $lightGrey; 92 | 93 | /* Button 94 | ========================================================================== */ 95 | $btnDefaultBg: #ddd; 96 | $btnDefaultBorder: $lightGrey; 97 | 98 | /* Template 99 | ========================================================================== */ 100 | $skipLinkBg: $black; 101 | $bodyBg: #fff; 102 | $pageWidth: 997px; 103 | 104 | /* header */ 105 | $headerBgStop1: #09456a; 106 | $headerBgStop2: #02587e; 107 | $contentBg: #fff; 108 | $contentWidth: 960px; 109 | 110 | /* footer */ 111 | $footerBorder: $lightGrey; 112 | 113 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /oocss/src/components/box/_box.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Base box mixin for grouping content 3 | * @name Box Mixin 4 | * @author mobywhale 5 | * @tested Chrome, Firefox, IE7-9 6 | * @requires variables.scss 7 | */ 8 | 9 | .box { 10 | @extend %baseSpacing; 11 | @include clearfix-me(micro); 12 | position: relative; 13 | 14 | .boxHead, 15 | .boxFoot { 16 | @include clearfix-me(micro); 17 | padding: 0 $baseGutter; 18 | } 19 | 20 | .boxBody { 21 | padding: 0 $baseGutter; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /oocss/src/components/box/box.handlebars: -------------------------------------------------------------------------------- 1 |
2 |
3 |

{{body}}

4 |
5 |
-------------------------------------------------------------------------------- /oocss/src/components/box/box_doc.handlebars: -------------------------------------------------------------------------------- 1 |

{{longname}}

2 | 3 |

4 | Boxes are a common way of grouping related content. 5 | They consist of a wrapper with the class box applied. 6 | Inside a box, there are three sections the header, body, and footer. 7 | All boxes have a body, but some may not have either a header or footer. 8 |

9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | {{#each skins}} 29 | {{#if doc}} 30 | 31 | 32 | 33 | 34 | {{/if}} 35 | {{/each}} 36 |
boxBase class. Required. Skins and subclasses that extend box should add their classname to this element.
boxHeadSubnode of box. Creates a box header which generally contains the box title and/or controls. Can be extended via skin classes. Optional.
boxBodySubnode of box. Creates the main content area of the box. Required. Any other types of objects may be placed inside the body of a box. A box does not control the display of it's content objects.
boxFootSubnode of box. Creates the box footer. Any content can go in the footer including buttons, text, etc. Can be extended via a skin class. Optional.
{{className}}{{{doc}}}
37 |
38 | 39 |

Box Contours

40 | 41 |

Box contours are the outline of the box. You create different contours by extending the base class .box.

42 | 43 | 51 | -------------------------------------------------------------------------------- /oocss/src/components/box/skin/_boxBasic.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Skin class. 3 | * @name Box Basic 4 | * @author mobywhale 5 | * @tested Chrome, Firefox, IE7-9 6 | * @requires variables.scss 7 | */ 8 | 9 | .boxBasic { 10 | border-radius: $boxBasicBorderRadius; 11 | } 12 | -------------------------------------------------------------------------------- /oocss/src/components/boxFoot/boxFoot.handlebars: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Box body

4 |
5 |
6 |

Box footer

7 |
8 |
-------------------------------------------------------------------------------- /oocss/src/components/boxFoot/boxFoot_doc.handlebars: -------------------------------------------------------------------------------- 1 |

{{longname}}

2 | 3 |

4 | Box Footers are a way to separate content at the bottom of a box from the rest of the content. 5 |

6 | 7 | -------------------------------------------------------------------------------- /oocss/src/components/boxHead/boxHead.handlebars: -------------------------------------------------------------------------------- 1 |
2 |
3 |
Box header. Can be any heading level.
4 |
5 |
6 |

Box body

7 |
8 |
-------------------------------------------------------------------------------- /oocss/src/components/boxHead/boxHead_doc.handlebars: -------------------------------------------------------------------------------- 1 |

{{longname}}

2 | 3 |

4 | Box Headers are a way to separate a small amount of content at the top of a box (usually a header) from the rest of 5 | the content. 6 |

7 | 8 | -------------------------------------------------------------------------------- /oocss/src/components/button/_button.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Base button styles. 3 | * @name Button 4 | * @author 5 | * @tested 6 | * @requires 7 | */ 8 | 9 | //Resets button style 10 | button { 11 | background: none; 12 | border: 0; 13 | } 14 | 15 | /* Base button */ 16 | .btn { 17 | padding: .5em 1em; 18 | margin: 0; 19 | display: inline-block; 20 | font-weight: normal; 21 | @include fontSize(13px); 22 | text-decoration: none; 23 | cursor: pointer; 24 | border: 0; 25 | background: none; 26 | text-align: center; 27 | } -------------------------------------------------------------------------------- /oocss/src/components/button/_buttonLink.scss: -------------------------------------------------------------------------------- 1 | @mixin ooButtonLink { 2 | .btnLink { 3 | color: $linkColor; 4 | border: 1px solid transparent; 5 | 6 | &:hover, 7 | &:focus { 8 | color: $linkHoverColor; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /oocss/src/components/button/_buttonSkin.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Button skins 3 | * @extends .btn 4 | */ 5 | 6 | .btnDefault { 7 | border: 1px solid $btnDefaultBorder; 8 | background: $btnDefaultBg; 9 | border-radius: 3px; 10 | } -------------------------------------------------------------------------------- /oocss/src/components/button/button.handlebars: -------------------------------------------------------------------------------- 1 | {{#compare btnType "==" "button"}} 2 | 3 | {{/compare}} 4 | 5 | {{#compare btnType "==" "link"}} 6 | {{btnText}} 7 | {{/compare}} 8 | 9 | {{#compare btnType "==" "btnLink"}} 10 | {{btnText}} 11 | {{/compare}} -------------------------------------------------------------------------------- /oocss/src/components/button/button_doc.handlebars: -------------------------------------------------------------------------------- 1 |

{{longname}}

2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | {{#each skins}} 11 | {{#if doc}} 12 | 13 | 14 | 15 | 16 | {{/if}} 17 | {{/each}} 18 |
btnBase class. Required. Skins and subclasses that extend btn should add their classname to this element.
{{className}}{{{doc}}}
19 |
20 | 21 |
22 |
23 |

Button with anchor element

24 | 25 |

26 | Sometimes an element might look like a button, but semantically and functionally isn't one. A lot of the times it's an anchor looking like a button. When an element directs the user to another location, use a. 27 |

28 | 29 | This is an anchor 30 |
31 |
32 |
33 | {{#htmlcode}}This is an anchor{{/htmlcode}} 34 |
35 |
36 |
-------------------------------------------------------------------------------- /oocss/src/components/divider/_divider.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Basic divider 3 | * @name Divider 4 | * @author 5 | * @tested 6 | * @requires variables.scss 7 | */ 8 | 9 | hr { 10 | // Remove the default hr border 11 | border: none; 12 | border-bottom: 1px solid $dividerColor; 13 | } 14 | 15 | -------------------------------------------------------------------------------- /oocss/src/components/divider/divider.handlebars: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /oocss/src/components/divider/divider_doc.handlebars: -------------------------------------------------------------------------------- 1 |

{{longname}}

2 | 3 |

4 | The divider component is for separating vertical content. 5 |

6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | {{#each skins}} 14 | 15 | 16 | 17 | 18 | {{/each}} 19 |
<hr>An hr element creates a horizontal divider.
{{className}}{{{doc}}}
20 |
21 | 22 | {{#each skins}} 23 | {{{html}}} 24 | {{{htmlcode}}} 25 | {{/each}} -------------------------------------------------------------------------------- /oocss/src/components/doc.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Library styles 3 | * @name Docsumentation 4 | * @author Fiona 5 | * @tested Chrome 6 | * @requires - 7 | */ 8 | 9 | /* ========================================================================== 10 | Layout 11 | ========================================================================== */ 12 | 13 | #docNavTrigger { 14 | text-align: right; 15 | 16 | button { 17 | padding: 5px 15px; 18 | background: #666; 19 | color: #fff; 20 | text-align: left; 21 | white-space: nowrap; 22 | } 23 | } 24 | 25 | #docNavWrapper { 26 | position: absolute; 27 | right: 0; 28 | top: 0; 29 | } 30 | 31 | #docNav { 32 | overflow: auto; 33 | margin-bottom: 10px; 34 | margin-right: -15px; 35 | padding-right: 15px; 36 | 37 | li { 38 | margin-bottom: 3px; 39 | } 40 | } 41 | 42 | #docNavInner { 43 | display: none; 44 | padding: 5px 15px; 45 | background: #eee; 46 | border-radius: 4px 0 4px 4px; 47 | border: 1px solid #666; 48 | 49 | button { 50 | margin-bottom: 10px; 51 | display: table; 52 | margin: 5px auto; 53 | } 54 | } 55 | 56 | //When doc is expanded 57 | .docNavActive { 58 | #docNavInner { 59 | display: block; 60 | } 61 | } 62 | 63 | //Make doc nav sticks to top of viewport 64 | .docNavFixed #docNavWrapperInner { 65 | position: fixed; 66 | top: 0; 67 | right: 0; 68 | } 69 | 70 | //Uncomment this if you want menu to stick to top of viewport. Need to uncomment code in doc.js as well 71 | .docNavFixed { 72 | z-index: 20; 73 | position: fixed; 74 | top: 0; 75 | 76 | box-shadow: 0 6px 4px -4px rgba(0, 0, 0, .5); 77 | } 78 | 79 | /* ========================================================================== 80 | Headings 81 | ========================================================================== */ 82 | 83 | .docH2 { 84 | margin-top: 0; 85 | margin-bottom: 20px; 86 | 87 | font-weight: bold; 88 | font-size: 34px; 89 | } 90 | 91 | .docSection { 92 | margin: 0 0 30px; 93 | } 94 | 95 | /* ========================================================================== 96 | Table 97 | ========================================================================== */ 98 | 99 | .codeTable { 100 | margin: 16px 0; 101 | 102 | border: 1px solid #eee; 103 | border-bottom: 0; 104 | border-radius: 4px; 105 | 106 | table { 107 | width: 100%; 108 | } 109 | 110 | thead tr th:first-child { 111 | width: 20%; 112 | } 113 | 114 | th, 115 | td { 116 | padding: 10px 20px; 117 | 118 | border-bottom: 1px solid #eee; 119 | } 120 | 121 | thead th, 122 | td { 123 | border-left: 1px solid #eee; 124 | } 125 | } 126 | 127 | /* ========================================================================== 128 | Grids 129 | ========================================================================== */ 130 | 131 | /* shows grid lines and sizes in docs */ 132 | .demo .line { 133 | margin-top: 21px; 134 | margin-bottom: 21px; 135 | } 136 | 137 | .demo .line > div:after { 138 | content: attr(class); 139 | display: block; 140 | min-height: 40px; 141 | line-height: 40px; 142 | background-color: #EEE; 143 | text-align: center; 144 | border-radius: 3px; 145 | font-size: 12px; 146 | } 147 | 148 | .hideCode .docCode, 149 | .hideDesignNotes .docDesignNotes { 150 | display: none !important; 151 | } 152 | 153 | .col > .code { 154 | margin-top: 0; 155 | margin-bottom: 0; 156 | } 157 | 158 | /* ========================================================================== 159 | Swatch 160 | ========================================================================== */ 161 | 162 | .docSwatch { 163 | min-height: 218.25px; 164 | // kinda lame, find a way to make it equal to width. 165 | border: 1px solid #ccc; 166 | } 167 | 168 | /* ========================================================================== 169 | Lists 170 | ========================================================================== */ 171 | .listDocContainer { 172 | padding: 10px; 173 | } -------------------------------------------------------------------------------- /oocss/src/components/form/_form.scss: -------------------------------------------------------------------------------- 1 | %formFieldStyle { 2 | @include box-sizing(border-box); 3 | width: 100%; 4 | padding: 4px; 5 | border: $formFieldBorder; 6 | } 7 | 8 | %formContext { 9 | display: table-cell; 10 | width: 10000px; 11 | *width: auto; 12 | *display: block; 13 | *zoom: 1; 14 | } 15 | 16 | // placeholder 17 | ::-webkit-input-placeholder { 18 | color: $placeholderText; 19 | } 20 | 21 | :-moz-placeholder { 22 | color: $placeholderText; 23 | } 24 | 25 | :-ms-input-placeholder { 26 | color: $placeholderText; 27 | } 28 | 29 | .placeholder { 30 | color: $placeholderText; 31 | //Class added via JS shim for IE7-9 32 | } 33 | 34 | //Form field wrappers and layouts 35 | .form { 36 | @extend %baseSpacing; 37 | 38 | /** 39 | Forms Structure 40 | */ 41 | .field { 42 | @extend %baseSpacing; 43 | @include clearfix-me(micro); 44 | } 45 | .col { 46 | :first-child { 47 | margin-top: 0; 48 | } 49 | :last-child { 50 | margin-bottom: 0; 51 | } 52 | } 53 | 54 | .fieldItem { 55 | @extend %formContext; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /oocss/src/components/form/_formMixins.scss: -------------------------------------------------------------------------------- 1 | //Not currently using 2 | @mixin labelWidth($size) { 3 | .labelWidth#{$size} label, label.labelWidth#{$size} { 4 | @if($size == Auto) { 5 | width: auto; 6 | } @else { 7 | width: percentage($size/100); 8 | } 9 | } 10 | } 11 | 12 | //Not currently using 13 | @mixin elementWidth($size) { 14 | .width#{$size} { 15 | @if($size == Auto) { 16 | width: auto; 17 | } @else { 18 | width: percentage($size/100); 19 | } 20 | } 21 | } 22 | 23 | /** label generic width : generate code like this : 24 | .labelWidth90 label, label.labelWidth90 { 25 | width: 90%; 26 | } 27 | */ 28 | //Not currently using 29 | @mixin generateLabelsWidth() { 30 | $sizes: (10,20,30,40,50,60,70,80,90); 31 | @each $size in $sizes { 32 | @include labelWidth($size); 33 | } 34 | @include labelWidth(Auto); 35 | } 36 | -------------------------------------------------------------------------------- /oocss/src/components/form/checkboxRadio/_checkboxRadio.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Checkbox & radio buttons 3 | * @name checkboxRadio 4 | * @author 5 | * @tested 6 | * @requires 7 | */ 8 | 9 | .form { 10 | .radio, 11 | .checkbox { 12 | position: relative; 13 | 14 | label { 15 | display: block; 16 | width: auto; 17 | padding-left: 1.4em; 18 | *zoom: 1; 19 | *padding-left: 0; 20 | vertical-align: middle; 21 | } 22 | input { 23 | margin-right: 5px; 24 | padding: 0; 25 | float: left; 26 | position: relative; 27 | top: 4px; 28 | border: 0; 29 | line-height: 1.5em; 30 | vertical-align: middle; 31 | } 32 | input[type="radio"] { 33 | top: 4px; 34 | } 35 | } 36 | 37 | /** webkit fix */ 38 | 39 | @media screen and (-webkit-min-device-pixel-ratio: 0) { 40 | .radio, .checkbox { 41 | input { 42 | top: 0.35em; 43 | } 44 | input[type="radio"] { 45 | // small bug in chrome because 1px of the radio is hidden, don't know why 46 | left: 1px; 47 | } 48 | } 49 | } 50 | } -------------------------------------------------------------------------------- /oocss/src/components/form/checkboxRadio/checkboxRadio.handlebars: -------------------------------------------------------------------------------- 1 | {{!include "../form.handlebars"}} 2 | {{!include "../label/label.handlebars"}} 3 | 4 | {{#registerBlock "fradio" "id" "name" "classname"}} 5 | 6 | 7 | 10 | 11 | {{/registerBlock}} 12 | 13 | {{#registerBlock "fcheckbox" "id" "name" "classname"}} 14 | 15 | 16 | 19 | 20 | {{/registerBlock}} 21 | 22 |

Checkbox

23 | {{#formpres "" "" "htmlcode"}} 24 | {{#ffield}} 25 | {{#fcheckbox "checkbox1-1" "checkbox1"}}{{/fcheckbox}} 26 | {{/ffield}} 27 | {{/formpres}} 28 | 29 |

Radio

30 | {{#formpres "" "" "htmlcode"}} 31 | {{#ffield}} 32 | {{#fradio "radio1-1" "radio1"}}{{/fradio}} 33 | {{/ffield}} 34 | {{/formpres}} -------------------------------------------------------------------------------- /oocss/src/components/form/checkboxRadio/checkboxRadio_doc.handlebars: -------------------------------------------------------------------------------- 1 | {{#each skins}} 2 | {{{html}}} 3 | {{/each}} -------------------------------------------------------------------------------- /oocss/src/components/form/dropdown/_dropdown.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stubbornella/oocss/0c146a17e13d7b9d5797ffbf2805ce482cbddd9b/oocss/src/components/form/dropdown/_dropdown.scss -------------------------------------------------------------------------------- /oocss/src/components/form/dropdown/dropdown.handlebars: -------------------------------------------------------------------------------- 1 |

{{title}}

2 | This is the title : {{title}} 3 | Of the skin -------------------------------------------------------------------------------- /oocss/src/components/form/dropdown/dropdown.json: -------------------------------------------------------------------------------- 1 | { 2 | "skins": [ 3 | { 4 | "title": "skin1" 5 | }, 6 | { 7 | "title": "skin2" 8 | } 9 | ] 10 | } -------------------------------------------------------------------------------- /oocss/src/components/form/dropdown/dropdown_doc.handlebars: -------------------------------------------------------------------------------- 1 |

Dropdownnnnn

2 | 3 | Dropdown example 4 | 5 | {{#each skins}} 6 | {{{html}}} 7 | 8 | {{{htmlcode}}} 9 | {{/each}} -------------------------------------------------------------------------------- /oocss/src/components/form/dropdown/script/dropdown.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stubbornella/oocss/0c146a17e13d7b9d5797ffbf2805ce482cbddd9b/oocss/src/components/form/dropdown/script/dropdown.js -------------------------------------------------------------------------------- /oocss/src/components/form/fieldGroup/_fieldGroup.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Textarea 3 | * @name textarea 4 | * @author 5 | * @tested 6 | * @requires 7 | */ 8 | 9 | .form { 10 | .fieldGroup { 11 | margin: 0; 12 | @extend %formContext; 13 | 14 | > li { 15 | margin: 5px 0; 16 | 17 | > label { 18 | display: block; 19 | margin-bottom: 2px; 20 | } 21 | } 22 | &:before, 23 | &:after { 24 | display: table; 25 | content: ""; 26 | clear: both; 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /oocss/src/components/form/fieldGroup/fieldGroup.handlebars: -------------------------------------------------------------------------------- 1 | {{!include "../form.handlebars"}} 2 | {{!include "../label/label.handlebars"}} 3 | 4 | {{#registerBlock "fgroup" "type"}} 5 | 8 | {{/registerBlock}} 9 | 10 | {{#registerBlock "fgroupitem" "blockName" "id" "name" "classname" "labelright" "checkboxradio" "repeat"}} 11 |
  • 12 | {{! label on left }} 13 | {{#if $labelright}} 14 | {{else}} 15 | {{#if $checkboxradio}} 16 | {{{$content}}} 17 | {{else}} 18 | {{#flabel $id $name}}{{{$content}}}{{/flabel}} 19 | {{/if}} 20 | {{/if}} 21 | {{#block $blockName $id $name "" $repeat}}{{/block}} 22 | {{! label on right }} 23 | {{#if $labelright}} 24 | {{#flabel $id $name}}{{{$content}}}{{/flabel}} 25 | {{/if}} 26 |
    • 27 | {{/registerBlock}} 28 | 29 | {{! Default field group with radio buttons }} 30 |
    List of radio buttons
    31 | {{#formpres "" "" "htmlcode"}} 32 | {{#ffield}} 33 | {{#flabel "" "fieldLabel"}}Select your options{{/flabel}} 34 | {{#fgroup}} 35 | {{#repeat 2 "radiogroup2"}} 36 | {{#fgroupitem "fradio" @indexStr "radiogroup" "" "" "checkboxradio" ""}}{{/fgroupitem}} 37 | {{/repeat}} 38 | {{/fgroup}} 39 | {{/ffield}} 40 | {{/formpres}} 41 | 42 | {{! Default field group with checkboxes }} 43 |
    List of checkboxes
    44 | {{#formpres "" "" "htmlcode"}} 45 | {{#ffield}} 46 | {{#flabel "" "fieldLabel"}}Select your option{{/flabel}} 47 | {{#fgroup}} 48 | {{#repeat 2 "checkboxgroup2"}} 49 | {{#fgroupitem "fcheckbox" @indexStr "checkboxgroup" "" "" "checkboxradio" ""}} 50 | {{/fgroupitem}} 51 | {{/repeat}} 52 | {{/fgroup}} 53 | {{/ffield}} 54 | {{/formpres}} 55 | 56 | {{! Default field group with text input}} 57 |
    List of inputs
    58 | {{#formpres "" "" "htmlcode"}} 59 | {{#ffield}} 60 | {{#flabel "" "fieldLabel"}}Your email addresses{{/flabel}} 61 | {{#fgroup}} 62 | {{#repeat 2 "emailInputblock"}} 63 | {{#fgroupitem "ftext" @indexStr "" ""}}Email address {{@index}}{{/fgroupitem}} 64 | {{/repeat}} 65 | {{/fgroup}} 66 | {{/ffield}} 67 | {{/formpres}} 68 | 69 | {{! Default field group with select }} 70 | {{#formpres "" "" "htmlcode"}} 71 |
    List of selects
    72 | {{#ffield}} 73 | {{#flabel "" "fieldLabel"}}Select your options{{/flabel}} 74 | {{#fgroup}} 75 | {{#repeat 2 "selectInputblock"}} 76 | {{#fgroupitem "fselect" @indexStr "" "" "" "" "" 2}}Option {{@index}}{{/fgroupitem}} 77 | {{/repeat}} 78 | {{/fgroup}} 79 | {{/ffield}} 80 | {{/formpres}} 81 | 82 | -------------------------------------------------------------------------------- /oocss/src/components/form/fieldGroup/fieldGroup_doc.handlebars: -------------------------------------------------------------------------------- 1 |

    Field Group

    2 |

    Use fieldGroup on ul if the list of form fields are related.

    3 | 4 | {{#each skins}} 5 | {{{html}}} 6 | {{/each}} -------------------------------------------------------------------------------- /oocss/src/components/form/fieldGroupInline/_fieldGroupInline.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Inline field group 3 | * @name fieldGroupInline 4 | * @author 5 | * @tested 6 | * @requires 7 | */ 8 | 9 | .form { 10 | .fieldGroupInline { 11 | @extend %formContext; 12 | 13 | > li { 14 | margin-left: 13px; 15 | float: none; 16 | @extend %inlineBlockFix; 17 | 18 | &:first-child { 19 | margin-left: 0; 20 | } 21 | 22 | > label { 23 | display: inline-block; 24 | margin: 0; 25 | } 26 | } 27 | 28 | label, 29 | .fieldItem { 30 | vertical-align: middle; 31 | float: none; 32 | display: inline-block; 33 | width: auto; 34 | } 35 | 36 | .radio, 37 | .checkbox { 38 | input { 39 | top: auto; 40 | float: none; 41 | vertical-align: middle; 42 | } 43 | 44 | label { 45 | padding-left: 0; 46 | } 47 | } 48 | } 49 | } -------------------------------------------------------------------------------- /oocss/src/components/form/fieldGroupInline/fieldGroupInline.handlebars: -------------------------------------------------------------------------------- 1 | {{!include "../form.handlebars"}} 2 | {{!include "../label/label.handlebars"}} 3 | 4 | {{! Inline group with radio buttons}} 5 | {{#formpres}} 6 |
    List of inline radio buttons
    7 | {{#ffield}} 8 | {{#flabel "" "fieldLabel"}}Select your options{{/flabel}} 9 | {{#fgroup "fieldGroupInline"}} 10 | {{#repeat 2 "radiogroupinline"}} 11 | {{#fgroupitem "fradio" @indexStr "radioinlinegroup" "" "" "checkboxradio" ""}}{{/fgroupitem}} 12 | {{/repeat}} 13 | {{/fgroup}} 14 | {{/ffield}} 15 | {{/formpres}} 16 | 17 | {{! Inline group with checkboxes}} 18 |
    List of inline checkboxes
    19 | {{#formpres}} 20 | {{#ffield}} 21 | {{#flabel "" "fieldLabel"}}Select your options{{/flabel}} 22 | {{#fgroup "fieldGroupInline"}} 23 | {{#repeat 2 "radioblock"}} 24 | {{#fgroupitem "fcheckbox" @indexStr "checkboxinlinegroup" "" "" "checkboxradio" ""}}{{/fgroupitem}} 25 | {{/repeat}} 26 | {{/fgroup}} 27 | {{/ffield}} 28 | {{/formpres}} 29 | 30 | {{! Innline group with text boxes}} 31 |
    List of inline text boxes
    32 | {{#formpres}} 33 | {{#ffield}} 34 | {{#flabel "" "fieldLabel"}}Your email address{{/flabel}} 35 | {{#fgroup "fieldGroupInline"}} 36 | {{#repeat 2 "textboxinline"}} 37 | {{#fgroupitem "ftext" @indexStr "" "" "" "" ""}}Email address {{@index}}{{/fgroupitem}} 38 | {{/repeat}} 39 | {{/fgroup}} 40 | {{/ffield}} 41 | {{/formpres}} 42 | -------------------------------------------------------------------------------- /oocss/src/components/form/fieldGroupInline/fieldGroupInline_doc.handlebars: -------------------------------------------------------------------------------- 1 |

    Field Group Inline

    2 |

    Use fieldGroupInline on ul if the list of form fields are related and inline.

    3 | 4 | {{#each skins}} 5 | {{{html}}} 6 | {{/each}} -------------------------------------------------------------------------------- /oocss/src/components/form/fieldRange/_fieldRange.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Inline field group 3 | * @name fieldGroupInline 4 | * @author 5 | * @tested 6 | * @requires 7 | */ 8 | 9 | .form { 10 | .fieldRange { 11 | > li { 12 | display: table-cell; 13 | vertical-align: middle; 14 | } 15 | 16 | .rangeLabel { 17 | padding: 0 10px; 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /oocss/src/components/form/fieldRange/fieldRange.handlebars: -------------------------------------------------------------------------------- 1 | {{!include "../form.handlebars"}} 2 | {{!include "../label/label.handlebars"}} 3 | 4 | {{#formpres}} 5 | {{#ffield}} 6 | {{#flabel "range1" "fieldLabel"}}Range inputs{{/flabel}} 7 | {{#fgroup "fieldRange"}} 8 |
  • {{#ftext "range1" "" "" ""}}{{/ftext}}
    • 9 |
    • 10 |
  • {{#ftext "range2" "" "" ""}}{{/ftext}}
    • 11 | {{/fgroup}} 12 | {{/ffield}} 13 | {{/formpres}} 14 | 15 | -------------------------------------------------------------------------------- /oocss/src/components/form/fieldRange/fieldRange_doc.handlebars: -------------------------------------------------------------------------------- 1 |
    Range
    2 |

    3 | Use fieldRange on ul 4 | if you want to have form fields to indicate a range. Use grid column classes (cols<n>of12) to achieve different widths. 5 |

    6 | 7 | {{#each skins}} 8 | {{{html}}} 9 | {{/each}} -------------------------------------------------------------------------------- /oocss/src/components/form/form.handlebars: -------------------------------------------------------------------------------- 1 | {{#registerBlock "formpres" "title" "description" "htmlcode"}} 2 | {{#if $title}}

    {{$title}}

    {{/if}} 3 | {{#if $description}}

    {{$description}}

    {{/if}} 4 | 5 | {{#format}}{{{$content}}}{{/format}} 6 | {{#if $htmlcode}}{{#htmlcode "html"}}{{{$content}}}{{/htmlcode}}{{/if}} 7 | {{/registerBlock}} 8 | 9 | {{#registerBlock "ffield" "classname"}} 10 |
    11 | {{{$content}}} 12 |
    13 | {{/registerBlock}} -------------------------------------------------------------------------------- /oocss/src/components/form/form.json: -------------------------------------------------------------------------------- 1 | { 2 | "components": ["input", "select", "checkboxRadio", "textarea", "fieldGroup", "fieldGroupInline", "fieldRange"] 3 | } -------------------------------------------------------------------------------- /oocss/src/components/form/form_doc.handlebars: -------------------------------------------------------------------------------- 1 |

    {{longname}}

    2 | 3 |

    4 | Form component is composed with some components 5 |

    6 | 7 |
    8 |

    Form containers

    9 | 10 |

    Forms need to have class form.

    11 | 
    
 12 |     
    ...your form fields
    
 13 |
    14 | 15 |

    Each group form field is wrapped by field, usually consisting of a labek and a type of form field.

    16 | 17 |

    The form field is wrapped by class fieldItem plus the type of form field: text, select, radio and checkbox.

    18 | 19 | {{! ====================== 20 | Subcomponents 21 | ====================== }} 22 | 23 | 30 | 31 | {{! ====================== 32 | Layout 33 | ====================== }} 34 | 35 |

    Layout

    36 |

    Columns

    37 | 38 |

    You can use the grid to create column layouts within your form.

    39 | {{#formpres "" "" "htmlcode"}} 40 |
    41 |
    42 | {{#ffield}} 43 | {{#flabel "" "fieldLabel"}}Select your option set 1{{/flabel}} 44 | {{#fgroup}} 45 | {{#repeat 2 "checkboxgroupcol"}} 46 | {{#fgroupitem "fcheckbox" @indexStr "checkboxgroupcol" "" "" "checkboxradio" ""}} 47 | {{/fgroupitem}} 48 | {{/repeat}} 49 | {{/fgroup}} 50 | {{/ffield}} 51 |
    52 |
    53 | {{#ffield}} 54 | {{#flabel "" "fieldLabel"}}Select your option set 2{{/flabel}} 55 | {{#fgroup}} 56 | {{#repeat 2 "checkboxgroupcol2"}} 57 | {{#fgroupitem "fcheckbox" @indexStr "checkboxgroupcol2" "" "" "checkboxradio" ""}} 58 | {{/fgroupitem}} 59 | {{/repeat}} 60 | {{/fgroup}} 61 | {{/ffield}} 62 |
    63 |
    64 | {{/formpres}} 65 | 66 |

    Label on the left

    67 |
    Single field with label on left
    68 | 69 |

    Add class labelLeft to label.

    70 | {{#formpres "" "" "htmlcode"}} 71 | {{#ffield}} 72 | {{#flabel "singleLabelText1" "labelLeft fieldLabel"}}Label on the left{{/flabel}} 73 | {{#ftext "singleLabelText1"}}{{/ftext}} 74 | {{/ffield}} 75 | {{/formpres}} 76 |
    Multiple fields with label on left
    77 | 78 |

    Add class labelLeft to parent container.

    79 | {{#formpres "" "" "htmlcode"}} 80 |
    81 | {{#ffield}} 82 | {{#flabel "text111" "fieldLabel"}}Label on the left{{/flabel}} 83 | {{#ftext "text111"}}{{/ftext}} 84 | {{/ffield}} 85 | 86 | {{#ffield}} 87 | {{#flabel "text222" "fieldLabel"}}Label on the left{{/flabel}} 88 | {{#ftext "text222"}}{{/ftext}} 89 | {{/ffield}} 90 |
    91 | {{/formpres}} 92 | 93 | {{! ====================== 94 | Sizing 95 | ====================== }} 96 | 97 |

    Sizing

    98 | 99 |

    You can use cols<n>of24 to give labels form fields different sizing

    100 | 101 | {{#formpres "" "" "htmlcode"}} 102 | {{#ffield}} 103 | {{#flabel "text234" "labelLeft"}}Label with input{{/flabel}} 104 | {{#ftext "text234" "" "" "cols6of24"}}{{/ftext}} 105 | {{/ffield}} 106 | {{/formpres}} 107 | 108 |
    -------------------------------------------------------------------------------- /oocss/src/components/form/incFormsComponents.handlebars: -------------------------------------------------------------------------------- 1 | {{! ======== the differents form components ======== }} 2 | {{#registerBlock "ftext" "id" "name" "classname" "fieldSize"}} 3 | 4 | 5 | 6 | {{/registerBlock}} 7 | 8 | {{#registerBlock "ftextarea" "id" "name" "classname" "fieldSize"}} 9 | 10 | 11 | 12 | {{/registerBlock}} 13 | 14 | {{#registerBlock "fradio" "id" "name" "classname"}} 15 | 16 | 17 | 20 | 21 | {{/registerBlock}} 22 | 23 | {{#registerBlock "fcheckbox" "id" "name" "classname"}} 24 | 25 | 26 | 29 | 30 | {{/registerBlock}} 31 | 32 | 33 | {{! ======== the containers ========}} 34 | {{#registerBlock "flabel" "for" "classname"}} 35 | 36 | {{/registerBlock}} 37 | 38 | {{#registerBlock "ffield" "classname"}} 39 |
    40 | {{{$content}}} 41 |
    42 | {{/registerBlock}} 43 | 44 | {{#registerBlock "fgroup" "type"}} 45 | 48 | {{/registerBlock}} 49 | 50 | {{#registerBlock "fgroupitem" "blockName" "id" "name" "classname" "labelright" "checkboxradio" "repeat"}} 51 |
  • 52 | {{! label on left }} 53 | {{#if $labelright}} 54 | {{else}} 55 | {{#if $checkboxradio}} 56 | {{{$content}}} 57 | {{else}} 58 | {{#flabel $id $name}}{{{$content}}}{{/flabel}} 59 | {{/if}} 60 | {{/if}} 61 | {{#block $blockName $id $name "" $repeat}}{{/block}} 62 | {{! label on right }} 63 | {{#if $labelright}} 64 | {{#flabel $id $name}}{{{$content}}}{{/flabel}} 65 | {{/if}} 66 |
    • 67 | {{/registerBlock}} 68 | 69 | 70 | {{#registerBlock "formpres" "title" "description"}} 71 | {{#if $title}}

    {{$title}}

    {{/if}} 72 | {{#if $description}}

    {{$description}}

    {{/if}} 73 | 74 | {{#format}}{{{$content}}}{{/format}} 75 | {{#htmlcode "html"}}{{{$content}}}{{/htmlcode}} 76 | {{/registerBlock}} 77 | 78 | {{#registerBlock "ffieldwrap" "colsize"}} 79 |
    80 |
    81 | {{{$content}}} 82 |
    83 |
    84 | {{/registerBlock}} 85 | -------------------------------------------------------------------------------- /oocss/src/components/form/input/_input.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Input text 3 | * @name Input 4 | * @author 5 | * @tested 6 | * @requires form.scss 7 | */ 8 | 9 | .form { 10 | .text input { 11 | width: 100%; 12 | @extend %formFieldStyle; 13 | } 14 | } -------------------------------------------------------------------------------- /oocss/src/components/form/input/input.handlebars: -------------------------------------------------------------------------------- 1 | {{!include "../form.handlebars"}} 2 | {{!include "../label/label.handlebars"}} 3 | 4 | {{#registerBlock "ftext" "id" "name" "classname" "fieldSize"}} 5 | 6 | 7 | 8 | {{/registerBlock}} 9 | 10 | {{#formpres}} 11 | {{#ffield}} 12 | {{#flabel "text1" "fieldLabel"}}Label with input{{/flabel}} 13 | {{#ftext "text1"}}{{/ftext}} 14 | {{/ffield}} 15 | {{/formpres}} -------------------------------------------------------------------------------- /oocss/src/components/form/input/input.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stubbornella/oocss/0c146a17e13d7b9d5797ffbf2805ce482cbddd9b/oocss/src/components/form/input/input.json -------------------------------------------------------------------------------- /oocss/src/components/form/input/input_doc.handlebars: -------------------------------------------------------------------------------- 1 |

    Input text

    2 | {{#each skins}} 3 | {{{html}}} 4 | {{{htmlcode}}} 5 | {{/each}} -------------------------------------------------------------------------------- /oocss/src/components/form/label/_label.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Label 3 | * @name label 4 | * @author 5 | * @tested 6 | * @requires _variables.scss 7 | */ 8 | 9 | .form { 10 | .fieldLabel { 11 | margin-bottom: 2px; 12 | min-height: 1px; 13 | display: block; 14 | cursor: pointer; 15 | font-weight: bold; 16 | } 17 | 18 | label.labelLeft, 19 | .labelLeft .fieldLabel { 20 | width: $labelLeftWidth; 21 | float: left; 22 | padding: 4px 13px 4px 0; 23 | text-align: right; 24 | } 25 | } -------------------------------------------------------------------------------- /oocss/src/components/form/label/label.handlebars: -------------------------------------------------------------------------------- 1 | {{#registerBlock "flabel" "for" "classname"}} 2 | 3 | {{/registerBlock}} -------------------------------------------------------------------------------- /oocss/src/components/form/label/label_doc.handlebars: -------------------------------------------------------------------------------- 1 | label here -------------------------------------------------------------------------------- /oocss/src/components/form/select/_select.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Default Select dropdown 3 | * @name Select 4 | * @author 5 | * @tested 6 | * @requires form.scss 7 | */ 8 | 9 | .form { 10 | .select select { 11 | width: 100%; 12 | @extend %formFieldStyle; 13 | } 14 | } -------------------------------------------------------------------------------- /oocss/src/components/form/select/select.handlebars: -------------------------------------------------------------------------------- 1 | {{!include "../form.handlebars"}} 2 | {{!include "../label/label.handlebars"}} 3 | 4 | {{! resuable 7 | {{#if $content}} 8 | {{$content}} 9 | {{else}} 10 | 11 | {{#createvar "optionrepeat"}}{{#if $repeat}}{{$repeat}}{{else}}3{{/if}}{{/createvar}} 12 | {{#repeat $optionrepeat}} 13 | 14 | {{/repeat}} 15 | {{/if}} 16 | 17 | {{/registerBlock}} 18 | 19 | {{! Simple Select }} 20 | {{#registerBlock "fselect" "id" "name" "classname" "repeat"}} 21 | 22 | {{#baseSelect $id $name "" "" $repeat}}{{/baseSelect}} 23 | 24 | {{/registerBlock}} 25 | 26 | {{#formpres}} 27 | {{#ffield}} 28 | {{#flabel "select" "fieldLabel"}}Label with select{{/flabel}} 29 | {{#fselect "select"}}{{/fselect}} 30 | {{/ffield}} 31 | {{/formpres}} -------------------------------------------------------------------------------- /oocss/src/components/form/select/select.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stubbornella/oocss/0c146a17e13d7b9d5797ffbf2805ce482cbddd9b/oocss/src/components/form/select/select.json -------------------------------------------------------------------------------- /oocss/src/components/form/select/select_doc.handlebars: -------------------------------------------------------------------------------- 1 |

    Select

    2 | {{#each skins}} 3 | {{{html}}} 4 | {{{htmlcode}}} 5 | {{/each}} -------------------------------------------------------------------------------- /oocss/src/components/form/textarea/_textarea.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Textarea 3 | * @name textarea 4 | * @author 5 | * @tested 6 | * @requires 7 | */ 8 | 9 | .form { 10 | .text textarea { 11 | @extend %formFieldStyle; 12 | width: 100%; 13 | padding: 8px; 14 | } 15 | } -------------------------------------------------------------------------------- /oocss/src/components/form/textarea/textarea.handlebars: -------------------------------------------------------------------------------- 1 | {{!include "../form.handlebars"}} 2 | {{!include "../label/label.handlebars"}} 3 | 4 | {{#registerBlock "ftextarea" "id" "name" "classname" "fieldSize"}} 5 | 6 | 7 | 8 | {{/registerBlock}} 9 | 10 | {{#formpres}} 11 | {{#ffield}} 12 | {{#flabel "textarea" "fieldLabel"}}Label with textarea{{/flabel}} 13 | {{#ftextarea "textarea"}}{{/ftextarea}} 14 | {{/ffield}} 15 | {{/formpres}} -------------------------------------------------------------------------------- /oocss/src/components/form/textarea/textarea_doc.handlebars: -------------------------------------------------------------------------------- 1 |

    Textarea

    2 | {{#each skins}} 3 | {{{html}}} 4 | {{{htmlcode}}} 5 | {{/each}} -------------------------------------------------------------------------------- /oocss/src/components/grid/_grid-responsive.scss: -------------------------------------------------------------------------------- 1 | @import "compass/css3"; 2 | 3 | // hide, show, collapse?, expand 4 | 5 | //TODO: make it work with ems (or any unit?) 6 | //TODO: stephen doens't think incremental breakpoints are a good idea 7 | //TODO: allow developers to choose which types of options get outputted (show, hide, expand, collapse, cols, etc) 8 | @mixin ooGridResponsive($breakpoints: (56.25em, 41em, 25em), $columns: 12, $gutters: (20px, 20px, 20px), $mobile-first: false) { 9 | $direction: lt; 10 | $min-max: max; 11 | 12 | @if $mobile-first { 13 | $direction: gt; 14 | $min-max: min; 15 | } 16 | 17 | // t-shirt sizing 18 | //TODO: think about what happens if a site needs to *add* breakpoints later, especially in the middle 19 | //TODO: mobile first scenario 20 | $tShirtSizes: (); 21 | @if (length($breakpoints) == 1) { 22 | $tShirtSizes: (med); 23 | } @else if (length($breakpoints) == 2) { 24 | $tShirtSizes: (lg, med); 25 | } @else if (length($breakpoints) == 3) { 26 | $tShirtSizes: (lg, med, sm); 27 | } @else if (length($breakpoints) == 4) { 28 | $tShirtSizes: (xl, lg, med, sm); 29 | } @else if (length($breakpoints) == 5) { 30 | $tShirtSizes: (xl, lg, med, sm, xs); 31 | } @else if (length($breakpoints) == 6) { 32 | $tShirtSizes: (xxl, xl, lg, med, sm, xs); 33 | } @else if (length($breakpoints) == 7) { 34 | $tShirtSizes: (xxl, xl, lg, med, sm, xs, xxs); 35 | } @else if (length($breakpoints) == 8) { 36 | $tShirtSizes: (xxxl, xl, lg, med, sm, xs, xxs); 37 | } @else if (length($breakpoints) == 9) { 38 | $tShirtSizes: (xxl, xl, lg, med, sm, xs, xxs, xxxs); 39 | } @else if (length($breakpoints) > 9) { 40 | $tShirtSizes: $breakpoints; 41 | @warn "T-shirt sizing doesn't work well with more than 9 breakpoints, we'll have to default to using explicit pixel values. This will make your code less maintainable."; 42 | } 43 | 44 | .hide { 45 | display: none !important; 46 | } 47 | 48 | .show { 49 | display: inherit !important; 50 | //?? Does this work? 51 | } 52 | 53 | // create breakpoints 54 | @for $i from 1 through length($breakpoints) { 55 | $break: nth($breakpoints, $i); 56 | $tShirtSize: nth($tShirtSizes, $i); 57 | $cols: $columns; 58 | $gutterResponsive: nth($gutters, $i); 59 | 60 | /* For each breakpoint that we set, we create a set of classes specific to the breakpoint. 61 | E.g. if we only have 1 breakpoint(20em) and not mobile first, it'll generate: 62 | @media only screen and (max-width: 20em) { 63 | .medHide { 64 | display: none !important; 65 | } 66 | 67 | .... 68 | 69 | .medCol1of12 { 70 | ... 71 | } 72 | } 73 | } 74 | */ 75 | @media only screen and (#{$min-max}-width: $break) { 76 | .#{$tShirtSize}Hide { 77 | display: none !important; 78 | } 79 | 80 | .#{$tShirtSize}Show { 81 | display: inherit !important; 82 | //?? Does this work? 83 | } 84 | 85 | // /* grids tools (can be used on grids, media block, template) */ 86 | .#{$tShirtSize}Collapse > .col, 87 | .#{$tShirtSize}Collapse { 88 | width: auto !important; 89 | display: block !important; 90 | float: none !important; 91 | } 92 | 93 | .#{$tShirtSize}Expand > .col { 94 | width: auto !important; 95 | } 96 | 97 | .#{$tShirtSize}DeepExpand .col { 98 | width: auto !important; 99 | } 100 | 101 | //TODO: is there a way to not duplicate the code from grid.scss? 102 | 103 | .line { 104 | margin-left: -$gutterResponsive; 105 | 106 | .col { 107 | padding-left: $gutterResponsive; 108 | } 109 | } 110 | 111 | @each $col in $cols { 112 | @for $i from 1 through $col { 113 | .#{$tShirtSize}Cols#{$i}of#{$col} { 114 | width: percentage($i/$col) !important; 115 | } 116 | } 117 | } 118 | } 119 | } 120 | } -------------------------------------------------------------------------------- /oocss/src/components/grid/_grid.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Grid 3 | * @name Grid Mixin 4 | * @author mobywhale 5 | * @tested Chrome, Firefox, IE7-9 6 | * @requires variables.scss 7 | */ 8 | 9 | $gridsDebug: false; 10 | $gridsDebugPosition: false; 11 | //TODO: make params into variables instead, so they can easily be updated w out changing this file. 12 | //TODO: Take different .cols into account, what if gutters are in rems? ems? percentage? 13 | //TODO: test in IE6 :( 14 | @mixin ooGrid($cols: $cols, $gutter: $baseGutter) { 15 | 16 | /* ie 7 and earlier need percentage based gutters because they dont do border-box */ 17 | $iePercentGutter: percentage($gutter/$pageWidth); 18 | 19 | @each $col in $cols { 20 | @for $i from 1 through $col { 21 | .cols#{$i}of#{$col} { 22 | width: percentage($i/$col) !important; 23 | // IE7- width = normal width - gutter width 24 | @if $ie7 == true { 25 | *width: percentage($i/$col)-$iePercentGutter !important; 26 | } 27 | } 28 | } 29 | } 30 | 31 | .line { 32 | @include clearfix-me(micro); 33 | margin-left: -$gutter; 34 | .col { 35 | // col must take place by default even if it's empty 36 | min-height: 1px; 37 | float: left; 38 | zoom: 1; 39 | @if $gutter { 40 | @include box-sizing(border-box); 41 | padding-left: $gutter; 42 | } 43 | } 44 | 45 | @if $ie7 == true or $ie8 == true { 46 | .lastCol { 47 | // <= IE8 needs a class .lastCol on the final column in any line. 48 | @include clearfix-me(facebook); 49 | float: none; 50 | @if $ie7 == true { 51 | //IE 7 - new formatting context 52 | *display: block; 53 | *width: auto !important; 54 | *zoom: 1; 55 | } 56 | } 57 | } 58 | } 59 | 60 | .colExt { 61 | // TODO: handle case where there are two (or more) .colExt in a line. 62 | float: right; 63 | zoom: 1; 64 | @if $gutter { 65 | padding: 0 0 0 $gutter; 66 | } 67 | } 68 | 69 | .col:last-child { 70 | //Facebook clearfix for > IE8. IE8 doesn't recognise :last-child and when grouped with other selectors, it causes other selectors to not recognise the rules. 71 | @if $ie7 == false and $ie8 == false { 72 | float: none; 73 | //if <=IE8, the float none will be set in .lastCol class 74 | } 75 | display: table-cell; 76 | vertical-align: top; 77 | width: 10000px !important; 78 | } 79 | } 80 | 81 | @if $gridsDebug { 82 | .line > div:after { 83 | content: attr(class); 84 | display: block; 85 | min-height: 40px; 86 | line-height: 40px; 87 | background-color: #EEE; 88 | text-align: center; 89 | border-radius: 3px; 90 | font-size: 12px; 91 | } 92 | } 93 | 94 | @if $gridsDebugPosition { 95 | .line { 96 | background-color: #e2e2e2; 97 | } 98 | .col { 99 | background-color: #da0000; 100 | border-radius: 7px; 101 | } 102 | .col:first-child { 103 | background-color: green; 104 | } 105 | .col:first-child, .firs .col { 106 | background-color: blue; 107 | } 108 | .colExt ~ [class*=size]:last-child, .las .col { 109 | background-color: purple; 110 | } 111 | .colExt ~ .colExt { 112 | background-color: gray; 113 | } 114 | } 115 | 116 | // if gutters were true they would need to be % based, so you would need to know page width 117 | // e.g. 15px gutters / 960px page width = 0.015625 or 1.5625% -------------------------------------------------------------------------------- /oocss/src/components/grid/grid.handlebars: -------------------------------------------------------------------------------- 1 |
    2 | {{#repeat 4}} 3 |
    4 |
    5 | {{/repeat}} 6 |
    7 |
    8 |
    9 | 10 |
    11 | {{#repeat 1}} 12 |
    13 |
    14 | {{/repeat}} 15 |
    16 |
    17 |
    18 | 19 |
    20 |
    21 |
    22 |
    23 |
    24 |
    25 | 26 |
    27 |
    28 |
    29 |
    -------------------------------------------------------------------------------- /oocss/src/components/grid/grid_doc.handlebars: -------------------------------------------------------------------------------- 1 |

    {{longname}}

    2 | 3 |

    Grids may be used to break a page into smaller content areas. They allow you to layout full pages or even content within a box. They are infinitely nestable and stackable and will always retain the correct proportions with regard to the parent container.

    4 | 5 |
    6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
    lineWrapper around one horizontal grouping of columns. This class takes all available width.
    cols<n>of12All columns are a fractional width of the total horizontal space taken up by their parent .line element.
    lastColFor <=IE8 you must include a class lastCol on the final column in each line. This is because IE 7 & 8 do not support the last-child selector.
    20 |
    21 | 22 |

    You should use the cols class to define the relative proportions of the different content areas. For example, if you would like something to take one third of the space available on a line use the class cols4of12. In the examples below we have shown the most commonly used fractional 23 | widths, but you may use any value from 1 to 12.

    24 |
    25 | {{#each skins}} 26 | {{{html}}} 27 | 28 | {{! TODO: not feeling like showing a big block of grids code is valuable. Perhaps the pre can be removed? For now, commented. }} 29 | {{!
    {!html}
    }} 30 | 31 | {{/each}} 32 |
    33 | -------------------------------------------------------------------------------- /oocss/src/components/grid/grid_responsive.handlebars: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 |
    5 |
    6 |
    7 | 8 |

    Using medExpand to expand columns

    9 | 10 |
    11 |
    12 |
    13 |
    14 |
    15 |
    16 | 17 |

    Using medHide and smShow to hide and show an element

    18 | 19 |
    20 | 21 |
    22 | -------------------------------------------------------------------------------- /oocss/src/components/grid/grid_responsive_doc.handlebars: -------------------------------------------------------------------------------- 1 |

    {{longname}}

    2 | 3 |

    The grid uses fluid width, but the responsive grid creates a set of additional classes based on the viewport sizes you set.

    4 | 5 |

    Viewport sizes corresponds to t-shirt size:

    6 |
    7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |
    No. of breakpointsSizes
    1med
    2lg, med
    3lg, med, sm
    4xl, lg, med, sm
    5xl, lg, med, sm, xs
    6xxl, xl, lg, med, sm, xs
    7xxl, xl, lg, med, sm, xs, xxs
    8xxxl, xl, lg, med, sm, xs, xxs
    9xxl, xl, lg, med, sm, xs, xxs, xxxs
    51 |
    52 | 53 |

    54 | For each breakpoint that we set, we create a set of classes specific to the breakpoint. 55 |
    56 | E.g. if we only have 1 breakpoint(20em), it'll generate: 57 | 

    
 58 |   @media only screen and (max-width: 20em) {
 59 |   .medHide {
 60 |   display: none !important;
 61 |   }
 62 | 
 63 |   ....
 64 | 
 65 |   .medCol1of12 {
 66 |   ...
 67 |   }
 68 |   }
    69 |
    70 | The classes only get triggered at the specific breakpoint, giving you full flexibility in creating a responsive site. 71 |

    72 | 73 |
    74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 |
    <tshirtSize>HideHide element
    <tshirtSize>ShowHide element
    <tshirtSize>ColFloat a column left
    <tshirtSize>ColExtFloat a column right
    <tshirtSize>Cols<n>of12Column widths
    <tshirtSize>ExpandMake element full width. Can be added to <line> in the grid to expand columns
    100 |
    101 | 102 |
    103 |

    Using viewport specific column classes

    104 | {{#each skins}} 105 | {{{html}}} 106 | 107 | {{! TODO: not feeling like showing a big block of grids code is valuable. Perhaps the pre can be removed? For now, commented. }} 108 | {{!
    {!html}
    }} 109 | 110 | {{/each}} 111 | 112 |
    113 | -------------------------------------------------------------------------------- /oocss/src/components/icon/_icon.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Base class for icon 3 | * @name Icon 4 | * @author Fiona 5 | * @tested - 6 | * @requires - 7 | */ 8 | 9 | // used for icons that are actually images 10 | .icon { 11 | display: inline-block; 12 | margin-right: 5px; 13 | vertical-align: middle; 14 | } 15 | 16 | $icon-sprite-dimensions: true; 17 | //$-sprite-dimensions 18 | 19 | @import "icon/*.png"; 20 | @include all-icon-sprites; -------------------------------------------------------------------------------- /oocss/src/components/icon/icon.handlebars: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    -------------------------------------------------------------------------------- /oocss/src/components/icon/icon_doc.handlebars: -------------------------------------------------------------------------------- 1 |

    {{longname}}

    2 | 3 |

    4 | Text presentation of the component icon 5 |

    6 | 7 |
    8 | 9 | 10 | 11 | 12 | 13 | {{#each skins}} 14 | {{#if doc}} 15 | 16 | 17 | 18 | 19 | {{/if}} 20 | {{/each}} 21 |
    iconBase class. Required. Skins and subclasses that extend icon should add their classname to this element.
    {{className}}{{{doc}}}
    22 |
    23 | 24 | -------------------------------------------------------------------------------- /oocss/src/components/icon/skin/_iconCompact.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Skin class for icon. No margins on all sides. 3 | * @name iconCompact 4 | * @author Fiona 5 | * @tested - 6 | * @requires - 7 | */ 8 | 9 | .iconCompact { 10 | margin-right: 0; 11 | } 12 | -------------------------------------------------------------------------------- /oocss/src/components/icon/skin/_iconExt.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Skin class for icon. Makes margin on left side. 3 | * @name iconExt 4 | * @author Fiona 5 | * @tested - 6 | * @requires - 7 | */ 8 | 9 | .iconExt { 10 | margin-right: 0; 11 | margin-left: 5px; 12 | } -------------------------------------------------------------------------------- /oocss/src/components/link/_link.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Link 3 | * @name link 4 | * @author 5 | * @tested 6 | * @requires variables.scss 7 | */ 8 | 9 | a { 10 | color: $linkColor; 11 | 12 | &:hover, 13 | &:focus { 14 | color: $linkHoverColor; 15 | } 16 | } -------------------------------------------------------------------------------- /oocss/src/components/link/link.handlebars: -------------------------------------------------------------------------------- 1 | {{title}} -------------------------------------------------------------------------------- /oocss/src/components/link/link_doc.handlebars: -------------------------------------------------------------------------------- 1 |

    {{longname}}

    2 | 3 |
    4 | 5 | {{#each skins}} 6 | {{#if className}} 7 | 8 | 9 | 10 | 11 | {{/if}} 12 | {{/each}} 13 |
    {{className}}{{{doc}}}
    14 |
    15 | 16 | -------------------------------------------------------------------------------- /oocss/src/components/list/_list.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @name List 3 | * @desc Basic list with no bullets and no margins 4 | * @author 5 | * @tested 6 | * @requires 7 | */ 8 | 9 | ol, 10 | ul { 11 | list-style-type: none; 12 | 13 | > li { 14 | margin: .2em 0; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /oocss/src/components/list/_listWhitespace.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @name List 3 | * @desc Basic list with no bullets and no margins 4 | * @author 5 | * @tested 6 | * @requires 7 | */ 8 | 9 | $whitespace-keys: (l padding, a '', v -top -bottom, h -left -right); 10 | @function expand-whitespace-key($k) { 11 | @each $pair in $whitespace-keys { 12 | $short: nth($pair, 1); 13 | $long: nth($pair, 2); 14 | // v and h need to pass in 2 parameters 15 | @if (length($pair) == 3) { 16 | $long: (nth($pair, 2) nth($pair, 3)) 17 | } 18 | @if $short == $k { 19 | @return $long; 20 | } 21 | } 22 | @warn "Couldn't expand #{$k}"; 23 | @return $k; 24 | } 25 | 26 | /* 27 | * Define your own spacing classes for lists 28 | * 29 | * @param $units - specific spacing units you want to use. Must go from small to large 30 | * e.g. @include ooListWhitespace((5px,10px,20px)); 31 | * 32 | */ 33 | 34 | @mixin ooListWhitespace($sizes: (5px, 10px, 20px)) { 35 | //for now assume this list is always ascending 36 | /* build list spacing exceptions */ 37 | $sizes: join(0, $sizes); 38 | $size-names: (); 39 | @if (length($sizes) == 1) { 40 | $size-names: (n); 41 | @warn "One spacing class isn't usually enough. Typically you should choose at least three."; 42 | } @else if (length($sizes) == 2) { 43 | $size-names: (n, s); 44 | @warn "Two spacing classes isn't usually enough. Typically you should choose at least three."; 45 | } @else if (length($sizes) == 3) { 46 | $size-names: (n, s, m); 47 | } @else if (length($sizes) == 4) { 48 | $size-names: (n, s, m, l); 49 | } @else if (length($sizes) == 5) { 50 | $size-names: (n, s, m, l, xl); 51 | } @else if (length($sizes) < 5){ 52 | $size-names: (n, xs, s, m, l, xl); 53 | @warn "No more than five spacing classes are supported, typically you want to have three."; 54 | } 55 | 56 | $types: (l); 57 | $locations: (v, h); 58 | @each $location in $locations { 59 | @each $size-name in $size-names { 60 | @each $type in $types { 61 | .#{$type}#{$location}#{$size-name} > li { 62 | //get returned list of locations. Can't assign to variable as it turns into 1 item in the list, not multiple items 63 | @each $whitespace-location in expand-whitespace-key($location) { 64 | #{expand-whitespace-key($type)}#{$whitespace-location}: nth($sizes, index($size-names, $size-name)) !important; 65 | } 66 | } 67 | } 68 | } 69 | } 70 | } -------------------------------------------------------------------------------- /oocss/src/components/list/list.handlebars: -------------------------------------------------------------------------------- 1 | <{{tagname}} class="{{className}}"> 2 |
  • First list item
    • 3 |
  • Second list item
    • 4 |
  • Third list item
    • 5 | 6 | -------------------------------------------------------------------------------- /oocss/src/components/list/list_doc.handlebars: -------------------------------------------------------------------------------- 1 |

    {{longname}}

    2 |

    3 | Lists are a common way of grouping related content. They consist of an ol (ordered list) or 4 | ul (unordered list) element containing li (list item) elements. 5 |

    6 | 7 |
    8 | 9 | {{#each skins}} 10 | 11 | 12 | 13 | 14 | {{/each}} 15 |
    {{className}}{{{doc}}}
    16 |
    17 | 18 | 27 | 28 |

    List Spacing

    29 | 30 |

    Most lists come with built in default spacing that should work for you. However, if you find yourself needing to 31 | modify the spacing, you should do that with list spacing classes rather than whitespace classes. A single class can be 32 | applied to the list and all direct children will be modified.

    33 | 34 |

    The classes are constructed by specifying <type><location><size>.

    35 | 36 |
    37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 |
    Type:
    llistSpace on the inside of each of the li direct children of the element
    Location:
    hhorizontalAdds spacing to the left and right of the li.
    vverticalAdds spacing to the top and bottom of the li.
    Size:
    llargeAdds 21 pixels of space
    mmediumAdds 10 pixels of space
    ssmallAdds 5 pixels of space
    nnoneSets any existing space to 0
    83 |
    84 | 85 |

    Vertical spacing options

    86 | 87 |
    88 |
    89 |

    No spacing - lvn

    90 | {{#registerBlock "listSpacingV"}} 91 |
      92 |
    • List item 1. Lorem ipsum Et.
      • 93 |
    • List item 2. Lorem ipsum Et exercitation ut fugiat.
      • 94 |
    • List item 3. Laboris ad laborum incididunt.
      • 95 |
    96 | {{/registerBlock}} 97 | 98 | {{#listSpacingV}}{{/listSpacingV}} 99 | {{#htmlcode}}{{#listSpacingV}}{{/listSpacingV}}{{/htmlcode}} 100 |
    101 |
    102 |

    Small spacing - lvs

    103 |
      104 |
    • List item 1. Lorem ipsum Et.
      • 105 |
    • List item 2. Lorem ipsum Et exercitation ut fugiat.
      • 106 |
    • List item 3. Laboris ad laborum incididunt.
      • 107 |
    108 |
    109 |
    110 | 111 |
    112 |
    113 |

    Medium spacing - lvm

    114 |
      115 |
    • List item 1. Lorem ipsum Et.
      • 116 |
    • List item 2. Lorem ipsum Et exercitation ut fugiat.
      • 117 |
    • List item 3. Laboris ad laborum incididunt.
      • 118 |
    119 |
    120 |
    121 |

    Large spacing - lvl

    122 |
      123 |
    • List item 1. Lorem ipsum Et.
      • 124 |
    • List item 2. Lorem ipsum Et exercitation ut fugiat.
      • 125 |
    • List item 3. Laboris ad laborum incididunt.
      • 126 |
    127 |
    128 |
    129 | 130 |

    Horizontal spacing options

    131 |

    No spacing - lhn

    132 | {{#registerBlock "listSpacingH"}} 133 | 138 | {{/registerBlock}} 139 | 140 | {{#listSpacingH}}{{/listSpacingH}} 141 | {{#htmlcode}}{{#listSpacingH}}{{/listSpacingH}}{{/htmlcode}} 142 | 143 |

    Small spacing - lhs

    144 | 149 | 150 |

    Medium spacing - lhm

    151 | 156 | 157 |

    Large spacing - lhl

    158 | 163 | -------------------------------------------------------------------------------- /oocss/src/components/list/skin/_listBordered.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @name List bordered 3 | * @desc Bordered list with top border 4 | * @author 5 | * @tested 6 | * @requires 7 | */ 8 | 9 | .listBordered { 10 | @extend %baseSpacing; 11 | 12 | > li { 13 | padding: 10px; 14 | border-top: 1px solid $listBorder; 15 | } 16 | > li:first-child { 17 | border-top: 1px solid transparent; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /oocss/src/components/list/skin/_listBulleted.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @name List bulleted 3 | * @desc Bulleted list of unordered list 4 | * @author 5 | * @tested 6 | * @requires 7 | */ 8 | 9 | .listBulleted { 10 | @extend %baseSpacing; 11 | 12 | > li { 13 | list-style-type: disc; 14 | margin-left: 1.3em; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /oocss/src/components/list/skin/_listInline.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @name List inline 3 | * @desc List displayed horizontally 4 | * @author 5 | * @tested 6 | * @requires 7 | */ 8 | 9 | .listInline { 10 | @extend %baseSpacing; 11 | 12 | > li { 13 | vertical-align: middle; 14 | padding-right: 10px; 15 | @extend %inlineBlockFix; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /oocss/src/components/list/skin/_listInlineDivider.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @name List inline divider 3 | * @desc List displayed horizontally with divider 4 | * @author 5 | * @tested 6 | * @requires 7 | */ 8 | 9 | .listInlineDivider { 10 | @extend %baseSpacing; 11 | 12 | li { 13 | @extend %inlineBlockFix; 14 | border-left: solid 2px $listInlineDividerBorder; 15 | padding: 0 .4em 0 0.65em; 16 | margin: 0; 17 | } 18 | 19 | &:first-child { 20 | border: none; 21 | padding-left: 0; 22 | } 23 | } -------------------------------------------------------------------------------- /oocss/src/components/list/skin/_listOrdered.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Ordered list 3 | * @desc Basic list with no bullets and no margins 4 | * @author 5 | * @tested 6 | * @requires 7 | */ 8 | 9 | .listOrdered { 10 | @extend %baseSpacing; 11 | 12 | li { 13 | margin-left: 1.4em; 14 | list-style-type: decimal; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /oocss/src/components/list/skin/_listUnbulleted.scss: -------------------------------------------------------------------------------- 1 | @mixin ooListUnbulleted() { 2 | .listUnbulleted { 3 | @extend %baseSpacing; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /oocss/src/components/media/_media.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Media block 3 | * @desc Media block - image on left/right, text next to it. 4 | * @author 5 | * @tested 6 | * @requires 7 | */ 8 | 9 | .media { 10 | @extend %baseSpacing; 11 | @include clearfix-me(micro); 12 | > .mediaImg { 13 | float: left; 14 | margin-right: 10px; 15 | > img { 16 | display: block; 17 | } 18 | } 19 | > .mediaImgExt { 20 | float: right; 21 | margin-left: 10px; 22 | margin-right: 0; 23 | } 24 | > .mediaBody { 25 | @include clearfix-me(facebook); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /oocss/src/components/media/media.handlebars: -------------------------------------------------------------------------------- 1 |
    {{#if imgWidth}} 2 | 3 | {{imgAltText}} 4 | {{/if}}{{#if imgExtWidth}} 5 | 6 | {{imgExtAltText}} 7 | {{/if}} 8 |
    9 | {{{bodyContent}}} 10 |
    11 |
    -------------------------------------------------------------------------------- /oocss/src/components/media/media_doc.handlebars: -------------------------------------------------------------------------------- 1 |

    {{longname}}

    2 |

    Media blocks are used to layout images with related content.

    3 | 4 |

    The media block is a UI pattern of an image to the left and some text (or really anything) that describes it to the right. The image can be any size. The media block has an optional right region which should also be fixed width.

    5 | 6 |

    Use any sized image or flash for the right or left area. Any content in the body including nesting other media blocks. Always set image height and width to avoid unnecessary reflows/repaints.

    7 | 8 | 9 | 10 |
    11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
    mediaThe wrapper class for the media block. Required.
    mediaBodyWrapper of the content region of the media block. Any content or other UI objects, including other media blocks may be nested within the media body.
    mediaImgApplied to an image or wrapper of the image (often a link), that you wish to align left. Optional.
    mediaImgExtApplied to an image or wrapper of the image (often a link), that you wish to align right. Optional.
    29 |
    30 | 31 | {{#each skins}} 32 | {{#if title}} 33 |

    {{title}}

    34 | {{/if}} 35 | {{{html}}} 36 | {{{htmlcode}}} 37 | {{/each}} -------------------------------------------------------------------------------- /oocss/src/components/mediaInline/_mediaInline.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Inline media block 3 | * @desc Similar to media block, but allows verical alignment. 4 | * @author 5 | * @tested 6 | * @requires 7 | */ 8 | 9 | .mediaInline { 10 | vertical-align: middle; 11 | > img, > span { 12 | display: inline-block; 13 | vertical-align: middle; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /oocss/src/components/mediaInline/mediaInline.handlebars: -------------------------------------------------------------------------------- 1 | 2 | {{#if imgWidth}} 3 | {{imgAltText}} 4 | {{/if}} 5 | {{{bodyContent}}} 6 | {{#if imgExtWidth}} 7 | {{imgExtAltText}} 8 | {{/if}} 9 | -------------------------------------------------------------------------------- /oocss/src/components/mediaInline/mediaInline_doc.handlebars: -------------------------------------------------------------------------------- 1 |

    {{longname}}

    2 |

    3 | Occasionally, you may need a media block that aligns vertically. In this case you should use the mediaInline. It only works with a single line of text, so use it judiciously. All mediaInline classes may be extended with vertical alignment utils txtT, txtM, 4 | and txtB to set the vertical alignment of that element to top, middle, or bottom respectively. 5 |

    6 | 7 |
    8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
    mediaInlineThe wrapper class for the inline media block. Required.
    mediaInlineBodyWrapper of the content region of the inline media block. It can only contain a single line of text. If you need more than that, use a regular media block.
    mediaInlineImgApplied to an image or wrapper of the image (often a link), that you wish to align left. Optional.
    mediaInlineImgExtApplied to an image or wrapper of the image (often a link), that you wish to align right. Optional.
    26 |
    27 | 28 | {{#each skins}} 29 | {{#if title}} 30 |

    {{title}}

    31 | {{/if}} 32 | {{{html}}} 33 | {{{htmlcode}}} 34 | {{/each}} -------------------------------------------------------------------------------- /oocss/src/components/print.scss: -------------------------------------------------------------------------------- 1 | /* Welcome to Compass. Use this file to define print styles. 2 | * Import this file using the following HTML or equivalent: 3 | * */ 4 | -------------------------------------------------------------------------------- /oocss/src/components/screen.scss: -------------------------------------------------------------------------------- 1 | /* Welcome to Compass. 2 | * In this file you should write your main styles. (or centralize your imports) 3 | * Import this file using the following HTML or equivalent: 4 | * */ 5 | 6 | @import "variables"; 7 | @import "normalize"; 8 | /* ========================================================================== 9 | Compass Helpers 10 | ========================================================================== */ 11 | @import "compass/css3"; 12 | @import "compass/utilities"; 13 | /* ========================================================================== 14 | Mixin and functions 15 | ========================================================================== */ 16 | @import "utils/clearfix-me"; 17 | @import "utils/pxToEm"; 18 | @import "utils/inlineBlockFix"; 19 | @import "utils/fontSize"; 20 | /* ========================================================================== 21 | Utility classes 22 | ========================================================================== */ 23 | @import "utils/textAlign"; 24 | @import "utils/hideText"; 25 | @import "utils/hideVisually"; 26 | @import "utils/hideFully"; 27 | /* ========================================================================== 28 | Typography 29 | ========================================================================== */ 30 | //Default typography 31 | @import "typography/typography"; 32 | @import "typography/typeColor"; 33 | @import "typography/skin/typeHighlight"; 34 | @import "typography/skin/typeLowlight"; 35 | @import "typography/skin/typeUpper"; 36 | /* ========================================================================== 37 | Link 38 | ========================================================================== */ 39 | @import "link/link"; 40 | /* ========================================================================== 41 | Grid 42 | ========================================================================== */ 43 | @import "grid/grid"; 44 | 45 | @include ooGrid(); 46 | 47 | @import "grid/grid-responsive"; 48 | @include ooGridResponsive(); 49 | 50 | /* ========================================================================== 51 | Box 52 | ========================================================================== */ 53 | @import "box/box"; 54 | 55 | @import "box/skin/boxBasic"; 56 | 57 | /* ========================================================================== 58 | Divider 59 | ========================================================================== */ 60 | @import "divider/divider"; 61 | 62 | /* ========================================================================== 63 | List 64 | ========================================================================== */ 65 | @import "list/list"; 66 | 67 | @import "list/listWhitespace"; 68 | @include ooListWhitespace(); 69 | 70 | @import "list/skin/listBordered"; 71 | 72 | @import "list/skin/listBulleted"; 73 | 74 | @import "list/skin/listInline"; 75 | 76 | @import "list/skin/listInlineDivider"; 77 | 78 | @import "list/skin/listOrdered"; 79 | 80 | @import "list/skin/listUnbulleted"; 81 | 82 | /* ========================================================================== 83 | Media block 84 | ========================================================================== */ 85 | @import "media/media"; 86 | 87 | /* ========================================================================== 88 | Inline media block 89 | ========================================================================== */ 90 | @import "mediaInline/mediaInline"; 91 | 92 | /* ========================================================================== 93 | Table 94 | ========================================================================== */ 95 | @import "table/table"; 96 | 97 | @import "table/tableWhitespace"; 98 | @include ooTableWhitespace(); 99 | //Default spacing: 5px, 10px, 20px. 0 spacing is always added. 100 | 101 | /* ========================================================================== 102 | Form 103 | ========================================================================== */ 104 | @import "form/form"; 105 | 106 | @import "form/label/label"; 107 | 108 | @import "form/input/input"; 109 | 110 | @import "form/select/select"; 111 | 112 | @import "form/checkboxRadio/checkboxRadio"; 113 | 114 | @import "form/textarea/textarea"; 115 | 116 | @import "form/fieldGroup/fieldGroup"; 117 | 118 | @import "form/fieldGroupInline/fieldGroupInline"; 119 | 120 | @import "form/fieldRange/fieldRange"; 121 | 122 | /* ========================================================================== 123 | Button 124 | ========================================================================== */ 125 | @import "button/button"; 126 | 127 | @import "button/buttonSkin"; 128 | 129 | /* ========================================================================== 130 | Template 131 | ========================================================================== */ 132 | @import "template/template"; 133 | 134 | /* ========================================================================== 135 | Icon 136 | ========================================================================== */ 137 | //Uncomment if you need sprite icons 138 | // @import "icon/icon"; 139 | 140 | // @import "icon/skin/iconExt"; 141 | 142 | // @import "icon/skin/iconCompact"; 143 | 144 | /* ========================================================================== 145 | Whitespace 146 | ========================================================================== */ 147 | 148 | @import "whitespace/_whitespace"; 149 | @include whitespace((), 4); 150 | //can specify the units you want to use, or number of classes you want 151 | 152 | -------------------------------------------------------------------------------- /oocss/src/components/table/_table.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Base table mixin that provides helper classes for aligning table content 3 | * @name Table Mixin 4 | * @author mobywhale 5 | * @tested chrome, firefox 6 | * @requires --- 7 | */ 8 | 9 | .table { 10 | @extend %baseSpacing; 11 | width: 100%; 12 | thead { 13 | th { 14 | @include fontSize($baseFontSize); 15 | font-weight: bold; 16 | color: $baseTextColor; 17 | } 18 | } 19 | 20 | th, 21 | td { 22 | padding: 8px; 23 | } 24 | 25 | /* horizontal alignment */ 26 | table .txtC, table tr .txtC { 27 | @extend .txtC; 28 | } 29 | table .txtL, table tr .txtL { 30 | @extend .txtL; 31 | } 32 | table .txtR, table tr .txtR { 33 | @extend .txtR; 34 | } 35 | 36 | /* vertical alignment */ 37 | table .txtT, table tr .txtT { 38 | @extend .txtT; 39 | } 40 | table .txtB, table tr .txtB { 41 | @extend .txtB; 42 | } 43 | table .txtM, table tr .txtM { 44 | @extend .txtM; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /oocss/src/components/table/_tableWhitespace.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Table Spacing helpers 3 | ========================================================================== */ 4 | 5 | /** 6 | * Table Spacing helpers 7 | * Should be used to modify the default spacing of table cells. 8 | * 9 | * 10 | * t table 11 | * a,h,v all,horizontal,vertical 12 | * s,m,l,n small(5px),medium(10px),large(20px),none(0px) 13 | */ 14 | 15 | $whitespace-keys: (t padding, a '', v -top -bottom, h -left -right); 16 | @function expand-whitespace-key($k) { 17 | @each $pair in $whitespace-keys { 18 | $short: nth($pair, 1); 19 | $long: nth($pair, 2); 20 | // v and h need to pass in 2 parameters 21 | @if (length($pair) == 3) { 22 | $long: (nth($pair, 2) nth($pair, 3)) 23 | } 24 | @if $short == $k { 25 | @return $long; 26 | } 27 | } 28 | @warn "Couldn't expand #{$k}"; 29 | @return $k; 30 | } 31 | 32 | /* 33 | * Define your own spacing classes for table 34 | * 35 | * @param $units - specific spacing units you want to use. Must go from small to large 36 | * e.g. @include ooTableWhitespace((5px,10px,20px)); 37 | * 38 | */ 39 | 40 | @mixin ooTableWhitespace($sizes: (5px, 10px, 20px)) { 41 | //for now assume this list is always ascending 42 | /* build spacing exceptions */ 43 | $sizes: join(0, $sizes); 44 | $size-names: (); 45 | @if (length($sizes) == 1) { 46 | $size-names: (n); 47 | @warn "One spacing class isn't usually enough. Typically you should choose at least three."; 48 | } @else if (length($sizes) == 2) { 49 | $size-names: (n, s); 50 | @warn "Two spacing classes isn't usually enough. Typically you should choose at least three."; 51 | } @else if (length($sizes) == 3) { 52 | $size-names: (n, s, m); 53 | } @else if (length($sizes) == 4) { 54 | $size-names: (n, s, m, l); 55 | } @else if (length($sizes) == 5) { 56 | $size-names: (n, s, m, l, xl); 57 | } @else if (length($sizes) < 5) { 58 | $size-names: (n, xs, s, m, l, xl); 59 | @warn "No more than five spacing classes are supported, typically you want to have three."; 60 | } 61 | $types: (t); 62 | $locations: (a, v, h); 63 | @each $location in $locations { 64 | @each $size-name in $size-names { 65 | @each $type in $types { 66 | .#{$type}#{$location}#{$size-name} td, 67 | .#{$type}#{$location}#{$size-name} th { 68 | //get returned list of locations. Can't assign to variable as it turns into 1 item in the list, not multiple items 69 | @each $whitespace-location in expand-whitespace-key($location) { 70 | #{expand-whitespace-key($type)}#{$whitespace-location}: nth($sizes, index($size-names, $size-name)); 71 | } 72 | } 73 | } 74 | } 75 | } 76 | } -------------------------------------------------------------------------------- /oocss/src/components/table/table.handlebars: -------------------------------------------------------------------------------- 1 |
    2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
    Header 1Header 2Header 3
    Text align left by defaultText align centerText align right
    Text align left by defaultText align centerText align right
    23 |
    -------------------------------------------------------------------------------- /oocss/src/components/table/table_doc.handlebars: -------------------------------------------------------------------------------- 1 |

    {{longname}}

    2 | 3 |

    4 | Tables are used for structuring tabular data. You will need to set the width of the columns yourself. 5 |

    6 | 7 |
    8 | 9 | 10 | 11 | 12 | 13 | {{#each skins}} 14 | {{#if className}} 15 | 16 | 17 | 18 | 19 | {{/if}} 20 | {{/each}} 21 | 22 | 23 | 33 | 34 |
    tableBase class. Required. Skins and subclasses that extend table should add their classname to this element.
    {{className}}{{{doc}}}
    Positioning helper classes 24 |
      25 |
    • txtL - align the text to the left of the cell (default)
      • 26 |
    • txtC - horizontally center the text in the cell
      • 27 |
    • txtR - horizontally align the text to the right of the cell
      • 28 |
    • txtT - vertically align text to the top of the cell
      • 29 |
    • txtM - vertically align text to the middle of the cell (default)
      • 30 |
    • txtB - vertically align text to the bottom of the cell
      • 31 |
    32 |
    35 |
    36 | 37 |
      38 | {{#each skins}} 39 |
    • 40 |

      {{title}}

      41 | {{{html}}} 42 | {{{htmlcode}}} 43 |
      • 44 | {{/each}} 45 |
    46 | 47 |

    Table Spacing

    48 | 49 |

    Table has a set of spacing classes that you can use to alter the spacing between cells. A single class can be applied to the table and all td and th children will be modified.

    50 | 51 |

    The classes are constructed by specifying <type><location><size>.

    52 | 53 |
    54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 |
    Type:
    ttableSpace on the inside of each of the td and th children of the element
    Location:
    aallAdds spacing to all sides of the children td and th.
    hhorizontalAdds spacing to the left and right of the td and th.
    vverticalAdds spacing to the top and bottom of the td and th.
    Size:
    llargeAdds 20 pixels of space
    mmediumAdds 10 pixels of space
    ssmallAdds 5 pixels of space
    nnoneSets any existing space to 0
    105 |
    106 | 107 |

    Example table with large spacing applied - tal

    108 | 109 |
    110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 |
    Header 1Header 2Header 3
    Lorem ipsumLorem ipsumLorem ipsum
    Lorem ipsumLorem ipsumLorem ipsum
    131 |
    -------------------------------------------------------------------------------- /oocss/src/components/template/_template.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Template 3 | */ 4 | 5 | body { 6 | background: $bodyBg; 7 | } 8 | 9 | .container { 10 | width: 90%; 11 | max-width: $contentWidth; 12 | margin: 0 auto; 13 | } 14 | 15 | .logo { 16 | @include fontSize(40px); 17 | } 18 | 19 | .footer { 20 | .container { 21 | padding: .5em 0 0; 22 | border-top: 1px solid $footerBorder; 23 | } 24 | } -------------------------------------------------------------------------------- /oocss/src/components/typography/_typeColor.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Various type colors 3 | * @name typecolor 4 | * @author 5 | * @tested 6 | * @requires 7 | */ 8 | 9 | @mixin ooTypeColor($name, $color) { 10 | .#{$name} { 11 | color: $color; 12 | } 13 | } -------------------------------------------------------------------------------- /oocss/src/components/typography/_typography.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Base typography styles. 3 | * @name Typography 4 | * @author 5 | * @tested 6 | * @requires variables.scss 7 | */ 8 | 9 | $debugTypography: false; 10 | // set to true to turn on base line stripes 11 | 12 | /* ========================================================================== 13 | Base Type 14 | ========================================================================== */ 15 | html { 16 | font-size: 100%; 17 | } 18 | 19 | body { 20 | @include fontSize($baseFontSize); 21 | font-family: $baseFontFamily; 22 | line-height: $baseLineHeight; 23 | color: $baseTextColor; 24 | } 25 | 26 | body, 27 | input, 28 | select, 29 | textarea { 30 | font-family: $baseFontFamily; 31 | } 32 | 33 | /* ========================================================================== 34 | Headings and paragraph 35 | ========================================================================== */ 36 | h1, .h1, 37 | h2, .h2, 38 | h3, .h3, 39 | h4, .h4, 40 | h5, .h5, 41 | h6, .h6 { 42 | font-style: normal; 43 | @extend %baseSpacing; 44 | } 45 | 46 | h1, .h1 { 47 | @include fontSize(20px); 48 | } 49 | 50 | h2, .h2 { 51 | @include fontSize(17px); 52 | } 53 | 54 | h3, .h3 { 55 | @include fontSize(14px); 56 | } 57 | 58 | h4, .h4 { 59 | @include fontSize(13px); 60 | } 61 | 62 | h5, .h5 { 63 | @include fontSize(13px); 64 | } 65 | 66 | h6, .h6 { 67 | @include fontSize(11px); 68 | } 69 | 70 | p { 71 | @extend %baseSpacing; 72 | } 73 | 74 | /* ========================================================================== 75 | Code 76 | ========================================================================== */ 77 | pre, 78 | code { 79 | font-family: Consolas, Monaco, "Lucida Console", monospace; 80 | } 81 | 82 | /* debug */ 83 | @if $debugTypography { 84 | body { 85 | // thank you lea ;) 86 | background-color: #fff; 87 | background-image: -webkit-linear-gradient(transparent 50%, rgba(0, 0, 0, .1) 50%); 88 | background-size: $baseLineHeight*2 $baseLineHeight*2; 89 | } 90 | } -------------------------------------------------------------------------------- /oocss/src/components/typography/skin/_typeHighlight.scss: -------------------------------------------------------------------------------- 1 | @include ooTypeColor("typeHighlight", $typeHighlight) -------------------------------------------------------------------------------- /oocss/src/components/typography/skin/_typeLowlight.scss: -------------------------------------------------------------------------------- 1 | @include ooTypeColor("typeLowlight", $typeLowlight) -------------------------------------------------------------------------------- /oocss/src/components/typography/skin/_typeUpper.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Uppercase type 3 | * @name typeUpper 4 | * @author Fiona 5 | * @tested 6 | * @requires -- 7 | */ 8 | 9 | @mixin ooTypeUpper { 10 | .typeUpper { 11 | text-transform: uppercase; 12 | } 13 | } -------------------------------------------------------------------------------- /oocss/src/components/typography/typography.handlebars: -------------------------------------------------------------------------------- 1 | <{{elementType}} 2 | {{#if backgroundClassName}} 3 | {{#if className}} 4 | class="{{className}} {{backgroundClassName}}" 5 | {{else}} 6 | class="{{backgroundClassName}}" 7 | {{/if}} 8 | {{else}} 9 | {{#if className}}class="{{className}}"{{/if}} 10 | {{/if}}>{{title}} -------------------------------------------------------------------------------- /oocss/src/components/typography/typography_doc.handlebars: -------------------------------------------------------------------------------- 1 |

    {{longname}}

    2 | 3 |

    Basic typography information

    4 |
      5 |
    • Base font size:
      • 6 |
    • Font family:
      • 7 |
    • Text color:
      • 8 |
    9 | 10 |
    11 | 12 | 13 | 14 | 15 | 16 | {{#each skins}} 17 | {{#if className}} 18 | {{#if doc}} 19 | 20 | 21 | 22 | 23 | {{/if}} 24 | {{/if}} 25 | {{/each}} 26 |
    h<n>Heading classes. Use when you need to make headings into different sizes.
    {{className}}{{{doc}}}
    27 |
    28 | 29 | {{#each skins}} 30 |
    31 |
    32 | {{{html}}} 33 |
    34 |
    35 | {{{htmlcode}}} 36 |
    37 |
    38 | {{/each}} -------------------------------------------------------------------------------- /oocss/src/components/typography/typography_test.handlebars: -------------------------------------------------------------------------------- 1 |

    {{longname}} test

    2 | 3 |

    h1. Lorem ipsum nostrud qui esse in sit in. Lorem ipsum veniam sint eu dolor aute Excepteur eu do aliqua do. Lorem ipsum pariatur in et occaecat Excepteur ex in aliqua.

    4 | 5 |

    h2. Lorem ipsum nostrud qui esse in sit in. Lorem ipsum veniam sint eu dolor aute Excepteur eu do aliqua do. Lorem ipsum pariatur exercitation eu consectetur reprehenderit ex non sint proident sit sunt veniam.

    6 | 7 |

    h3. Lorem ipsum nostrud qui esse in sit in. Lorem ipsum veniam sint eu dolor aute Excepteur eu do aliqua do. Lorem ipsum pariatur exercitation eu consectetur reprehenderit ex non sint proident sit sunt veniam.

    8 | 9 |

    h4. Lorem ipsum nostrud qui esse in sit in. Lorem ipsum veniam sint eu dolor aute Excepteur eu do aliqua do. Lorem ipsum pariatur exercitation eu consectetur reprehenderit ex non sint proident sit sunt veniam.

    10 | 11 |
    h5. Lorem ipsum nostrud qui esse in sit in. Lorem ipsum veniam sint eu dolor aute Excepteur eu do aliqua do. Lorem ipsum pariatur exercitation eu consectetur reprehenderit ex non sint proident sit sunt veniam.
    12 | 13 |
    h6. Lorem ipsum nostrud qui esse in sit in. Lorem ipsum veniam sint eu dolor aute Excepteur eu do aliqua do. Lorem ipsum pariatur exercitation eu consectetur reprehenderit ex non sint proident sit sunt veniam.
    14 | 15 |

    p. Lorem ipsum nostrud qui esse in sit in. Lorem ipsum veniam sint eu dolor aute Excepteur eu do aliqua do. Lorem ipsum pariatur exercitation eu consectetur reprehenderit ex non sint proident sit sunt veniam.

    -------------------------------------------------------------------------------- /oocss/src/components/utils/_clearfix-me.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * clearfix used project wide to clear floats and create a new formatting context 3 | * usage @include clearfix-me() 4 | * $clearfix-method sets default method 5 | */ 6 | 7 | // set default clearfix method to overflow 8 | $clearfix-method: overflow !default; 9 | // can be one of: overflow,facebook,micro,stubborn 10 | 11 | // create stub classes for each of the four clearfix methods 12 | 13 | %clearfix-overflow { 14 | overflow: hidden; 15 | *overflow: visible; 16 | zoom: 1; 17 | } 18 | 19 | %clearfix-facebook { 20 | display: table-cell; 21 | vertical-align: top; 22 | width: 10000px !important; 23 | *display: block; 24 | //<=IE7 25 | *zoom: 1; 26 | //<=IE7 27 | *width: auto !important; 28 | //<=IE7 29 | } 30 | 31 | %clearfix-micro { 32 | zoom: 1; 33 | //@include has-layout; 34 | &:before, 35 | &:after { 36 | content: " "; 37 | display: table; 38 | } 39 | &:after { 40 | clear: both; 41 | } 42 | } 43 | 44 | %clearfix-stubborn { 45 | display: table-cell; 46 | &:after { 47 | clear: both; 48 | display: block; 49 | visibility: hidden; 50 | overflow: hidden; 51 | height: 0 !important; 52 | line-height: 0; 53 | font-size: xx-large; 54 | content: "x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x"; 55 | } 56 | } 57 | 58 | // extends so the output will be smaller 59 | 60 | @mixin clearfix-me($method: $clearfix-method) { 61 | @if $method != overflow and $method != facebook and $method != micro and $method != stubborn { 62 | @warn "The clearfix method #{$method} is unkown"; 63 | @extend %clearfix-micro; 64 | } @else { 65 | //@debug "clearfix method recognized:"; 66 | //@debug $method; 67 | @extend %clearfix-#{$method}; 68 | } 69 | 70 | } -------------------------------------------------------------------------------- /oocss/src/components/utils/_fontSize.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Convert font-size from px to rem with px fallback 3 | * 4 | * @param $size - the value in pixel you want to convert 5 | * 6 | * e.g. p {@include fontSize(12px);} 7 | * 8 | */ 9 | 10 | // Function for converting a px based font-size to rem. 11 | @function calculateRem($size) { 12 | $remSize: $size / 16px; 13 | //Default font size on html element is 100%, equivalent to 16px; 14 | @return #{$remSize}rem; 15 | } 16 | 17 | // Mixin that will include the fall back px declaration as well as the calculated rem value. 18 | @mixin fontSize($size) { 19 | font-size: $size; 20 | font-size: calculateRem($size); 21 | } -------------------------------------------------------------------------------- /oocss/src/components/utils/_hideFully.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Hide Fully 3 | ========================================================================== */ 4 | 5 | /** 6 | * @desc Hide from both screenreaders and browsers. Adapted from HTML5 Boilerplate. h5bp.com/u 7 | * @name hideFully 8 | * @author Fiona 9 | * @tested IE6-9, Firefox, Chrome, Safari 10 | * @requires N/A 11 | */ 12 | 13 | .hideFully { 14 | display: none !important; 15 | visibility: hidden; 16 | } -------------------------------------------------------------------------------- /oocss/src/components/utils/_hideText.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Hide 3 | ========================================================================== */ 4 | 5 | /** 6 | * @desc Various techniques for hiding elements. Adapted from HTML5 Boilerplate. 7 | * @name hide 8 | * @author Fiona 9 | * @tested IE6-9, Firefox, Chrome, Safari 10 | * @requires N/A 11 | */ 12 | 13 | /* Hide text off screen */ 14 | @mixin ooHideText() { 15 | .hideText { 16 | background-color: transparent; 17 | border: 0; 18 | overflow: hidden; 19 | *text-indent: -9999px; /* IE 6/7 fallback */ 20 | } 21 | .hideText:before { 22 | content: ""; 23 | display: block; 24 | width: 0; 25 | height: 100%; 26 | } 27 | } 28 | 29 | /* Hide from both screenreaders and browsers: h5bp.com/u */ 30 | @mixin ooHideFully { 31 | .hideFully { 32 | display: none !important; 33 | visibility: hidden; 34 | } 35 | } 36 | 37 | /* Hide only visually, but have it available for screenreaders: h5bp.com/v */ 38 | @mixin ooHideVisually { 39 | .hideVisually { 40 | border: 0; 41 | clip: rect(0 0 0 0); 42 | height: 1px; 43 | margin: -1px; 44 | overflow: hidden; 45 | padding: 0; 46 | position: absolute; 47 | width: 1px; 48 | } 49 | } 50 | 51 | /* Extends the .hideVisually class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */ 52 | @mixin ooHideVisuallyFocusable { 53 | .hideVisually.focusable:active, 54 | .hideVisually.focusable:focus { 55 | clip: auto; 56 | height: auto; 57 | margin: 0; 58 | overflow: visible; 59 | position: static; 60 | width: auto; 61 | } 62 | } -------------------------------------------------------------------------------- /oocss/src/components/utils/_hideVisually.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Hide Visually 3 | ========================================================================== */ 4 | 5 | /** 6 | * @desc Hide element visually but allow screenreaders to read it. Adapted from HTML5 Boilerplate. 7 | * @name hide 8 | * @author Fiona 9 | * @tested IE6-9, Firefox, Chrome, Safari 10 | * @requires N/A 11 | */ 12 | 13 | .hideVisually { 14 | border: 0; 15 | clip: rect(0 0 0 0); 16 | height: 1px; 17 | margin: -1px; 18 | overflow: hidden; 19 | padding: 0; 20 | position: absolute; 21 | width: 1px; 22 | } 23 | 24 | /* Extends the .hideVisually class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */ 25 | .hideVisually.focusable:active, 26 | .hideVisually.focusable:focus { 27 | clip: auto; 28 | height: auto; 29 | margin: 0; 30 | overflow: visible; 31 | position: static; 32 | width: auto; 33 | } -------------------------------------------------------------------------------- /oocss/src/components/utils/_inlineBlockFix.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Make elements into inline-block with IE7 fix. Use it only when you need to make a 3 | * block level element inline-block. Elements that are inline by default won't need the 4 | * IE7 fix. 5 | * 6 | * Usage @extend %nlineBlockFix; 7 | * 8 | */ 9 | 10 | %inlineBlockFix { 11 | display: inline-block; 12 | *display: inline; 13 | *zoom: 1; 14 | } -------------------------------------------------------------------------------- /oocss/src/components/utils/_pxToEm.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Convert px to em 3 | * 4 | * @param $elFontSize - the element font size in pixel e.g. you want to set margin on your text, 5 | * and font size on your text is equivalent to 14px, then your context is 14px. 6 | * 7 | * @param $values - the values in pixel you want to convert. 8 | * You can pass in an array of values. Each value separated by space. 9 | * 10 | * e.g. margin: pxToEm(16px 20px 20px 16px, 16px); 11 | * 12 | */ 13 | 14 | @function pxToEm ($values, $elFontSize: $baseFontSize) { 15 | $list: (); 16 | 17 | @each $value in $values { 18 | @if ($value == 0 or $value == auto) { 19 | $list: append($list, $value); 20 | } @else { 21 | $emValue: ($value/$elFontSize)+em; 22 | $list: append($list, $emValue); 23 | } 24 | } 25 | @return $list; 26 | } 27 | -------------------------------------------------------------------------------- /oocss/src/components/utils/_textAlign.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Aligning text 3 | * @name textAlign 4 | * @author 5 | * @tested 6 | * @requires 7 | */ 8 | 9 | // horizontal alignment 10 | .txtC { 11 | text-align: center; 12 | } 13 | 14 | .txtL { 15 | text-align: left; 16 | } 17 | 18 | .txtR { 19 | text-align: right; 20 | } 21 | 22 | // vertical alignment 23 | .txtT { 24 | vertical-align: top; 25 | } 26 | 27 | .txtB { 28 | vertical-align: bottom; 29 | } 30 | 31 | .txtM { 32 | vertical-align: middle; 33 | } 34 | -------------------------------------------------------------------------------- /oocss/src/components/utils/utils.handlebars: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stubbornella/oocss/0c146a17e13d7b9d5797ffbf2805ce482cbddd9b/oocss/src/components/utils/utils.handlebars -------------------------------------------------------------------------------- /oocss/src/components/utils/utils_doc.handlebars: -------------------------------------------------------------------------------- 1 |

    {{longname}}

    2 | 3 |

    Use these classes sparingly.

    4 | 5 |

    Horizontal Text Alignment

    6 |
    7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
    txtLAlign text left
    txtCAlign text center
    txtRAlign text right
    21 |
    22 | 23 |

    Vertical Text Alignment

    24 |
    25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 |
    txtTAlign text top
    txtBAlign text bottom
    txtMAlign text middle
    39 |
    40 | 41 |

    Hiding Things

    42 |
    43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 |
    hideTextHides only text of an element.
    hideFullyHides content both visually and from screen readers.
    hideVisuallyHides content visually but allow screen reader to read it.
    hideVisually.focusableHide content visually but can be focused on e.g. used on skip link.
    61 |
    62 | -------------------------------------------------------------------------------- /oocss/src/components/whitespace/_whitespace.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc Create spacing classes and default spacing. 3 | * @name Whitespace 4 | * @author Fiona 5 | * @tested Safari, Chrome, Firefox, IE7-9 6 | * @requires _variables.scss 7 | */ 8 | 9 | $debugSpacing: false; 10 | 11 | /* ========================================================================== 12 | Default spacing 13 | ========================================================================== */ 14 | 15 | %baseSpacing { 16 | margin-top: $baseSpacing; 17 | margin-bottom: $baseSpacing; 18 | } 19 | 20 | table { 21 | h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, .media, pre { 22 | margin-top: 0; 23 | margin-bottom: 0; 24 | } 25 | } 26 | 27 | /* * 28 | * debug default spacing 29 | * set $debug-spacing to true to visualize spacing and positioning 30 | */ 31 | @if $debugSpacing { 32 | h1, h2, h3, h4, h5, h6, ul, ol, dl, p, blockquote, .media, pre, .data { 33 | outline: 1px solid aqua; 34 | } 35 | .media { 36 | outline: 1px solid magenta; 37 | } 38 | :first-child { 39 | outline: 1px solid yellow; 40 | } 41 | :last-child { 42 | outline: 1px solid green; 43 | } 44 | } 45 | 46 | /* ========================================================================== 47 | Spacing helpers 48 | ========================================================================== */ 49 | 50 | /** 51 | * Spacing helpers 52 | * Should be used to modify the default spacing between objects (not between nodes of the same object) 53 | * Please use judiciously. You want to be using defaults most of the time, these are exceptions! 54 | * 55 | * 56 | * p,m padding,margin 57 | * a,t,r,b,l,h,v all,top,right,bottom,left,horizontal,vertical 58 | * s,m,l,n small(5px),medium(10px),large(20px),none(0px) 59 | */ 60 | 61 | $whitespace-keys: (p padding, m margin, a '', v -top -bottom, h -left -right, t -top, r -right, b -bottom, l -left); 62 | @function expand-whitespace-key($k) { 63 | @each $pair in $whitespace-keys { 64 | $short: nth($pair, 1); 65 | $long: nth($pair, 2); 66 | // v and h need to pass in 2 parameters 67 | @if (length($pair) == 3) { 68 | $long: (nth($pair, 2) nth($pair, 3)) 69 | } 70 | @if $short == $k { 71 | @return $long; 72 | } 73 | } 74 | @warn "Couldn't expand #{$k}"; 75 | @return $k; 76 | } 77 | 78 | /* 79 | * Can define your own spacing units, or calculate the units based on how many spacing sizes you want 80 | * 81 | * @param $units - specific spacing units you want to use. Must go from small to large 82 | * e.g. @include whitespace((5px,10px,20px)); 83 | * 84 | * @param $sizes - how many sizes you want. Calculate sizes based on line-height 85 | * e.g. @include whitespace((), 4); 86 | * 87 | */ 88 | @mixin whitespace($units: (), $sizes: 4) { 89 | $tShirtSizes: (n,s,m,l,xl); 90 | $types: (p,m); 91 | $locations: (a, v, h, t, r, b, l); 92 | $fontHeight: ($baseFontSize/1px) * $baseLineHeight; 93 | //calculate font height 94 | 95 | //if user didn't define their own spacing units 96 | @if length($units) == 0 { 97 | @for $i from 1 through $sizes { 98 | $unit: (round($fontHeight/$i))+px; 99 | //calculate unit base on fraction of font height 100 | $units: join($unit, $units); 101 | } 102 | } 103 | $units: join(0, $units); 104 | 105 | // @debug $units; 106 | 107 | @for $i from 1 through length($units) { 108 | 109 | $tShirtSize: nth($tShirtSizes, $i); 110 | 111 | @each $location in $locations { 112 | @each $type in $types { 113 | .#{$type}#{$location}#{$tShirtSize} { 114 | @each $whitespace-location in expand-whitespace-key($location) { 115 | #{expand-whitespace-key($type)}#{$whitespace-location}: nth($units, $i) !important; 116 | } 117 | } 118 | } 119 | } 120 | } 121 | } -------------------------------------------------------------------------------- /oocss/src/components/whitespace/whitespace.handlebars: -------------------------------------------------------------------------------- 1 |

    This paragraph has a 20 pixel padding on all sides.

    -------------------------------------------------------------------------------- /oocss/src/components/whitespace/whitespace_doc.handlebars: -------------------------------------------------------------------------------- 1 |

    {{longname}}

    2 | 3 |

    Most elements will have the correct spacing by default, so in most cases, spacing classes will not be needed. However, if you need to tweak elements by using margin or padding, use the following classes rather than adding to the CSS file.

    4 | 5 |

    Please use these to tweak existing elements rather than use these classes when building legos.

    6 | 7 |

    The classes are constructed by specifying <type><location><size>.

    8 | 9 |
    10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 |
    Type:
    ppaddingSpace on the inside of the element
    mmarginSpace on the outside of the element
    Location:
    aallAdds spacing on all sides of the element
    ttopAdds spacing to the top of the element
    rrightAdds spacing to the right of the element
    bbottomAdds spacing to the bottom of the element
    lleftAdds spacing to the left of the element
    hhorizontalAdds spacing to the left and right of the element
    vverticalAdds spacing to the top and bottom of the element
    Size:
    llargeAdds 21 pixels of space
    mmediumAdds 10 pixels of space
    ssmallAdds 5 pixels of space
    nnoneSets any existing space to 0
    86 |
    87 | 88 |
      89 | {{#each skins}} 90 |
    • 91 | {{{html}}} 92 | {{{htmlcode}}} 93 |
      • 94 | {{/each}} 95 |
    96 | -------------------------------------------------------------------------------- /oocss/src/docs/_scripts_doc.handlebars: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /oocss/src/docs/component_doc_template.handlebars: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{!include "../includes/_headTemplate.handlebars"}} 5 | {{!include "../includes/_headDoc.handlebars"}} 6 | 7 | 8 | 9 | {{!include "../includes/_header.handlebars"}} 10 | 11 |
    12 |
    13 |
    14 |
    15 |
    16 | {{{content}}} 17 |
    18 |
    19 |
    20 | 21 |
    22 |
    23 | 24 | 25 | {{!include "../includes/_footer.handlebars"}} 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /oocss/src/docs/library.handlebars: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{!include "../includes/_headTemplate.handlebars"}} 5 | {{!include "../includes/_headDoc.handlebars"}} 6 | 7 | 8 | 9 | {{!include "../includes/_header.handlebars"}} 10 | 11 |
    12 |
    13 | 14 |
    15 |
    16 |
    17 | 18 |
    19 |
    20 |
      21 | 22 | 23 |
      24 |
      25 |
      26 | 27 | 28 |
      29 |
      30 | {{#each components}} 31 |
      32 | {{{this}}} 33 |
      34 | {{/each}} 35 |
      36 |
      37 | 38 |
      39 |
      40 | 41 | 42 | {{!include "../includes/_footer.handlebars"}} 43 | {{!include "_scripts_doc.handlebars"}} 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /oocss/src/includes/_footer.handlebars: -------------------------------------------------------------------------------- 1 |
      2 |
      3 |

      Some text in the footer.

      4 |
      5 |
      6 | 7 | {{!include "_scripts_after.handlebars"}} 8 | 9 | -------------------------------------------------------------------------------- /oocss/src/includes/_headDoc.handlebars: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /oocss/src/includes/_headTemplate.handlebars: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | [Client name] 10 | 11 | 12 | 13 | 14 | 17 | -------------------------------------------------------------------------------- /oocss/src/includes/_header.handlebars: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /oocss/src/includes/_scripts_after.handlebars: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /oocss/src/libs/css/github.css: -------------------------------------------------------------------------------- 1 | /** 2 | * GitHub theme 3 | * 4 | * @author Craig Campbell 5 | * @version 1.0.3 6 | */ 7 | pre { 8 | border: 1px solid #ccc; 9 | word-wrap: break-word; 10 | white-space: pre; /* CSS 2.0 */ 11 | white-space: pre-wrap; /* CSS 2.1 */ 12 | padding: 6px 10px; 13 | line-height: 19px; 14 | margin-bottom: 20px; 15 | } 16 | 17 | pre code { 18 | border: 0px; 19 | padding: 0px; 20 | margin: 0px; 21 | -moz-border-radius: 0px; 22 | -webkit-border-radius: 0px; 23 | border-radius: 0px; 24 | } 25 | 26 | pre, code { 27 | font-family: Consolas, Menlo, 'Liberation Mono', Courier, monospace; 28 | } 29 | 30 | pre { 31 | color: #333; 32 | background: #f8f8f8; 33 | -moz-border-radius: 3px; 34 | -webkit-border-radius: 3px; 35 | border-radius: 3px; 36 | } 37 | 38 | code { 39 | color: #D14; 40 | } 41 | 42 | pre, pre code { 43 | font-size: 13px; 44 | } 45 | 46 | pre .comment { 47 | color: #998; 48 | } 49 | 50 | pre .support { 51 | color: #0086B3; 52 | } 53 | 54 | pre .tag, pre .tag-name { 55 | color: navy; 56 | } 57 | 58 | pre .keyword, pre .css-property, pre .vendor-prefix, pre .sass, pre .class, pre .id, pre .css-value, pre .entity.function, pre .storage.function { 59 | font-weight: bold; 60 | } 61 | 62 | pre .css-property, pre .css-value, pre .vendor-prefix, pre .support.namespace { 63 | color: #333; 64 | } 65 | 66 | pre .constant.numeric, pre .keyword.unit, pre .hex-color { 67 | font-weight: normal; 68 | color: #099; 69 | } 70 | 71 | pre .entity.class { 72 | color: #458; 73 | } 74 | 75 | pre .entity.id, pre .entity.function { 76 | color: #900; 77 | } 78 | 79 | pre .attribute, pre .variable { 80 | color: teal; 81 | } 82 | 83 | pre .string, pre .support.value { 84 | font-weight: normal; 85 | color: #d14; 86 | } 87 | 88 | pre .regexp { 89 | color: #009926; 90 | } 91 | -------------------------------------------------------------------------------- /oocss/src/libs/script/docs.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | 3 | docsMenu('docH2'); 4 | 5 | if (document.getElementById('docNav')) { 6 | document.getElementById('toggleCode').onclick = function () { 7 | toggleDoc('hideCode'); 8 | }; 9 | 10 | document.getElementById('toggleDesignNotes').onclick = function () { 11 | toggleDoc('hideDesigNotes'); 12 | }; 13 | } 14 | 15 | // showViewPortDimensions(); 16 | }); 17 | 18 | var docsMenu; 19 | (function () { 20 | var docNav, navWrapper, navTrigger, navWrapperInner, docNavInner; 21 | 22 | function updateNavWrapperPosition(navWrapperStartPos) { 23 | if (navWrapperStartPos < 0) { 24 | navWrapperStartPos = findPos(navWrapper).top 25 | } 26 | if (getScrollTop() > navWrapperStartPos) { 27 | navWrapper.classList.add("docNavFixed"); 28 | } else { 29 | navWrapper.classList.remove("docNavFixed"); 30 | } 31 | } 32 | 33 | docsMenu = function (classname) { 34 | docNav = document.getElementById('docNav'); 35 | navWrapper = document.getElementById('docNavWrapper'); 36 | navWrapperInner = document.getElementById('docNavWrapperInner'); 37 | docNavInner = document.getElementById('docNavInner'); 38 | navTrigger = document.getElementById('docNavTrigger'); 39 | 40 | if (!docNav) return; 41 | 42 | var headings = document.getElementsByClassName(classname); 43 | //sort headings 44 | headings = Array.prototype.slice.call(headings).sort(function (a, b) { 45 | return a.innerHTML < b.innerHTML ? -1 : 1; 46 | }); 47 | 48 | for (var i = 0; i < headings.length; i++) { 49 | var id = headings[i].getAttribute('id'), 50 | componentName = headings[i].innerHTML, 51 | navItem = '
    • ' + componentName + '
      • '; 52 | 53 | docNav.innerHTML += (navItem); 54 | } 55 | 56 | //Toggle docNav 57 | navTrigger.onclick = (function () { 58 | var classname = 'docNavActive', 59 | classRe = new RegExp("(^|\\s)" + classname + "(\\s|$)", 'g'); 60 | 61 | if (classRe.test(navWrapper.className)) { 62 | navWrapper.className = navWrapper.className.replace(classRe, ' '); 63 | } else { 64 | navWrapper.className += ' ' + classname; 65 | updateToolbarSize(); 66 | } 67 | }); 68 | 69 | 70 | var navWrapperStartPos = -1; 71 | //Make docNav stick to top of viewport when scrolling. Uncomment this if you want to have menu that sticks to top of viewport 72 | window.addEventListener('scroll', function () { 73 | updateNavWrapperPosition(navWrapperStartPos); 74 | }); 75 | 76 | window.addEventListener('resize', function () { 77 | updateToolbarSize(); 78 | }); 79 | 80 | updateNavWrapperPosition(navWrapperStartPos); 81 | }; 82 | 83 | var diffHeight = -1, 84 | heightTrigger = 0, 85 | bottomgap = 5; 86 | 87 | function updateToolbarSize() { 88 | 89 | // if docNav opened calculate diffHeight 90 | if (diffHeight == -1 && /docNavActive/.test(navWrapper.className)) { 91 | diffHeight = docNavInner.offsetHeight - docNav.offsetHeight; 92 | heightTrigger = docNavInner.offsetHeight + docNavInner.offsetTop; 93 | } 94 | 95 | var newHeight = window.innerHeight - diffHeight - docNavInner.offsetTop; //navTrigger.offsetHeight; 96 | if (heightTrigger > window.innerHeight - bottomgap) { 97 | docNav.style.height = newHeight - bottomgap + 'px'; 98 | } else { 99 | docNav.style.height = 'auto'; 100 | } 101 | } 102 | })(); 103 | 104 | 105 | //Cross browser for scrolling detection. Uncomment this if you want to have menu that sticks to top of viewport 106 | function getScrollTop() { 107 | if (typeof pageYOffset != 'undefined') { 108 | //most browsers 109 | return pageYOffset; 110 | } 111 | else { 112 | var B = document.body; //IE 'quirks' 113 | var D = document.documentElement; //IE with doctype 114 | D = (D.clientHeight) ? D : B; 115 | return D.scrollTop; 116 | } 117 | } 118 | 119 | 120 | //Toggle 121 | function toggleDoc(classname) { 122 | var html = document.documentElement, 123 | classRe = new RegExp("(^|\\s)" + classname + "(\\s|$)", 'g'); 124 | 125 | //toggle the css class 126 | if (classRe.test(html.className)) { 127 | html.className = html.className.replace(classRe, ''); 128 | } else { 129 | html.className += ' ' + classname; 130 | } 131 | } 132 | 133 | function findPos(obj) { 134 | var curleft = 0, curtop = 0; 135 | do { 136 | curleft += obj.offsetLeft; 137 | curtop += obj.offsetTop; 138 | } while (obj = obj.offsetParent); 139 | 140 | return {left: curleft, top: curtop}; 141 | } 142 | 143 | function showViewPortDimensions() { 144 | var $div = $('
      '); 145 | 146 | function updateViewportDimensions() { 147 | $div.html(window.innerWidth + '×' + window.innerHeight); 148 | } 149 | 150 | $('body').prepend($div); 151 | $(window).resize(updateViewportDimensions); 152 | updateViewportDimensions(); 153 | } -------------------------------------------------------------------------------- /oocss/src/libs/script/rainbow/language/css.js: -------------------------------------------------------------------------------- 1 | /** 2 | * CSS patterns 3 | * 4 | * @author Craig Campbell 5 | * @version 1.0.7 6 | */ 7 | Rainbow.extend('css', [ 8 | { 9 | 'name': 'comment', 10 | 'pattern': /\/\*[\s\S]*?\*\//gm 11 | }, 12 | { 13 | 'name': 'constant.hex-color', 14 | 'pattern': /#([a-f0-9]{3}|[a-f0-9]{6})(?=;|\s)/gi 15 | }, 16 | { 17 | 'matches': { 18 | 1: 'constant.numeric', 19 | 2: 'keyword.unit' 20 | }, 21 | 'pattern': /(\d+)(px|em|cm|s|%)?/g 22 | }, 23 | { 24 | 'name': 'string', 25 | 'pattern': /('|")(.*?)\1/g 26 | }, 27 | { 28 | 'name': 'support.css-property', 29 | 'matches': { 30 | 1: 'support.vendor-prefix' 31 | }, 32 | 'pattern': /(-o-|-moz-|-webkit-|-ms-)?[\w-]+(?=\s?:)(?!.*\{)/g 33 | }, 34 | { 35 | 'matches': { 36 | 1: [ 37 | { 38 | 'name': 'entity.name.sass', 39 | 'pattern': /&/g 40 | }, 41 | { 42 | 'name': 'direct-descendant', 43 | 'pattern': />/g 44 | }, 45 | { 46 | 'name': 'entity.name.class', 47 | 'pattern': /\.[\w\-_]+/g 48 | }, 49 | { 50 | 'name': 'entity.name.id', 51 | 'pattern': /\#[\w\-_]+/g 52 | }, 53 | { 54 | 'name': 'entity.name.pseudo', 55 | 'pattern': /:[\w\-_]+/g 56 | }, 57 | { 58 | 'name': 'entity.name.tag', 59 | 'pattern': /\w+/g 60 | } 61 | ] 62 | }, 63 | 'pattern': /([\w\ ,:\.\#\&\;\-_]+)(?=.*\{)/g 64 | }, 65 | { 66 | 'matches': { 67 | 2: 'support.vendor-prefix', 68 | 3: 'support.css-value' 69 | }, 70 | 'pattern': /(:|,)\s?(-o-|-moz-|-webkit-|-ms-)?([a-zA-Z-]*)(?=\b)(?!.*\{)/g 71 | }, 72 | { 73 | 'matches': { 74 | 1: 'support.tag.style', 75 | 2: [ 76 | { 77 | 'name': 'string', 78 | 'pattern': /('|")(.*?)(\1)/g 79 | }, 80 | { 81 | 'name': 'entity.tag.style', 82 | 'pattern': /(\w+)/g 83 | } 84 | ], 85 | 3: 'support.tag.style' 86 | }, 87 | 'pattern': /(<\/?)(style.*?)(>)/g 88 | } 89 | ], true); 90 | -------------------------------------------------------------------------------- /oocss/src/libs/script/rainbow/language/generic.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Generic language patterns 3 | * 4 | * @author Craig Campbell 5 | * @version 1.0.9 6 | */ 7 | Rainbow.extend([ 8 | { 9 | 'matches': { 10 | 1: { 11 | 'name': 'keyword.operator', 12 | 'pattern': /\=/g 13 | }, 14 | 2: { 15 | 'name': 'string', 16 | 'matches': { 17 | 'name': 'constant.character.escape', 18 | 'pattern': /\\('|"){1}/g 19 | } 20 | } 21 | }, 22 | 'pattern': /(\(|\s|\[|\=|:)(('|")([^\\\1]|\\.)*?(\3))/gm 23 | }, 24 | { 25 | 'name': 'comment', 26 | 'pattern': /\/\*[\s\S]*?\*\/|(\/\/|\#)[\s\S]*?$/gm 27 | }, 28 | { 29 | 'name': 'constant.numeric', 30 | 'pattern': /\b(\d+(\.\d+)?(e(\+|\-)?\d+)?(f|d)?|0x[\da-f]+)\b/gi 31 | }, 32 | { 33 | 'matches': { 34 | 1: 'keyword' 35 | }, 36 | 'pattern': /\b(and|array|as|bool(ean)?|c(atch|har|lass|onst)|d(ef|elete|o(uble)?)|e(cho|lse(if)?|xit|xtends|xcept)|f(inally|loat|or(each)?|unction)|global|if|import|int(eger)?|long|new|object|or|pr(int|ivate|otected)|public|return|self|st(ring|ruct|atic)|switch|th(en|is|row)|try|(un)?signed|var|void|while)(?=\(|\b)/gi 37 | }, 38 | { 39 | 'name': 'constant.language', 40 | 'pattern': /true|false|null/g 41 | }, 42 | { 43 | 'name': 'keyword.operator', 44 | 'pattern': /\+|\!|\-|&(gt|lt|amp);|\||\*|\=/g 45 | }, 46 | { 47 | 'matches': { 48 | 1: 'function.call' 49 | }, 50 | 'pattern': /(\w+?)(?=\()/g 51 | }, 52 | { 53 | 'matches': { 54 | 1: 'storage.function', 55 | 2: 'entity.name.function' 56 | }, 57 | 'pattern': /(function)\s(.*?)(?=\()/g 58 | } 59 | ]); 60 | -------------------------------------------------------------------------------- /oocss/src/libs/script/rainbow/language/html.js: -------------------------------------------------------------------------------- 1 | /** 2 | * HTML patterns 3 | * 4 | * @author Craig Campbell 5 | * @version 1.0.7 6 | */ 7 | Rainbow.extend('html', [ 8 | { 9 | 'name': 'source.php.embedded', 10 | 'matches': { 11 | 2: { 12 | 'language': 'php' 13 | } 14 | }, 15 | 'pattern': /<\?=?(?!xml)(php)?([\s\S]*?)(\?>)/gm 16 | }, 17 | { 18 | 'name': 'source.css.embedded', 19 | 'matches': { 20 | 0: { 21 | 'language': 'css' 22 | } 23 | }, 24 | 'pattern': /<style(.*?)>([\s\S]*?)<\/style>/gm 25 | }, 26 | { 27 | 'name': 'source.js.embedded', 28 | 'matches': { 29 | 0: { 30 | 'language': 'javascript' 31 | } 32 | }, 33 | 'pattern': /<script(?! src)(.*?)>([\s\S]*?)<\/script>/gm 34 | }, 35 | { 36 | 'name': 'comment.html', 37 | 'pattern': /<\!--[\S\s]*?-->/g 38 | }, 39 | { 40 | 'matches': { 41 | 1: 'support.tag.open', 42 | 2: 'support.tag.close' 43 | }, 44 | 'pattern': /(<)|(\/?\??>)/g 45 | }, 46 | { 47 | 'name': 'support.tag', 48 | 'matches': { 49 | 1: 'support.tag', 50 | 2: 'support.tag.special', 51 | 3: 'support.tag-name' 52 | }, 53 | 'pattern': /(<\??)(\/|\!?)(\w+)/g 54 | }, 55 | { 56 | 'matches': { 57 | 1: 'support.attribute' 58 | }, 59 | 'pattern': /([a-z-]+)(?=\=)/gi 60 | }, 61 | { 62 | 'matches': { 63 | 1: 'support.operator', 64 | 2: 'string.quote', 65 | 3: 'string.value', 66 | 4: 'string.quote' 67 | }, 68 | 'pattern': /(=)('|")(.*?)(\2)/g 69 | }, 70 | { 71 | 'matches': { 72 | 1: 'support.operator', 73 | 2: 'support.value' 74 | }, 75 | 'pattern': /(=)([a-zA-Z\-0-9]*)\b/g 76 | }, 77 | { 78 | 'matches': { 79 | 1: 'support.attribute' 80 | }, 81 | 'pattern': /\s(\w+)(?=\s|>)(?![\s\S]*<)/g 82 | } 83 | ], true); 84 | -------------------------------------------------------------------------------- /oocss/src/libs/script/rainbow/language/javascript.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Javascript patterns 3 | * 4 | * @author Craig Campbell 5 | * @version 1.0.7 6 | */ 7 | Rainbow.extend('javascript', [ 8 | 9 | /** 10 | * matches $. or $( 11 | */ 12 | { 13 | 'name': 'selector', 14 | 'pattern': /(\s|^)\$(?=\.|\()/g 15 | }, 16 | { 17 | 'name': 'support', 18 | 'pattern': /\b(window|document)\b/g 19 | }, 20 | { 21 | 'matches': { 22 | 1: 'support.property' 23 | }, 24 | 'pattern': /\.(length|node(Name|Value))\b/g 25 | }, 26 | { 27 | 'matches': { 28 | 1: 'support.function' 29 | }, 30 | 'pattern': /(setTimeout|setInterval)(?=\()/g 31 | 32 | }, 33 | { 34 | 'matches': { 35 | 1: 'support.method' 36 | }, 37 | 'pattern': /\.(getAttribute|push|getElementById|getElementsByClassName|log|setTimeout|setInterval)(?=\()/g 38 | }, 39 | { 40 | 'matches': { 41 | 1: 'support.tag.script', 42 | 2: [ 43 | { 44 | 'name': 'string', 45 | 'pattern': /('|")(.*?)(\1)/g 46 | }, 47 | { 48 | 'name': 'entity.tag.script', 49 | 'pattern': /(\w+)/g 50 | } 51 | ], 52 | 3: 'support.tag.script' 53 | }, 54 | 'pattern': /(<\/?)(script.*?)(>)/g 55 | }, 56 | 57 | /** 58 | * matches any escaped characters inside of a js regex pattern 59 | * 60 | * @see https://github.com/ccampbell/rainbow/issues/22 61 | * 62 | * this was causing single line comments to fail so it now makes sure 63 | * the opening / is not directly followed by a * 64 | * 65 | * @todo check that there is valid regex in match group 1 66 | */ 67 | { 68 | 'name': 'string.regexp', 69 | 'matches': { 70 | 1: 'string.regexp.open', 71 | 2: { 72 | 'name': 'constant.regexp.escape', 73 | 'pattern': /\\(.){1}/g 74 | }, 75 | 3: 'string.regexp.close', 76 | 4: 'string.regexp.modifier' 77 | }, 78 | 'pattern': /(\/)(?!\*)(.+)(\/)([igm]{0,3})/g 79 | }, 80 | 81 | /** 82 | * matches runtime function declarations 83 | */ 84 | { 85 | 'matches': { 86 | 1: 'storage', 87 | 3: 'entity.function' 88 | }, 89 | 'pattern': /(var)?(\s|^)(.*)(?=\s?=\s?function\()/g 90 | }, 91 | 92 | /** 93 | * matches constructor call 94 | */ 95 | { 96 | 'matches': { 97 | 1: 'keyword', 98 | 2: 'entity.function' 99 | }, 100 | 'pattern': /(new)\s+(.*)(?=\()/g 101 | }, 102 | 103 | /** 104 | * matches any function call in the style functionName: function() 105 | */ 106 | { 107 | 'name': 'entity.function', 108 | 'pattern': /(\w+)(?=:\s{0,}function)/g 109 | } 110 | ]); 111 | -------------------------------------------------------------------------------- /oocss/src/template/template.handlebars: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{!include "../includes/_headTemplate.handlebars"}} 6 | 7 | 8 | 9 | 10 | {{!include "../includes/_header.handlebars"}} 11 | 12 |
      13 |
      14 |
      15 | 18 | 19 |
      20 |

      main

      21 |
      22 | 23 |
      24 |
      25 |
      26 | 27 | 28 | {{!include "../includes/_footer.handlebars"}} 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /oocss/src/workshop/assets/readme.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stubbornella/oocss/0c146a17e13d7b9d5797ffbf2805ce482cbddd9b/oocss/src/workshop/assets/readme.md -------------------------------------------------------------------------------- /oocss/start/mac-start.command: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | directory="`dirname \"$0\"`" 3 | cd "$directory" 4 | cd .. 5 | vagrant up 6 | vagrant ssh -------------------------------------------------------------------------------- /oocss/start/mac-stop.command: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | directory="`dirname \"$0\"`" 3 | cd "$directory" 4 | cd .. 5 | vagrant halt -------------------------------------------------------------------------------- /oocss/start/win-start.bat: -------------------------------------------------------------------------------- 1 | @echo off 2 | 3 | cd .. 4 | vagrant up 5 | 6 | @echo ========================================================= 7 | @echo vagrant is stopped, you can now close the terminal window 8 | @echo and launch stop.bat for stopping the VM -------------------------------------------------------------------------------- /oocss/start/win-stop.bat: -------------------------------------------------------------------------------- 1 | @echo off 2 | 3 | cd .. 4 | vagrant halt 5 | del .vagrantstart 6 | @echo ========================================================= 7 | @echo vagrant is stopped, you can now close the terminal window -------------------------------------------------------------------------------- /oocss/tools/build.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | // REQUIRED 4 | var common = require('./common.js'); 5 | // DIRECTORIES + parameters 6 | common.build(); 7 | 8 | //move css file 9 | common.moveDocCSSFile(); 10 | 11 | -------------------------------------------------------------------------------- /oocss/tools/component.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Component creator 3 | * This file help to create a new component, the main fonctionnality are made with make, and this file will just modify 4 | */ 5 | var common = require("./common.js"); 6 | var fs = require("fs.extra"); 7 | 8 | 9 | function main() { 10 | var componentName = process.argv[2]; 11 | var componentPath = common.config.srcDir + 'components/' + componentName; 12 | addComponentName(componentPath, componentName); 13 | } 14 | 15 | function addComponentName(dir, componentName) { 16 | var dirContent = fs.readdirSync(dir); 17 | dirContent.forEach(function (file) { 18 | var filePath = dir + "/" + file; 19 | var stats = fs.statSync(filePath); 20 | if(stats.isDirectory()) { 21 | addComponentName(filePath, componentName); 22 | } else { 23 | var fileContent = fs.readFileSync(filePath, 'utf8') 24 | .replace(/\{\{componentName\}\}/g,componentName) //normal replace 25 | .replace(/\{\{ComponentName\}\}/g,componentName.charAt(0).toUpperCase() + componentName.slice(1)); 26 | 27 | fs.writeFileSync(filePath, fileContent, 'utf8'); 28 | } 29 | }); 30 | } 31 | 32 | main(); -------------------------------------------------------------------------------- /oocss/tools/componentTemplate/_component.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc 3 | * @name {{ComponentName}} 4 | * @author 5 | * @tested 6 | * @requires 7 | */ 8 | 9 | .{{componentName}} { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /oocss/tools/componentTemplate/component.handlebars: -------------------------------------------------------------------------------- 1 |
      2 | 3 |
      -------------------------------------------------------------------------------- /oocss/tools/componentTemplate/component_doc.handlebars: -------------------------------------------------------------------------------- 1 |

      {{longname}}

      2 | 3 |

      4 | Text presentation of the component {{componentName}} 5 |

      6 | 7 |
      8 | 9 | 10 | 11 | 12 | 13 | {{#each skins}} 14 | {{#if doc}} 15 | 16 | 17 | 18 | 19 | {{/if}} 20 | {{/each}} 21 |
      [baseClass]Base class. Required. Skins and subclasses that extend [baseClass] should add their classname to this element.
      {{className}}{{{doc}}}
      22 |
      23 | 24 |
        25 | {{#each skins}} 26 |
      • 27 | {{{html}}} 28 | {{{htmlcode}}} 29 |
        • 30 | {{/each}} 31 |
      32 | -------------------------------------------------------------------------------- /oocss/tools/componentTemplate/script/component.js: -------------------------------------------------------------------------------- 1 | /** 2 | Script for component {{componentName}} 3 | **/ -------------------------------------------------------------------------------- /oocss/tools/config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created with IntelliJ IDEA. 3 | * User: arnaudgueras 4 | * Date: 20/12/12 5 | * Time: 00:23 6 | * To change this template use File | Settings | File Templates. 7 | */ 8 | 9 | var config = { 10 | "srcDir":"src", 11 | "buildDirectory":"build", 12 | "docsDirectory":"docs", 13 | "toolsDirectory":"tools", // directory of the tools 14 | "componentListFileName":"components-list.json", // file name of the list of components 15 | "componentSkinFilename":"{name}.handlebars", 16 | "componentDocFilename":"{name}_doc.handlebars", 17 | "componentTestFilename":"{name}_test.handlebars", 18 | "notificationsActive":true //activate OSX notifications when file is changed 19 | }; 20 | 21 | 22 | // ====== Do not modify under this line ===== 23 | // projectDirectory, is the current project directory 24 | // if the build script is launched from /tools, then clean the path 25 | function addProjectDirectory(dir) { 26 | return (config.projectDirectory + dir).replace(/^\/+$/, '') + '/'; 27 | } 28 | 29 | 30 | config.projectDirectory = process.cwd().replace(new RegExp("\\/" + config.toolsDirectory), '/') + '/'; 31 | 32 | // fix path directories with full path from project directory 33 | config.srcDir = addProjectDirectory(config.srcDir); 34 | config.buildDirectory = addProjectDirectory(config.buildDirectory); 35 | config.componentsListPath = config.projectDirectory + config.componentListFileName; 36 | config.docsBuildDirectory = config.buildDirectory + config.docsDirectory + '/'; 37 | config.docsDirectory = config.srcDir + config.docsDirectory + '/'; 38 | 39 | module.exports = config; -------------------------------------------------------------------------------- /oocss/tools/config/config.rb: -------------------------------------------------------------------------------- 1 | # Require any additional compass plugins here. 2 | 3 | # Set this to the root of your project when deployed: 4 | http_path = "/" 5 | sass_dir = "../../src/components" 6 | images_dir = "../../src/img" 7 | javascripts_dir = "../../src/libs/script" 8 | css_dir = "../../build/css" 9 | generated_images_dir = "../../build/img" 10 | 11 | 12 | # You can select your preferred output style here (can be overridden via the command line): 13 | # output_style = :expanded or :nested or :compact or :compressed 14 | output_style = :expanded 15 | # To enable relative paths to assets via compass helper functions. Uncomment: 16 | relative_assets = true 17 | 18 | # Turn on/off debug info for FireSass 19 | sass_options = {:debug_info => true} 20 | 21 | # To disable debugging comments that display the original location of your selectors. Uncomment: 22 | # line_comments = false 23 | 24 | 25 | # If you prefer the indented syntax, you might want to regenerate this 26 | # project again passing --syntax sass, or you can uncomment this: 27 | # preferred_syntax = :sass 28 | # and then run: 29 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass 30 | -------------------------------------------------------------------------------- /oocss/tools/files/Utils.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Utils module 3 | */ 4 | 5 | /** 6 | * Adopted from jquery's extend method. Under the terms of MIT License. 7 | * http://code.jquery.com/jquery-1.4.2.js 8 | * Modified by mscdex to use Array.isArray instead of the custom isArray method 9 | */ 10 | function extend() { 11 | // copy reference to target object 12 | var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options, name, src, copy; 13 | 14 | // Handle a deep copy situation 15 | if (typeof target === 'boolean') { 16 | deep = target; 17 | target = arguments[1] || {}; 18 | // skip the boolean and the target 19 | i = 2; 20 | } 21 | 22 | // Handle case when target is a string or something (possible in deep copy) 23 | if (typeof target !== 'object' && !typeof target === 'function') 24 | target = {}; 25 | 26 | var isPlainObject = function (obj) { 27 | // Must be an Object. 28 | // Because of IE, we also have to check the presence of the constructor property. 29 | // Make sure that DOM nodes and window objects don't pass through, as well 30 | if (!obj || toString.call(obj) !== '[object Object]' || obj.nodeType || obj.setInterval) 31 | return false; 32 | 33 | var has_own_constructor = hasOwnProperty.call(obj, 'constructor'); 34 | var has_is_property_of_method = hasOwnProperty.call(obj.constructor.prototype, 'isPrototypeOf'); 35 | // Not own constructor property must be Object 36 | if (obj.constructor && !has_own_constructor && !has_is_property_of_method) 37 | return false; 38 | 39 | // Own properties are enumerated firstly, so to speed up, 40 | // if last one is own, then all properties are own. 41 | 42 | var last_key; 43 | for (key in obj) 44 | last_key = key; 45 | 46 | return typeof last_key === 'undefined' || hasOwnProperty.call(obj, last_key); 47 | }; 48 | 49 | 50 | for (; i < length; i++) { 51 | // Only deal with non-null/undefined values 52 | if ((options = arguments[i]) !== null) { 53 | // Extend the base object 54 | for (name in options) { 55 | src = target[name]; 56 | copy = options[name]; 57 | 58 | // Prevent never-ending loop 59 | if (target === copy) 60 | continue; 61 | 62 | // Recurse if we're merging object literal values or arrays 63 | if (deep && copy && (isPlainObject(copy) || Array.isArray(copy))) { 64 | var clone = src && (isPlainObject(src) || Array.isArray(src)) ? src : Array.isArray(copy) ? [] : {}; 65 | 66 | // Never move original objects, clone them 67 | target[name] = extend(deep, clone, copy); 68 | 69 | // Don't bring in undefined values 70 | } else if (typeof copy !== 'undefined') 71 | target[name] = copy; 72 | } 73 | } 74 | } 75 | 76 | // Return the modified object 77 | return target; 78 | } 79 | 80 | /** 81 | * Trim space on left and right of a string 82 | * @param {String} myString source string 83 | * @return {String} trimmed string 84 | */ 85 | var trim = function (myString) { 86 | return myString.replace(/^s+/g, '').replace(/\s+$/g, '') 87 | }; 88 | 89 | 90 | /** 91 | * Add unique method on Array.prototype 92 | * Filter an array and remove duplicated elements 93 | * @type {*} 94 | */ 95 | // from http://twitter.com/WebReflection/status/83867362490720258 96 | Array.prototype.unique = // extend the array prototype 97 | [].unique || // if it doesn't exist 98 | function (a) { 99 | return function () { // with a function that 100 | return this.filter(a); // filters by the cached function 101 | } 102 | }( 103 | function (a, b, c) { // which 104 | return c.indexOf(// finds out whether the array contains 105 | a, // the item 106 | b + 1 // after the current index 107 | ) < 0 // and returns false if it does. 108 | } 109 | ); 110 | 111 | 112 | /** exports */ 113 | module.exports = { 114 | trim:trim, 115 | extend: extend 116 | }; 117 | -------------------------------------------------------------------------------- /oocss/tools/files/handlebars.include.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created with IntelliJ IDEA. 3 | * User: arnaudgueras 4 | * Date: 19/12/12 5 | * Time: 11:38 6 | * To change this template use File | Settings | File Templates. 7 | */ 8 | 9 | /** Handlebars manual Include 10 | * There is no possibility to use helper for include file, then this code retrieve handlebars files and for them to be 11 | * compiled, and after the compilated code can be called. 12 | * 13 | **/ 14 | 15 | var fs = require('fs.extra'); 16 | 17 | exports.init = function (Handlebars) { 18 | 19 | /** 20 | * Add support of include in handlebars 21 | * @usage in handlebars : 22 | * {{!include "myfile.html"}} 23 | * {{!include "../myfile.handlebars"}} 24 | * {{!incldue "../../includes/myfile.hbs"}} 25 | * 26 | * @param {String} template Template string to parse for finding includes 27 | * @param {String} fileDir The file directory from where this template came from 28 | * @return {String} return template with the content of the file include inside 29 | */ 30 | Handlebars.parseIncludes = function (template, fileDir) { 31 | //fix filePath 32 | if (!/\/$/.test(fileDir)) fileDir += '/'; 33 | return template.replace(/\{\{!include\s+"(.+?)"\s*\}\}/g, function (str, item) { 34 | return include(item, fileDir); 35 | }); 36 | }; 37 | 38 | /** 39 | * Helper function that is used by parseIncludes 40 | * @param {String} filename path of the file to find (ie: "../myfile.html", "myfile.handlebars") 41 | * @param {String} fileDir The file directory from where the include must be done 42 | * @return {String} the content of the file 43 | */ 44 | function include(filename, fileDir) { 45 | var template; 46 | if (fileDir) { 47 | var filePath = fileDir + filename; 48 | template = fs.readFileSync(filePath, 'utf8'); 49 | if(/(handlebars|hbs)$/.test(filename)) { 50 | template = Handlebars.parseIncludes(template, filePath.replace(/\/[^\/]+$/,'')); 51 | } 52 | Handlebars.compile(template); 53 | return template; 54 | } 55 | return "You forgot the file directory"; 56 | } 57 | }; -------------------------------------------------------------------------------- /oocss/tools/files/watch.js: -------------------------------------------------------------------------------- 1 | var EventEmitter = require("events").EventEmitter, util = require("util"); 2 | var watchDelay = 2000; 3 | 4 | var WatchClass = function() { 5 | "use strict"; 6 | function Watch(options) { 7 | EventEmitter.call(this); 8 | this.__topLvlWatchers = []; 9 | this.__watchedItems = {}; 10 | this.fs = require("fs"); 11 | this.path = require("path"); 12 | } 13 | util.inherits(Watch, EventEmitter); 14 | Watch.prototype.add = function(str_file_or_path, recursive) { 15 | recursive = recursive || false; 16 | return this.__handle(true, str_file_or_path, recursive); 17 | }; 18 | Watch.prototype.remove = function(str_file_or_path) { 19 | return this.__handle(false, str_file_or_path); 20 | }; 21 | Watch.prototype.onChange = function(cb) { 22 | if (typeof cb === "function") { 23 | this.on("change", cb); 24 | } else { 25 | throw new Error("Non-function provided as the callback for onChange"); 26 | } 27 | return this; 28 | }; 29 | Watch.prototype.clearListeners = function() { 30 | this.removeAllListeners("change"); 31 | this.removeAllListeners(); 32 | return this; 33 | }; 34 | Watch.prototype.__handle = function(add, str_file_or_path, recursive) { 35 | str_file_or_path = this.path.resolve(str_file_or_path); 36 | if (add) { 37 | if (this.__topLvlWatchers.indexOf(str_file_or_path) === -1) { 38 | this.__topLvlWatchers.push(str_file_or_path); 39 | } 40 | } else { 41 | var index = this.__topLvlWatchers.indexOf(str_file_or_path); 42 | if (index >= 0) { 43 | this.__topLvlWatchers.splice(index, 1); 44 | } 45 | } 46 | var stat = null; 47 | try { 48 | stat = this.fs.statSync(str_file_or_path); 49 | } catch (e) { 50 | if (add) { 51 | throw e; 52 | } else { 53 | stat = false; 54 | if (self.__watchedItems.hasOwnProperty(str_file_or_path)) { 55 | self.fs.unwatchFile(str_file_or_path); 56 | delete self.__watchedItems[str_file_or_path]; 57 | } 58 | } 59 | } 60 | if (stat) { 61 | if (stat.isFile()) { 62 | return this.__file(add, str_file_or_path); 63 | } 64 | if (stat.isDirectory()) { 65 | return this.__dir(add, str_file_or_path, recursive); 66 | } 67 | } 68 | }; 69 | Watch.prototype.__dir = function(add, dir, recursive) { 70 | var self = this; 71 | recursive = recursive || false; 72 | if (add) { 73 | if (!self.__watchedItems.hasOwnProperty(dir)) { 74 | self.__watchedItems[dir] = { 75 | recursive: recursive 76 | }; 77 | self.__rescan(add, dir, recursive, false); 78 | self.fs.watchFile(dir, function(curr, prev) { 79 | self.__rescan(add, dir, recursive, true); 80 | }); 81 | } else { 82 | throw new Error("Folder already being watched"); 83 | } 84 | } else { 85 | if (self.__watchedItems.hasOwnProperty(dir)) { 86 | self.__rescan(add, dir, self.__watchedItems[dir].recursive, false); 87 | delete self.__watchedItems[dir]; 88 | } 89 | self.fs.unwatchFile(dir); 90 | } 91 | return self; 92 | }; 93 | Watch.prototype.__file = function(add, file) { 94 | var self = this; 95 | var is_file = false; 96 | try { 97 | is_file = self.fs.statSync(file).isFile(); 98 | } catch (e) { 99 | is_file = false; 100 | } 101 | if (!is_file) { 102 | return self; 103 | } 104 | if (add) { 105 | if (self.__watchedItems.hasOwnProperty(file)) { 106 | throw new Error("File already being watched"); 107 | return self; 108 | } 109 | self.__watchedItems[file] = true; 110 | self.fs.watchFile(file, { interval: watchDelay}, function watchMe(prev, curr) { 111 | try { 112 | var stat = self.fs.statSync(file).isFile(); 113 | if (prev.mtime.getTime() !== curr.mtime.getTime()) { 114 | self.emit("change", file, prev, curr, "change"); 115 | } 116 | } catch (e) { 117 | if (e.code === "ENOENT") { 118 | self.emit("change", file, prev, curr, "delete"); 119 | if (self.__topLvlWatchers.indexOf(file) < 0) { 120 | self.fs.unwatchFile(file); 121 | delete self.__watchedItems[file]; 122 | } 123 | return; 124 | } else { 125 | throw e; 126 | } 127 | } 128 | }); 129 | } else { 130 | self.fs.unwatchFile(file); 131 | delete self.__watchedItems[file]; 132 | } 133 | return self; 134 | }; 135 | Watch.prototype.__rescan = function(add, folder, recursive, reportNew) { 136 | var self = this; 137 | self.fs.stat(folder, function(err, stat) { 138 | if (err) { 139 | if (err.code !== "ENOENT") { 140 | throw err; 141 | return; 142 | } 143 | console.log("__rescan"); 144 | if (self.__topLvlWatchers.indexOf(folder) < 0) { 145 | self.fs.unwatchFile(folder); 146 | delete self.__watchedItems[folder]; 147 | } 148 | } else { 149 | var files = self.fs.readdirSync(folder); 150 | files.forEach(function(file) { 151 | var full_path = self.path.join(folder, file); 152 | var stat; 153 | if (!add || !self.__watchedItems.hasOwnProperty(full_path)) { 154 | stat = self.fs.statSync(full_path); 155 | if (stat.isFile()) { 156 | self.__file(add, full_path); 157 | if (add && reportNew) { 158 | self.emit("change", full_path, stat, stat, "new"); 159 | } 160 | } else if (recursive && stat.isDirectory()) { 161 | self.__dir(add, full_path, recursive); 162 | } 163 | } 164 | }); 165 | } 166 | }); 167 | }; 168 | return Watch; 169 | }(); 170 | 171 | module.exports = new WatchClass; -------------------------------------------------------------------------------- /oocss/tools/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"oocss", 3 | "description":"oocss build package", 4 | "version":"1.0.0", 5 | "keywords":["oocss"], 6 | "homepage":"http://www.oocss.com", 7 | "author":"oocss", 8 | "devDependencies":{ 9 | "fs.extra":"1.2.0", 10 | "handlebars":"1.0.7", 11 | "html":"0.0.7", 12 | "path":"0.4.9", 13 | "forever":"0.10.6" 14 | } 15 | } -------------------------------------------------------------------------------- /oocss/tools/vagrant/vagrant_user.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | echo "Auto Provisionning Starting" 4 | cd /home/vagrant 5 | cat .profile | grep make\ start && echo "Installed" || echo "cd /vagrant; make start" >> .profile -------------------------------------------------------------------------------- /oocss/tools/vagrant/vagrantfile_ssh: -------------------------------------------------------------------------------- 1 | require 'log4r' 2 | 3 | require 'vagrant/util/file_mode' 4 | require 'vagrant/util/platform' 5 | require 'vagrant/util/safe_exec' 6 | 7 | module Vagrant 8 | # Manages SSH connection information as well as allows opening an 9 | # SSH connection. 10 | class SSH 11 | 12 | # Connects to the environment's virtual machine, replacing the ruby 13 | # process with an SSH process. 14 | # 15 | # @param [Hash] opts Options hash 16 | # @options opts [Boolean] :plain_mode If True, doesn't authenticate with 17 | # the machine, only connects, allowing the user to connect. 18 | def exec(opts={}) 19 | # Get the SSH information and cache it here 20 | ssh_info = info 21 | 22 | puts 23 | puts "* Using the patched \"ssh.rb\" on Windows... " 24 | puts " See: http://stackoverflow.com/a/14340824/1579985" 25 | puts 26 | 27 | which = Util::Platform.windows? ? "where ssh >NUL 2>&1" : "which ssh >/dev/null 2>&1" 28 | raise Errors::SSHUnavailable if !Kernel.system(which) 29 | 30 | # If plain mode is enabled then we don't do any authentication (we don't 31 | # set a user or an identity file) 32 | plain_mode = opts[:plain_mode] 33 | 34 | options = {} 35 | options[:host] = ssh_info[:host] 36 | options[:port] = ssh_info[:port] 37 | options[:username] = ssh_info[:username] 38 | options[:private_key_path] = ssh_info[:private_key_path] 39 | 40 | # Command line options 41 | command_options = ["-p" , options[:port].to_s, "-o", "UserKnownHostsFile=/dev/null", 42 | "-o", "StrictHostKeyChecking=no", "-o", "LogLevel=ERROR"] 43 | 44 | # Solaris/OpenSolaris/Illumos uses SunSSH which doesn't support the IdentitiesOnly option 45 | command_options += ["-o", "IdentitiesOnly=yes"] unless Util::Platform.solaris? 46 | 47 | command_options += ["-i", options[:private_key_path]] if !plain_mode 48 | command_options += ["-o", "ForwardAgent=yes"] if ssh_info[:forward_agent] 49 | 50 | # If there are extra options, then we append those 51 | command_options.concat(opts[:extra_args]) if opts[:extra_args] 52 | 53 | if ssh_info[:forward_x11] 54 | # Both are required so that no warnings are shown regarding X11 55 | command_options += ["-o", "ForwardX11=yes"] 56 | command_options += ["-o", "ForwardX11Trusted=yes"] 57 | end 58 | 59 | host_string = options[:host] 60 | host_string = "#{options[:username]}@#{host_string}" if !plain_mode 61 | command_options << host_string 62 | @logger.info("Invoking SSH: #{command_options.inspect}") 63 | safe_exec("ssh", *command_options) 64 | end 65 | end 66 | end -------------------------------------------------------------------------------- /oocss/tools/version: -------------------------------------------------------------------------------- 1 | date:{date} 2 | version:0.3 -------------------------------------------------------------------------------- /oocss/tools/watch.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | /*jslint node: true */ 3 | /*jshint node: true */ 4 | 5 | // DIRECTORIES + parameters 6 | var common = require('./common.js'); 7 | var build = require('./build.js'); 8 | 9 | var fs = require('fs.extra'); 10 | var watch = require('./files/watch.js'); 11 | var exec = require('child_process').exec; 12 | 13 | var config = common.config; 14 | 15 | function main() { 16 | watch.add(config.projectDirectory).add(config.srcDir, true); 17 | watch.onChange(function (file, prev, curr, action) { 18 | console.log('file has changed : ', file); 19 | if (config.notificationsActive && /^darwin/.test(process.platform)) { 20 | var message = 'file has changed : \n' + file.replace(config.projectDirectory, ''); 21 | try { 22 | exec('terminal-notifier -message "' + message + '"', {}, function (error, stdout, stderr) { 23 | /*console.log(error); 24 | console.log(stdout); 25 | console.log(stderr);*/ 26 | }); 27 | } catch (e) { 28 | console.log( 29 | 'Notifier error :' + 30 | 'Tried to used terminal-notified but terminal notifier is not installed\n' + 31 | 'Install terminal-notifier my using :\n' + 32 | '> sudo make notifier' + 33 | 'or disable the notifier in config.js => notificationsActive:false' 34 | ) 35 | } 36 | 37 | } 38 | // if scss and sass file have changed 39 | if (/(scss|sass)$/.test(file)) { 40 | compassFileChanged(file); 41 | } else 42 | //if component list json file changed 43 | if (file.indexOf(config.componentListFileName) > -1) { 44 | componentListFileChanged(file); 45 | } else 46 | //if other files changed, rebuild all 47 | { 48 | componentListFileChanged(); 49 | } 50 | }); 51 | } 52 | 53 | var compassFileChanged = function (/*file*/) { 54 | try { 55 | var child = exec('compass compile', 56 | { 57 | cwd: config.projectDirectory + 'tools/config' 58 | }, 59 | function (error, stdout, stderr) { 60 | /*console.log("error : ", error); 61 | console.log("stdout : ", stdout); 62 | console.log("stderr : ", stderr);*/ 63 | 64 | setTimeout(function () { 65 | if (error) { 66 | console.log(error, stdout, stderr); 67 | } 68 | common.moveDocCSSFile(); 69 | }, 10); 70 | } 71 | ); 72 | } catch(e) { 73 | console.log(e); 74 | } 75 | }; 76 | 77 | 78 | var componentListFileChanged = function (file) { 79 | var result = common.updateConfigFromComponentList(); 80 | if (result == "ok") { 81 | common.build(); 82 | compassFileChanged(); 83 | } else { 84 | console.log("error in components file : ", result); 85 | } 86 | }; 87 | 88 | 89 | // start 90 | compassFileChanged(); 91 | main(); 92 | 93 | 94 | -------------------------------------------------------------------------------- /oocss/tools/workshop.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | var templateHTMLFilePath = 'workshop/template.html'; 3 | 4 | // REQUIRED 5 | var common = require('./common.js'); 6 | // DIRECTORIES + parameters 7 | 8 | var config = common.config; 9 | 10 | //open template.html 11 | var templateFile = common.fs.readFileSync(config.projectDirectory + templateHTMLFilePath, 'utf8'); 12 | 13 | //cleans paths 14 | templateFile = templateFile.replace(/(src|href)="(..\/)+/g,'$1=\"'); 15 | 16 | //write the file 17 | common.fs.writeFileSync(config.projectDirectory + templateHTMLFilePath, templateFile); --------------------------------------------------------------------------------