Adobe Brackets 7853 5

O temacie

Autor inż. Avallach

Zaczęty 24.09.2013 roku

Wyświetleń 7853

Odpowiedzi 5

inż. Avallach

inż. Avallach

Administrator
posty7639
Propsy5135
Nagrody
ProfesjaProgramista
  • Administrator

inż. Avallach
Administrator

Adobe Brackets
2013-09-24, 18:17(Ostatnia zmiana: 2016-03-23, 11:45)
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

inż. Avallach

Administrator
posty7639
Propsy5135
Nagrody
ProfesjaProgramista
  • Administrator

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
%appdata%\Brackets\extensions\user\themesforbrackets\themesStworzyć nowy plik avallach.css i wkleić do niego notatnikiem następującą zawartość:
Spoiler
.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;
}
Włączyć Brackets, z menu Themes wybrać Avallach. Gotowe.

Wowoz

Wowoz

Użytkownicy
Wowoźny
posty3657
Propsy4776
Nagrody
Profesjabrak
  • Użytkownicy
  • Wowoźny
Adobe ci bułki na studia kupuje, że go tak reklamujesz? :lol2:
 

inż. Avallach

inż. Avallach

Administrator
posty7639
Propsy5135
Nagrody
ProfesjaProgramista
  • Administrator
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

Leinnan

Administrator
torsonic polarity syndrome
posty2650
Propsy3558
ProfesjaProgramista
  • Administrator
  • torsonic polarity syndrome
No i mam nadzieję że może cudem rozbudzę u kogoś z forum pasję do webdesignu i zrobi on nam porządnego skina :lol2:

 
Mit der Dummheit kämpfen die Götter selbst vergebens

steam | space fight |  last.fm | moddb.com | Stary, najlepszy lider Sclavinii

Adanos

Adanos

Administrator
Szara eminencja
posty5203
Propsy3850
ProfesjaProgramista
  • Administrator
  • Szara eminencja
No to zagadka rozwiązana. :D W nagrodę otrzymujesz:


0 użytkowników i 1 Gość przegląda ten wątek.
0 użytkowników
Do góry