List of Useful Web Design Links. Will stay updated

TopSilver Mar 18, 2017

  1. TopSilver

    TopSilver web designer Administrator

    Messages:
    197
    Likes Received:
    22
    Here are some to start us off. This is an official sticky thread. I will continually be adding to this list and I'm asking the community to post more useful links for web design and I will update the post as you provide them.

    Gradient Generator:
    Typography Calculator (for responsive typography):
    Rem Calculator:
    Box Shadow Generator (and more):
    Pixel to Em Generator:
    Color hexadecimal and RGB/RGBA Generator:
    Free Vectors and Icons:

    Code Testers:
    Free Interactive Learning Sites:

    Font Sites:

    UI Color Scheme Sites:

    Frameworks:

    CSS Libraries:

    Cheatsheets:

    IDE's/Editors:

    CSS Resets:

    Extras:

    Feel free to suggest things to be added. I plan on constantly updating this list with useful web design links.
     
    Last edited: Aug 23, 2017
  2. Scheibe

    Scheibe wolfeschlegelsteinhausenbergerdorff Super Moderator

    Messages:
    175
    Likes Received:
    19
    Change Log:

    April 5th:

    • added sass website
    • fixed font squirel
    April 6th:
    • added CSS compiler
    • added hover.css library
    • added animate.css library
    • added css loader (animations) library
    • added tooltip generator
    • added minireset.css
    • added icono
    • added cssreference.io
    April 7th:
    • added sass colour codes
      • 36 social media colour codes are included
    April 12th:
    • added simplesvg
      • added simplesvg icon finder
      • added index repo link
    • better presentation
    • added cheatsheets.org
    • added brew.sh
      • homebrew is a package manager for macOS. Homebrew is a package manager - it's in this list because you can install packages with it to assist you in web development/design.
    • added getbem.com
    April 13th:
    • added svgomg
    • added netbeans, sublime text, and visual studio to IDE editors
    • added Eric Meyers CSS Reset
    • placed php.net and getbem in extras
    • added cheat-sheets.org to cheat sheets
    • put simplesvg in list of free vectors and icons
    April 15th:
    • added HTML5 doctor reset
    • added mini-reset
    • added HTML5 reset
    April 23rd:
    • removed placekitten
    • added placehold.it
    May 3rd:
    • added flexbox cheat sheet
    August 23rd:
    • general re-ordering/clean-up
    • added materialize css to the list
    • added another reset in the post below
     
    Last edited: Aug 23, 2017
    TopSilver likes this.
  3. Scheibe

    Scheibe wolfeschlegelsteinhausenbergerdorff Super Moderator

    Messages:
    175
    Likes Received:
    19
    Another CSS Reset:
    Code:
    /* CSS RESET
    ====================================================================================================
    ====================================================================================================
    */
    
    
    html, body, div, main, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, button, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend, input, textarea,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video,
    ::before, ::after {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
        text-decoration: none;
        box-sizing: border-box;
    }
    
    /* HTML5 - Older browser support
    ====================================================================== */
    article, aside, details, figcaption, figure,
    footer, header, menu, nav, section {
        display: block;
    }
    
    
    /* BODY
    ====================================================================== */
    body { line-height: 1; }
    
    
    /* LISTS - Clear bullets
    ====================================================================== */
    ol, ul { list-style: none; }
    
    
    /* QUOTES
    ====================================================================== */
    blockquote, q { quotes: none; }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    
    /* TABLES
    ====================================================================== */
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
     
    Last edited: Sep 6, 2017

Share This Page