Narzędzia i materiały > Aplikacje
Adobe Brackets
inż. Avallach:
Open-source'owy edytor html, css i javascript zaprogramowany przy użyciu... html, css i javascript (node.js). Podpowiada / autouzupełnia kod, pozwala wygodnie pracować z projektami składającymi się z wielu plików (sidebar po lewej), obsługuje pluginy. Ma zintegrowanego mini-Chrome'a używanego do podglądu tworzonej strony na żywo. Cokolwiek zrobisz w kodzie, natychmiast widać to w przeglądarce, czy chodzi o css, czy html. W prawdzie narzędzia developerskie samego Chrome'a są na razie pod tym względem jeszcze wygodniejsze, ale tu też prawie nie ma na co narzekać :D
Tak jak napisałem, ma otwarte źródło. Jest darmowy i stale rozwijany. Kolejne buildy ("sprinty") wychodzą co kilka tygodni. Ma całkiem ładny interface dopasowany do stylu Win8. Zmieniliby jeszcze kolor tła pod edytowanym tekstem na grafit i byłby trochę jak nowe, śliczne VS2012. Ciekawe czy da się go skinować, bo jak tak, to chyba się za to zabiorę, w końcu wystarczyłby do tego css :D Są modyfikacje wprowadzające obsługę skinów i dołączone do nich gotowe.
Jego tworzenie jest wspierane przez Adobe, które używa go jako podstawy pod swój komercyjny Adobe Edge. O ile rozumiem, relacja między nimi jest taka jak miedzy Chrome a Chromium.
http://brackets.io/
https://www.facebook.com/codebrackets
http://html.adobe.com/opensource/
inż. Avallach:
Zrobiłem sobie tego skina. Ciemny, nieco uproszczony w stosunku do domyślnego. Kolorowanie tekstu bazowane na ambient, ale nieco stonowane. Wywalony prawy toolbar (w praktyce, przynajmniej na razie, bezużyteczny), zmodyfikowane paski przewijania (chyba sami chcieli coś takiego zrobić sądząc po tym co widziałem w kodzie, ale coś im nie wychodziło i był normalny).
Sposób użycia:
File -> Extension Manager -> Available
Znaleźć / wstukać "Themes for Brackets" i wgrać.
Zamknąć program, wejść do katalogu o ścieżce
--- Kod: ---%appdata%\Brackets\extensions\user\themesforbrackets\themes
--- Koniec kodu ---
Stworzyć nowy plik avallach.css i wkleić do niego notatnikiem następującą zawartość:
Spoiler
--- Kod: ---.cm-s-avallach .cm-keyword { color: #cda869; }
.cm-s-avallach .cm-atom { color: #CF7E7E; }
.cm-s-avallach .cm-number { color: #78CF8A; }
.cm-s-avallach .cm-def { color: #aac6e3; }
.cm-s-avallach .cm-variable { color: #ffb795; }
.cm-s-avallach .cm-variable-2 { color: #eed1b3; }
.cm-s-avallach .cm-variable-3 { color: #faded3; }
.cm-s-avallach .cm-property { color: #eed1b3; }
.cm-s-avallach .cm-operator {color: #fa8d6a;}
.cm-s-avallach .cm-comment { color: #555; font-style:italic; }
.cm-s-avallach .cm-string { color: #8f9d6a; }
.cm-s-avallach .cm-string-2 { color: #9d937c; }
.cm-s-avallach .cm-meta { color: #D2A8A1; }
.cm-s-avallach .cm-error { color: #AF2018; }
.cm-s-avallach .cm-qualifier { color: rgb(255, 221, 148); }
.cm-s-avallach .cm-builtin { color: #B5D2FF; }
.cm-s-avallach .cm-bracket { color: #24C2C7; }
.cm-s-avallach .cm-tag { color: #fee4ff }
.cm-s-avallach .cm-attribute { color: #9B859D; }
.cm-s-avallach .cm-header {color: blue;}
.cm-s-avallach .cm-quote { color: #24C2C7; }
.cm-s-avallach .cm-hr { color: pink; }
.cm-s-avallach .cm-link { color: #F4C20B; }
.cm-s-avallach .cm-special { color: #FF9D00; }
.cm-s-avallach .CodeMirror-matchingbracket { color: #0f0; }
.cm-s-avallach .CodeMirror-nonmatchingbracket { color: #f22; }
.cm-s-avallach .CodeMirror-selected {
background: rgba(255, 255, 255, 0.15);
}
.cm-s-avallach .CodeMirror-focused .CodeMirror-selected {
background: rgba(255, 255, 255, 0.10);
}
/* Editor styling */
.cm-s-avallach.CodeMirror {
line-height: 1.40em;
font-family: Monaco, Menlo,"Andale Mono","lucida console","Courier New",monospace !important;
color: #E6E1DC;
background-color: #1A1B20;
}
.cm-s-avallach .CodeMirror-gutters {
background: #3c3f41;
}
.cm-s-avallach .CodeMirror-linenumber {
text-shadow: 0px 1px 1px #4d4d4d;
color: #222;
padding: 0 5px;
}
.cm-s-avallach .CodeMirror-lines .CodeMirror-cursor {
border-left: 1px solid #7991E8;
}
.cm-s-avallach .activeline {
background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.031);
}
#sidebar, #main-toolbar, #status-bar, .inline-widget{
background: #3c3f41;
}
#status-bar{
border-top: 0;
color:#CCC;
}
#editor-holder #not-editor{
background-color: #202020;
}
.inline-widget{ /* Quick-edit etc. */
background-color: #2e2d2d;
}
.css-prop-defn code, .css-prop-defn h1, .css-prop-values dl dt{
color:#999;
}
.css-prop-defn{
color:#CCC;
}
.divider-holder .divider{
border-right:1px solid rgb(50, 51, 49);
border-left:1px solid rgb(34, 36, 32);
}
a.more-info{
background-color: #454545;
border: 1px solid #555;
border-bottom: none;
box-shadow: inset 0 1px 0 #777;
text-shadow: none;
color: #CCC;
}
#main-toolbar
{
display: none;
}
.main-view .content
{
right: 0;
}
.modal-bar
{
background: #3c3f41;
box-shadow: none;
border: none;
}
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input
{
background: rgba(0, 0, 0, 0.51) !important;
color: white !important;
}
.jstree-brackets li > a:hover, #open-files-container li:hover {
background: rgba(0, 0, 0, 0.12);
border-top: 1px solid rgba(0, 0, 0, 0.14);
border-bottom: 1px solid rgba(255, 255, 255, 0.13);
/* box-sizing: border-box; */
/* height: 22px; */
margin-top: -1px;
margin-bottom: -1px;
}
#project-files-container::-webkit-scrollbar {
width: 0;
height: 0;
}
#project-files-container:hover::-webkit-scrollbar, ::-webkit-scrollbar
{
width: 5px;
height:5px;
}
::-webkit-scrollbar-button { }
::-webkit-scrollbar-track { }
::-webkit-scrollbar-track-piece { }
::-webkit-scrollbar-thumb {
width: 5px;
background-color: rgba(255, 255, 255, 0.2);
transition: background-color 1s;
}
::-webkit-scrollbar-corner { }
::-webkit-resizer { }
::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.6);
}
.platform-mac .quiet-scrollbars :hover::-webkit-scrollbar-thumb, .platform-win .quiet-scrollbars :hover::-webkit-scrollbar-thumb, .platform-linux .quiet-scrollbars :hover::-webkit-scrollbar-thumb, .platform-mac .quiet-scrollbars :focus::-webkit-scrollbar-thumb, .platform-win .quiet-scrollbars :focus::-webkit-scrollbar-thumb, .platform-linux .quiet-scrollbars :focus::-webkit-scrollbar-thumb {
border-radius: 0;
box-shadow: none;
border: none;
}
.jstree-brackets li a {
color: #d7d8d9;
text-shadow: none;
}
.jstree-brackets li a:hover {
color: white;
}
--- Koniec kodu ---
Włączyć Brackets, z menu Themes wybrać Avallach. Gotowe.
Wowoz:
Adobe ci bułki na studia kupuje, że go tak reklamujesz? :lol2:
inż. Avallach:
Tak jak pisałem, to projekt open-source, tworzony przez pasjonatów za darmo. Adobe z tego korzysta, ale wątpię żeby udzielało jakiegokolwiek konkretnego wsparcia finansowego. Napisałem o tym programie bo sam z niego korzystam i jestem zadowolony i bardzo zaciekawiony podejściem jakie stosuje (bardzo łatwo w nim grzebać biorąc pod uwagę że jest po prostu jakby bardziej rozbudowaną stroną internetową tworzoną przy użyciu nowoczesnych technologii - pod wieloma względami wzoruje się na jego kodzie tworząc skin na forum :D).
No i mam nadzieję że może cudem rozbudzę u kogoś z forum pasję do webdesignu i zrobi on nam porządnego skina :lol2:
Leinnan:
--- Cytat: inż. Avallach w 2013-09-25, 13:46 ---No i mam nadzieję że może cudem rozbudzę u kogoś z forum pasję do webdesignu i zrobi on nam porządnego skina :lol2:
--- Koniec cytatu ---
Nawigacja
[#] Następna strona
Idź do wersji pełnej