├── .editorconfig ├── .gitignore ├── .npmignore ├── AUTHORS ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── LICENSE ├── PULL_REQUEST_TEMPLATE.md ├── README.md ├── dist ├── _type.name.scss ├── type.name.css ├── type.name.less └── type.name.styl ├── labels.json └── package.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent coding styles 2 | # between different editors and IDEs 3 | # editorconfig.org 4 | 5 | 6 | # Topmost EditorConfig file 7 | root = true 8 | 9 | # Overall defaults 10 | [*] 11 | 12 | # Tab style 13 | indent_style = space 14 | indent_size = 4 15 | 16 | # File format and handling 17 | charset = utf-8 18 | end_of_line = lf 19 | insert_final_newline = true 20 | trim_trailing_whitespace = true 21 | 22 | # JavaScript defaults 23 | [*.js] 24 | indent_size = 2 25 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ## Project-specific files and folders ######################################### 2 | 3 | 4 | 5 | 6 | ## Generic files to ignore #################################################### 7 | 8 | *~ 9 | *.DS_Store 10 | ._* 11 | *.lock 12 | *.out 13 | *.swp 14 | .AppleDouble 15 | .LSOverride 16 | .Spotlight-V100 17 | .Trashes 18 | Icon? 19 | ehthumbs.db 20 | Thumbs.db 21 | 22 | 23 | 24 | 25 | ## Project Files ############################################################## 26 | 27 | *.project 28 | *.settings 29 | *.tmproj 30 | *.sublime-project 31 | *.sublime-workspace 32 | *.esproj 33 | *.expressostorage 34 | *.orig 35 | _notes 36 | codekit-config.json 37 | dwsync.xml 38 | node_modules 39 | npm-debug.log 40 | 41 | 42 | 43 | ## Compiled source ############################################################ 44 | 45 | *.com 46 | *.class 47 | *.dll 48 | *.exe 49 | *.o 50 | *.so 51 | 52 | 53 | 54 | 55 | ## Logs and databases ######################################################### 56 | 57 | *.log 58 | *.sql 59 | *.sqlite 60 | 61 | 62 | 63 | 64 | ## Packages (better to unpack these files and commit the raw source) ########## 65 | 66 | *.7z 67 | *.dmg 68 | *.gz 69 | *.iso 70 | *.jar 71 | *.rar 72 | *.tar 73 | *.zip 74 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # https://docs.npmjs.com/misc/developers#keeping-files-out-of-your-package 2 | 3 | node_modules 4 | node_modules/* 5 | 6 | .editorconfig 7 | CONTRIBUTING.md 8 | ISSUE_TEMPLATE.md 9 | labels.json 10 | PULL_REQUEST_TEMPLATE.md 11 | -------------------------------------------------------------------------------- /AUTHORS: -------------------------------------------------------------------------------- 1 | Eric Bailey 2 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | ## Table of Contents 4 | 1. [Before you get started](#before-you-get-started) 5 | 1. [Code of Conduct](#code-of-conduct) 6 | - [Terms of Use](#terms-of-use) 7 | - [Labeling](#labeling) 8 | - [Templates](#templates) 9 | - [Submitting Issues](#submitting-issues) 10 | - [Pull and Feature Requests](#pull-and-feature-requests) 11 | 1. [Submitting Pull Requests](#submitting-pull-requests) 12 | - [Submitting Feature Requests](#submitting-feature-requests) 13 | 14 | Thanks for getting involved! Please take a moment to review this document in order to make the contribution process easy and effective for everyone involved. 15 | 16 | Following these guidelines helps to communicate that you respect the time of the people managing and developing this open source project. In return, they should reciprocate that respect in addressing your issue or assessing patches and features. 17 | 18 | 19 | ## Before you get started 20 | 21 | ### Code of Conduct 22 | This project adheres to the [Contributor Covenant code of conduct](http://contributor-covenant.org/version/1/4/). By participating, you are expected to uphold this code. Please report unacceptable behavior to [the project authors](https://github.com/ericwbailey/styled-component-template/blob/master/AUTHORS). 23 | 24 | ### Terms of Use 25 | By submitting code or a feature request, you agree to allow the project owners to license your work under the terms of the [project license](https://github.com/ericwbailey/styled-component-template/blob/master/LICENSE). 26 | 27 | ### Labeling 28 | This project uses labels to help organize and prioritize contributions. The labels are broken into three main types: **Type**, **Status**, and **Priority**. 29 | 30 | When submitting a Bug Report, Pull Request, or Feature Request, please select an appropriate label from each of the three types. Contributions that don't observe this labeling schema are likely to be rejected. 31 | 32 | Labels will be updated throughout the submission process to reflect the submission's overall status. For more information, please refer to [this article](https://medium.com/@dave_lunny/sane-github-labels-c5d2e6004b63#.fh462xzfj). 33 | 34 | ### Templates 35 | This project uses templates for Issue and Pull Requests. Following the provided template helps the project maintainers have all the right details up front, which makes addressing feedback easier. 36 | 37 | 38 | ## Submitting Issues 39 | 40 | >An Issue is a demonstrable problem that is caused by the code in the repository. 41 | 42 | First, use the [GitHub Issue search](https://github.com/ericwbailey/styled-component-template/issues) to check if the issue has already been reported—then, check if the issue has been fixed. Try to reproduce it using the latest [master branch](https://github.com/$$githubAuthor/$$githubTitle) in the repository. Next, isolate the problem—ideally [create a reduced test case](https://css-tricks.com/reduced-test-cases/) and a live example. 43 | 44 | A good Issue report shouldn't leave others needing to chase you up for more information. Please try to be as detailed as possible in your report. What is your environment? What steps will reproduce the issue? What browser(s) and OS versions experience the problem? What would you expect to be the outcome? Any guesses to a possible solution? All these details will help people to fix any potential bugs. 45 | 46 | ## Pull and Feature Requests 47 | 48 | ### Submitting Pull Requests 49 | 50 | >A Pull Request is a collection of changes submitted with the intention of being incorporated into the project. 51 | 52 | Good Pull Requests, patches, improvements, new features, etc. are a fantastic help. They should remain focused in scope and avoid containing unrelated commits. 53 | 54 | When submitting a Pull Request, first use the [GitHub Pull Request search](https://github.com/ericwbailey/styled-component-template/pulls) to check if the request has already been submitted. 55 | 56 | If it hasn't, please ask first before embarking on any significant Pull Request (e.g. implementing features, refactoring code, porting to a different language), otherwise you risk spending a lot of time working on something that the project's developers might not want to merge into the project. 57 | 58 | Please adhere to the coding conventions used throughout a project (indentation, accurate comments, etc.) and any other requirements (such as test coverage). 59 | 60 | 61 | ### Submitting Feature Requests 62 | 63 | >A Feature Request is a new component or an enhancement to existing functionality. 64 | 65 | Feature Requests are welcome. It's up to you to make a strong case to convince the project team of the merits of this feature. Remember that your request will be prioritized accordingly and not all requests can always be implemented in a timely fashion. 66 | 67 | Before submitting, take a moment to find out whether your idea fits with the scope and aims of the project. Use the GitHub Issue and Pull Request searches to see if there is something similar to your propose feature being worked on already. 68 | 69 | Use the [GitHub Issues page](https://github.com/ericwbailey/styled-component-template/issues) to submit your Feature Request. Please provide as much detail and context in your request as possible. 70 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | # Issue title 2 | 3 | ## Expected behavior 4 | 5 | 6 | ## Actual behavior 7 | 8 | 9 | ## Steps to reproduce behavior 10 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Eric Bailey 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | # Pull Request title 2 | 3 | ## What does this Pull Request do? 4 | 5 | 6 | ## Where should the reviewer start? 7 | 8 | 9 | ## How should this be manually tested? 10 | 11 | 12 | ## Any background context you want to provide? 13 | 14 | 15 | ## What are the relevant tickets? 16 | 17 | 18 | ## Applicable screenshots 19 | 20 | 21 | ## Additional questions 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Styled Component Template 2 | 3 | A collection of templates to help create consistent, performant component styling for CSS and most major CSS preprocessors. 4 | 5 | ## Comment Detail 6 | 7 | The ordering of these is intentional. These groupings leverage the cascade to make the partials as efficient as possible. 8 | 9 | The comments below link to [the Sass partial](https://github.com/ericwbailey/styled-component-template/blob/master/dist/_type.name.scss) for reference, but apply to every template. 10 | 11 | - [`01`](https://github.com/ericwbailey/styled-component-template/blob/master/dist/_type.name.scss#L1) Provides an 80 character-wide column marker 12 | - [`02`](https://github.com/ericwbailey/styled-component-template/blob/master/dist/_type.name.scss#L2) Category type: Layout, Object, Component, Theme, etc. 13 | - [`03`](https://github.com/ericwbailey/styled-component-template/blob/master/dist/_type.name.scss#L3) This is the partial's name spelled out as a proper noun 14 | - [`04`](https://github.com/ericwbailey/styled-component-template/blob/master/dist/_type.name.scss#L4) A link to the partial on a living styleguide, if available 15 | - [`08`](https://github.com/ericwbailey/styled-component-template/blob/master/dist/_type.name.scss#L8) Use this comment block to provide any high level background information about the partial. Can span multiple lines, is constrained to an 80 character-long width. May be replaced with [SassDoc](http://sassdoc.com/) 16 | - [`13`](https://github.com/ericwbailey/styled-component-template/blob/master/dist/_type.name.scss#L13) Update to reflect the component's type and name. For example, a layout partial's class name would be called `.l-sidebar` 17 | - [`14`](https://github.com/ericwbailey/styled-component-template/blob/master/dist/_type.name.scss#L14) [Encapsulated logic](https://www.devbridge.com/articles/7-sass-techniques-to-help-you-write-better-code/) prevents unpredictable behavior 18 | - [`15`](https://github.com/ericwbailey/styled-component-template/blob/master/dist/_type.name.scss#L15) Variables can be used for all subsequent logic 19 | - [`19`](https://github.com/ericwbailey/styled-component-template/blob/master/dist/_type.name.scss#L19) Use extends with [a healthy dose of discretion](http://csswizardry.com/2016/02/mixins-better-for-performance/) 20 | - [`21`](https://github.com/ericwbailey/styled-component-template/blob/master/dist/_type.name.scss#L21) Group properties alphabetically by intent. Use an empty space between each property grouping for easier scanning 21 | - [`26`](https://github.com/ericwbailey/styled-component-template/blob/master/dist/_type.name.scss#L26) `cursor`, `transition`, etc. 22 | - [`28`](https://github.com/ericwbailey/styled-component-template/blob/master/dist/_type.name.scss#L28) Pseudo classes can inform pseudo elements, therefore they come first 23 | - [`37`](https://github.com/ericwbailey/styled-component-template/blob/master/dist/_type.name.scss#L37) Use HTML (ex: `[hidden]`) and ARIA (ex: `[aria-busy="true"]`) attributes to provide [meaningful, semantic states](https://css-tricks.com/user-facing-state/) 24 | - [`39`](https://github.com/ericwbailey/styled-component-template/blob/master/dist/_type.name.scss#L39) Use Sass' ampersand selector to modify the partial's presentation based on a class declared higher up in the DOM. This is useful for theming and modifying behavior based on state. Ex: `.t-dark & { … }` 25 | - [`42`](https://github.com/ericwbailey/styled-component-template/blob/master/dist/_type.name.scss#L42) Although [`@supports`](https://www.lottejackson.com/learning/supports-will-change-your-life) is technically not a media query, it is very similar behavior-wise 26 | - [`43`](https://github.com/ericwbailey/styled-component-template/blob/master/dist/_type.name.scss#L43) Feature queries include Reduced Motion, High Contrast Mode, etc. 27 | - [`44`](https://github.com/ericwbailey/styled-component-template/blob/master/dist/_type.name.scss#L44) Be sure to develop partials mobile first. I find a library like [mappy-breakpoints](https://github.com/zellwk/mappy-breakpoints) helps to manage breakpoints and tweakpoints. After declaring a breakpoint, be sure to follow this template's ordering within the breakpoint 28 | - [`46`](https://github.com/ericwbailey/styled-component-template/blob/master/dist/_type.name.scss#L46) Sass' ampersand selector works really well with a BEM naming methodology. Be sure be sure to follow this template's ordering within the nested selectors. Try not to nest selectors more than 3 deep—if you find yourself doing so, you can probably refactor 29 | 30 | 31 | ## Notes 32 | - I prefer to use a comment as a subsection heading. I find it helps making scanning the file easier -------------------------------------------------------------------------------- /dist/_type.name.scss: -------------------------------------------------------------------------------- 1 | // ============================================================================ 2 | // Type 3 | // Name 4 | // Link 5 | // ============================================================================ 6 | 7 | 8 | // Long-form Comments 9 | // 10 | // [1] Numbered reference for comments that apply to multiple lines 11 | 12 | 13 | .type-name { 14 | // 1. Encapsulated logic 15 | // 1.1. Variables 16 | // 1.2. Maps 17 | // 1.3. Functions 18 | // 1.4. Mixins 19 | // 1.5. Extends 20 | 21 | // 2. Properties 22 | // 2.1. Box 23 | // 2.2. Border 24 | // 2.3. Background 25 | // 2.4. Text 26 | // 2.5. Other 27 | 28 | // 3. Pseudo 29 | // 3.1. Classes 30 | // 3.2. Elements 31 | 32 | // 4. States 33 | // 4.1. Visited 34 | // 4.2. Focus 35 | // 4.3. Hover 36 | // 4.4. Active 37 | // 4.5. Attributes 38 | 39 | // 5. Contexts 40 | 41 | // 6. Media Queries 42 | // 6.1. @supports 43 | // 6.2. Feature Queries 44 | // 6.3. Breakpoints 45 | 46 | // 7. Nested selectors 47 | } 48 | -------------------------------------------------------------------------------- /dist/type.name.css: -------------------------------------------------------------------------------- 1 | /* ============================================================================ 2 | * Type 3 | * Name 4 | * Link 5 | ============================================================================ */ 6 | 7 | 8 | /* Long-form Comments 9 | 10 | * [1] Numbered reference for comments that apply to multiple lines 11 | */ 12 | 13 | 14 | .type-name { 15 | /* 2. Properties */ 16 | /* 2.1. Box */ 17 | /* 2.2. Border */ 18 | /* 2.3. Background */ 19 | /* 2.4. Text */ 20 | /* 2.5. Other */ 21 | } 22 | 23 | .type-name { 24 | /* 3. Pseudo */ 25 | /* 3.1. Classes */ 26 | /* 3.2. Elements */ 27 | } 28 | 29 | .type-name { 30 | /* 4. States */ 31 | /* 4.1. Visited */ 32 | /* 4.2. Focus */ 33 | /* 4.3. Hover */ 34 | /* 4.4. Active */ 35 | /* 4.5. Attributes */ 36 | } 37 | 38 | .type-name { 39 | /* 5. Contexts */ 40 | } 41 | 42 | .type-name { 43 | /* 6. Media Queries */ 44 | /* 6.1. @supports */ 45 | /* 6.2. Feature Queries */ 46 | /* 6.3. Breakpoints */ 47 | } 48 | 49 | .type-name { 50 | /* 7. Nested selectors */ 51 | } 52 | -------------------------------------------------------------------------------- /dist/type.name.less: -------------------------------------------------------------------------------- 1 | // ============================================================================ 2 | // Type 3 | // Name 4 | // Link 5 | // ============================================================================ 6 | 7 | 8 | // Long-form Comments 9 | // 10 | // [1] Numbered reference for comments that apply to multiple lines 11 | 12 | 13 | .type-name { 14 | // 1. Encapsulated logic 15 | // 1.1. Variables 16 | // 1.2. Maps 17 | // 1.3. Functions 18 | // 1.4. Mixins 19 | // 1.5. Extends 20 | 21 | // 2. Properties 22 | // 2.1. Box 23 | // 2.2. Border 24 | // 2.3. Background 25 | // 2.4. Text 26 | // 2.5. Other 27 | 28 | // 3. Pseudo 29 | // 3.1. Classes 30 | // 3.2. Elements 31 | 32 | // 4. States 33 | // 4.1. Visited 34 | // 4.2. Focus 35 | // 4.3. Hover 36 | // 4.4. Active 37 | // 4.5. Attributes 38 | 39 | // 5. Contexts 40 | 41 | // 6. Media Queries 42 | // 6.1. @supports 43 | // 6.2. Feature Queries 44 | // 6.3. Breakpoints 45 | 46 | // 7. Nested selectors 47 | } 48 | -------------------------------------------------------------------------------- /dist/type.name.styl: -------------------------------------------------------------------------------- 1 | // ============================================================================ 2 | // Type 3 | // Name 4 | // Link 5 | // ============================================================================ 6 | 7 | 8 | // Long-form Comments 9 | // 10 | // [1] Numbered reference for comments that apply to multiple lines 11 | 12 | 13 | .type-name 14 | // 1. Encapsulated logic 15 | // 1.1. Variables 16 | // 1.2. Maps 17 | // 1.3. Functions 18 | // 1.4. Mixins 19 | // 1.5. Extends 20 | 21 | // 2. Properties 22 | // 2.1. Box 23 | // 2.2. Border 24 | // 2.3. Background 25 | // 2.4. Text 26 | // 2.5. Other 27 | 28 | // 3. Pseudo 29 | // 3.1. Classes 30 | // 3.2. Elements 31 | 32 | // 4. States 33 | // 4.1. Visited 34 | // 4.2. Focus 35 | // 4.3. Hover 36 | // 4.4. Active 37 | // 4.5. Attributes 38 | 39 | // 5. Contexts 40 | 41 | // 6. Media Queries 42 | // 6.1. @supports 43 | // 6.2. Feature Queries 44 | // 6.3. Breakpoints 45 | 46 | // 7. Nested selectors 47 | -------------------------------------------------------------------------------- /labels.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "[Status] Rejected", 4 | "color": "#ececec" 5 | }, 6 | { 7 | "name": "[Status] Submitted", 8 | "color": "#fef2c0" 9 | }, 10 | { 11 | "name": "[Status] In Progress", 12 | "color": "#bfe5bf" 13 | }, 14 | { 15 | "name": "[Status] Blocked", 16 | "color": "#e11d21" 17 | }, 18 | { 19 | "name": "[Status] Abandoned", 20 | "color": "#ececec" 21 | }, 22 | { 23 | "name": "[Status] Accepted", 24 | "color": "#009800" 25 | }, 26 | { 27 | "name": "[Priority] Critical", 28 | "color": "#e11d21" 29 | }, 30 | { 31 | "name": "[Priority] High", 32 | "color": "#fad8c7" 33 | }, 34 | { 35 | "name": "[Priority] Low", 36 | "color": "#bfe5bf" 37 | }, 38 | { 39 | "name": "[Priority] Medium", 40 | "color": "#fef2c0" 41 | }, 42 | { 43 | "name": "[Type] Bug", 44 | "color": "#e11d21" 45 | }, 46 | { 47 | "name": "[Type] Enhancement", 48 | "color": "#c7def8" 49 | }, 50 | { 51 | "name": "[Type] Maintenance", 52 | "color": "#fef2c0" 53 | }, 54 | { 55 | "name": "[Type] Question", 56 | "color": "#d4c5f9" 57 | } 58 | ] 59 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "styled-component-template", 3 | "description": "A collection of templates to help create consistent, performant component styling for CSS and most major CSS preprocessors.", 4 | "homepage": "https://github.com/ericwbailey/styled-component-template", 5 | "version": "0.0.3", 6 | "license": "MIT", 7 | "author": "Eric Bailey (http://ericwbailey.com/)", 8 | "main": "dist/_type.name.scss", 9 | "repository": { 10 | "type": "git", 11 | "url": "git://github.com/ericwbailey/styled-component-template.git" 12 | }, 13 | "bugs": { 14 | "url": "https://github.com/ericwbailey/styled-component-template/issues", 15 | "email": "eric.w.bailey@gmail.com" 16 | }, 17 | "keywords": [ 18 | "css", 19 | "scss", 20 | "sass", 21 | "component", 22 | "partial" 23 | ] 24 | } 25 | --------------------------------------------------------------------------------