I like the idea of flex-grid and was wondering if I'm using it correctly. I started a build using Foundation 6 / SASS and did #include foundation-flex-grid;
While building a basic page I noticed in my DevTools that certain items from the Kitchen sink are using styles on items that have their displays set to block and float on them.
Example: .title-bar
<div class="title-bar">
<div class="title-bar-left">
<button class="menu-icon" type="button"></button>
<span class="title-bar-title">Foundation</span>
</div>
<div class="title-bar-right">
<button class="menu-icon" type="button"></button>
</div>
</div>
The elements .title-bar-left and .title-bar-right have corresponding floats on them. I know that floats are unnecessary in flex-grid.
My question(s):
Should I keep building away using flex-grid or should I be doing
something extra to remove/replace those styles ahead of time?
It seems to me that the Kitchen Sink on the Foundation Site is
tailored for the normal grid, is it safe to use these elements in
flex-grid with little modification, or will it require lots of
rewriting of SASS/CSS?
For #2, 'Kitchen-sink' can pass true to turn on flex-grid like so:
#include foundation-everything(true);
They might have added this sometime in F6.1 or F6.2; official docs don't reflect this, but I put in a PR to.
For #1, might be more of a bug question than a best-usage issue, perhaps you should submit it?
Related
I created a lot of Thymeleaf templates during the last weeks, using both html5 and textual mode. In these templates I need to use a lot of th:each statements that iterate over the Context variables.
On these variables I ofter access their getters which in turn return other objects which I have to use getters on and so on.
In order to process the data returned I need to apply stuff like strings.defaultString(...)
All these combined statements make it difficult to read and comprehend what is going on. Many lines of my templates are so long that they can't be read without scrolling horizontally.
I searched for best practices but only found some that describe how to create "base templates" that give general advice on using Thymeleaf in combination with Spring or mention how to include common fragements.
Is there best practice how to format / wrap Thymeleaf statements without causing negative effects on created html or text (for example unwanted line breaks) ?
You can create variables using th:with so that you dont have to do frequent objA.propB.propC. So you assign th:with="propB=${objA.propB}"
Then creating reusable fragments with parameters in another good approach so any HTML which is getting repeated can be extracted into a fragment and the data required for that fragment can be passed as argument.
Update:
<div class="profile-user-info">
<th:block th:insert='~{::profileInfoRow("Name", ${user.name}) }' />
<th:block th:insert='~{::profileInfoRow("Age", ${user.age}) }' />
<th:block th:insert='~{::profileInfoRow("Location", ${user.location}) }' />
</div>
<div th:fragment="profileInfoRow(label, value)">
<div class="profile-info-row">
<div class="profile-info-name">[[${label}]]</div>
<div class="profile-info-value">[[${value}]]</div>
</div>
</div>
So above is a simple way you can create a reusable section of HTML and then use thymeleaf directives to include the reusable section by passing in the values for dynamic arguments.
I'm trying to use Foundation in a pre-existing Rails 5 project, but none of the Foundation styling is actually loading.
I've been through the following steps:
Add gem 'foundation-rails' to the Gemfile
Bundle
Run rails g foundation:install from the command line, overriding application.html.erb (then pasting back the deleted codes, without overwriting any of the new lines)
Rename application.css to application.scss, since (inside the original multiline comment) I'm running *= require foundation_and_overrides
Restart server, reload pages with some foundation-specific html added, eg, in application.html.erb:
<div class="row">
<div class="large-4 columns">
Testing columns
</div>
<div class="large-8 columns">
<%= yield %>
</div>
</div>
But the layout is unchanged (ie, splodged into the top-left of the page).
I've checked that the foundation_and_overrides.scss file is getting successfully loaded by adding some test styles in there which are getting picked up - but nothing is coming through that I haven't added myself.
What might I be doing wrong? (I realise I haven't included much code in here, because I'm not sure where the error might be, so I don't want to do a huge code dump).
You need to rename that file to application.scss and add #import "foundation_and_overrides";
and in your app/assets/javascripts/application.js add //= require foundation
$(document).foundation();
I was having the same problem and the thing that fixed it for me was overriding the conflicted files. If you run rails g foundation:install and it gives you the option to override the conflicting file (foundation_and_overrides.scss), accept it. This will load in the new file and once you restart your server, you should be good to go. Bare in mind however, this will override both foundation_and_overrides.scss and application.html.erb.
My problem stemmed from the fact that I was trying to use the same old files I was using with Rails 4, and for whatever reason, it broke when I upgraded to Rails 5.
So to summarize quickly:
Repeat steps 1-3 you listed above
Change application.css to application.scss
When prompted, override the conflicted files
Restart your server
In Play! Framework v. 1.x there was such thing like a 'tag' where was possible to reuse some thml/template code.
In Play! Framework v 2.x, for me it is not clear still how it's going to be used (here).
For example, I want to use tag to define a header for my site (in order not to repeat myself, but just include the header every in the pages where I need it).
Could someone explain me / show how to use tags, or whatever I should use to include the header or any block of html/template code.
You showed us a sample and you are asking for sample :)
That's easy, create a common view in views.tags package (remember to leave first line empty if you're not gonna to pass any params! also remember to add brackets after tags name):
/app/views/tags/header.scala.html
<div id="header">
<h1>Hello World!</h1>
</div>
So you can 'include' it in any other view just with:
<body>
#tags.header()
Some other content
</body>
I have seen in videos, that people get html template by typing "html:5" or something like that (btw, they're not using notepad++). Is this possible in notepad++? Thanks.
A little late, but what you're looking for is called Zen Coding.
The Zen Coding project hosted on Google has a plugin for NotePad++ that should do exactly what you need.
For example, entering something like:
html>head+body>div#content>ul.nav>li*5
Followed by Ctrl + E, expands into:
<html>
<head></head>
<body>
<div id="content">
<ul class="nav">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
Now it's called Emmet plugin in Notepad++
Just type html:5 and press control + alt + enter
and you will get the following markup:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Option 1
Install and use the Notepad++ Snippets plugin.
You can input whatever code snippet you want and give each snippet a name.
When you double-click on your snippet name, the snippet text just gets copied to your editor (before or after your cursor, based on how you set it)
Option 2
If you don't have admin access or behind a firewall, there is a Macro hack.
If your template is a bit short, then you can use the built-in MACRO and manually key in the template text (a one-time operation per template). You can then "Save Current Recorded Macro" and replay it for every new file that you create. Emmet works only for html, but this technique works for any kind of text(as long as you can manually key-in the text)
Note: You cannot copy-paste (Ctrl-C/Ctrl-V) text while recording as it will copy-paste current clipboard's contents which is undesirable!
For those who like step-by-step instructions:
Open Notepad++. Select Macro -> Start Recording.
Key-in your text (every key-stroke is now being recorded, so minimize backspaces and deletes)
Click : Macro -> Stop Recording
Click : Save Current Recorded Macro and give it a name (say "bash_header" or "html_structure")
Now click on your Macro name to repeatedly apply the template text to your notepad++ file.
Using NP++v6.1.4, I got this to work pretty quickly doing this:
Choose Plugins -> Plugin manager -> Show plugin manager
Wait for all the plugins to be shown, and check the box Emmet
It may alert you that Python will also be installed
Once it completes its installation, allow NP++ to be restarted, and now you can use the many Emmet features :)
Now, just type ! and hit ctrl-alt-enter.
You can use QuickText to create your own templates. It seems that QuickText isn't supported anymore, but it still works, the documentation just has some wrong content.
I use a program called Ditto, it's like a clipboard of all your copy-paste material. I have my prewritten syntax in there pinned. It helps.
In actuality, it is called marking up your code. Although "zen coding" is becoming well known in place of markup, it is the original term for building a structure for your code; which makes it easier for others to read.
As far as the template thing goes for Notepad++, I'm afraid that it is difficult to find public, custom made templates. Although the program does come with custom made templates, such as the Hello Kitty template, your best bet would be to ask people in online programming communities.
My personal favorite is DreamInCode, where they offer help and support, as well as pretty informative tutorials on numerous different computer programming and web development languages. I'm confident that if you can't find one you like that has been posted there, if any, someone would be glad to help you.
I'm trying to monitor a small section of a web page for changes using the the Google Page Monitor extension --
https://chrome.google.com/extensions/detail/pemhgklkefakciniebenbfclihhmmfcd
Under advanced settings I can use either Regex or Selectors to accomplish this, but need help with this. In the following html, I'd like to monitor the following for changes in either the URL in line 4 or the text in line 5. Any pointers gratefully accepted.
<div id="rtBtmBox"><div id="sectHead" style="margin-bottom:5px;">
<h3>SLJ's Pick of the Day</h3></div>
<p align="center">From the March issue</p>
<p align="center"><a target="_blank" href="http://www.schoollibraryjournal.com/article/CA6723937.html">
<font color="#0000ff"><strong><em>The Summer I Turned Pretty</em></strong><br/>
Awesome, to find a question about my own extension on the front page of StackOverflow.
Anyway, it's easier using a selector. This should do the job: #rtBtmBox p:nth-child(3). However, if that paragraph has more contents, you might need something different (post or link the whole page if so).
A regex that will probably work is: <div id="rtBtmBox">[^]*?<a target="_blank" href="([^"]+)"