rails html 语法_带有HTML CSS的Rails前端

rails html 语法

During Mod 2 at Flatiron School in Chicago, we were tasked with creating a fully functioning Rails application. My team and I chose to build a solution that could be implemented in a real environment, specifically to enhance communication between players in the trucking industry — brokers, drivers, suppliers, and receivers(or destinations).

在芝加哥Flatiron学校的Mod 2中，我们的任务是创建功能全面的Rails应用程序。 我和我的团队选择构建一个可以在实际环境中实施的解决方案，专门用于增强卡车运输行业的参与者(经纪人，驾驶员，供应商和收货人(或目的地))之间的沟通。

Our application allowed for multiple user types, each with different functionality and permissions. For the purpose of this blog, we’re logged in as a broker. Brokers can arrange for deliveries between suppliers and receivers, assigning a unique driver or carrier to each delivery.

我们的应用程序允许多种用户类型，每种类型具有不同的功能和权限。 就本博客而言，我们以经纪人身份登录。 经纪人可以安排供应商和接收方之间的交货，为每次交货分配唯一的驱动程序或承运人。

We took a simple approach with our HTML / CSS code but implemented key features and consistent styling that created an overall user-friendly, front-end design.

我们对HTML / CSS代码采用了一种简单的方法，但是实现了关键功能和一致的样式，从而创建了一个整体用户友好的前端设计。

特征： (Feature:)

Matching application elements that appear/disappear as they are created/deleted, expand on hover, link to a new page, and display dynamic information from the database.

匹配的应用程序元素，它们在创建/删除时出现/消失，悬停扩展，链接到新页面以及显示数据库中的动态信息。

目的： (Purpose:)

In the case of our application, ‘brokers’ can view all of their ‘deliveries’, each with their own unique ‘load id’ and tracking status. This feature enables a broker to quickly highlight a specific delivery, click on it and go to that delivery’s page with more detailed information and options.

在我们的应用程序中，“经纪人”可以查看其所有“交货”，每个都有自己的唯一“负荷ID”和跟踪状态。 此功能使经纪人可以快速突出显示特定的交付，单击该代理，然后转到包含详细信息和选项的交付页面。

它是什么样子的？ (What does it look like?)

实现方式： (Implementation:)

There’s quite a bit of additional logic running in our models and subsequently communicated through our controllers, however the implementation of this feature in HTML with CSS is straight-forward.

在我们的模型中运行着很多其他逻辑，然后通过我们的控制器进行通信，但是，使用CSS在HTML中实现此功能非常简单。

Note: While in Mod2 at Flatiron, we only briefly covered HTML/CSS. There are definitely better ways to implement this feature. However, at the time and with a limited time-frame, this was the easiest way for us to style individual elements of our application and apply these styles consistently across multiple pages.

注意：在Flatiron的Mod2中，我们仅简要介绍了HTML / CSS。 肯定有更好的方法来实现此功能。 但是，在当时且时间有限的情况下，这是我们为应用程序中的各个元素设置样式并在多个页面上一致地应用这些样式的最简单方法。

.listing

.listing

This div houses each unique element created via .each method. The rest of the code associated with this feature will be housed inside the .each method. For our application, we chose to style this div like an additional window opening within the existing view — white background, box-shadow and black border only on top/bottom. (Div will stretch the entire width of our browser)

这个div包含通过.each方法创建的每个唯一元素。 与该功能关联的其余代码将位于.each方法内。 对于我们的应用程序，我们选择将该div样式设置为现有视图中的其他窗口开口-白色背景，框阴影和黑色边框(仅在顶部/底部)。 (Div将拉伸浏览器的整个宽度)

background-color: #ffffff;border: solid #000000;border-width: 5px 0px 3px 0px;box-shadow: 2px 6px 13px 0px rgba(0, 0, 0, 0.48);margin: 20px 0px 40px 0px;

.container

. container

While the listing window remains the width of the browser, each unique element inside should remain unchanged as the browser size changes. .container controls the size and spacing of these elements once they exist.

虽然列表窗口保持浏览器的宽度，但内部的每个唯一元素都应随着浏览器大小的变化而保持不变。 .container控制这些元素的大小和间距(一旦存在)。

display: inline-block;max-width: 800px;height: auto;margin: 0px 0px 10px 0px;

.header

.header

Just for an added touch, we do not want our header and the contained information to function like the main feature so we work with it separately. However, both elements need to connect seamlessly so we remove border and margin only on the bottom — making space for the top border and top margin on the main feature.

只是为了增加触摸效果，我们不希望标题和所包含的信息像主要功能一样起作用，因此我们单独使用它。 但是，这两个元素都需要无缝连接，因此我们仅在底部移除边框和边距-在主要特征上为顶部边框和顶部边距留出空间。

border: solid #000000;border-width: 2px 2px 0px 2px;padding: 10px 10px;margin: 20px 20px 0px 20px;

.status

.status

Like our header, status needs some unique styling — we display it on the right side of the header element. Later, we also want the text color to reflect changes made in the database — i.e. in transit, completed.

像标题一样，状态也需要一些独特的样式-我们将其显示在标题元素的右侧。 后来，我们还希望文本颜色能够反映数据库中所做的更改，即在运输中完成的更改。

text-align: right;

.id

.id

Like our status, .id needs unique alignment within the header element.

就像我们的身份一样。 id需要在header元素内进行唯一对齐。

float: left;

.listinglink

. listinglink

In our HTML, this is where we house the functionality of our feature. We create an <a> tag with a path that is unique each time an item is created within our ‘listing’ tree.

在我们HTML中，这是我们功能的功能所在。 我们创建一个<a>标记，其路径在每次在“列表”树中创建一个项目时都是唯一的。

How? We are still inside of our .each method — therefore each instance is available to use inside of our href with erb tags.

怎么样？ 我们仍然在.each方法内部-因此，每个实例都可以在带有erb标签的href内部使用。

href="<%= path(instance)%>"

href="<%= path(instance)%>"

Lastly, our CSS removes the default text decoration for each item.

最后，我们CSS删除了每个项目的默认文字修饰。

text-decoration: none;

.item

.item

Finally, we’ve reached the end of our ‘listing’ tree. We house the most important information from our .each method inside this div and make the background pastel blue so that it stands out as it sits on ‘listing’. Our item div is contained inside of our <a> tag — so we can click or hover over any portion of this div and it will act or ‘link’ like it’s parent.

最后，我们到达了“列表”树的末端。 我们将来自.each方法的最重要信息.each在该div中，并使背景柔和的蓝色.each蓝色，以便它在“列表”上突出显示。 我们的div项包含在<a>标记内-因此我们可以单击或将鼠标悬停在此div的任何部分上，它将像其父级一样起作用或“链接”。

background-color: #DFFBFF;border: solid #000000;border-width: 2px 2px 2px 2px;padding: 10px 10px 10px 10px;margin: 0px 20px 20px 20px;

.item:hover

.item:hover

transform: scale(1.02);transition: all 0.05s ease-in-out;

@font-face

@font-face

For further consistency throughout an application, you can purchase or download any custom font online, install locally, and implement anywhere in CSS code by adding the .otf file to ‘app/assets/fonts’.

为了使整个应用程序更加一致，您可以在线购买或下载任何自定义字体，在本地安装，以及通过将.otf文件添加到“ app / assets / fonts”在CSS代码中的任何位置实现。

font-family: 'Montserrat-Light';src: url('app/assets/fonts/Montserrat-Light.otf') format("truetype");

翻译自: https://medium.com/@matthewsteeleonline/rails-front-end-with-html-css-f262d28cb222

rails html 语法