Adobe Brackets 4154 5

O temacie

Autor inż. Avallach

Zaczęty 24.09.2013 roku

Wyświetleń 4154

Odpowiedzi 5

inż. Avallach

inż. Avallach

Administrator
Czego pragniesz?
posty7370
Propsy4675
Nagrody
ProfesjaProgramista
  • Administrator
  • Czego pragniesz?

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
Czego pragniesz?
posty7370
Propsy4675
Nagrody
ProfesjaProgramista
  • Administrator
  • Czego pragniesz?

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
posty3554
Propsy4459
Nagrody
Profesjabrak
  • Użytkownicy
  • Wowoźny
Adobe ci bułki na studia kupuje, że go tak reklamujesz? :lol2:
 

inż. Avallach

inż. Avallach

Administrator
Czego pragniesz?
posty7370
Propsy4675
Nagrody
ProfesjaProgramista
  • Administrator
  • Czego pragniesz?
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
posty2639
Propsy3520
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
posty5062
Propsy3600
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