Do you use any html / css quick development tools?

I just heard about zen-coding , which is basically just a script that generates markup based on the css-esque selector, for example:

div#foo > p*6

generates

<div id="foo">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

Change . Here is a more advanced example.

And PS - I don’t even go through any API, I fully guess based on my CSS selector value, it is very easy and intuitive for me.

ul#nav > li[id] * 6 > a

Forms

<ul id="nav">
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
</ul>

, Ctrl-E. , . , CSS, , , Firebug, , , script .

TextMate, Dreamweaver, Aptana, NetBeans, , vim/emacs, sparkup, vim ( ).

, - - , Vim/Textmate/Emacs , , .

+3
4

Hm. HTML CSS , . , , , Ctrl + C Ctrl + V. , , , . HTML - SQL - , PHP VB script . , - .

, .

, . , . .:)

+6

, Sass Haml

Sass :

// Sass

!blue = #3bbfce
!margin = 16px

.content_navigation
  border-color = !blue
  color = !blue - #111

.border
  padding = !margin / 2
  margin = !margin / 2
  border-color = !blue

:

/* CSS */

.content_navigation {
  border-color: #3bbfce;
  color: #2aaebd;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Haml div css # . :

#profile
  .left.column
    #date= print_date
    #address= current_user.address
  .right.column
    #email= current_user.email
    #bio= current_user.bio

:

<div id="profile">
  <div class="left column">
    <div id="date"><%= print_date %></div>
    <div id="address"><%= current_user.address %></div>
  </div>
  <div class="right column">
    <div id="email"><%= current_user.email %></div>
    <div id="bio"><%= current_user.bio %></div>
  </div>
</div>
+4

, , , .

- ​​ 4 , , -

<li>some text</li>

.

html, ,

<ul>
<?php foreach ( $menu as $item ) : ?>
 <li><?php echo $item->title ?></li>
<?php endforeach; ?>
</ul>

, HTML. , , .

, , html, ?

CMS, Joomla, Drupal Wordpress. html-, - Sphinx.

Sphinx HTML , html-.

Sphinx reStructuredText . , reStructuredText.

- `Joomla`_
- `Drupal`_
- `Wordpres`_
- `Sphinx`_
_ :doc:`Some intermal Page <internal/file>`

.. _Joomla: http://joomla.org
.. _Drupal: http://drupal.org
.. _Wordpress: http://wordpress.org
.. _Sphinx: http://sphinx.pocoo.org/

, reStructuredText, , , Sphinx, , . , .

+2
source

The Blueprint CSS framework has a quick HTML version similar to CSS / CSS:

Spend time but not replicating.

+1
source

Source: https://habr.com/ru/post/1723730/


All Articles