├── .editorconfig ├── .gitignore ├── LICENSE.md ├── README.md ├── img └── .gitkeep ├── index.html ├── js └── index.js ├── package-lock.json ├── package.json └── sass ├── abstract ├── .gitkeep ├── _breakpoint.scss ├── _unit.scss ├── _variables.scss └── _z-index.scss ├── base ├── .gitkeep ├── _elements.scss └── _generics.scss ├── component └── .gitkeep ├── layout └── .gitkeep ├── state └── .gitkeep ├── style.scss ├── theme └── .gitkeep └── vendor ├── .gitkeep └── _normalize.scss /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | 13 | [*.{htm,html}] 14 | indent_size = 4 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ### User template 2 | # Folders 3 | bower_components/ 4 | .project 5 | .nuxt 6 | 7 | # Compiled source 8 | *.class 9 | *.com 10 | *.dll 11 | *.exe 12 | *.o 13 | *.so 14 | 15 | # Packages 16 | # it's better to unpack these files and commit the raw source 17 | # git has its own built in compression methods 18 | *.7z 19 | *.gz 20 | *.dmg 21 | *.iso 22 | *.jar 23 | *.rar 24 | *.tar 25 | *.zip 26 | 27 | # Logs and databases 28 | *.log 29 | *.sql 30 | *.sqlite 31 | !Other/dumps/*.sql 32 | 33 | # OS generated files 34 | *~ 35 | ._* 36 | *.bak 37 | *.tmproj 38 | .DS_Store 39 | .DS_Store? 40 | .Spotlight-V100 41 | .Trashes 42 | desktop.ini 43 | ehthumbs.db 44 | Icon? 45 | Thumbs.db 46 | *.tmproj 47 | .Trashes 48 | 49 | # Package Managers 50 | node_modules/ 51 | npm-debug.log 52 | yarn-debug.log* 53 | yarn-error.log* 54 | 55 | # Production 56 | /public 57 | /build 58 | /dist 59 | 60 | # Others 61 | .buildpath 62 | .project 63 | .vscode 64 | .settings 65 | *.tags 66 | *.map 67 | github.php 68 | nbproject 69 | tags 70 | *.tags 71 | GPATH 72 | GTAGS 73 | .tern-port 74 | **/.tern-port 75 | *.diff 76 | *.err 77 | *.orig 78 | *.log 79 | *.rej 80 | *.swo 81 | *.swp 82 | *.vi 83 | *~ 84 | *.sass-cache 85 | .cache 86 | 87 | ### General template 88 | # IntelliJ project files 89 | .idea 90 | *.iml 91 | out 92 | gen 93 | 94 | ### Vim template 95 | # Swap 96 | [._]*.s[a-v][a-z] 97 | [._]*.sw[a-p] 98 | [._]s[a-v][a-z] 99 | [._]sw[a-p] 100 | 101 | # Session 102 | Session.vim 103 | 104 | # Temporary 105 | .netrwhist 106 | *~ 107 | # Auto-generated tag files 108 | tags 109 | 110 | ### Tags template 111 | # Ignore tags created by etags, ctags, gtags (GNU global) and cscope 112 | TAGS 113 | .TAGS 114 | !TAGS/ 115 | tags 116 | .tags 117 | !tags/ 118 | gtags.files 119 | GTAGS 120 | GRTAGS 121 | GPATH 122 | GSYMS 123 | cscope.files 124 | cscope.out 125 | cscope.in.out 126 | cscope.po.out 127 | 128 | ### Sass template 129 | .sass-cache/ 130 | *.css.map 131 | 132 | # Dotenv 133 | .env 134 | .env.* 135 | !.env.example 136 | 137 | ### Linux template 138 | *~ 139 | 140 | # temporary files which can be created if a process still has a handle open of a deleted file 141 | .fuse_hidden* 142 | 143 | # KDE directory preferences 144 | .directory 145 | 146 | # Linux trash folder which might appear on any partition or disk 147 | .Trash-* 148 | 149 | # .nfs files are created when an open file is removed but is still being accessed 150 | .nfs* 151 | 152 | ### JetBrains template 153 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm 154 | # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 155 | 156 | # User-specific stuff: 157 | .idea/**/workspace.xml 158 | .idea/**/tasks.xml 159 | .idea/dictionaries 160 | 161 | # Sensitive or high-churn files: 162 | .idea/**/dataSources/ 163 | .idea/**/dataSources.ids 164 | .idea/**/dataSources.xml 165 | .idea/**/dataSources.local.xml 166 | .idea/**/sqlDataSources.xml 167 | .idea/**/dynamic.xml 168 | .idea/**/uiDesigner.xml 169 | 170 | # Gradle: 171 | .idea/**/gradle.xml 172 | .idea/**/libraries 173 | 174 | # CMake 175 | cmake-build-debug/ 176 | cmake-build-release/ 177 | 178 | # Mongo Explorer plugin: 179 | .idea/**/mongoSettings.xml 180 | 181 | ## File-based project format: 182 | *.iws 183 | 184 | ## Plugin-specific files: 185 | 186 | # IntelliJ 187 | out/ 188 | 189 | # mpeltonen/sbt-idea plugin 190 | .idea_modules/ 191 | 192 | # JIRA plugin 193 | atlassian-ide-plugin.xml 194 | 195 | # Cursive Clojure plugin 196 | .idea/replstate.xml 197 | 198 | # Crashlytics plugin (for Android Studio and IntelliJ) 199 | com_crashlytics_export_strings.xml 200 | crashlytics.properties 201 | crashlytics-build.properties 202 | fabric.properties 203 | 204 | ### macOS template 205 | # General 206 | .DS_Store 207 | .AppleDouble 208 | .LSOverride 209 | 210 | # Icon must end with two \r 211 | Icon 212 | 213 | # Thumbnails 214 | ._* 215 | 216 | # Files that might appear in the root of a volume 217 | .DocumentRevisions-V100 218 | .fseventsd 219 | .Spotlight-V100 220 | .TemporaryItems 221 | .Trashes 222 | .VolumeIcon.icns 223 | .com.apple.timemachine.donotpresent 224 | 225 | # Directories potentially created on remote AFP share 226 | .AppleDB 227 | .AppleDesktop 228 | Network Trash Folder 229 | Temporary Items 230 | .apdisk 231 | 232 | ### Windows template 233 | # Windows thumbnail cache files 234 | Thumbs.db 235 | ehthumbs.db 236 | ehthumbs_vista.db 237 | 238 | # Dump file 239 | *.stackdump 240 | 241 | # Folder config file 242 | [Dd]esktop.ini 243 | 244 | # Recycle Bin used on file shares 245 | $RECYCLE.BIN/ 246 | 247 | # Windows Installer files 248 | *.cab 249 | *.msi 250 | *.msm 251 | *.msp 252 | 253 | # Windows shortcuts 254 | *.lnk 255 | 256 | ### SublimeText template 257 | # Cache files for Sublime Text 258 | *.tmlanguage.cache 259 | *.tmPreferences.cache 260 | *.stTheme.cache 261 | 262 | # Workspace files are user-specific 263 | *.sublime-workspace 264 | 265 | # Project files should be checked into the repository, unless a significant 266 | # proportion of contributors will probably not be using Sublime Text 267 | # *.sublime-project 268 | 269 | # SFTP configuration file 270 | sftp-config.json 271 | 272 | # Package control specific files 273 | Package Control.last-run 274 | Package Control.ca-list 275 | Package Control.ca-bundle 276 | Package Control.system-ca-bundle 277 | Package Control.cache/ 278 | Package Control.ca-certs/ 279 | Package Control.merged-ca-bundle 280 | Package Control.user-ca-bundle 281 | oscrypto-ca-bundle.crt 282 | bh_unicode_properties.cache 283 | 284 | # Sublime-github package stores a github token in this file 285 | # https://packagecontrol.io/packages/sublime-github 286 | GitHub.sublime-settings 287 | 288 | ### Project specifics 289 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 2 | Version 2, December 2004 3 | 4 | Copyright (C) 2004 Sam Hocevar 5 | 6 | Everyone is permitted to copy and distribute verbatim or modified 7 | copies of this license document, and changing it is allowed as long 8 | as the name is changed. 9 | 10 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 11 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 12 | 13 | 0. You just DO WHAT THE FUCK YOU WANT TO. 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # map(), filter(), reduce(), every(), some(), find() e includes() 2 | 3 | Demonstrações dos principais métodos de Array de JavaScript. 4 | 5 | Baseado no [BFB](https://github.com/desenvolvweb/basic-front-boilerplate). 6 | 7 | ### Comandos 8 | 9 | | Comando | O que faz? | Observação | 10 | | ------------- | ------------- | ----- | 11 | | `npm install` | Instala pacotes necessários | **Execute isso primeiro!** | 12 | | `npm start` | Inicia o desenvolvimento | Acesse `http://localhost:1234` | 13 | | `npm run build` | Faz build do site | Resultado na pasta `dist` | 14 | 15 | ## Licença 16 | 17 | Este projeto usa a licença WTFPL. Consulte o arquivo [LICENSE.md](LICENSE.md) para mais detalhes. 18 | -------------------------------------------------------------------------------- /img/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/desenvolvweb/map-filter-reduce-every-some-find-includes/cb1d2f34adb0b1b6c12b98ca493131d377b83aee/img/.gitkeep -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | map(), filter(), reduce(), every(), some(), find() e includes() 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | map() 3 | ========================================================================== */ 4 | 5 | /* Dobrar valores 6 | ========================================================================== */ 7 | 8 | const numbers = [ 1, 4, 5, 9, 14, 23 ] 9 | 10 | const doubledNumbers = numbers.map( num => num * 2 ) 11 | 12 | // console.log( doubledNumbers ) 13 | 14 | /* Fahrenheit para Celsius 15 | ========================================================================== */ 16 | 17 | const fahrenheit = [ 0, 32, 45, 50, 75, 80, 120 ] 18 | 19 | const celcius = fahrenheit.map( elem => Math.round( ( elem - 32 ) * 5/9 ) ) 20 | 21 | // console.log( celcius ) 22 | 23 | 24 | 25 | 26 | 27 | /* ========================================================================== 28 | filter() 29 | ========================================================================== */ 30 | 31 | const yetAnotherArray = [ 2, 3, 4, 5, 4, 12, 19, 7, 2, 5 ] 32 | 33 | const uniqueArray = yetAnotherArray.filter( ( elem, index, arr ) => arr.indexOf( elem ) === index) 34 | 35 | // console.log( uniqueArray ) 36 | 37 | 38 | 39 | 40 | 41 | /* ========================================================================== 42 | reduce() 43 | ========================================================================== */ 44 | 45 | const rockets = [ 46 | { country: "Russia", launches: 32 }, 47 | { country: "US", launches: 23 }, 48 | { country: "China", launches: 16 }, 49 | { country: "Europe", launches: 7 }, 50 | { country: "India", launches: 4 }, 51 | { country: "Japan", launches: 3 } 52 | ] 53 | 54 | const totalLaunches = rockets.reduce( ( prevVal, elem ) => prevVal + elem.launches, 0 ) 55 | 56 | // console.log( totalLaunches ) 57 | 58 | 59 | 60 | 61 | 62 | /* ========================================================================== 63 | every() 64 | ========================================================================== */ 65 | 66 | /* Verificar se todos os elementos de um array são maiores que 10 67 | ========================================================================== */ 68 | 69 | const anotherArray = [ 12, 5, 8, 130, 44 ] 70 | 71 | // console.log( anotherArray.every( elem => elem > 10 ) ) 72 | 73 | /* Verificar se todos são maiores de idade 74 | ========================================================================== */ 75 | 76 | const tchurma = [ 77 | { id: 12, name: "Frederico", age: 8 }, 78 | { id: 47, name: "Francisca", age: 7 }, 79 | { id: 77, name: "Ramon", age: 48 }, 80 | { id: 85, name: "Zenon", age: 52 } 81 | ] 82 | 83 | // console.log( tchurma.every( p => p.age >= 18 ) ) 84 | 85 | 86 | 87 | 88 | 89 | /* ========================================================================== 90 | some() 91 | ========================================================================== */ 92 | 93 | /* Verificar se há algum número primo 94 | ========================================================================== */ 95 | 96 | function isPrime( value ) { 97 | for ( let i = 2; i < value; i++ ) { 98 | if ( value % i === 0 ) { 99 | return false 100 | } 101 | } 102 | 103 | return value > 1 104 | } 105 | 106 | const oneMoreArray = [ 6, 8, 11, 14, 42 ] 107 | 108 | // console.log( oneMoreArray.some( isPrime ) ) 109 | 110 | /* Verificar por condições em valores/objetos 111 | ========================================================================== */ 112 | 113 | const team = [ 114 | { id: 12, name: "Topper Harley", pilot: true }, 115 | { id: 44, name: "Ramada Thompson", pilot: true }, 116 | { id: 59, name: "Pete Thompson", pilot: false }, 117 | { id: 122, name: "Kowalski", pilot: false } 118 | ] 119 | 120 | // console.log( team.some( person => person.pilot ) ) 121 | 122 | 123 | 124 | 125 | 126 | /* ========================================================================== 127 | find() 128 | ========================================================================== */ 129 | 130 | /* Pizzas 131 | ========================================================================== */ 132 | 133 | const pizzas = [ 134 | "mussarela", 135 | "calabresa", 136 | "portuguesa", 137 | "marguerita" 138 | ] 139 | 140 | const foundPizza = pizzas.find( p => p.startsWith( "m" ) ) 141 | 142 | // console.log( foundPizza ) 143 | 144 | /* Frutas 145 | ========================================================================== */ 146 | 147 | const fruits = [ 148 | { name: "jaca", quantity: 2 }, 149 | { name: "banana", quantity: 0 }, 150 | { name: "cereja", quantity: 5 } 151 | ] 152 | 153 | const foundFruit = fruits.find( fruit => fruit.name === "cereja" ) 154 | 155 | // console.log( foundFruit ) 156 | 157 | 158 | 159 | 160 | 161 | /* ========================================================================== 162 | includes() 163 | ========================================================================== */ 164 | 165 | const people = [ 166 | { id: 11, name: "Adamastor", age: 23, group: "editor" }, 167 | { id: 47, name: "Joana", age: 28, group: "user" }, 168 | { id: 85, name: "Mauricio", age: 34, group: "editor" }, 169 | { id: 97, name: "Lalau", age: 74, group: "admin" } 170 | ] 171 | 172 | const filteredUsers = people.filter( p => p.name.includes( "au" ) ) 173 | 174 | // console.log( filteredUsers ) 175 | 176 | 177 | 178 | 179 | 180 | /* ========================================================================== 181 | API real! 182 | ========================================================================== */ 183 | 184 | async function getPeople() { 185 | const response = await fetch( 'https://randomuser.me/api/?results=10' ) 186 | 187 | return response.json() 188 | } 189 | 190 | // getPeople().then( data => console.log( data ) ) 191 | 192 | /* Somente mulheres 193 | ========================================================================== */ 194 | 195 | getPeople().then( data => { 196 | const people = data.results 197 | 198 | // console.log( people.filter( p => p.gender === 'female' ) ) 199 | } ) 200 | 201 | /* Trabalhando com dados 202 | ========================================================================== */ 203 | 204 | getPeople().then( data => { 205 | const result = data.results.filter( p => p.dob.age >= 30 ) 206 | const people = [] 207 | 208 | for ( let p of result ) { 209 | people.push( { 210 | "Nome" : `${ p.name.first } ${ p.name.last }`, 211 | "Sexo" : p.gender, 212 | "Idade": p.dob.age 213 | } ) 214 | } 215 | 216 | console.table( people ) 217 | } ) 218 | 219 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "basic-front-boilerplate", 3 | "version": "1.0.0", 4 | "description": "Boilerplate básico para projetos front-end com ênfase em HTML/CSS.", 5 | "main": "script.js", 6 | "scripts": { 7 | "start": "npm run dev", 8 | "dev": "parcel index.html", 9 | "build": "parcel build index.html" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/desenvolvweb/basic-front-boilerplate.git" 14 | }, 15 | "keywords": [], 16 | "author": "", 17 | "license": "ISC", 18 | "bugs": { 19 | "url": "https://github.com/desenvolvweb/basic-front-boilerplate/issues" 20 | }, 21 | "homepage": "https://github.com/desenvolvweb/basic-front-boilerplate#readme", 22 | "devDependencies": { 23 | "parcel-bundler": "^1.12.4", 24 | "parcel-plugin-nuke-dist": "^1.0.1", 25 | "sass": "^1.23.3" 26 | }, 27 | "browserslist": [ 28 | "last 2 Chrome versions" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /sass/abstract/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/desenvolvweb/map-filter-reduce-every-some-find-includes/cb1d2f34adb0b1b6c12b98ca493131d377b83aee/sass/abstract/.gitkeep -------------------------------------------------------------------------------- /sass/abstract/_breakpoint.scss: -------------------------------------------------------------------------------- 1 | // @see https://desenvolvimentoparaweb.com/css/css-breakpoints-maneira-correta/ 2 | 3 | @mixin breakpoint($point) { 4 | @if $point == small-only { 5 | @media (max-width: 37.4375em) { // 599px 6 | @content; 7 | } 8 | } 9 | 10 | @else if $point == small-up { 11 | @media (min-width: 37.5em) { // 600px 12 | @content; 13 | } 14 | } 15 | 16 | @else if $point == medium-only { 17 | @media (max-width: 56.1875em) { // 899px 18 | @content; 19 | } 20 | } 21 | 22 | @else if $point == medium-up { 23 | @media (min-width: 56.25em) { // 900px 24 | @content; 25 | } 26 | } 27 | 28 | @else if $point == large-only { 29 | @media (max-width: 74.9375em) { // 1199px 30 | @content; 31 | } 32 | } 33 | 34 | @else if $point == large-up { 35 | @media (min-width: 75em) { // 1200px 36 | @content; 37 | } 38 | } 39 | 40 | @else { 41 | @media (min-width: ($point / 16) + 'em') { 42 | @content; 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /sass/abstract/_unit.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group functions 7 | //// 8 | 9 | // scss-lint:disable ZeroUnit 10 | 11 | /// Defines the base font size of the page, which is the value `1rem` is equal to. 12 | /// @type Number 13 | /// @group global 14 | $rem-base: 16px !default; 15 | 16 | /// Removes the unit (e.g. px, em, rem) from a value, returning the number only. 17 | /// @param {Number} $num - Number to strip unit from. 18 | /// @returns {Number} The same number, sans unit. 19 | @function strip-unit($num) { 20 | @return $num / ($num * 0 + 1); 21 | } 22 | 23 | /// Converts one or more pixel values into matching rem values. 24 | /// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses. 25 | /// @param {Number} $base [$rem-base] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. 26 | /// @returns {List} A list of converted values. 27 | @function rem-calc($values, $base: $rem-base) { 28 | $rem-values: (); 29 | $count: length($values); 30 | 31 | @if $base == null { 32 | $base: $rem-base; 33 | } 34 | 35 | @if $count == 1 { 36 | @return -zf-to-rem($values, $base); 37 | } 38 | 39 | @for $i from 1 through $count { 40 | $rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base)); 41 | } 42 | 43 | @return $rem-values; 44 | } 45 | 46 | // Converts a unitless, pixel, or rem value to em, for use in breakpoints. 47 | @function -zf-bp-to-em($value) { 48 | // Pixel and unitless values are converted to rems 49 | @if unit($value) == 'px' or unit($value) == '' { 50 | $value: rem-calc($value); 51 | } 52 | 53 | // Then the value is converted to ems 54 | @return strip-unit($value) * 1em; 55 | } 56 | 57 | /// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$rem-base` variable. 58 | /// @param {Number} $value - Pixel value to convert. 59 | /// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is. 60 | /// @access private 61 | @function -zf-to-rem($value, $base: $rem-base) { 62 | // Calculate rem if units for $value is not rem 63 | @if (unit($value) != 'rem') { 64 | $value: strip-unit($value) / strip-unit($base) * 1rem; 65 | } 66 | 67 | // Turn 0rem into 0 68 | /* stylelint-disable-next-line length-zero-no-unit */ 69 | @if ($value == 0) { $value: 0; } 70 | 71 | @return $value; 72 | } 73 | -------------------------------------------------------------------------------- /sass/abstract/_variables.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Colors 3 | // ========================================================================== 4 | 5 | // webfatorial 6 | // ========================================================================== 7 | 8 | $webfatorial-primary : #157bad; 9 | $webfatorial-secondary: #06618c; 10 | $webfatorial-success : #3cc368; 11 | $webfatorial-warning : #f5a600; 12 | $webfatorial-error : #ec5840; 13 | $webfatorial-gray-1 : #363636; 14 | $webfatorial-gray-2 : #4f4f4f; 15 | $webfatorial-gray-3 : #828282; 16 | $webfatorial-gray-4 : #bdbdbd; 17 | $webfatorial-gray-5 : #e0e0e0; 18 | $webfatorial-white : #fcfcfc; 19 | 20 | // dpw 21 | // ========================================================================== 22 | 23 | $dpw-primary : #3da6c8; 24 | $dpw-secondary: darken(#3da6c8, 12%); 25 | 26 | $text-color : $webfatorial-gray-1; 27 | 28 | // Social Media 29 | // ========================================================================== 30 | 31 | $facebook-color : #3b5998; 32 | $twitter-color : #00aced; 33 | $linkedin-color : #0077b5; 34 | $youtube-color : #cd201f; 35 | $instagram-color: #e4405f; 36 | $github-color : #333; 37 | 38 | 39 | 40 | // ========================================================================== 41 | // Measures 42 | // ========================================================================== 43 | 44 | $global-max-width-raw: 780; 45 | $global-max-width : rem-calc($global-max-width-raw); 46 | 47 | $global-font-size : rem-calc(18); 48 | $global-line-height: 1.5; 49 | $global-radius : rem-calc(6); 50 | $global-module-size: rem-calc(30); 51 | 52 | 53 | 54 | // ========================================================================== 55 | // Transitions 56 | // ========================================================================== 57 | 58 | $transition-duration : 305ms; 59 | $transition-duration-complex : 385ms; 60 | $transition-duration-entrance: 235ms; 61 | $transition-duration-exit : 205ms; 62 | $transition-duration-fast : 150ms; 63 | 64 | $transition-function-ease-in-expo : cubic-bezier(.95, .05, .795, .035); 65 | $transition-function-ease-out-expo : cubic-bezier(.19, 1, .22, 1); 66 | $transition-function-ease-in-back : cubic-bezier(.6, -.28, .735, .045); 67 | $transition-function-ease-out-back : cubic-bezier(.175, .885, .32, 1.275); 68 | $transition-function-ease-in-out-circ : cubic-bezier(.785, .135, .15, .86); 69 | $transition-function-ease-in-out-quint: cubic-bezier(.86, 0, .07, 1); 70 | $transition-function-elastic : cubic-bezier(.175, .885, .41, 1.46); 71 | 72 | 73 | 74 | // ========================================================================== 75 | // Others 76 | // ========================================================================== 77 | 78 | $z-indexes: ( 79 | 'above' : 500, 80 | 'modal' : 400, 81 | 'overlay' : 300, 82 | 'dropdown': 200, 83 | 'default' : 1, 84 | 'below' : -1, 85 | ); 86 | -------------------------------------------------------------------------------- /sass/abstract/_z-index.scss: -------------------------------------------------------------------------------- 1 | @function z-index($layer) { 2 | @return map-get($z-indexes, $layer); 3 | } 4 | -------------------------------------------------------------------------------- /sass/base/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/desenvolvweb/map-filter-reduce-every-some-find-includes/cb1d2f34adb0b1b6c12b98ca493131d377b83aee/sass/base/.gitkeep -------------------------------------------------------------------------------- /sass/base/_elements.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | html, 8 | body { 9 | -webkit-font-smoothing: antialiased; 10 | 11 | @media only screen and (-webkit-min-device-pixel-ratio: 1.25), 12 | only screen and (min-device-pixel-ratio: 1.25), 13 | only screen and (min-resolution: 200dpi), 14 | only screen and (min-resolution: 1.25dppx) { 15 | -webkit-font-smoothing: subpixel-antialiased; 16 | } 17 | } 18 | 19 | *:focus { 20 | outline: none; 21 | } 22 | 23 | img, 24 | iframe, 25 | object, 26 | embed, 27 | video { 28 | height: auto; 29 | max-width: 100%; 30 | } 31 | 32 | object, 33 | embed, 34 | video { 35 | height: auto; 36 | } 37 | 38 | figure { 39 | margin: 0; 40 | } 41 | 42 | label { 43 | cursor: pointer; 44 | } 45 | 46 | sup, 47 | sub { 48 | font-size: 50%; 49 | } 50 | 51 | // ========================================================================== 52 | // Project specifics 53 | // ========================================================================== 54 | 55 | // ::selection { 56 | // } 57 | 58 | // ::-moz-selection { 59 | // } 60 | 61 | // input::placeholder {} 62 | // textarea::placeholder {} 63 | // input::-webkit-input-placeholder {} 64 | // textarea::-webkit-input-placeholder {} 65 | // input::-moz-placeholder {} 66 | // textarea::-moz-placeholder {} 67 | // input:-ms-input-placeholder {} 68 | // textarea:-ms-input-placeholder {} 69 | -------------------------------------------------------------------------------- /sass/base/_generics.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/desenvolvweb/map-filter-reduce-every-some-find-includes/cb1d2f34adb0b1b6c12b98ca493131d377b83aee/sass/base/_generics.scss -------------------------------------------------------------------------------- /sass/component/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/desenvolvweb/map-filter-reduce-every-some-find-includes/cb1d2f34adb0b1b6c12b98ca493131d377b83aee/sass/component/.gitkeep -------------------------------------------------------------------------------- /sass/layout/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/desenvolvweb/map-filter-reduce-every-some-find-includes/cb1d2f34adb0b1b6c12b98ca493131d377b83aee/sass/layout/.gitkeep -------------------------------------------------------------------------------- /sass/state/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/desenvolvweb/map-filter-reduce-every-some-find-includes/cb1d2f34adb0b1b6c12b98ca493131d377b83aee/sass/state/.gitkeep -------------------------------------------------------------------------------- /sass/style.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // ========================================================================== 4 | // Abstract 5 | // ========================================================================== 6 | 7 | @import "abstract/unit"; 8 | @import "abstract/variables"; 9 | @import "abstract/breakpoint"; 10 | @import "abstract/z-index"; 11 | 12 | 13 | 14 | // ========================================================================== 15 | // Vendor 16 | // ========================================================================== 17 | 18 | @import "vendor/normalize"; 19 | 20 | 21 | 22 | // ========================================================================== 23 | // Base 24 | // ========================================================================== 25 | 26 | @import 'base/elements'; 27 | @import 'base/generics'; 28 | 29 | 30 | 31 | // ========================================================================== 32 | // Layout 33 | // ========================================================================== 34 | 35 | // @import "layout/l-"; 36 | 37 | 38 | 39 | // ========================================================================== 40 | // Component 41 | // ========================================================================== 42 | 43 | // @import "component/c-"; 44 | 45 | 46 | 47 | // ========================================================================== 48 | // State 49 | // ========================================================================== 50 | 51 | // @import "state/is-"; 52 | 53 | 54 | 55 | // ========================================================================== 56 | // Page 57 | // ========================================================================== 58 | 59 | // @import "page/"; 60 | 61 | 62 | 63 | // ========================================================================== 64 | // Theme 65 | // ========================================================================== 66 | 67 | // @import "theme/t-"; 68 | 69 | 70 | 71 | // ========================================================================== 72 | // Shame (hacks & dishonorable stuff) 73 | // ========================================================================== 74 | -------------------------------------------------------------------------------- /sass/theme/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/desenvolvweb/map-filter-reduce-every-some-find-includes/cb1d2f34adb0b1b6c12b98ca493131d377b83aee/sass/theme/.gitkeep -------------------------------------------------------------------------------- /sass/vendor/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/desenvolvweb/map-filter-reduce-every-some-find-includes/cb1d2f34adb0b1b6c12b98ca493131d377b83aee/sass/vendor/.gitkeep -------------------------------------------------------------------------------- /sass/vendor/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } 350 | --------------------------------------------------------------------------------