https://github.com/nemethricsi/front-end-tools

Front-end browser extensions and tools for HTML, CSS, JS
https://github.com/nemethricsi/front-end-tools

Last synced: about 4 hours ago
JSON representation

Front-end browser extensions and tools for HTML, CSS, JS

• Host: GitHub
• URL: https://github.com/nemethricsi/front-end-tools
• Owner: nemethricsi
• Created: 2019-09-12T07:46:56.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-09-16T14:08:19.000Z (over 5 years ago)
• Last Synced: 2024-10-11T14:04:36.379Z (4 months ago)
• Language: HTML
• Size: 1.32 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 0. My Blog Example

![my-blog-screenshot](my-blog.png)

## 0 / b I really forget one thing

When you click the button goes 'down' 3 pixels:

```css

button:active {

            transform: translateY(3px);

        }

```

![my-blog-screenshot](button_clicked_animation.gif)

# 1. Tools

IMPORTANT NOTICE:

Lot of times these tools doesn't allow you to use them on *local files* (starting with `file:///` instead of `http://`) by default. Please allow access in the options:

![allow-access](allow_access.gif)

## a) WhatFont ?

_The easiest way to identify fonts on web pages._

[WhatFont for Chrome](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm)

[WhatFont for Firefox](https://addons.mozilla.org/en-US/firefox/addon/zjm-whatfont/)

Alternative: Font Face Ninja 

_Explore fonts within a website, try, bookmark and buy them !_

  --> [for Chrome](https://chrome.google.com/webstore/detail/fontface-ninja/eljapbgkmlngdpckoiiibecpemleclhh)

--> [for Firefox](https://addons.mozilla.org/hu/firefox/addon/fontface-ninja/)

## b) ColorPick Eyedropper

_An eye-dropper & color-picker tool that allows you to select color values from webpages._

[ColorPick for Chrome](https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg)

[ColorPick for Firefox](https://addons.mozilla.org/hu/firefox/addon/colorpick-eyedropper/)

## c) Pesticide

_This extension inserts the Pesticide CSS into the current page, outlining each element to better see placement on the page._

[Pesticide for Chrome](https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh)

[Pesticide for Firefox](https://addons.mozilla.org/en-US/firefox/addon/pesticide-for-firefox/)

## d) Page Ruler

_Draw a ruler to get pixel dimensions and positioning, and measure elements on any web page._

[Page Ruler for Chrome](https://chrome.google.com/webstore/detail/page-ruler/emliamioobfffbgcfdchabfibonehkme)

[(some other) Ruler for Firefox](https://addons.mozilla.org/en-US/firefox/addon/browser-ruler/)

## e) HTML Tree Generator

_Html is really a tree of elements, css is what defines the layout. This extension displays any page as a tree._

[HTML Tree Generator for Chrome](https://chrome.google.com/webstore/detail/html-tree-generator/dlbbmhhaadfnbbdnjalilhdakfmiffeg)

[HeadingsMap for Firefox](https://addons.mozilla.org/en-US/firefox/addon/headingsmap/)

## f) Nimbus Screenshot

_Screen Capture FULL Web page or any part. Edit screenshots. Record screencasts - record video from your screen._

[Nimbus Screenshot for Chrome](https://chrome.google.com/webstore/detail/nimbus-screenshot-screen/bpconcjcammlapcogcnnelfmaeghhagj)

[Nimbus Screenshot for Firefox](https://addons.mozilla.org/hu/firefox/addon/nimbus-screenshot/)

# 2. Web sites

## a) Draw.io

_an open source technology stack for building diagramming applications, and the world’s most widely used browser-based end-user diagramming application._

[draw.io](https://www.draw.io/)

## b) Word counter

[wordcounter.io](https://wordcounter.io/)

# 3. CSS

[CSS Gradient](https://cssgradient.io/)

[Animate.css](https://daneden.github.io/animate.css/)

[30 seconds of CSS](https://css.30secondsofcode.org/)

[16 Box Shadows to Save Your Time](http://cssdeck.com/labs/16-box-shadows-to-save-your-time)

[The 30 CSS Selectors You Must Memorize](https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048)

[Minify your CSS](https://cssminifier.com/)

# 4. Colors

[Coolors.co](https://coolors.co) - _color schemes_

[0 to 255](https://www.0to255.com/) - _color shades_

[Flat UI colors](https://flatuicolors.com/) - _Flat colors_

# 5. Others

[JS keycodes](http://keycodes.atjayjo.com/#charcode)

[Carbon](https://carbon.now.sh/) - _Create and share beautiful images of your source code._

[Pexels](https://www.pexels.com/) - _Free stock photos_

# 6. EMMET

[EMMET Cheatsheet](https://docs.emmet.io/cheat-sheet/)

## HTML

`div>(header>ul>li*2>a)+footer>p`

```html



    

        


            


            


        

    

    

        


    



```

`html:5` Vs. `!`


```html

  

  

  

  Document

  

```

`script:src`

```html

```

`input:password` Vs. `input:p`

```html

```

`button:submit` Vs. `button:s` Vs. `btn:s`

```html

```

`.title`

```html



```


`a{Buy it now!}`

```html

Buy it now!

```

`lorem20`

```html

Lorem ipsum dolor sit amet consectetur, adipisicing elit. A corporis ipsum soluta quod incidunt iste omnis possimus itaque debitis molestiae?

```


## CSS

`d` 

```css

a {

  display: block;

}

```

`d:f` 

```css

main {

  display: flex;

}

```

`maw`

```css

main {

  max-width: ;

}

```

`ta:c`

```css

body {

  text-align: center;

}

```

`td`

```css

a {

  text-decoration: none;

}

```

`bgc`

```css

body {

  background-color: #fff;

}

```

`bgi`

```css

body {

  background-image: url();

}

```

`bgsz:c`

```css

body {

  background-size: cover;

}

```

`bd`(+)

```css

body {

  border: 1px solid #000;

}

```

`jc:c`

```css

body {

  justify-content: center;

}

```