designr

KO | EN

gitlite — search

#javascript #python #typescript #llm #go #golang #android #rust #java #windows #awesome #awesome-list #openai #open-source

(★ 92)

A chrome extension that inspects CSS styles and saves snapshots of web components and designs 🎨✨📸

파일 탐색기

최종 버전 다운로드 (.zip)

- - icon128.png
  - icon16.png
  - icon48.png
- logo.png
- logo_dark.png
- designr.css
- styles.css
- - autorefresh.js
  - codemirror.css
  - codemirror.js
  - css.js
  - formatting.js
  - html-hint.js
  - htmlmixed.js
  - index.css
  - javascript.js
  - monokai.min.css
  - show-hint.css
  - show-hint.js
  - xml-hint.js
  - xml.js
- background.js
- designr.js
- script.js
.gitignore
index.html
manifest.json
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p align="center">designr inspects <strong>CSS styles</strong> and saves <strong>snapshots</strong> of <strong>web components</strong> and <strong>designs</strong></p>

<h2 align="center">🎨 &nbsp; Functionality &nbsp;</h2>
<p align="center">designr is an <strong>open-source</strong> <strong>browser extension</strong> designed to inspect and save CSS styling on web pages. designr provides information about <strong>element styles</strong> and save the styles into a palette for later use. designr is a simple and intuitive way for designers and web developers to  <strong>save CSS references.</strong></p>
<br/>

<h2 align="center">🛠 &nbsp; Setup &nbsp;</h2>
<p align="center">To get started with development, <strong>fork or clone the repository</strong>. Once the repository is installed, go to the extensions page in your brower. For example, the extension manager page for Chrome is <code>chrome://extensions</code> which will let you edit and upload the extension package. On the extension manager page, toggle <code>Developer Mode</code> on, click <code>Load unpacked</code>, and select the <strong>folder of the downloaded extension</strong>.</p>

<br/>

<h2 align="center">⚙️ &nbsp; Code Structure &nbsp;</h2>
<div align="center">
  The code for designr adheres to the following structure: <br /> <br />
  
  |   |   |
  |---|---|
  |<code>assets/</code>| includes all assets for the extension  |
  |<code>css/designr.css</code>| CSS file for the designr element inspector view|
  |<code>css/styles.css</code>|CSS file for the designr popup view|
  |<code>js/libs</code>|contains all JS code for libraries|
  |<code>js/background.js</code>|background JS code for designr|
  |<code>js/designr.js</code>|JS code for the designr element inspector view|
  |<code>js/script.js</code>|JS code for the designr popup view|
  |<code>index.html</code>|HTML code for the designr popup view |
</div>

<br/>

<h2 align="center">💜 &nbsp; Contributing &nbsp;</h2>
<p align="center">If you would like to contibute new features, bug fixes, or have any recommendations on how the extension can be improved, feel free to contribute by <strong>forking this repository, contributing a change that either resolve an issue or adds a new feature, and submitting a PR for review.</strong></p>

designr

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

designr

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README