Laravel新闻与Tailwind CSS见面

2021-06-26 08:00:02 laravel 阅读：825
你可能还没有注意到，但是Laravel新闻网站刚刚有了新的内容。我们刚刚推出了一个完整的一对一的CSS重构使用尾灯CSS引擎盖下！该项目的目标是使实现设计更改和向站点添加新内容变得更容易。 什么是Tailwind CSS？Tailwind CSS是由Adam Wathan、Jonathan Reinink、David Hemphill和史提夫Schoger构建的实用程序优先的CSS框架。它带走了我们所知道的关于编写有组织的、可维护的CSS的一切，并将其抛诸脑后。Tailwind使用postss生成数千个实用程序类，然后可以使用这些类直接在标记中设置HTML的样式。这允许一个快速的开发过程和很少的定制编写的CSS。 h2>从Laravel Elixir升级到Laravel Mix 为了开始这个项目，我首先将代码库从Laravel Elixir升级到Laravel Mix。与Elixir相比，Mix有许多好处，其中一些好处是： –在引擎盖下使用Webpack –更易于配置 –当前支持的版本升级到Mix是一个简单的过程。Elixir只是编译CSS，合并一些JavaScript文件，并对主要的JavaScript和CSS文件进行版本控制。几乎所有我要做的就是通过npm安装Mix，更新中的scripts部分包.json，并将配置从： 1// gulpfile.js 2 3var> 4 5elixir(function(mix) { 6mix 7.sass(\"all.scss\", \"public/assets/css/all.css\") 8.scripts( 9[10// ... script files11],12\"public/assets/js/app.js\"13)14.version([\"/assets/css/all.css\", \"assets/js/app.js\"]);15}); 更改为： 1// webpack.mix.js 2> 4 5mix 6.sass(\"resources/assets/sass/all.scss\", \"public/assets/css/all.css\") 7.scripts( 8[ 9// ... script files10],11\"public/assets/js/app.js\"12);1314if (mix.inProduction()) {15mix.sourceMaps().version();16}设置尾风 该过程的下一步是设置尾风。为了开始，我必须通过npm安装Tailwind并对Laravel Mix的配置做一些修改。在安装了Tailwind之后，我在我的webpack.mix.js文件中添加了以下代码。 1mix2.sass(\"resources/assets/scss/tailwind.scss\", \"public/assets/css\")3.options({4postCss: [tailwindcss(\"./tailwind.js\")]5}); 接下来，我创建了tailwind.css文件，其中包含以下内容： 1@tailwind preflight;23@tailwind components;45@tailwind utilities; Tailwind通过其配置文件提供了极大的可定制性。要生成默认配置文件，只需运行./node_modules/bin/tailwind init tailwind.js，它将在项目的根目录下创建tailwind.js文件。在这里，您可以配置从颜色到边距和填充大小，甚至是响应断点的所有内容。 感谢Zaengle的团队为我留下了一个惊人的Sass代码库。它基于一个称为Bourbon的轻量级Sass框架，组织得非常好。在这一点上，用Sass变量中的值替换默认的顺风配置对我来说非常简单。我很快将字体大小、颜色和间距复制到tailwind.js文件中，为tailwind.scss添加了一些标题和段落的基本默认样式，然后我就可以开始了！为了开始真正的工作，我首先用Laravel Mix编译的新的tailwind.css文件替换最初加载的CSS文件。这去掉了所有的造型，所以我从零开始。然后，我在body标签中添加了一些基本类，bg-off-white font-sans text-base text-grey-darker leading-loose。然后我转到导航。在移动和桌面布局中使用相同的HTML总是有点困难，这里没有什么可以帮助您的。我花了一段时间才把导航部分转换过来，我不得不编写一些自定义的CSS来使它变得完美。Tailwind目前没有一种方法来定位伪选择器，所以我不得不在我的tailwind.scss文件中添加以下内容： 1@screen md {2.nav-container::after {3content: \"\";4height: 2px;5top: 66px;6@apply .absolute .w-full .pin-l .bg-off-white;7}8} 现在，您可能会注意到CSS中混合了一些奇怪的语法。@apply和@screen指令是Tailwind的两个特性，它们在您编写自定义CSS时提供了帮助。您可以在这里阅读更多关于Tailwind的自定义指令。@apply允许您将\"Tailwind\"的实用程序类\"应用\"到自定义类中，以便可以重用Tailwind配置文件中的颜色和大小。这使您的设计在整个网站上保持良好和一致。@screen指令使用传递的宽度作为参数，向下编译为常规媒体查询。该代码示例编译如下： 1@media (min-width: 750px) { 2.nav-container::after { 3content: \"\"; 4height: 2px; 5top: 66px; 6position: absolute; 7width: 100%; 8left: 0; 9background-color: #f5f5f5;10}11} 完成导航后，我转到主页的其余部分。我浏览了每个部分并重新设计了标记，以尽可能地与旧设计匹配。每当我在做正确的事情上遇到困难时，我都会从旧代码中寻找源代码，看看以前是怎么做的。 当我浏览每一页时，我开始注意到我反复使用的某些类集。主页上的卡片就是一个很好的例子。在重复这些类几次之后，我决定在自定义CSS中为它们提取组件。利用顺风，提取组件很容易。只需复制应用于元素的类，并使用@apply指令将所有这些类应用于.card这样的单个类。下面是我创建的一些自定义类的示例： 1.card { 2margin: 15px0; 3width: calc(100%-30px); 4@apply .text-white .bg-white .rounded-sm .overflow-visible .shadow-sm .self-stretch; 5} 6 7.card.card__image { 8max-height: 150px; 9@apply .flex .items-start .justify-center .rounded-t-sm .overflow-hidden .bg-grey-lighter;10}1112.card.card__imageimg {13@apply .w-full .flex-1 .block .rounded-t-sm .transition;14}1516.card:hover.card__imageimg {17@apply .opacity-75;18} 当我访问博客页面时，我不得不稍微更改一下工作流。因为帖子内容是从数据库加载的，所以我无法

CSS无头WordPress到底有多合适？

我想知道无头WordPress会在哪里登陆。\"headless\"指的是只使用WordPress管理，通过WordPress restapi构建面向用户的站点，而不是传统的WordPress主题结构？WordPress的未来？还是相对利基？需求在哪里？当然，对它有需求。我知道很多人都这么做。例如，Gatsby有一个gatsby-source-wordpress插件，它允许您以使用wordpressrestapi的方式从WordPress站点获取内容，并将其缓存为GraphQL，以便在React-power...

日期：2021-06-24 01:15:34 浏览：623

CSS制作带有粘性页眉和页脚的表格变得更容易了

不久前，当我在博客中看到HTML中的粘性页眉和页脚时，一个表同时有粘性页眉和粘性第一列。在它里面，我从来没有在任何、或元素上使用position: sticky，因为即使Safari和Firefox可以做到这一点，Chrome也做不到。但是它可以做表格单元格，比如和，这是一个相当不错的解决办法。好吧，这已经改变了。我通过Twitter听说Chrome在v91中\"重写了表格\"。https://t.co/vTBplXWWtT我看到它掉了下来，升级了，然后做了一个快速测试。嘿，看看有粘性的表格页眉和页脚。@C...

日期：2021-06-24 02:00:01 浏览：939

CSS技巧编年史XXXX

只是我最近做的一些非现场工作的一个小链接汇总。就像我习惯的那样。DevJourney播客#151 Chris Coyier从陶瓷到CSS技巧和代码笔\"Chris带我们从玩他的第一个C64到他的陶瓷文学学士，再回到web开发。我们讨论了他在这一过程中的不同立场，以及他们是如何缓慢但肯定地引导他走向web开发的。我们浏览了CSS技巧的创造和娱乐，在开放中学习，以及美好的一天是什么样子。Podrocket Podcast火箭手术：Kaelan和Chris Coyier比较笔记我被要求删除这里嵌入的音频，如果你想...

日期：2021-06-24 02:00:03 浏览：864

CSS使用子资源完整性保护您的网站

当您从外部服务器加载文件时，您相信您请求的内容是您期望的内容。由于您不自己管理服务器，因此您依赖于另一个第三方的安全性，从而增加了攻击面。信任第三方并不是天生的坏事，但它肯定应该在网站安全的背景下加以考虑。一个真实的例子这不是纯粹的理论危险。忽视潜在的安全问题可能而且已经造成严重后果。2019年6月4日，Malwarebytes宣布他们在网站上发现了一个恶意的略读程序NBA.com. 由于Amazon S3存储桶受损，攻击者能够修改JavaScript库以窃取客户的信用卡信息。值得担心的不仅仅是JavaSc...

日期：2021-06-24 02:00:03 浏览：768

CSS联合的可能性

这是首字母缩略词RSS中不是形容词的一个词。非常简单联合更新：Lol这里有两个错误。RSS是首字母缩写而不是首字母缩写，\"Really\"是副词而不是形容词。RSS不仅仅是RSS阅读器。尽管如此，如果我不喜欢RSS阅读器。它是关于把内容放在一种设计成可移植的格式。内容的API并不是一个隐喻，这就是它的字面含义。RSS一直在我的脑海中，因为它就像我的日报，但我敢打赌它并不是人们关注的最高峰，甚至是开发者。尽管如此，它还是受到了一点关注，因为谷歌在androidchrome中引入了一个\"following\...

日期：2021-06-24 03:00:02 浏览：596

CSS在开放细节元素上添加背景

关于元素有一点奇怪，那就是，当它打开时，并不总是100%清楚该元素内部的内容和不内部的内容。我不是说总是重要，或者说它是一个特别难解决的问题，我只是注意到它最近出现在我身上。这里有一个直观的例子：这里的文本在里面，什么不是？这个解决方案是…CSS。把的样式设计得有点独特，这样问题就解决了。即使你希望排版是一样的，或者你不想任何独家风格，直到被打开，这仍然是可能的。使用alpha透明填充，您甚至可以确保更深的嵌套保持清晰。对于只插入内联内容的&lt；详细信息&gt；（如\"spoiler\"UI或其他内容），...

日期：2021-06-24 03:00:04 浏览：763

CSS容器查询的聚宝盆

我不知道是什么原因，但是我的feed在过去的几周里充斥着关于CSS容器查询的文章。有关集装箱查询的热议实际上始于去年12月，当时米丽亚姆•苏珊娜（Miriam Suzanne）发布了一份提案（采纳了大卫•巴隆的提案），但3月底，Una Kravets在推特上发布的一条消息称，他们在chrome://flags的#enable-container-queries旗后投放了Chrome Canary 91.0.4459.0在如此短的时间内，容器查询已经覆盖了如此多的地方，而且规范甚至还不是最终的！我很高兴看到C...

日期：2021-06-24 03:00:04 浏览：920

CSS target=blank

那会不会让你的眼睛有点抽搐？就像…是打字错误。值的开头应该是带有下划线的>。就像…Welp, that\"s correct syntax!In the case of the no-underscore>, the blank部分只是一个名称。可能是任何东西。它可以是>，或者，可能是为了预示这里的目的：>。是一个特殊的关键字，它将在新选项卡中打开链接，每次都打开一个新选项卡。>将在新选项卡中打开第一个单击的链接，但任何共享>的链接都将在新打开的选项卡中打开。我从来不知道这一点！我相信这条微博的解释。我创建...

日期：2021-06-24 04:00:02 浏览：1004

CSS查看WCAG 2.5.5以获得更好的目标尺寸

你有没有经历过这样的挫折：试图点击移动设备上的一个按钮却什么也不做，因为目标大小不够大，而且它在你的按键上不起作用？也许你有更大的手指，像我一样，也可能是由于灵活性有限。这是因为我们，即用户，必须与之交互的元素的目标区域越来越小，我们来谈谈如何使其足够大，以便用户能够轻松地与元素交互。如果用户在一个小型手持式触摸屏设备上访问内容，而这个设备的不动产要紧得多，那么这将是一个特别大的问题。成功标准重温我在上一篇涉及WCAG 2.1标准的文章中谈到了成功标准，Label in Name。简言之，WCAG标准是我们...

日期：2021-06-24 04:00:03 浏览：544

CSS Trickz：Netlify随需应变构建器的实验

默认情况下，WordPress站点有一个API。想看看这个网站的最新帖子吗，只是一组特定的数据…JSON格式？给你。Alex Riviere用它做了一个笑话站点。起初，当加载该API客户端时，该站点将fetch。很好，但是如果我们认真考虑一下，它对于访问站点的人来说是非常低效的（也就是说，比服务器呈现的HTML慢），对于API命中率也不是很高。所以，Alex用Netlify函数重新编写了它。然后Netlify函数将从API中fetch（在云中的节点中），并为预呈现的HTML提供服务。这可能更好一些，但正如亚...

日期：2021-06-24 04:00:04 浏览：592