I recently started working with css grid to create a layout for a website. I made a nice looking template for the home page. When I started developing the site and adding pages I quickly realized that I was going to need a grid for the content of each page. While this isn't a big deal for this project with only 3-4 pages, I can see this becoming hard to manage with larger websites that has different layouts for each page.
Tldr;
Using grid seems to force you into writing css for the content of each page rather than just using markup like in bootstrap. Can grid be used without having to write css for every page?
An example would be a website that has a layout for the home page content, one for a page with a form, one for a page to list articles, one for the articles themselves, etc. Already I have at least 5 different grids to maintain.
CSS Grid seems for me to be more maintainable and pure than Bootstrap table-like HTML structure (at least in most cases) because you are defining just elements in HTML and their layout in CSS.
Bootstrap is just predefined set of CSS classes, and you'd have to <link> it on every page. So what's the problem to create some common shared classes for CSS Grid layout if you have any repetitive parts and <link> everywhere you <link> like bootstrap.css?
Related
I have a Django website already complete with its CSS. One of its templates has a form. As anyone familiar with Django forms, the most common way to style it nicely is by using crispy form or Bootstrap. However, with my CSS already in place whenever I use either of the above solution, the website appearance gets messed up.
Things I have already done and attempted:
placed the Bootstrap stylesheet before my own stylesheet
override Bootstrap but realised it was so tedious when I only want to style a single form
Is there a way to use only the Form styling of Bootstrap so it doesn't mess up the rest of my stylesheet?
django widget tweaks seems to be the solution for my problem. It saves me a lot of time and it allows me to edit forms on template level (instead of editing at forms.py).
I try figuring out how to have a blank content in Drupal, no theme, no header...etc. Which approach should I use? Create a new theme? Create a new view? Install a suitable modules? What is the best way to solve this problem?
If I understand right you just want you content to be printed without any styles around it.
You could make a theme and strip the html.tpl.php, page.tpl.php and node.tpl.php files.
In addition i think you could make theme functions in you template file to remove all the html around fields.
This is easily achievable using pure CSS and Responsive Design principles. A nice concise definition of Responsive Design is:
"Responsive design is an approach to web page creation that makes use
of flexible layouts, flexible images and cascading style sheet media
queries. The goal of responsive design is to build web pages that
detect the visitor’s screen size and orientation and change the layout
accordingly." Source
This article is less than two months old and not only covers the principles, but gives examples and has links to tutorials.
So, the solution is: figure out when you want this bare display used, and create a CSS that will hide all of those elements using display:none;.
i want to manage all the design of my website(asp.net) through my css.
my client requirement is he should be able to change all design of website within 4-5 hrs.
is this possible.
is there any trick to do this?
Sure it is. ASP.NET doesn't but render html, css and javascript. What you need it to let it render the html you're after and hook in css for layouting.
ASP.NET also provides you with some great functionality: Themes and skins. These make changing css, images, ... a snap by either configuration or setting a certain premaid theme in code. I suggest you take a look at these videos for more information:
Customize my Site with Profiles and Themes?
Create User Selectable Themes for a Web Site
Use Skins with CSS for a Flexible and Maintainable ASP.NET Web Site
That's a very tall order indeed. By design does the client mean the color/theme or also the layout?
Basically is boils down to the following:
1. Generate semantic html only from you ASP.NET code. That is no in-line style and use meaning full css class names for html that needs to be styled
2. Break your css files into two. One for style and layout and another for color. If you're using images, they should be a part of your color css file
You can start here but also be clear about what your client means by "should be able to change the design within 4-5 hours".
Yes this possible if you have good knowledge of CSS i.e. 2 and 3. Have look at below links which can provide you and idea about layouts fully dependent on CSS
Yui library
Yui CSS tools
Many more ideas like CSS sprite can be used to achieve what you need
Our Dev team had been developing enterprise web page more than 2 years ago. We are curious to know what is the best way to write a contract for CSS usage. For example, if we have a COMP, how we agree on a contract so our developers and our designers agree and we don't have to go back.
Is there a tool that is available for this type of technical writing?
What is the threadhold of information put in the CSS versus on the HTML page? Some of our designers thing that some things should go directly into the HTML page. The general opinion is that everything that is style should go in a CSS and all else in the html.
Thanks for your input.
Well, if a webpage has very specific CSS just for itself, I guess there is an argument for defining the CSS in the page, otherwise I would always have the CSS in an external file.
Try to avoid or at least minimise in-lining the CSS as a style attribute on HTML elements though, that would be a PITA to manage.
Most pages will be template driven with standard content styles, and thus the CSS styles will be defined in external files.
One thing you might want to think about are the number of CSS files - some people suggest that you should minimise this to just one file site-wide or per-template (or area of the site) to minimise HTTP requests to the server and avoid delayed CSS loading and funny looking styling up until that point.
So this "contract for CSS usage" is actually just a coding standard for HTML pages?
I'm a purist, so for me HTML is for content and structure and CSS is for layout & styling. That's really what each of them were created for.
See CSS Zen Garden for a great example of this. Same HTML and hundreds of different layouts & designs.
What are the reasons your designers give for styling to be in the HTML?
Edit: The main goal here is consistency across the site, correct? The more you have abstracted away from each page, the fewer changes you'll have to make.
The idea that the HTML should merely encode information and not style is called semantic markup. It has several advantages that you already know about, like separation of concerns, and a few that you probably haven't thought about.
If you stick to the web standards and separate your style and content you will also end up with a page that is more accessible to those with disabilities.
If you need to have some things styled differently for a specific page, use separate CSS include file for that page only and then use a CSS class on the element you want to style.
If I have style that is for a one time, single use page, I will consider putting it in the header of that page, as my templating system allows for that.
However you should never use inline styles. Even if you do a page with a block in it for a one off. That way should you find that you "one time" item becomes a site wide style, you can simply move the CSS into the external CSS file and not edit the content.
I have an asp.net website with 5 items (home, products, news, about, contact) on the main horizontal navigation.
The site uses a master page which splits the page into a header, body and footer using
I want to be able to display a different header (which will include different colors and images) depending on which of the 5 navigation items is selected.
Can anyone tell me the best way to achieve this without bloating the page download?
I know my way around asp.net, html, css, javascript and vb but I am no expert.
I'd probably create a base CSS class that they'd all use, and then create 5 different themes in the app_themes directory (create one if you don't have one), one for each nav option; in there, you can override the base CSS with more specific options to change the background images / colors. If you're using Asp:Images (instead of background images with CSS), you can also change the source using a .theme file in each theme. This way, you'd only download the relevant files. You'll have to change the Page.Theme on Page_Init.
Are you trying to implement a menu?...
One possible strategy that I can think of is making a usercontrol for the header and then rendering the design in HTML based on the mode.
This way you will still be able to take advantage of a distinct header and will be able to have a flexible design.
Create conditional statements within the header depending on what page is selected.