The article tells about new responsive framework that is developed by one of web developers from Russia. The framework is based on twitter bootstrap with some additional features and enhancements. The original developer has prepared for us this preparatory article describing the capabilities of this framework, so let’s read what is said about it. 
 本文介绍了由俄罗斯的一位Web开发人员开发的新的响应框架。 该框架基于twitter bootstrap，并具有一些其他功能和增强功能。 原始开发人员已经为我们准备了这篇准备文章，描述了该框架的功能，因此让我们阅读有关它的内容。 
Hello everyone. I’m a front-end developer from Russia. I started to build my own framework for responsive web-design. It’s called ResponsiveFramework(RF). I used Twitter Bootstrap idea(speed and convenience), when i develop my own framework. But it has several differences from TB, let’s see closer.
 大家好。 我是俄罗斯的前端开发人员。 我开始建立自己的响应式网页设计框架。 它称为ResponsiveFramework(RF) 。 当我开发自己的框架时，我使用了Twitter Bootstrap的想法(速度和便利性)。 但这与结核病有几处区别，让我们进一步了解。 
First of all, I tried to help developers make compact and intuitive source. As a result, simple and obvious code-parts were made, which confirm W3C standard.
 首先，我试图帮助开发人员制作紧凑而直观的源代码。 结果，制作了简单明了的代码部分，这些代码部分确认了W3C标准。 
Second. Many animated elements are here. They are smooth and fast. I optimize and release them, all the time.
 第二。 许多动画元素都在这里。 它们既平稳又快速。 我一直在优化和发布它们。 
Third. It contains pure JS and jQuery components. Change everything to use pure JS is in my todo list.
 第三。 它包含纯JS和jQuery组件。 更改所有内容以使用纯JS在我的待办事项列表中。 
Fourth. It uses 3 the most popular preprocessors: LESS, SASS/SCSS, Stylus. You may use whatever you used to use.
 第四。 它使用3种最流行的预处理器：LESS，SASS / SCSS，Stylus。 您可以使用以前使用的任何东西。 
This are the main differences from Twitter Bootstrap. Let me show how you can use it. We’ll create responsive web page, using RF. It will contain menu, slider, content (about us and portfolio), feedback form and contacts. We’ll use only ResponsiveFramework. ResponsiveGrid is used to build skeleton for our page.
 这是与Twitter Bootstrap的主要区别。 让我展示一下如何使用它。 我们将使用RF创建响应式网页。 它将包含菜单，滑块，内容(关于我们和投资组合)，反馈表和联系人。 我们将仅使用ResponsiveFramework。 ResponsiveGrid用于为我们的页面构建框架。 
 现场演示 
 步骤1.标头。 (Step 1. Header.)
Header will consist logo and menu.Logo is just a link to page. ResponsiveMenu will be used for creating menu. HTML code:
 标题包括徽标和菜单。徽标只是页面的链接。 ResponsiveMenu将用于创建菜单。 HTML代码： 

  <div class="wrapper_header" id="home">
    <header class="container header">
      <a href="#home" class="logo"><h1>Responsive UX <span class="logo_item">template</span></h1></a>
      <nav id="wrapper_menu" class="wrapper_menu">
        <span id="icon_menu" class="position_right" data-effect="slide_top" data-menu="drop_down_block"> </span>
        <ul class="menu">
          <li class="menu_item">
            <a href="#about" class="menu_link">About<span class="line_bottom"> </span></a>
          </li>
          <li class="menu_item">
            <a href="#works_portfolio" class="menu_link">Works<span class="line_bottom"> </span></a>
          </li>
          <li class="menu_item">
            <a href="#feedback" class="menu_link">Feedback<span class="line_bottom"> </span></a>
          </li>
          <li class="menu_item">
            <a href="#contacts" class="menu_link">Contacts<span class="line_bottom"> </span></a>
          </li>
          <li class="menu_item wrapper_drop_down_block">
            <a href="#" class="menu_link">Pages</a>
            <ul class="drop_down_block">
              <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="shortcodes.html">Shortcodes</a></li>
              <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="blog.html">Blog</a></li>
            </ul>
          </li>
          <li class="menu_item wrapper_drop_down_block">
            <a href="#" class="menu_link">Portfolio</a>
            <ul class="drop_down_block">
              <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="portfolio3.html">3 Columns</a></li>
              <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="portfolio4.html">4 Columns</a></li>
              <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="dynamic_portfolio.html">Dynamic portfolio</a></li>
              <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="project.html">Single Project</a></li>
              <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="3dproject.html">3d Single Project</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </header>
  </div>

  <div class="wrapper_header" id="home">
    <header class="container header">
      <a href="#home" class="logo"><h1>Responsive UX <span class="logo_item">template</span></h1></a>
      <nav id="wrapper_menu" class="wrapper_menu">
        <span id="icon_menu" class="position_right" data-effect="slide_top" data-menu="drop_down_block"> </span>
        <ul class="menu">
          <li class="menu_item">
            <a href="#about" class="menu_link">About<span class="line_bottom"> </span></a>
          </li>
          <li class="menu_item">
            <a href="#works_portfolio" class="menu_link">Works<span class="line_bottom"> </span></a>
          </li>
          <li class="menu_item">
            <a href="#feedback" class="menu_link">Feedback<span class="line_bottom"> </span></a>
          </li>
          <li class="menu_item">
            <a href="#contacts" class="menu_link">Contacts<span class="line_bottom"> </span></a>
          </li>
          <li class="menu_item wrapper_drop_down_block">
            <a href="#" class="menu_link">Pages</a>
            <ul class="drop_down_block">
              <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="shortcodes.html">Shortcodes</a></li>
              <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="blog.html">Blog</a></li>
            </ul>
          </li>
          <li class="menu_item wrapper_drop_down_block">
            <a href="#" class="menu_link">Portfolio</a>
            <ul class="drop_down_block">
              <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="portfolio3.html">3 Columns</a></li>
              <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="portfolio4.html">4 Columns</a></li>
              <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="dynamic_portfolio.html">Dynamic portfolio</a></li>
              <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="project.html">Single Project</a></li>
              <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="3dproject.html">3d Single Project</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </header>
  </div>

Tag `nav` includes selectors `#icon_menu` and  `.menu`. Selector `icon_menu` will be used as menu on mobile devices. Main menu will be shown, when user click `icon_menu`.
 标签`nav`包含选择器`＃icon_menu`和`.menu`。 选择器“ icon_menu”将用作移动设备上的菜单。 当用户单击“ icon_menu”时，将显示主菜单。 
Let’s dig deeper into menu.  HTML code:
 让我们更深入地研究菜单。 HTML代码： 

  <nav id="wrapper_menu" class="wrapper_menu">
    <span id="icon_menu" class="position_right" data-effect="slide_top" data-menu="drop_down_block"> </span>
    <ul class="menu">
      <li class="menu_item">
        <a href="#about" class="menu_link">About<span class="line_bottom"> </span></a>
      </li>
      <li class="menu_item">
        <a href="#works_portfolio" class="menu_link">Works<span class="line_bottom"> </span></a>
      </li>
      <li class="menu_item">
        <a href="#feedback" class="menu_link">Feedback<span class="line_bottom"> </span></a>
      </li>
      <li class="menu_item">
        <a href="#contacts" class="menu_link">Contacts<span class="line_bottom"> </span></a>
      </li>
      <li class="menu_item wrapper_drop_down_block">
        <a href="#" class="menu_link">Pages</a>
        <ul class="drop_down_block">
          <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="shortcodes.html">Shortcodes</a></li>
          <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="blog.html">Blog</a></li>
        </ul>
      </li>
      <li class="menu_item wrapper_drop_down_block">
        <a href="#" class="menu_link">Portfolio</a>
        <ul class="drop_down_block">
          <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="portfolio3.html">3 Columns</a></li>
          <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="portfolio4.html">4 Columns</a></li>
          <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="dynamic_portfolio.html">Dynamic portfolio</a></li>
          <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="project.html">Single Project</a></li>
          <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="3dproject.html">3d Single Project</a></li>
        </ul>
      </li>
    </ul>
  </nav>

  <nav id="wrapper_menu" class="wrapper_menu">
    <span id="icon_menu" class="position_right" data-effect="slide_top" data-menu="drop_down_block"> </span>
    <ul class="menu">
      <li class="menu_item">
        <a href="#about" class="menu_link">About<span class="line_bottom"> </span></a>
      </li>
      <li class="menu_item">
        <a href="#works_portfolio" class="menu_link">Works<span class="line_bottom"> </span></a>
      </li>
      <li class="menu_item">
        <a href="#feedback" class="menu_link">Feedback<span class="line_bottom"> </span></a>
      </li>
      <li class="menu_item">
        <a href="#contacts" class="menu_link">Contacts<span class="line_bottom"> </span></a>
      </li>
      <li class="menu_item wrapper_drop_down_block">
        <a href="#" class="menu_link">Pages</a>
        <ul class="drop_down_block">
          <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="shortcodes.html">Shortcodes</a></li>
          <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="blog.html">Blog</a></li>
        </ul>
      </li>
      <li class="menu_item wrapper_drop_down_block">
        <a href="#" class="menu_link">Portfolio</a>
        <ul class="drop_down_block">
          <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="portfolio3.html">3 Columns</a></li>
          <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="portfolio4.html">4 Columns</a></li>
          <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="dynamic_portfolio.html">Dynamic portfolio</a></li>
          <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="project.html">Single Project</a></li>
          <li class="drop_down_menu_item"><a class="drop_down_menu_link" href="3dproject.html">3d Single Project</a></li>
        </ul>
      </li>
    </ul>
  </nav>

Tag `ul` is the top level of menu here, it’s very common. Let’s see on tag `span` with `line_bottom` class. This tag decorates out menu items. When user hovers menu item, item will be smoothly underscored.
 标签ul是这里的顶层菜单，非常常见。 让我们来看看带有“ line_bottom”类的标签“ span”。 该标签装饰菜单项。 当用户将鼠标悬停在菜单项上时，该项将被平滑地标出。 
Tag `ul` with `drop_down_block` class is a dropdown lists. Every list appears when appropriate item will be hovered by cursor. That’s it.
 带有`drop_down_block`类的标签`ul`是一个下拉列表。 当光标悬停在适当的项目上时，将显示每个列表。 而已。 
 步骤2.滑块。 (Step 2. Slider.)
For building it we’ll use ResponsiveFullslider. HTML code:
 为了构建它，我们将使用ResponsiveFullslider。 HTML代码： 

  <div id="slideshow">
    <span class="arrow prev"  id="leftControl"></span>
    <div id="slidesContainer" >
      <div id="slideInner">
        <div id="slide1" class="slide active_slide">
          <div class="layer scale icon_slide"></div>
          <p class="layer slide_info slide_right">
            I've seen the <span class="decor"> future</span>
          </p>
          <p class="layer slide_info slide_left paragraph_two">
            It's in my <span class="decor"> Browser</span>
          </p>
        </div>
        <div id="slide2" class="slide">
          <div class="layer slide_top icon_slide"></div>
          <p class="layer slide_info flipY">
            delightful<span class="decor"> animations</span>
          </p>
          <p class="layer slide_info slide_bottom paragraph_two">
            In your<span class="decor"> devices</span>
          </p>
        </div>
        <div id="slide3" class="slide">
          <div class="layer slide_bottom icon_slide"></div>
          <p class="layer slide_info slide_left">
            Create interactive<span class="decor"> interfaces</span>
          </p>
          <p class="layer slide_info scale paragraph_two">
            Bring joy
          </p>
        </div>
      </div>
    </div>
    <span class="arrow next"  id="rightControl"></span>
  </div>

  <div id="slideshow">
    <span class="arrow prev"  id="leftControl"></span>
    <div id="slidesContainer" >
      <div id="slideInner">
        <div id="slide1" class="slide active_slide">
          <div class="layer scale icon_slide"></div>
          <p class="layer slide_info slide_right">
            I've seen the <span class="decor"> future</span>
          </p>
          <p class="layer slide_info slide_left paragraph_two">
            It's in my <span class="decor"> Browser</span>
          </p>
        </div>
        <div id="slide2" class="slide">
          <div class="layer slide_top icon_slide"></div>
          <p class="layer slide_info flipY">
            delightful<span class="decor"> animations</span>
          </p>
          <p class="layer slide_info slide_bottom paragraph_two">
            In your<span class="decor"> devices</span>
          </p>
        </div>
        <div id="slide3" class="slide">
          <div class="layer slide_bottom icon_slide"></div>
          <p class="layer slide_info slide_left">
            Create interactive<span class="decor"> interfaces</span>
          </p>
          <p class="layer slide_info scale paragraph_two">
            Bring joy
          </p>
        </div>
      </div>
    </div>
    <span class="arrow next"  id="rightControl"></span>
  </div>

We’ll create 3 sliders to demonstrate how it works. For every slider we must add id attribute( slide1, slide2, slide3). We add some content to this sliders. To animate sliders we add `layer` class to slider, and choose an animation type. Here I use `slide_left`, `slide_bottom`, `flipY`, `scale`, `slide_right`.
 我们将创建3个滑块以演示其工作原理。 对于每个滑块，我们必须添加id属性(slide1，slide2，slide3)。 我们向此滑块添加一些内容。 为了给滑块设置动画，我们向滑块添加`layer`类，然后选择一种动画类型。 这里我使用`slide_left`，`slide_bottom`，`flipY`，`scale`，`slide_right`。 
Also we have to specify the necessary settings in `fullslider.js` file.
 另外，我们必须在fullslider.js文件中指定必要的设置。 

  speed = '0.5s', // time animation
  carusel = true, //endless scrolling
  autoplay = false, //automatic beggining
  time = 6000, // item changing time
  src = 'images/', // background path (we don't use it in demo)
  format = '.jpg', //background format (we don't use it in demo)

  speed = '0.5s', // time animation
  carusel = true, //endless scrolling
  autoplay = false, //automatic beggining
  time = 6000, // item changing time
  src = 'images/', // background path (we don't use it in demo)
  format = '.jpg', //background format (we don't use it in demo)

 步骤3.内容。 (Step 3. Content.)
We can divide this step to two separate parts:
 我们可以将此步骤分为两个单独的部分： 
1 – Building «about us»
 1 –建筑“关于我们” 
2 – Building «portfolio»
 2 –«投资组合»建筑 
 步骤3.1。 关于我们。 (Step 3.1. About us.)
This block contains 3 columns.  ResponsiveGrid is working again. HTML code :
 该块包含3列。 ResponsiveGrid重新工作。 HTML代码： 

  <section id="about" class="main_container columns3">
    <h3>About</h3>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
    <div class="main_container_item">
      <a href="#" class="hover_circle">
        <img class="img_post" src="images/designer.jpg" alt="designer" />
        <div class="wrapper_circle">
          <div class="circle">
            <span class="circle_item">Development of UX interfaces</span>
          </div>
        </div>
      </a>
      <h3 class="title_post">Design</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <div class="main_container_item">
      <a href="#" class="hover_circle">
        <img class="img_post" src="images/frontenddev.jpg" alt="frontenddev" />
        <div class="wrapper_circle">
          <div class="circle">
            <span class="circle_item">Development of the high-loaded systems</span>
          </div>
        </div>
      </a>
      <h3 class="title_post">Development</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <div class="main_container_item">
      <a href="#" class="hover_circle" id="hover_left_circle">
        <img class="img_post" src="images/seo.jpg" alt="seo" />
        <div class="wrapper_circle">
          <div class="circle">
            <span class="circle_item">SEO-analysts</span>
          </div>
        </div>
      </a>
      <h3 class="title_post">Analysts</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <article class="skills">
      <h3>Skills</h3>
      <div class="skills_item">
        <div class="skill">HTML5/CSS3/JS</div>
        <div class="value blue"></div>
      </div>
      <div class="skills_item">
        <div class="skill">Design</div>
        <div class="value green"></div>
      </div>
      <div class="skills_item">
        <div class="skill">PHP/Ruby/Python</div>
        <div class="value yellow"></div>
      </div>
    </article>
  </section>

  <section id="about" class="main_container columns3">
    <h3>About</h3>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
    <div class="main_container_item">
      <a href="#" class="hover_circle">
        <img class="img_post" src="images/designer.jpg" alt="designer" />
        <div class="wrapper_circle">
          <div class="circle">
            <span class="circle_item">Development of UX interfaces</span>
          </div>
        </div>
      </a>
      <h3 class="title_post">Design</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <div class="main_container_item">
      <a href="#" class="hover_circle">
        <img class="img_post" src="images/frontenddev.jpg" alt="frontenddev" />
        <div class="wrapper_circle">
          <div class="circle">
            <span class="circle_item">Development of the high-loaded systems</span>
          </div>
        </div>
      </a>
      <h3 class="title_post">Development</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <div class="main_container_item">
      <a href="#" class="hover_circle" id="hover_left_circle">
        <img class="img_post" src="images/seo.jpg" alt="seo" />
        <div class="wrapper_circle">
          <div class="circle">
            <span class="circle_item">SEO-analysts</span>
          </div>
        </div>
      </a>
      <h3 class="title_post">Analysts</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <article class="skills">
      <h3>Skills</h3>
      <div class="skills_item">
        <div class="skill">HTML5/CSS3/JS</div>
        <div class="value blue"></div>
      </div>
      <div class="skills_item">
        <div class="skill">Design</div>
        <div class="value green"></div>
      </div>
      <div class="skills_item">
        <div class="skill">PHP/Ruby/Python</div>
        <div class="value yellow"></div>
      </div>
    </article>
  </section>

To align text we use `selection` tag with `main_container` class. Also we add `column3` class, which tell RF to divide it into 3 columns. So simly we create a skeleton for our content. We’ll add animation(animated circle) as well. ResponsiveHover makes everything for us. Tag `img` is wrapped by `a` tag with `hover_circle` class. Add `div` tag with `wrapper_circle` class on the same level as `img` tag.
 为了对齐文本，我们使用`selection`标签和`main_container`类。 此外，我们添加了“ column3”类，该类告诉RF将其分为3列。 因此，很简单，我们为内容创建了一个框架。 我们还将添加动画(动画圆)。 ResponsiveHover为我们提供了一切。 标签img由带有hover_circle类的标签包裹。 在与`img`标签相同的级别上添加带有`wrapper_circle`类的`div`标签。 
 步骤3.2。 投资组合。 (Step 3.2. Portfolio.)
ResponsiveFilter is used for building portfolio section. HTML code:
 ResponsiveFilter用于构建项目组合部分。 HTML代码： 

  <section id="works_portfolio">
    <h2>Works</h2>
    <div id="type_products" class="type_products">
      <span id="category1" class="type_products_item">Web-design</span>
      <span id="category2" class="type_products_item">Back-end</span>
      <span id="category3" class="type_products_item">Front-end</span>
      <span id="all_category" class="type_products_item active_type">All</span>
    </div>
    <div id="all_production">
      <div class="production_item show_category wrapper_svg" data-id="category1">
        <svg width="300" height="225">
          <filter id="light">
            <feComponentTransfer>
              <feFuncR type="linear"  slope="2" />
              <feFuncG type="gamma" amplitude="2" exponent="1" />
              <feFuncB type="linear"  slope="1" />
              <feFuncA type="linear"  intercept ="1"/>
            </feComponentTransfer>
            <feColorMatrix  type="hueRotate" values="350" />
            </filter>
          <image x="0" y="0" width="300" height="225"  filter= "url(#light)" xlink:href="images/cat3.jpg" />
        </svg>
        <img  class="img_production"  src="images/cat3.jpg" alt="img" />
      </div>
    </div>
  </section>

  <section id="works_portfolio">
    <h2>Works</h2>
    <div id="type_products" class="type_products">
      <span id="category1" class="type_products_item">Web-design</span>
      <span id="category2" class="type_products_item">Back-end</span>
      <span id="category3" class="type_products_item">Front-end</span>
      <span id="all_category" class="type_products_item active_type">All</span>
    </div>
    <div id="all_production">
      <div class="production_item show_category wrapper_svg" data-id="category1">
        <svg width="300" height="225">
          <filter id="light">
            <feComponentTransfer>
              <feFuncR type="linear"  slope="2" />
              <feFuncG type="gamma" amplitude="2" exponent="1" />
              <feFuncB type="linear"  slope="1" />
              <feFuncA type="linear"  intercept ="1"/>
            </feComponentTransfer>
            <feColorMatrix  type="hueRotate" values="350" />
            </filter>
          <image x="0" y="0" width="300" height="225"  filter= "url(#light)" xlink:href="images/cat3.jpg" />
        </svg>
        <img  class="img_production"  src="images/cat3.jpg" alt="img" />
      </div>
    </div>
  </section>

Here we include JS and CSS files. After that, we set block sizes in CSS and style «close» button. We use ResponsiveHover to animate images.
 在这里，我们包括JS和CSS文件。 之后，我们在CSS中设置块大小，并使用样式“关闭”按钮。 我们使用ResponsiveHover对图像进行动画处理。 
 步骤4.反馈表。 (Step 4. Feedback form.)
RF has ResponsiveForm as well, and we may use it to create our feedback form. HTML code:
 RF也具有ResponsiveForm，我们可以使用它来创建我们的反馈表。 HTML代码： 

  <section id="feedback" class="wrapper_form">
    <h2>Feedback</h2>
    <form class="form" id="form_contact">
      <div class="left_column">
        <input type="text" id="full_name" name="full_name" class="input_text" placeholder="Name"  required />
        <input class="input_text" type="email" id="email"  name="email" placeholder="Email" required />
        <div id="rating" class="element_form">
          <div class="wrapper_stars">
            <span class="icon-star"></span>
            <span class="icon-star"></span>
            <span class="icon-star"></span>
            <span class="icon-star"></span>
            <span class="icon-star"></span>
          </div>
          <input type="hidden" id="total_rating" />
          <p>Your rating: <span id="total_value">0</span></p>
        </div>
      </div>
      <textarea class="input_text textarea" id="comment" name="comment" placeholder="Review" required></textarea>
      <button type="submit" id="button" class="button" disabled="disabled">send</button>
    </form>
  </section>

  <section id="feedback" class="wrapper_form">
    <h2>Feedback</h2>
    <form class="form" id="form_contact">
      <div class="left_column">
        <input type="text" id="full_name" name="full_name" class="input_text" placeholder="Name"  required />
        <input class="input_text" type="email" id="email"  name="email" placeholder="Email" required />
        <div id="rating" class="element_form">
          <div class="wrapper_stars">
            <span class="icon-star"></span>
            <span class="icon-star"></span>
            <span class="icon-star"></span>
            <span class="icon-star"></span>
            <span class="icon-star"></span>
          </div>
          <input type="hidden" id="total_rating" />
          <p>Your rating: <span id="total_value">0</span></p>
        </div>
      </div>
      <textarea class="input_text textarea" id="comment" name="comment" placeholder="Review" required></textarea>
      <button type="submit" id="button" class="button" disabled="disabled">send</button>
    </form>
  </section>

Here we include JS and CSS files for rating selection.
 在这里，我们包括用于评级选择的JS和CSS文件。 
 步骤5.映射和页脚。 (Step 5. Map and footer.)
Map and footer were built without RF, since it’s not necessary here.
 地图和页脚是在没有RF的情况下构建的，因为此处没有必要。 
翻译自: https://www.script-tutorials.com/responsive-web-site-using-responsive-framework/

如题，虽说写这个博客有点广告的嫌疑，不过对比国内外其他前端框架，感觉拼图还是蛮有意思的！
先敬上网站：http://www.pintuer.com/
喜欢的不妨去看一看！
好啦，进入正题：
拼图响应式前端框架版响应式后台在手机端（320X442）分辨率下的显示效果：


官方给出的测试工具可以直接查看不同设备分辨率下的显示效果：
http://www.pintuer.com/tools/test.html  （只提供登录及初始页）

或者自行打开查看效果 http://www.pintuer.com/demo/pintuer4/
考虑到可能不太方便，我做了二维码，扫一扫即可


PS. 其实我想获得这个后台框架，毕竟省功夫写了！

响应式 Web 设计旨在为各种设备（从台式机显示器到手机）提供最佳的浏览体验。本文汇总了一些优秀的响应式 Web 设计 HTML 和 CSS 框架。这些框架都是开源的并免费的。
对响应式 Web 框架进行比较并不那么容易。有的框架适合设计更快、更精简网站的某些功能，而有些可能提供了大量功能、插件和附加组件，但是可能体积会比较庞大并且上手较难。
1. Bootstrap

Bootstrap 是最流行的 HTML、CSS 和 JS 框架，用于在 Web 上开发响应式、移动优先项目。Bootstrap 使前端开发更快、更轻松。他们提供了大量的文档、示例和演示，可以帮你快速进行响应式 Web 开发。在 Bootstrap 5 中做了一些重大更改，例如随意使用 jQuery 并添加了 RTL 支持，再加上现成的组件和工具类，使 Bootstrap 成为 Web 开发人员的最佳选择之一。
你还可以找到许多免费的高级 bootstrap 模板 和 UI 工具包，这使你的开发过程更加轻松。
官网：https://getbootstrap.com/
2. Tailwind CSS

Tailwind 提供了一种基于实用工具的现代方法来构建响应站点。它有大量的实用工具类，无需编写 CSS 即可构建现代网站。它与其它框架的不同之处在于需要通过开发设置来缩小最终 CSS 的大小，因为如果使用默认值，最终将会得到一个很大的 CSS 文件。Tailwind 能够快速将样式添加到 HTML 元素中，并提供了大量的开箱即用的设计样式。这里有大量的 Tailwind CSS 资源 https://superdevresources.com/best-tailwind-css-resources-for-developers/。
官网：https://tailwindcss.com/
3. Tachyons

Tachyons 也是一个基于实用工具的 CSS 库，它提供了许多即装即用的复杂功能，无需自己编写大量 CSS。这样做的好处是 Tachyons 的开箱即用样式很轻巧，不需要其他设置。如果需要的话，仍然可以通过一些方法来减小尺寸。如果你需要易用的实用工具库，那么这应该是一个不错的选择。
官网：https://tachyons.io/
4. Foundation

Foundation 是由产品设计公司 ZURB 制作的自适应前端框架。这个框架是他们自 1998 年来构建 Web 产品和服务的结果。Foundation 是最先进的响应式前端框架，并且提供了许多自定义功能。
官网：http://foundation.zurb.com/
5. Material Design for Bootstrap (MDB)

MDB 建立在 Bootstrap 之上，并提供了开箱即用的材料设计外观。它具有出色的 CSS 库，并且与大多数流行的 JavaScript 框架（如 jQuery、Angular、React 和。Vue.js）兼容。其核心库是完全免费使用的。
官网：https://mdbootstrap.com/
6. UIkit

UIkit 是一个轻量级的模块化前端框架，用于开发快速且强大的 Web 界面。UIkit 提供了 HTML、CSS 和 JS 组件的全面集合，这些组件易于使用，易于定制和扩展。UIkit 采用移动优先的方法，可提供从手机、平板电脑到台式机的一致体验。
官网：http://getuikit.com/
7. Pure CSS

Pure.css 是一组小型的响应式 CSS 模块，可以用在任何一个 Web 项目中。Pure 的体积小的简直过分。比如完整的时钟模块最小化压缩版本仅为 4.0 KB。Pure 基于 Normalize.css 构建，并提供原声 HTML 元素以及最常见的 UI 组件的布局和样式。Pure 具有开箱即用的响应能力，所以元素在所有屏幕尺寸上都看起来不错。
官网：http://purecss.io/
8. Material Design Lite Framework (MDL)

Google 的 Material Design Lite 框架是最流行的 CSS 框架之一，可为你的网站添加 Material Design 外观。它不依赖任何 JavaScript 框架，可以跨设备使用，并且可以针对较旧的浏览器进行降级。它的构建充分考虑了可访问性，并提供了丰富的文档和入门模板。
官网：https://getmdl.io/
9. Materialize

Materialize 是基于 Material Design 的现代响应式前端框架。Google的材料设计是一种流行的设计趋势，涉及卡片、阴影和动画。
官网：http://materializecss.com/
10. Skeleton

如果你要开发较小的项目，或者只是觉得自己不需要大型框架的所有实用工具，则可以试试 Skeleton。Skeleton 仅设置了少量标准 HTML 元素的样式，并包含一个网格。
Skeleton 中的网格是一个 12 列的流体网格，最大宽度为 960px，随着浏览器或设备的缩小而缩小。可以用一行 CSS 更改最大宽度，并且所有列的大小都会相应进行调整。其语法很简单，使响应式编码更加容易。
官网：http://getskeleton.com/
11. Bulma

Bulma 是基于 flexbox 的现代 CSS 框架。它提供了响应式设计和移动设备优先的 UI 组件，并具有模块化结构，可让你只导入要包含在 Web 设计中的内容。Bulma 还提供了一个基于 flexbox 的现代网格系统。
官网：http://bulma.io/
12. Semantic UI

Semantic UI 是一个高级 CSS 框架，提供了 50 多个 UI 元素，300 多个 CSS 变量用于自定义，并通过 EM 值构建以用于响应式设计。它也已准备好 Flexbox。
Semantic 是可用于生产环境的 CSS 框架，并能与 React、Angular、Meteor 和 Ember 等框架整合，你可以通过与这些框架中进行集成将 UI 层与应用逻辑组织在一起。
官网：https://semantic-ui.com/
13. Milligram

Milligram 是一个极简的 CSS 框架，不依赖 JavaScript。它通过最少的样式设置用来快速、干净的创建响应式网站。它还提供了一个基于 flexbox 的网格系统。
官网：https://milligram.github.io/
14. Spectre.css

Spectre.css 是一个轻量级的库，它提供了开箱即用的，基于 flexbox 的响应式和移动友好型布局。以在它的基础上根据自己的需要添加样式和响应实用工具。
官网：https://picturepan2.github.io/spectre/
15. Base CSS Framework

Base 也是一个轻量级 CSS 框架，可用于构建响应式网站。它为网站项目提供了免费的基础入门软件以及许多付费的现成模板。
官网：https://getbase.org/
如果对这些框架进行比较，你会发现 Bootstrap、Tailwind 和 Foundation 的流行度远远领先于其他框架。
设计机构通常选择 Bootstrap，因为它提供了开箱即用的组件，并且易于定制。这就是 Bootstrap 主题和库数量众多的原因.

 诸如Bootstrap之类的前端框架仍然风靡一时。 有很多不错的选择可供选择，但是最近引起我注意的一个是Semantic UI 。 
 当然，这个图书馆已经存在了一段时间，可以追溯到几年前。 但是，最新版本的2.2 附带了许多附加功能，并证明了语义技术将长期存在。 
 有了数十个CSS变量 ， 简单的响应类和易于设置的布局 ，您就可以轻松使用语义UI。 
 简单的类名和网格结构确实给这个被称为“语义”的框架赋予了含义。 这些类非常明智，这使您HTML易于在远处阅读。 
 它甚至附带了对动态页面元素（例如轮播和下拉选择菜单）的jQuery支持 。 
 阳光下的每个HTML元素都是经过定制的，并具有语义UI的全部功能 。 其中包括HTML5元素以及其他功能，例如评分和自定义标签 。 

 但是，语义的最佳部分也许是主题设置 。 您不仅可以获得大量的预先设计的样式和动态元素，而且还可以根据Semantic的代码重新构建这些样式。 
 整个库共有3,000多个主题变量，您可以在Sass中或通过扩展自己的样式表进行更改。 另外，语义UI带有九个默认主题 ： 

 语义默认 
 胖乎乎的 
 上调 
 经典 
 Google资料 
 亚马孙 
 引导程序 
 的GitHub 
 推特 

 这些只是冰山一角，它们的作用更像是设计您自己的主题的起点 。 

 如果要从头开始构建新的着陆页或自定义网站，请认真考虑使用语义UI。 它是完全免费和开源的， 在线文档非常丰富 。 
 您可以浏览布局样式以及所有主要元素和自定义主题的指南 。 
 而且，您可以直接从GitHub下载源代码的副本 ，其中还包括针对初学者的指南 。 



翻译自: https://www.hongkiat.com/blog/semantic-ui-framework/