| CARVIEW |
Select Language
HTTP/2 200
date: Thu, 24 Jul 2025 01:00:33 GMT
content-type: text/html; charset=utf-8
vary: X-PJAX, X-PJAX-Container, Turbo-Visit, Turbo-Frame, X-Requested-With,Accept-Encoding, Accept, X-Requested-With
x-robots-tag: none
etag: W/"19acd6d9deb9a781c64c3ad34219e95a"
cache-control: max-age=0, private, must-revalidate
strict-transport-security: max-age=31536000; includeSubdomains; preload
x-frame-options: deny
x-content-type-options: nosniff
x-xss-protection: 0
referrer-policy: no-referrer-when-downgrade
content-security-policy: default-src 'none'; base-uri 'self'; child-src github.githubassets.com github.com/assets-cdn/worker/ github.com/assets/ gist.github.com/assets-cdn/worker/; connect-src 'self' uploads.github.com www.githubstatus.com collector.github.com raw.githubusercontent.com api.github.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-upload-manifest-file-7fdce7.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com *.rel.tunnels.api.visualstudio.com wss://*.rel.tunnels.api.visualstudio.com objects-origin.githubusercontent.com copilot-proxy.githubusercontent.com proxy.individual.githubcopilot.com proxy.business.githubcopilot.com proxy.enterprise.githubcopilot.com *.actions.githubusercontent.com wss://*.actions.githubusercontent.com productionresultssa0.blob.core.windows.net/ productionresultssa1.blob.core.windows.net/ productionresultssa2.blob.core.windows.net/ productionresultssa3.blob.core.windows.net/ productionresultssa4.blob.core.windows.net/ productionresultssa5.blob.core.windows.net/ productionresultssa6.blob.core.windows.net/ productionresultssa7.blob.core.windows.net/ productionresultssa8.blob.core.windows.net/ productionresultssa9.blob.core.windows.net/ productionresultssa10.blob.core.windows.net/ productionresultssa11.blob.core.windows.net/ productionresultssa12.blob.core.windows.net/ productionresultssa13.blob.core.windows.net/ productionresultssa14.blob.core.windows.net/ productionresultssa15.blob.core.windows.net/ productionresultssa16.blob.core.windows.net/ productionresultssa17.blob.core.windows.net/ productionresultssa18.blob.core.windows.net/ productionresultssa19.blob.core.windows.net/ github-production-repository-image-32fea6.s3.amazonaws.com github-production-release-asset-2e65be.s3.amazonaws.com insights.github.com wss://alive.github.com api.githubcopilot.com api.individual.githubcopilot.com api.business.githubcopilot.com api.enterprise.githubcopilot.com; font-src github.githubassets.com; form-action 'self' github.com gist.github.com copilot-workspace.githubnext.com objects-origin.githubusercontent.com; frame-ancestors 'none'; frame-src viewscreen.githubusercontent.com notebooks.githubusercontent.com; img-src 'self' data: blob: github.githubassets.com media.githubusercontent.com camo.githubusercontent.com identicons.github.com avatars.githubusercontent.com private-avatars.githubusercontent.com github-cloud.s3.amazonaws.com objects.githubusercontent.com release-assets.githubusercontent.com secured-user-images.githubusercontent.com/ user-images.githubusercontent.com/ private-user-images.githubusercontent.com opengraph.githubassets.com copilotprodattachments.blob.core.windows.net/github-production-copilot-attachments/ github-production-user-asset-6210df.s3.amazonaws.com customer-stories-feed.github.com spotlights-feed.github.com objects-origin.githubusercontent.com *.githubusercontent.com; manifest-src 'self'; media-src github.com user-images.githubusercontent.com/ secured-user-images.githubusercontent.com/ private-user-images.githubusercontent.com github-production-user-asset-6210df.s3.amazonaws.com gist.github.com; script-src github.githubassets.com; style-src 'unsafe-inline' github.githubassets.com; upgrade-insecure-requests; worker-src github.githubassets.com github.com/assets-cdn/worker/ github.com/assets/ gist.github.com/assets-cdn/worker/
server: github.com
content-encoding: gzip
accept-ranges: bytes
set-cookie: _gh_sess=C5uDRsDAzNYOX9waYH0fVzW9JwnxRULH37RQKBudeED3kvLXKUwnHNnZoqsD5daob1Ci%2Bb9o47QaIkMA4nJA%2BUHUuRuLlTgCwq5gW5ujAl9hyKH6yTYGTh%2BMOFhn2bQwSaEs8w%2F6h1uqPmIBDwzBi0C8gJJ%2Bkk12nKIbBVIJkPPRvsXeA0uvGbYgCpWbQPsibB7%2BEwlQ1Sl%2B1hKqV3JYDchADkZa%2FJd5ShCwRYgzUrgVprYWm4r1hh4ULjUdmxwyXtOBo244XUvTf%2BLqsB24yw%3D%3D--BdGqF1HTGYYc1o3D--YULCBiDVt0IStH8Ce60%2FuA%3D%3D; Path=/; HttpOnly; Secure; SameSite=Lax
set-cookie: _octo=GH1.1.161804607.1753318832; Path=/; Domain=github.com; Expires=Fri, 24 Jul 2026 01:00:32 GMT; Secure; SameSite=Lax
set-cookie: logged_in=no; Path=/; Domain=github.com; Expires=Fri, 24 Jul 2026 01:00:32 GMT; HttpOnly; Secure; SameSite=Lax
x-github-request-id: 9A00:3F8A98:1D920E:2A1AB8:688185B0
Roll Your Own · skeleton-framework/skeleton-framework Wiki · GitHub
Skip to content
Navigation Menu
{{ message }}
-
Notifications
You must be signed in to change notification settings - Fork 40
Roll Your Own
Nick Lorenson edited this page May 12, 2016
·
5 revisions
Make your own Skeleton!
Clone the repo or grab a zip/tarball of the
latest release. Unpack it if you need to (for .zip and .tar.gz archives), cd into the project directory, and npm install.
It comes with a prebuilt version in the dist directory,
but if you have particular needs, you can use the included build process
to reprocess the css files and create a custom version.
First, open src/core/_root.css and tweak the values in the :root selector.
:root {
--total-columns: 12;
--column-width: calc(100% / var(--total-columns));
--max-width: 1200px;
--gutter: 1rem;
--font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
--background-color: #fff;
--font-color: #222;
--link-color: #1EAEDB;
--link-color-hover: #0FA0CE;
--text-color-primary: #1EAEDB;
--text-color-danger: #e74c3c;
--text-color-success: #2ecc71;
--button-font-color: #555;
--button-font-color-enter: #333;
--button-font-color-active: #222;
--button-font-color-disabled: #888;
--button-background-color: transparent;
--button-border: 1px solid #BBB;
--button-border-color-enter: #888;
--button-border-color-active: #222;
--button-border-disabled: 1px solid #E3E3E3;
--primary-button-font-color: #FFF;
--primary-button-font-color-enter: #FFF;
--primary-button-font-color-active: #FFF;
--primary-button-font-color-disabled: #FFF;
--primary-button-background-color: #33C3F0;
--primary-button-background-color-enter: #1EAEDB;
--primary-button-background-color-active: #157b9b;
--primary-button-background-color-disabled: #7CD9F8;
--primary-button-border: 1px solid #33C3F0;
--primary-button-border-color-enter: #1EAEDB;
--primary-button-border-color-active: #157b9b;
--primary-button-border-color-disabled: #7CD9F8;
--success-button-font-color: #FFF;
--success-button-font-color-enter: #FFF;
--success-button-font-color-active: #FFF;
--success-button-font-color-disabled: #FFF;
--success-button-background-color: #2ecc71;
--success-button-background-color-enter: #27ae60;
--success-button-background-color-active: #2ecc71;
--success-button-background-color-disabled: #82e3aa;
--success-button-border: 1px solid #2ecc71;
--success-button-border-color-enter: #27ae60;
--success-button-border-color-active: #2ecc71;
--success-button-border-color-disabled: #82e3aa;
--danger-button-font-color: #FFF;
--danger-button-font-color-enter: #FFF;
--danger-button-font-color-active: #FFF;
--danger-button-font-color-disabled: #FFF;
--danger-button-background-color: #e74c3c;
--danger-button-background-color-enter: #c0392b;
--danger-button-background-color-active: #e74c3c;
--danger-button-background-color-disabled: #ee8377;
--danger-button-border: 1px solid #e74c3c;
--danger-button-border-color-enter: #c0392b;
--danger-button-border-color-active: #e74c3c;
--danger-button-border-color-disabled: #ee8377;
--form-background-color: #FFF;
--form-font-color: #222;
--form-border: 1px solid #D1D1D1;
--form-border-enter: 1px solid #33C3F0;
--form-border-enter-error: 1px solid #e74c3c;
--form-border-enter-success: 1px solid #2ecc71;
--code-background: #F1F1F1;
--code-border: 1px solid #E1E1E1;
--alert-font-color: #000;
--alert-border: 1px solid #000;
--alert-background-color: #FFF;
--alert-primary-font-color: #FFF;
--alert-primary-border: 1px solid #33C3F0;
--alert-primary-background-color: #33C3F0;
--alert-success-font-color: #FFF;
--alert-success-border: 1px solid #2ecc71;
--alert-success-background-color: #2ecc71;
--alert-danger-font-color: #FFF;
--alert-danger-border: 1px solid #e74c3c;
--alert-danger-background-color: #e74c3c;
--td-border-bottom: 1px solid #E1E1E1;
--border-radius: 4px;
--hr: 1px solid #E1E1E1;
--card-shift: -2px;
--card-active-border: #8A8A8A;
--card-border: #E1E1E1;
--card-shadow: #E1E1E1;
--card-anchor-color: #757575;
}Messing with the --max-width and --gutter values should work just fine,
though tweaking the --total-columns could produce unexpected results.
If you try a 10 column layout and end up with 120% columns, document it and show us!
Most of your options here are for the colors of various parts of the layout, like buttons and text colors. Tweak to your heart's content!
The build command for production is (for now, though subject to change) npm run build.
This will run the css through various post-processors and spit out new versions of
the .css and .min.css files in the dist directory.
Thereafter you can ship away!
Clone this wiki locally
You can’t perform that action at this time.