Skip to content

Latest commit

 

History

History
193 lines (131 loc) · 11.3 KB

README_bg.md

File metadata and controls

193 lines (131 loc) · 11.3 KB

#CSSCV

** CSSCV е прост, субективен стайлшиит за форматиране на семантичен HTML, за да изглежда като CSS файл. **

Първи стъпки

Най - лесният начин да започнете с CSSCV е да се гмурнем право в HTML и да започнете да работите! Няма нищо в Sass, което да не се използва в HTML, така че файлът index.html действа като цялостно реално демо за това, което CSSCV може да прави.

По-долу е представен по-подробен преглед на начина, по който работи CSSCV.

Субективен?

CSSCV съвпада с моя личен стил на писане на CSS и използва специфична цветова схема, [Solarized</ cite>] (http://ethanschoonover.com/solarized). Някои други по-субективни черти:

Активиране

CSSCV идва с опцията да активира/деактивира стила си. Това е така, за да можете бързо и лесно да премахне нестандартния външен вид на CSSCV и вместо това да се изложи на показ нестилизиран HTML в случай, че някога е необходимо да предоставите по-стандартен формат на автобиография персонал за набиране на персонал или екипи по човешки ресурси. Скучно, но често жизненоважно.За активирането на CSSCV е достатъчно да се добави клас .csscv на елемента html; всички стилове на CSSCV са обхванати в този неймспейс.

Да работим

Има няколко прости, но строги правила, които да следвате, за да използвате CSSCV. Наборите от правила се изграждат, като се използват списъци с определения и коментари и селекторите обикновено са конструирани с използване на заглавия. По-долу е един прост пример, който ще деконструираме:

    

        

Me </ h3>

        

            

Име </ dt>             </ span> </ span> Хари Робъртс </ span>

            

Работа </ dt>             
Консултант Front-end Architect </ span> </ dd>

            

Местоположение </ dt>             
Лийдс, Великобритания </ span> </ dd>

            

Умения </ dt>             
                
                        
  • Архитектура на Front-End </ span> </ li>                     
  • Дизайн </ Li>                     
  • Разработка </ Li>                     
  • OOCSS </ Li>                     
  • Производителност </ Li>                     
  • Responsive уеб дизайн </ span> </ li>                     
  • Git </ Li>                     
  • Vim </ Li>                     
  • Agile </ Li>                 </ ul>             </ dd>

            </ dd>

        </ DIV>

    Нека да разгледаме какво прави това:

    • Обвиваме всеки набор от правила в контейнер с клас .ruleset.
    • Заглавието или селекторът на този набор от правила е заглавие, което носи   .selector клас.
    • Декларациите, които съставят набора от правила, са маркирани в dl, което има   клас .declarations.
    • Всяка двойка property / value се маркира съответно с dt и dd.   Те, съответно, носят класове на .property и .value.
    • Всички стрингове, които биха се нуждаели от цитиране в CSS (например "Comic Sans MS") могат   да бъдат обвити в span с класа на string. Това ги оцветява различно   и прилага кавички за отваряне и затваряне.
    • Списъци със стойности (напр. font-family: "Comic Sans MS", cursive;) се маркират   като наредени или неподредени списъци, които носят клас .value-list.

    Както можем да видим, наборът от правила се формира от семантични HTML елементи и тежка употреба на псевдоелементите на CSS се използват за прилагане на CSS-подобен синтаксис (скоби, (полу) котировки и т.н.).

    Какво правят класовете

    .csscv

    Този клас се прилага към елемента html и активира CSSCV

    .spaced

    Този клас принуждава всички елементи, които го носят, да има едно разстояние между себе си и следния елемент.

    .spaced - large

    Това увеличава разстоянието от една до пет спейса.

    `.indented '

    Всичко, което носи този клас, ще бъде индентирано с избрания от вас брой табове (дефинирани в $tab-size).

    .ruleset

    Този клас се прилага към елемент, който обвива всеки набор от правила. Отделя наборите от правила един от друг и могат да носят и .spaced-large или .indentated класове.

    .selector

    Този клас се прилага за заглавия, които въвеждат всеки набор от правила. Добавя период преди, и отваряща скоба след, заглавието на набора от правила.

    .selector__delimiter

    Този клас се прилага на празен интервал, за да се разделят тирета с няколко типа селектори. Например:

        

    Относно </ span> мен </ h2>

    .declarations

    Този клас се прилага към списъка с определения, който ще формира тялото на набор от правила. Добавя затваряща скоба след окончателната декларация.

    .property

    Този клас се прилага за всеки елемент dt, който е собственост на декларацията. То вмъква декларацията според избрания размер на раздела и добавя последваща запетайка и пространство.

    .value

    Това се прилага за всеки елемент dd, който става value на декларация. То добавя последваща точка и запетая.

    .string

    CSS често има стойности, които съдържат спейсове, които трябва да цитират, да обгръщат тези стрингове в span, който носи класа .string.

    .number

    Този клас просто оцветява всякакви числови стойности (например 34px, #f00).

    .url

    Всички стойности, подобни на URL, могат да имат класа .url, приложен към тях, за да сложат пред него url( и ) след него.

    .value-list

    CSS често съдържа списъци със стойности, разделени със запетая. В CSSCV ги отбелязваме като ul и li. Ul отнема класа .value-list.

    .element and .modifier

    Тези два класа ви позволяват да използвате [Име на стил BEM] (http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) без да замърсявате маркъпа си. За да означите елемент или модификатор, използвайте съответния клас. Трябва също да използвате атрибута data-namespace в за да сложите отпред клас с правилното име на блока, например:

        

    Работа </ h3>

        ...

        

    Компания </ span>

    .comment, .comment-block и .comment-block__line

    Тези класове, не е изненадващо, стилизират маркъпа да изглежда като коментари. .comment класът дава inline коментар, докато .comment-block ни дава коментар със стил DocBlock:

        

             Foo </ span>          Бар </ span>          Baz </ span>     </ P>

    .notice

    Това е съобщението, което се показва в долната част на страницата на CSSCV. Включването на съобщението не е задължително, но е оценено.