Host socialColors yourself

Search…
Setup
Prefer to get a copy and use socialColors alongside your own project’s source code while building locally and serving in production? Downloading and hosting socialColors yourself is great for when you have many sites or apps in one codebase or want to customize parts of socialColors for your workflow.
You've download a copy already, right?
Make sure you've downloaded a copy of our files. You'll need it to do any of the following things we'll be walking through.
​Download​
What’s in the Download?
The socialColors Package contains the following directories and files:
Files & Folders
What they are
Where you should start
/css
Stylesheets for your colors
socialcolors.css
/scss
Sass pre-processor
socialcolors.scss
Using Colors with CSS
The /css/socialcolors.css file contains the core stylings plus all of the colors that you´ll need when using socialColors.
Copy the entire /css/socialcolors.css into your project´s static assets directory (or where ever you prefer to keep front end assets or vendor stuff)
Add a reference to the copied /css/socialcolors.css file into the <head> of each template or page that you want to use socialColors on.
<head>
  <link href="/your-path-to-socialcolors/css/socialcolors.css" rel="stylesheet">
  <!--load all styles -->
</head>
<body>
  <!-- Colors -->  
  <p class="sc sc-instagram sc-color">Test</p>
  <div class="sc sc-instagram sc-hover"></div>
  <!-- Background-Colors --> 
  <p class="sc sc-instagram sc-background">Test</p>
  <div class="sc sc-instagram sc-background-hover"></div>
</body>
Using a CSS Pre-Processor?
Using the /scssversions of Font socialColors we've bundled in the download? Check out our Sass docs for details on their contents. Once you've compiled them into CSS, you can follow the CSS-focused steps noted here to handle hosting and referencing colors.
Basic Use
Next - Setup
Using a Package Manager
Last modified 2yr ago
Copy link
Outline
What’s in the Download?
Using Colors with CSS